Want to contribute? Fork me on Codeberg.org!
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.

108 lines
2.1 KiB

@import "syntax.scss"
@import "stork.sass"
@import "_everforest.sass"
@import "_topography.sass"
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Roboto+Slab&family=Roboto:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap');
$shadow: $ef-bg_dim
$bg0: $ef-bg0
$bg1: $ef-bg1
$bg2: $ef-bg2
$dim: $ef-bg5
$fg: $ef-fg
$primary: $ef-green
$padding: 1rem
html
color: $fg
font-family: 'Roboto', sans-serif
font-size: 1.2em
line-height: 1.75
background-color: #2d353b
background-image: $topography;
background-attachment: fixed
body
margin: 0
h1, h2, h3, h4, h5, h6
font-family: 'Roboto Slab', sans-serif
.content
width: 80ch
max-width: 100%;
margin: 2em auto;
.page
padding: $padding
background: $bg1
pre
padding: 1em
overflow-x: scroll
div
&.highlight
position: relative
&:not([data-lang="text"])::before
background: $shadow
z-index: 1
content: attr(data-lang)
position: absolute
right: 0
top: 0
padding: 0.25em
padding-left: 2em
clip-path: polygon(0 0, 100% 0, 100% 100%, 2em 100%)
div.highlight::before, code, kbd
font-family: 'Fira Code', monospace
*:not(pre) > code, kbd
background: $bg0
padding: 0 0.5em
a
color: $primary
&:not(:hover)
text-decoration: none
pre, #_content
box-shadow: 4px 4px $shadow
img
max-width: 100%
box-shadow: 4px 4px $bg0
border: 2px solid $bg0
header
h2
margin: 0
blockquote
margin: 0
padding-left: 1em
border-left: 2px solid $primary
hr
border: 1px solid $dim
nav
$margin: 1em
margin: -$padding
display: flex
background: $bg2
font-weight: 300
justify-content: center
user-select: none
&:first-of-type
margin-bottom: $margin
&:last-of-type
margin-top: $margin
& > :nth-child(2)
margin-right: auto
& > :nth-last-child(2)
margin-left: auto
& > *
padding: 2px 0.375em 0
border-bottom: 2px solid transparent
text-decoration: none !important
& > svg
height: 1em
vertical-align: middle
margin-bottom: 0.225em
& > a
&:hover
border-color: $primary
.disabled, footer
color: $dim
footer
margin-top: 2em;
text-align: center