animate.css/style.css

215 lines
3.4 KiB
CSS
Raw Normal View History

/*-----------------------------------*\
$RESET
\*-----------------------------------*/
*, :before, :after {
margin: 0;
padding: 0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input, select, button, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font: inherit;
color: inherit;
}
/*-----------------------------------*\
$OBJECTS
\*-----------------------------------*/
.butt, .input {
padding: .75rem;
2014-01-21 06:01:21 +01:00
margin: .375rem;
background-color: transparent;
border-radius: 4px;
}
.butt:focus, .input:focus {
outline: none;
}
.butt {
border: 2px solid #f35626;
line-height: 1.375;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 700;
color: #f35626;
cursor: pointer;
-webkit-animation: hue 60s infinite linear;
}
.butt--primary {
background-color: #f35626;
color: #fff;
}
.input {
border: 1px solid #c0c8c9;
border-radius: 4px;
}
.input--dropdown {
background-image: url("images/ddown.png");
background-image: url("images/ddown.svg?3"), none;
background-repeat: no-repeat;
background-size: 1.5rem 1rem;
background-position: right center;
}
/*-----------------------------------*\
$TYPOGRAPHY
\*-----------------------------------*/
h1, .alpha {
margin-bottom: 1.5rem;
font-size: 3rem;
font-weight: 100;
line-height: 1;
letter-spacing: -.05em;
}
h2, .beta {
margin-bottom: .75rem;
font-weight: 400;
font-size: 1.5rem;
line-height: 1;
}
@media (min-width: 650px) {
.mega {
font-size: 6rem;
line-height: 1;
}
}
.subhead, .meta {
color: #7b8993;
}
.promo {
text-align: center;
}
p, hr {
margin-bottom: 1.5rem;
}
hr {
border: none;
margin-top: -1px;
height: 1px;
background-color: #c0c8c9;
background-image: -webkit-linear-gradient(0deg, #fff, #c0c8c9, #fff);
}
a {
color: inherit;
text-decoration: underline;
-webkit-animation: hue 60s infinite linear;
}
a:hover {
color: #f35626;
}
/*-----------------------------------*\
$LAYOUT
\*-----------------------------------*/
.wrap {
max-width: 38rem;
margin: 0 auto;
}
.island {
padding: 1.5rem;
}
.isle {
padding: .75rem;
}
.spit {
padding: .375rem;
}
/*-----------------------------------*\
$BASE
\*-----------------------------------*/
html {
font: 100%/1.5 "Roboto", Verdana, sans-serif;
color: #3d464d;
background-color: #fff;
-webkit-font-smoothing: antialiased;
width: 100%;
overflow: hidden-x;
/* Centering in The Unknown */
text-align: center;
}
@media (min-width: 650px) {
html {
height: 100%;
}
html:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
body {
display: inline-block;
vertical-align: middle;
max-width: 38rem;
}
}
/*-----------------------------------*\
$HEADER
\*-----------------------------------*/
.site__header {
}
.site__title {
color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
/*-----------------------------------*\
$ANIMATIONS
\*-----------------------------------*/
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}