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
2 years ago
|
@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)
|
||
|
|
||
|
|