article, aside, details, footer, header, hgroup, main, nav, section, summary {
display: block;
}
html {
font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 1em; line-height: 1.8; text-rendering: optimizelegibility; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden;
}
body {
color: rgba(0, 0, 0, 0.85); margin: 0; font-family: 'EB Garamond', serif; font-smooth: always; -webkit-font-smoothing: subpixel-antialiased; text-rendering: optimizelegibility; font-display: swap; font-display: optional; -moz-osx-font-smoothing: grayscale; -webkit-osx-font-smoothing: antialiased; background: aliceblue;
}
/* Anchors */
a {
color: #1177FF; text-decoration: none; text-rendering: optimizelegibility; outline: 0; &:focus, &:active, &:hover { outline: 0; }
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
margin: 0; font-family: monospace;
}
h1 {
font-size: 280%;
}
h2 {
font-size: 200%;
}
h3 {
font-size: 150%;
}
h4 {
font-size: 125%;
}
h5 {
font-size: 110%;
}
h6 {
font-size: 100%;
}
b, strong {
font-weight: bold;
}
hr {
-moz-box-sizing: content-box; box-sizing: content-box; display: block; height: 1px; border: 0; border-top: 2px solid #1177FF; margin: 1em 0; padding: 0;
}
p {
margin: 0 0 1em 0;
}
menu {
list-style-image: none; list-style: none;
}
nav ul, .posts {
list-style: none; list-style-image: none;
}
img {
border: 0; -ms-interpolation-mode: bicubic;
}
/* Code formatting */
pre, code {
border: 1px solid paleturquoise; border-radius: 3px; background-color: aliceblue;
}
code {
padding: 1px 5px;
}
pre {
padding: 8px 12px; overflow-x: auto; >code { border: 0; padding-right: 0; padding-left: 0; }
}
blockquote {
color: #333; border-left: 10px solid #1177FF; letter-spacing: -1px; padding: 1em; margin: 2em auto; font-style: italic; background: #fffafa; > :last-child { margin-bottom: 0.5em; }
}
/*– Coloring pseudos text selection/inactive state. Sooth! :D –*/
-
{
box-sizing: border-box; &:after { box-sizing: border-box; } &:before { box-sizing: border-box; }
}
::-moz-selection {
background: #a7d7ff; color: #000; text-shadow: none;
}
::selection {
background: #a7d7ff; color: #000; text-shadow: none; &:window-inactive { background: #eaeaea; color: #000; }
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 1000px #FBFBFB inset;
}
::-webkit-input-placeholder {
color: #444 !important; font-size: 11px;
}
:-moz-placeholder {
color: #444 !important; font-size: 13px;
}
::-moz-placeholder {
color: #444 !important; font-size: 13px;
}
:-ms-input-placeholder {
color: #444 !important; font-size: 13px;
}
table {
border-collapse: collapse; border-spacing: 0;
}
td, th {
padding: 1vw; vertical-align: top;
}
/* Element Positioning */
.container {
margin: 46px 0 0 0; background: white;
}
.wrapper {
margin: 0 auto;
}
.left {
float: left; left: 0;
}
.right {
float: right; right: 0;
}
.center {
text-align: center; margin: 0 auto;
}
.centerize {
margin: 0 auto;
}
.fixed {
position: fixed; will-change: transform; transform: translateZ(0);
}
.top {
top: 0;
}
.bottom {
bottom: 0px;
}
.absolute-center {
margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.flex {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
.fold {
min-height: calc(90vh - 45px); max-width: 100vw; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
/* – Push aside, out & away —*/
.side-gap {
margin-right: .5em; margin-left: .5em;
}
.top-gap {
margin-top: .5em;
}
.double-top-gap {
margin-top: 1em;
}
.bottom-gap {
margin-bottom: 1em;
}
.double-bottom-gap {
margin-bottom: 2em;
}
.pad {
padding: 0.5em 1em;
}
.pad-vertically {
padding: 1em 0;
}
.pad-horizontally {
padding: 0 1em;
}
/* – Text –*/
.justify {
text-align: justify;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.camelcase {
text-transform: capitalize;
}
.italics {
font-style: italic;
}
menu.horizontal-list li, ul.horizontal-list li {
float: left;
}
.will-change {
will-change: transform; transform: translate3d(0, 0, 0);
}
.unpointable {
pointer-events: none;
}
.pointable {
pointer-events: auto;
}
/*** Table Styles **/
table {
background: white; border-radius: 3px; border-collapse: collapse; height: 32vw; margin: 2vw auto; max-width: 100%; padding: 0.5vw; width: 100%; box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
}
th {
color: #D5DDE5; background: #1b1e24; border-bottom: 4px solid #9ea7af; border-right: 1px solid #343a45; font-weight: 100; padding: 2.4vw; text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; &:first-child { border-top-left-radius: 3px; } &:last-child { border-top-right-radius: 3px; border-right: none; }
}
tr {
border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; font-weight: normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); &:first-child { border-top: none; } &:last-child { border-bottom: none; } &:nth-child(odd) td { background: #EBEBEB; } &:last-child td { &:first-child { border-bottom-left-radius: 3px; } &:last-child { border-bottom-right-radius: 3px; } }
}
td {
background: #FFFFFF; padding: 1.5vw; text-align: left; vertical-align: middle; font-weight: 300; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px solid #C1C3D1; &:last-child { border-right: 0px; }
}
th, td {
&.text-left { text-align: left; } &.text-center { text-align: center; } &.text-right { text-align: right; }
}
.ir {
background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; &:before { content: ""; display: block; width: 0; height: 150%; }
}
.hidden {
display: none !important; visibility: hidden;
}
.visuallyhidden {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; &.focusable { &:active, &:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } }
}
.invisible {
visibility: hidden;
}
.clearfix {
&:before { content: " "; display: table; } &:after { content: " "; display: table; clear: both; } *zoom: 1;
}
@media (orientation: portrait) {
body { .hide-on-mobiles { display: none; } .display-on-mobiles { display: inline-block; } .divide-in-half { width: 90vw; } .one-half { width: 100%; } .one-third { width: 100%; } .two-third { width: 100%; } .shrink { width: 95%; } .align { margin: 0 auto; text-align: center; } }
}
@media (orientation: landscape) {
body { .hide-on-mobiles { display: marker; } .display-on-mobiles { display: none; } .divide-in-half { width: 50vw; } .one-half { width: 50%; } .one-third { width: 33.33333%; } .two-third { width: 66.66666%; } .shrink { width: 90%; } .align { margin: 0 0; } .container { width: calc(100vw - 224px); margin-left: 208px; } }
}
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
@media print {
* { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a { text-decoration: underline; &:visited { text-decoration: underline; } &[href]:after { content: " (" attr(href) ")"; } } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } a { &[href^="javascript:"]:after, &[href^="#"]:after { content: ""; } } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr { page-break-inside: avoid; } img { page-break-inside: avoid; max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; }
}