You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
6.4 KiB
278 lines
6.4 KiB
@import "reasonable-colors" |
|
|
|
@mixin padding-horiz($amount) // this was probably unnecessary lmao |
|
padding-left: $amount |
|
padding-right: $amount |
|
|
|
@font-face |
|
font-family: "CMU Typewriter Text Roman" |
|
src: local("CMU Typewriter Text Roman"), url("cmuntt-webfont.woff") format("woff") |
|
|
|
@font-face |
|
font-family: "CMU Serif Roman" |
|
src: local("CMU Serif Roman"), url("cmunrm-webfont.woff") format("woff") |
|
|
|
@font-face |
|
font-family: "CMU Serif Bold" |
|
src: url("cmunbx-webfont.woff") |
|
|
|
body |
|
display: grid |
|
grid-template-areas: "sidebar content" "footer content" |
|
|
|
grid-template-rows: 1fr 50px |
|
grid-template-columns: 20rem 1fr |
|
|
|
grid-column-gap: 2rem |
|
|
|
height: 100vh |
|
|
|
margin: 0 |
|
padding-right: 1rem |
|
|
|
background-color: #e9e9dc |
|
|
|
font-family: "CMU Serif Bold", serif |
|
font-size: 14pt |
|
|
|
div.debug |
|
padding-left: 2ch |
|
|
|
div.sections |
|
display: flex |
|
flex-flow: column nowrap |
|
padding-bottom: 0.5rem |
|
border-bottom: 2px solid silver |
|
margin-bottom: 0.5rem |
|
|
|
a |
|
color: #0053a7 |
|
text-decoration: underline 0.1em rgba(0, 83, 167, 0) |
|
transition: text-decoration-color 300ms ease-in-out |
|
|
|
&:hover |
|
text-decoration-color: rgba(0, 83, 167, 0.5) |
|
|
|
&:visited |
|
color: #4520f7 |
|
|
|
&:active |
|
color: #db2b07 |
|
|
|
&.stealth |
|
color: inherit |
|
|
|
figure |
|
max-width: 100% |
|
|
|
img |
|
max-width: 100% |
|
object-fit: cover |
|
|
|
> *:nth-child(2) // todo: clean this up maybe |
|
display: flex |
|
flex-flow: row nowrap |
|
justify-content: space-between |
|
gap: 2rem |
|
padding-top: 0.5rem |
|
padding-bottom: 0.5rem |
|
border-bottom: 1px solid silver |
|
margin-bottom: 1rem |
|
|
|
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 |
|
grid-area: content |
|
overflow-y: scroll |
|
background-color: #f9f9e8 |
|
background-image: url("/paper53.png"), url("/paper89.png"), url("/paper59.png"), url("/paper67.png") |
|
background-attachment: local |
|
max-width: 80rem |
|
box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.3) |
|
|
|
font-family: "CMU Typewriter Text Roman", serif |
|
font-size: 16pt |
|
|
|
> pre |
|
padding: 1rem |
|
font-size: 13pt |
|
max-height: 40rem |
|
overflow: scroll |
|
|
|
background-color: rgba(0, 0, 0, 0.007) |
|
box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1) inset |
|
|
|
&[data-linenos] |
|
padding: 1rem 0.5rem |
|
|
|
table td |
|
padding: 0 |
|
|
|
&:first-of-type |
|
text-align: right |
|
user-select: none |
|
padding-right: 0.5rem |
|
border-right: 2px solid rgba(0, 0, 0, 0.2) |
|
|
|
mark |
|
background: none |
|
|
|
&:last-of-type |
|
padding-left: 0.5rem |
|
|
|
mark |
|
display: block |
|
background-color: rgba($color-yellow-2, 0.3) |
|
font-weight: bold |
|
|
|
code |
|
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 |
|
grid-area: sidebar |
|
overflow-y: scroll |
|
background-color: #f2f2e1 |
|
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 |
|
display: flex |
|
justify-content: center |
|
align-items: center |
|
background-color: #f2f2e1 |
|
height: 50px |
|
|
|
.sidebyside |
|
display: flex |
|
flex-flow: row nowrap |
|
justify-content: space-between |
|
|
|
#theme-toggle |
|
cursor: pointer |
|
|
|
|
|
@media print |
|
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) |
|
// at this point the page has roughly the same |
|
// padding on the left and right side |
|
body |
|
grid-template-columns: 15rem 1fr |
|
|
|
|
|
@media screen and (max-width: 980px) |
|
body |
|
// height: revert |
|
display: flex |
|
flex-flow: column nowrap |
|
padding-right: 0 |
|
|
|
aside |
|
overflow-y: revert |
|
border-bottom: none |
|
flex-shrink: 0 |
|
|
|
article |
|
margin: 0 |
|
overflow-y: revert |
|
flex-grow: 1 |
|
|
|
footer |
|
flex-shrink: 0 |
|
|
|
@media screen and (max-width: 480) |
|
body |
|
font-size: 12pt |
|
|
|
article |
|
font-size: 15pt |
|
@include padding-horiz(1rem) |
|
|
|
|