a zola theme
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

@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)