diff --git a/sass/style.sass b/sass/style.sass index a923c52..e2334ac 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -1,16 +1,20 @@ -@import reasonable-colors +@import "reasonable-colors" @mixin padding-horiz($amount) // this was probably unnecessary lmao padding-left: $amount padding-right: $amount -@font-face - font-family: TT2020 - src: url("TT2020StyleE-Regular.woff2") +@font-face + font-family: "CMU Typewriter Text Roman" + src: local("CMU Typewriter Text Roman"), url("cmuntt-webfont.woff") format("woff") -@import url("iosevka.css") +@font-face + font-family: "CMU Serif Roman" + src: local("CMU Serif Roman"), url("cmunrm-webfont.woff") format("woff") -@import url("iosevka-etoile.css") +@font-face + font-family: "CMU Serif Bold" + src: url("cmunbx-webfont.woff") body display: grid @@ -28,8 +32,8 @@ body background-color: #e9e9dc - font-family: "Iosevka Etoile Web", sans-serif - font-size: 13pt + font-family: "CMU Serif Bold", serif + font-size: 14pt div.debug padding-left: 2ch @@ -65,7 +69,7 @@ body max-width: 100% object-fit: cover - > div + > *:nth-child(2) // todo: clean this up maybe display: flex flex-flow: row nowrap justify-content: space-between @@ -78,6 +82,20 @@ body a white-space: nowrap + @for $i from 2 through 5 + > .gallery#{$i} + display: grid + grid-template-columns: repeat(#{$i}, 1fr) + gap: 1rem + width: 100% + + img + aspect-ratio: 1 / 1 + object-fit: cover + height: 100% + min-width: 100% + + article @include padding-horiz(2rem) margin: 1rem 0 @@ -86,13 +104,13 @@ body background-color: #f9f9e8 background-image: url("/paper53.png"), url("/paper89.png"), url("/paper59.png"), url("/paper67.png") background-attachment: local - max-width: 60rem + max-width: 80rem box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.3) - font-family: "TT2020", serif + font-family: "CMU Typewriter Text Roman", serif font-size: 16pt - pre + > pre padding: 1rem font-size: 13pt max-height: 40rem @@ -125,16 +143,39 @@ body font-weight: bold code - font-family: "Iosevka Web", monospace - font-stretch: extended - font-feature-settings: "ss05" 1, "cv89" 2 - @import code-highlight-light + font-family: "CMU Typewriter Text Roman", monospace + @import "code-highlight-light" blockquote border-left: 1px solid silver margin-left: 2rem padding-left: 0.5rem + .inset-box + background-color: rgba(0, 0, 0, 0.02) + box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1) inset + max-width: 100% + padding: 1rem + margin: 1rem 0 + + .note + display: flex + flex-flow: row nowrap + justify-content: left + gap: 2rem + + .shark + padding: 0 + display: grid + grid-template-columns: 5rem 1fr + + .shonk + width: 100% + + div + padding: 1rem + + aside @include padding-horiz(1rem) padding-top: 1rem @@ -144,6 +185,10 @@ body border-bottom: 2px solid rgba(0, 0, 0, 0.1) display: flex flex-flow: column nowrap + gap: 0.5em + + ul + margin: 0 footer grid-area: footer @@ -153,6 +198,11 @@ body background-color: #f2f2e1 height: 50px + .sidebyside + display: flex + flex-flow: row nowrap + justify-content: space-between + #theme-toggle cursor: pointer @@ -161,6 +211,33 @@ body body grid-template-areas: "sidebar" "content" "footer" grid-template-columns: 1fr + grid-template-rows: min-content 1fr auto + + aside + break-after: always + + article + overflow-y: visible + box-shadow: none + + pre + overflow: visible + max-height: none + + figure + break-inside: avoid + + #page-external-reading + display: none + + #page-toc::marker + content: "" + + +@media screen and (max-width: 1800px) + body + article + max-width: 60rem @media screen and (max-width: 1400px)