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.
135 lines
2.7 KiB
135 lines
2.7 KiB
@import "syntax.scss"
|
|
@import "stork.sass"
|
|
@import "soudan.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
|
|
$shadow-size: 4px
|
|
|
|
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, .page
|
|
box-shadow: $shadow-size $shadow-size $shadow
|
|
img, button, input[type=submit]
|
|
max-width: 100%
|
|
box-shadow: $shadow-size $shadow-size $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
|
|
button, input[type=submit]
|
|
border: none
|
|
cursor: pointer
|
|
background: $dim
|
|
color: $fg
|
|
padding: 0.125em 0.5em
|
|
&:active
|
|
box-shadow: none;
|
|
transform: translate($shadow-size, $shadow-size)
|
|
form
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 0.5em
|
|
textarea, input
|
|
font-size: inherit
|
|
font-family: inherit
|
|
color: inherit
|
|
textarea, input[type=text], input[type=email], input[type=number]
|
|
border: none
|
|
background: $bg0
|
|
padding: 0.5em
|
|
&:focus
|
|
outline: 1px solid $primary
|
|
textarea
|
|
resize: vertical
|