mist.js
Version:
Motion Design in Modular CSS
102 lines (85 loc) • 10.6 kB
CSS
body {
color: #444;
font-family: 'Marcellus', serif;
font-size: 16px;
width: 100%;
}
footer, h1 {
font-family: 'Open Sans Condensed', sans-serif;
}
footer, header {
box-shadow: 0 1px 2px #eee;
overflow: hidden;
position: relative;
text-align: center;
}
em {
color: #aaa;
}
header figure {
background: url(icon.svg) no-repeat center;
background-size: contain;
height: 224px;
}
main {
overflow: hidden;
}
mark {
background: repeating-linear-gradient(40deg, #666 0, #666 .5em, #777 .5em, #777 1em);
border-radius: 3px;
color: #fff;
padding: 0 .618em;
white-space: nowrap;
}
p {
color: #666;
line-height: 1.618em;
}
pre {
color: #006ab6;
margin: 0;
overflow-x: auto;
}
.container {
margin: 1.618em auto;
max-width: 1024px;
}
header .container {
max-width: 448px;
}
.demos {
align-items: center;
display: flex;
height: 16em;
justify-content: center;
position: relative;
width: 100%;
}
.demos>div {
box-shadow: 0 1px 2px #ccc;
cursor: pointer;
height: 4em;
margin: 1em;
position: relative;
width: 4em;
}
.noise {
background: #fefefe url(data:image/png;base64,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);
}
.screens {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: -1;
}
.screens>div {
height: 1em;
position: absolute;
width: 1em;
}
@media (max-width: 40.0rem) {
.column-50 {
max-width: 100% ;
}
}