// @import "home"; html { min-height: 100vh; margin: 0; } ::selection, ::-moz-selection { background-color: $heading-color; color: $background-color; } body { max-width: 980px; margin: auto; width: 100%; height: 1px; min-height: 100vh; font-family: $sansfont; font-weight: normal; background-color: $background-color; color: $text-color; } h1, h2, h3, h4, h5, h6 { color: $heading-color; } header { margin: auto 12px; #header { border-bottom: 2px solid $link-color; box-sizing: border-box; padding: 20px; margin-bottom: 12px; #title { font-size: 2.5em; color: $heading-color; &:hover { text-decoration: none; } } } } footer { margin: auto 12px; margin-top: 24px; margin-bottom: 40px; text-align: center; } .flex-wrapper { display: flex; align-items: stretch; } @media screen and (max-width: 672px) { .flex-wrapper { flex-direction: column; .container { padding: 5px 20px; } } .side-nav { .side-nav-content { width: 100%; padding: 18px 0; border-bottom: 1px solid $shadow-color; box-shadow: 0 10px 20px -10px $shadow-color; .home-link { display: flex; justify-content: space-evenly; } h1 { display: inline; } .portrait { max-height: 80px; } .bio { display: none; } } } } @media screen and (min-width: 672px) { .flex-wrapper { flex-direction: row; .container { padding: 32px 40px 5px 40px; } } .side-nav { position: sticky; height: 100%; left: 0; top: 0; // Capital Min to avoid invoking SCSS min max-width: Min(30%, 30em); .side-nav-content { padding-top: 32px; padding-right: 32px; padding-left: 32px; border-right: 1px solid $shadow-color; box-shadow: 10px 0 20px -10px $shadow-color; .portrait { max-width: 100%; } h1.title { text-align: center; } } } } .side-nav { .side-nav-content { .home-link { text-decoration: none; } .portrait { border-radius: 100%; } .bio { font-size: 0.85rem; ul { padding-left: 12px; list-style-type: "\25B8\00A0"; } } } } small { color: $small-text-color; } a { color: $link-color; text-decoration: none; &:hover { text-decoration: underline; } } .permalink-container { position: relative; vertical-align: top; .permalink { color: $link-color; font-size: 0.65em; position: absolute; left: -25px; } } blockquote { margin-inline: 14px 14px; color: $small-text-color; border-left: 4px solid $small-text-color; padding-left: 12px; font-size: 0.9rem; } .postlisting-row td { padding-bottom: 10px; line-height: 1.0; .title { font-size: 1.1em; } &.info { color: $smaller-text-color; font-size: 0.75em; white-space: nowrap; } .summary { padding-top: 4px; font-size: 0.64em; color: $smaller-text-color; p { display: inline; } } } #content { font-size: 1.05em; line-height: 1.5em; img { max-width: 100%; } } code { // font-size: 1.2em; font-family: $monofont; font-size: 0.9em; box-sizing: border-box; padding: 1px 5px; background-color: $faded-background-color; color: $code-color; } a code { color: $link-color; } pre > code { color: $text-color; display: block; padding: 5px; overflow-x: auto; font-family: $monofont; font-size: 0.9em; } details { font-size: 0.95rem; summary { cursor: pointer; } } table.table { border: 1px solid $faded; border-collapse: collapse; thead { background-color: $smaller-text-color; color: $background-color; } tbody td, thead th { border: 1px solid $faded; padding: 5px; } } .toc { background-color: lighten($background-color, 10%); padding: 20px; ul { margin-block: 0; margin-bottom: 0; } } .post-title { font-size: 2rem; font-weight: 500; margin-bottom: 0; } .tags { display: flex; gap: 0.75rem; margin-bottom: 6px; .tag { font-size: 0.75rem; background-color: $tag-color; padding: 2px 7px; .text { margin-left: 2px; text-decoration: none; } &:hover { text-decoration: none; } &::before { content: "\01F3F7"; } } } .post-container { display: flex; flex-direction: column; .toc-drawer { display: block; summary { font-weight: bold; } } .toc-list { display: none; } /* @media screen and (max-width: 520px) { flex-direction: column; .toc-drawer { display: block; } .toc-list { display: none; } } @media screen and (min-width: 520px) { flex-direction: row; align-items: flex-start; gap: 12px; .toc-drawer { display: none; } .toc-list { top: 0; display: block; position: sticky; min-width: 160px; } } */ .post-content { min-width: 1px; } .toc-draw #TableOfContents, .toc-list #TableOfContents { ul { list-style-type: "\25B8\00A0"; padding-left: 1rem; li { margin-bottom: 0.5rem; } } li ul { margin-top: 0.5rem; } } } .division .post-content, .post-content { .heading { font-weight: 500; a { color: $heading-color; } } > p { line-height: 1.5; } > p > img { display: block; margin: auto; } .footnotes { font-size: .9em; line-height: 1.2; } }