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
108 lines
2.1 KiB
2 years ago
|
@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
|