@import "colors"; @import "fonts"; @import "newyear"; * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; min-height: 100vh; background-color: #000; background-image: url("/img/snowfall.gif"); font-size: 14px; /*background-size: 25%;*/ } ul, ol, li, p, sup, sub { color: $white; } ol, ul, li, a, p { line-height: 1.4; font-family: $font_mono; } h2, h3, h4, h5, h6, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { font-family: $font_serif; font-weight: 500; } h2, h3, h4, h5, h6 { color: $red1; } a, a:visited { color: $cyan1; } a:hover, a:hover:visited { color: $cyan; } .new-year, h1 { color: $red; font-family: $font_serif; font-variant-caps: small-caps; font-weight: 500; font-size: 2.5em; } h2 { font-size: 1.8em; } h3 { font-size: 1.5em; } hr { border-style: solid; border-color: $white; border-width: 1px 0 0 0; margin: 2em 0; } pre { padding: 1em 0; overflow-x: auto; font-family: $font_mono; color: $gray; background-color: $bg0; } code { color: $gray; font-family: $font_mono; } figcaption { color: $gray; font-family: $font_mono; text-align: center; } video { max-width: 90%; } span.extra-link { color: $gray; } h2 > span.extra-link { font-size: 0.7em; } span.extra-link > a ~ a::before { display: inline-block; color: $white; content: "|"; margin: 0 0.2em; text-decoration: none; } span.icon { display: inline-block; height: 1em; text-decoration: none; } span.icon > img { height: 1em; width: 1em; } .publish-date { color: $gray; font-family: $font_mono; font-weight: normal; font-style: italic; } span.publish-date { margin-left: 1em; display: inline-block; font-size: 0.8em; } .main-container { display: grid; grid-template-columns: minmax(0, 5fr) 2fr; grid-template-rows: min-content auto; max-width: 1180px; margin: 1em auto; min-height: 90vh; height: auto; background-color: $bg1; padding: 1px; border: 2px solid $gray1; } .landing-page-container { grid-column-start: 1; grid-column-end: 3; padding: 2em 2em; } .landing-page-container > h1 { text-align: center; font-size: 3em; } .landing-page-container > .links-container { padding: 0.5em; } .landing-page-container > .links-container > a { display: inline-block; font-size: 1.5em; margin: auto 1em; } .landing-page-container > .links-container > a > span.icon { font-size: 1.5em; } .header-container { padding: 0 2em; } .landing-page-container, .content-container, .sidebar-container { border: 2px solid $gray; } .new-year { text-align: center; color: $green; font-size: 2em; } .nav-container { text-align: center; } .nav-container > a ~ a::before { display: inline-block; color: $white; content: " ยท "; margin: 0 0.4em; text-decoration: none; } .content-container { min-height: 90vh; } .album-container { padding: 1em 2em; } .album-container a { text-decoration: none; } .album-container a img { max-height: 180px; } a.see-more { display: inline-block; text-align: center; font-weight: bold; } .sidebar-container { grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; } .sidebar-container span.icon { font-size: 2em; margin: auto 0.5em; } .sticky-wrapper { padding: 1em 2em; position: sticky; top: 1em; max-height: 100vh; } .links-container { text-align: center; } .links-container a { text-decoration: none; } .post-container { padding: 1em 2em; overflow: auto; } .post-container.partial img { float: left; max-width: 50%; padding-right: 1em; } .post-container.full img { display: block; margin: 0 auto; max-width: 100%; max-height: 40vh; } .post-container img { max-width: 100%; } .post-container.full img:nth-of-type(1) { max-height: 60vh; } .footnote-definition:first-of-type { border-top: 1px solid $gray; padding-top: 1em; } .footnote-definition p { display: inline-block; } .paginator { padding: 2em; text-align: center; } .paginator a { display: inline-block; padding: 0.5em; background-color: $cyan1; color: $bg0; text-decoration: none; } .paginator a:hover { background-color: $cyan; color: $bg0; } .cryptoqr { width: 100%; max-width: 240px; } @media (max-width: 768px){ .landing-page-container { font-size: 1em; } .header-container, .content-container, .sidebar-container { grid-column-start: 1; grid-column-end: 3; } .sidebar-container { grid-row-start: auto; grid-row-end: auto; } } @media print { html, body, .main-container { background-image: none; background-color: #fff; } h1, h2, h3, h4, h5, h6, ul, ol, li, p, a[href], sup, sub { color: #000; font-family: $font_serif; } a[href] { text-decoration: none; } .main-container, .header-container, .content-container { border: none; } .sidebar-container { display: none; } .header-container, .content-container { grid-column-start: 1; grid-column-end: 3; } .publish-date, pre, figcaption, code { color: #777; } }