87 lines
2.5 KiB
CSS
87 lines
2.5 KiB
CSS
/* =============
|
|
| Loading fonts
|
|
|============ */
|
|
|
|
@font-face {
|
|
font-family: quicksand;
|
|
src: local('Quicksand-Regular'), local('Quicksand Regular'),
|
|
url(./Quicksand-Regular.ttf) format('truetype');
|
|
}
|
|
|
|
/* =============
|
|
| General
|
|
|============ */
|
|
|
|
* { z-index: 1; }
|
|
html { margin 0; padding: 0; }
|
|
body { margin: 0; background: #FFF; font-size: 1.2em; font-family: quicksand; line-height: 1.5em; text-align: justify; }
|
|
|
|
a { text-decoration: inherit; color: inherit; }
|
|
|
|
h1, h2, h3, h4 { padding: .5em 0; color: #646464; }
|
|
h2 { color: #F00; }
|
|
|
|
body > * { padding: 2em 5vw; }
|
|
|
|
a.buttonLike { padding: .8em 1.0em; background: #F00; color: #FFF;
|
|
border: #D6D6D6; border-radius: .3em;
|
|
box-shadow: 2px 2px 4px #D6D6D6, -2px -2px 4px #D6D6D6;
|
|
transition: background .4s, color .4s; }
|
|
a.buttonLike:hover { background: #C11; color: #FFF; }
|
|
|
|
.centerVertically { vertical-align: middle !important; }
|
|
|
|
div.placeHolder { display: none; }
|
|
|
|
/* =============
|
|
| Structure elements
|
|
|============ */
|
|
|
|
/* =======
|
|
| Navigation
|
|
|====== */
|
|
|
|
body > nav { position: sticky; top: 0; left: 0;
|
|
display: flex; padding-top: 0; padding-bottom: 0;
|
|
background: #333; color: #EEE; border-bottom: #D6D6D6; box-shadow: 2px 2px 4px #333; }
|
|
body > nav > * { display: inline-block; flex: 1; padding: .6em .5em; vertical-align: middle; }
|
|
|
|
nav > a[href="#bottom"] { text-align: right; padding: .4em .5em; }
|
|
nav > a[href="#bottom"]:before { content: " \002193 "; display: inline-block; padding: .2em .5em;
|
|
background: #EEE; color: #333; border-radius: 100%;
|
|
transition: background .4s, color .4s; }
|
|
nav > a[href="#bottom"]:hover:before { background: #F00; color: #FFF; }
|
|
|
|
/* =======
|
|
| Sections
|
|
|====== */
|
|
|
|
@media screen and (min-width: 70em) {
|
|
|
|
section > div > div { display: inline-block; width: 45%; vertical-align: top; }
|
|
section > div > div:first-of-type { padding-right: 5%; }
|
|
section > div > div:only-child { display: block; width: initial; padding-right: initial; }
|
|
|
|
}
|
|
section > div > div img { display: block; width: 100%; }
|
|
|
|
#introduction > div > div { display: block; width: initial; }
|
|
|
|
/* =======
|
|
| Defined lists (as <ul>)
|
|
|====== */
|
|
|
|
ul.dl { margin: 0; padding: 0; }
|
|
ul.dl > li { margin: 0; padding: 0; list-style: none; }
|
|
ul.dl > li:before { content: attr(data-title); }
|
|
|
|
/* =============
|
|
| Animations
|
|
|============ */
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: .4; }
|
|
to { opacity: 1; }
|
|
}
|
|
|