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.
243 lines
5.4 KiB
243 lines
5.4 KiB
@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") |
|
|
|
@import url("iosevka.css") |
|
|
|
@import url("iosevka-etoile.css") |
|
|
|
body |
|
display: grid |
|
grid-template-areas: "nav content" "sidebar content" "footer content" |
|
|
|
grid-template-rows: 50px 1fr 50px |
|
grid-template-columns: 20rem 1fr |
|
|
|
grid-column-gap: 2rem |
|
|
|
height: 100vh |
|
|
|
margin: 0 |
|
padding-right: 1rem |
|
|
|
background-color: #e9e9dc |
|
|
|
font-family: "Iosevka Etoile Web", sans-serif |
|
font-size: 13pt |
|
|
|
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% |
|
margin: -1px -1px 1rem -1px |
|
border-bottom: 1px solid silver |
|
padding-bottom: 1rem |
|
|
|
img |
|
max-width: 100% |
|
object-fit: cover |
|
|
|
> div |
|
display: flex |
|
flex-flow: row nowrap |
|
justify-content: space-between |
|
gap: 2rem |
|
|
|
a |
|
white-space: nowrap |
|
|
|
nav |
|
@include padding-horiz(1rem) |
|
grid-area: nav |
|
|
|
height: 50px |
|
display: flex |
|
flex-flow: row nowrap |
|
justify-content: space-between |
|
align-items: center |
|
background-color: #f2f2e1 |
|
|
|
|
|
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: 60rem |
|
box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.3) |
|
|
|
font-family: "TT2020", 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: "Iosevka Web", monospace |
|
font-stretch: extended |
|
font-feature-settings: "ss05" 1, "cv89" 2 |
|
@import code-highlight-light |
|
|
|
aside |
|
@include padding-horiz(1rem) |
|
padding-top: 1rem |
|
grid-area: sidebar |
|
overflow-y: scroll |
|
background-color: #f2f2e1 |
|
border-top: 2px solid rgba(0, 0, 0, 0.1) |
|
border-bottom: 2px solid rgba(0, 0, 0, 0.1) |
|
display: flex |
|
flex-flow: column nowrap |
|
|
|
footer |
|
grid-area: footer |
|
display: flex |
|
justify-content: center |
|
align-items: center |
|
background-color: #f2f2e1 |
|
height: 50px |
|
|
|
#theme-toggle |
|
cursor: pointer |
|
|
|
|
|
|
|
|
|
body.dark |
|
// todo: fix lmao |
|
background-color: #232327 |
|
color: #e7e3d5 |
|
|
|
a |
|
color: #207edb |
|
text-decoration-color: rgba(30, 115, 201, 0) |
|
&:hover |
|
text-decoration-color: rgba(30, 115, 201, 0.5) |
|
|
|
&:visited |
|
color: #aa99ff |
|
|
|
&:active |
|
color: #ed4523 |
|
|
|
|
|
article |
|
font-family: "Iosevka Etoile Web" |
|
color: #e9e3d3 |
|
background-color: #0a0b0c |
|
background-image: url("rocky-wall-50.png") |
|
|
|
pre |
|
background-color: rgba(5, 5, 5, 0.6) |
|
box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.5) inset |
|
|
|
table td |
|
mark |
|
color: #e9e3d3 |
|
|
|
code |
|
@import code-highlight-dark |
|
|
|
mark |
|
background-color: rgba($color-yellow-2, 0.1) |
|
|
|
aside |
|
background-color: #18181a |
|
|
|
nav |
|
background-color: #18181a |
|
|
|
footer |
|
background-color: #18181a |
|
|
|
|
|
@media print |
|
body |
|
grid-template-areas: "sidebar" "content" "footer" |
|
grid-template-columns: 1fr |
|
|
|
|
|
@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 |
|
|
|
article |
|
margin: 0 |
|
overflow-y: revert |
|
|
|
@media screen and (max-width: 480) |
|
body |
|
font-size: 12pt |
|
|
|
article |
|
font-size: 15pt |
|
@include padding-horiz(1rem) |
|
|
|
|