diff options
Diffstat (limited to 'static/css/style.css')
| -rw-r--r-- | static/css/style.css | 364 |
1 files changed, 364 insertions, 0 deletions
diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..29cede2 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,364 @@ +html{ + font-size: 80%; +} + +/* Typography*/ +body{ + font-family: "LatoLatinWeb", Helvetica, Arial, sans-serif; + line-height: 1.4; + color: #222; + background-color: #fff; + font-size: 1.5em; +} +p { + text-align: justify; +} +q, blockquote{ + font-style: italic; +} +h1, h2, h3, h4, h5, h6 { + text-decoration: none; + margin-top: 2ex; + margin-bottom: 0; + font-weight: 300; } +h1 { + font-size: 5.5rem; + line-height: 1.2; + text-align: center; + margin-bottom: 4rem; + margin-top: 0; + font-family: "LatoLatinLightWeb", Helvetica, Arial, sans-serif; +} +h1,h2,h3 { letter-spacing: -.1rem; } +h4 { letter-spacing: -.08rem;} +h5 { letter-spacing: -.05rem;} +h6 { letter-spacing: 0} + +h2 { font-size: 2.8rem; } +h3 { font-size: 2.3rem; } +h4 { font-size: 2.1rem; } +h5 { font-size: 1.8rem; } +h6 { font-size: 1.5rem; } + +@media (min-width: 550px) { + h1 { font-size: 8.0rem; } + h2 { font-size: 3.2rem; } + h3 { font-size: 2.7rem; } + h4 { font-size: 2.2rem; } + h5 { font-size: 2.0rem; } + h6 { font-size: 1.7rem; } +} +a{ + color: #1EAEDB; +} +hr{ + border: 0 +} +pre > code { + overflow: auto; + border: none; + border-radius: 0; +} + + + +/* Utils */ +.text-center{ + text-align: center; +} +.text-right{ + text-align: right; +} +.text-justify{ + text-align: justify; +} +.text-nodeco{ + text-decoration: none; +} +.text-nodeco-black{ + text-decoration: none; + color: #222; +} +.only-reader{ + font-size: 0; +} + + +/* Sections*/ +section{ + padding-bottom: 2rem; + margin-bottom: 0; +} + + +/* Images */ +img { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 3ex; + margin-bottom: 3ex; +} +img.round{ + border-radius: 50%; +} + + +/* Footer */ +.bar-bottom { + border-top: 1px solid #eee; + position: relative; + width: 100%; + margin: 0 auto; + margin-top: 10ex; + padding: 1rem 0; + box-sizing: border-box; + + font-size: 70%; +} + + +/* Container */ +.container { + max-width: 900px; + margin: auto; + width: 80%; +} +@media(max-width: 550px){ + .container{ + padding-left: 20px; + padding-right: 20px; + } +} + + +/* Navbar */ +.mainheader{ + top: 0; + display: block; + width: 100%; + background: #fff; + z-index: 99; + border-bottom: 1px solid #eee; + margin-bottom: 6.5rem; +} +@media(max-width: 550px){ + .mainheader{ + margin-bottom: 4rem; + } +} +.navbar { + width: 100%; + } +.navbar-link, +.navbar-control{ + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 600; + letter-spacing: .1rem; + text-decoration: none; + line-height: 6rem; + display: inline-block; + color: #222; + } +.navbar-right, +.navbar-left{ + display: inline; +} +.navbar-separator{ + margin: 0 auto; +} +/* Large devices everything inline and the header floating */ +@media (min-width: 801px) { + .mainheader{position: sticky;} + .link-right { + margin-left: 15px; + margin-right: 0px; + } + .link-left{ + margin-right: 25px; + } + .nav-right{ + text-align: right; + } + .navbar-right{ + float: right; + } + .navbar-separator{ + display: none; + } + +} +/* Smaller devices leave the header at the top of the page and make it more + * vertical */ +@media (max-width: 800px){ + /* Main navbar toggle */ + /* TODO: BURGER? */ + .navbar-right, + .navbar-left{ + width: 100%; + min-width: 100%; + display: inline-flex; + flex: 1; + justify-content: space-around; + flex-flow: row; + } + .navbar-left{ + flex-flow: row wrap; + } + + .navbar-left .navbar-link{ + margin-left: 3ex; + margin-right: 3ex; + } + + .navbar-right .navbar-link{ + margin: auto; + line-height: 5rem; + } +} + + +/* Title page */ +.title-image { + width: 90%; +} +.title-image path{ + fill: #222; +} +@media (min-width: 550px){ + .title-image { width: 60%; } +} + + +/* Cards: Image | text */ +.card-picture *{ + height: auto; + width: 100%; +} +.card-picture{ + margin-left: auto; + margin-right: auto; + margin-top: 2ex; + margin-bottom: 2ex; + height: auto; + width: 150px; + min-width: 150px; +} +.card-picture-right{ + order 2; +} +.card-data{ + order: 1; +} +@media (min-width: 800px) { /*more than a tablet*/ + .card{ + margin-top: 1ex; + margin-bottom: 1ex; + + width: 100%; + min-width: 100%; + display: inline-flex; + flex: 1; + -webkit-flex: 1; /* Safari 6.1+ */ + -ms-flex: 1; /* IE 10 */ + justify-content: space-around; + align-items: center; + } + + .card-picture{ + margin: 2ex; + margin-right: 4ex; + order: 0; + } + .card-picture-right{ + margin: 2ex; + margin-left: 4ex; + order: 2; + } + + .card-data{ + flex-grow: 2; + flex-shrink: 2; + order: 1; + } +} + +/* Anchors */ +a.anchor{ + visibility: hidden; + text-decoration: none; + font-size: 0.8em; +} +h1:hover > a.anchor, +h2:hover > a.anchor, +h3:hover > a.anchor, +h4:hover > a.anchor, +h5:hover > a.anchor, +h6:hover > a.anchor{ + visibility: visible; +} + +:root{ + --bg-color: #FFF; + --tx-color: #222; + --link-color: #1EAEDB; + --border-color:#EEE; +} +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #2F2F2F; + --tx-color: #FFF; + --link-color: #1EAEDB; + --border-color:#4A4A4A; + } +} + +/* Overwrite colors to vars if supported */ +body{ + color: var(--tx-color); + background-color: var(--bg-color); +} +.text-nodeco-black, .navbar-link{ + color: var(--tx-color); +} +.title-image path{ + fill: var(--tx-color); +} +.mainheader { + background-color: var(--bg-color); + border-color: var(--border-color); +} +a { + color: var(--link-color); +} +.bar-bottom { + border-color: var(--border-color); +} + + + +.flex-cols{ + width: 90%; +} +.col{ + max-width: 100%; +} +@media (min-width: 550px) { /*more than a phone*/ + .flex-cols{ + display: inline-flex; + flex: 1; + align-items: center; + justify-content: space-around; + width: 100%; + min-width: 100%; + } + .col{ + flex-grow: 1; + flex-shrink: 1; + flex-basis: 100px; + margin-left: 5%; + margin-right: 5%; + } + +} |