2021-09-14 17:44:40 +00:00
@ import './prism-duotone-dark.css' screen ;
@ import './prism-gruvbox-light.css' screen and ( prefers-color-scheme : light ) ;
2021-06-29 16:29:55 +00:00
@ font-face {
font-family : 'Crimson Text' ;
font-style : normal ;
font-weight : 400 ;
font-display : swap ;
src : url ( "../fonts/CrimsonText.woff2" ) format ( 'woff2' ) ;
}
. mobile {
visibility : hidden ;
}
. navigation {
margin : 0 . 5em ;
padding : 0 ;
padding-left : 1em ;
top : 0 ;
left : 0 ;
width : 230px ;
position : fixed ;
height : 98 % ;
overflow : auto ;
2021-09-14 17:44:40 +00:00
border : 1px dashed var ( --border ) ;
2021-06-29 16:29:55 +00:00
}
. navigation li {
display : block ;
}
. current > a {
filter : brightness ( 140 % ) ;
}
div . contents {
margin-left : 250px ;
padding-left : 3em ;
}
2021-07-07 21:31:25 +00:00
div . contents a :: before {
margin-right : 0em ;
}
2021-07-07 22:04:26 +00:00
a [ class = "heading-anchor" ] :: before {
2021-07-07 21:31:25 +00:00
display : none ;
}
2021-07-07 22:04:26 +00:00
a [ class = "heading-anchor" ] svg {
2021-09-14 17:44:40 +00:00
fill : var ( --accent-alt ) ;
2021-07-07 21:31:25 +00:00
margin-right : 5px ;
margin-left : -21px ;
opacity : 0 % ;
transition : opacity 0 . 2s ease-in-out ;
}
2021-07-07 22:04:26 +00:00
: is ( h1 , h2 , h3 , h4 , h5 , h6 ) : hover a [ class = "heading-anchor" ] svg {
2021-07-07 21:31:25 +00:00
opacity : 80 % ;
transition : opacity 0 . 2s ease-in-out ;
}
2021-06-29 16:29:55 +00:00
# header-icon {
width : 10em ;
opacity : 0 . 6 ;
image-rendering : crisp-edges ;
z-index : -1 ;
/* this should really just be a background image but that's even messier so here we are */
user-select : none ;
-webkit-user-select : none ;
}
# header-text {
position : absolute ;
margin : 1em 0 0 2em ;
2021-09-14 17:44:40 +00:00
filter : drop-shadow ( 4px 4px 10px var ( --glow ) ) ;
2021-06-29 16:29:55 +00:00
border-bottom : none ;
font-size : 2em ;
}
. fade {
position : relative ;
display : inline-block ;
width : max-content ;
}
. fade :: after {
content : '' ;
position : absolute ;
left : 0 ;
top : 0 ;
width : 100 % ;
height : 100 % ;
display : inline-block ;
2021-09-14 17:44:40 +00:00
background : linear-gradient ( to right , transparent , var ( --bg ) ) ;
2021-06-29 16:29:55 +00:00
}
2021-07-07 21:31:25 +00:00
h1 , h2 , h3 , h4 , h5 , h6 {
2021-09-14 17:44:40 +00:00
color : var ( --accent ) ;
2021-06-29 16:29:55 +00:00
font-family : "Wenceslas" , serif ;
2021-09-14 17:44:40 +00:00
border-bottom : 1px dashed var ( --border ) ;
2021-06-29 16:29:55 +00:00
}
p , ul , ol , table {
font-family : 'Crimson Text' , serif ;
font-size : 1 . 2rem ;
2021-09-14 17:44:40 +00:00
color : var ( --accent-alt ) ;
2021-06-29 16:29:55 +00:00
max-width : 1000px ;
}
2021-07-07 21:31:25 +00:00
strong {
font-weight : bolder ;
text-shadow : 0px 0 . 5px , 0 . 5px 0px , 0 . 8px 0px ;
}
2021-06-29 16:29:55 +00:00
img : not ( # header-icon ) {
border-radius : 5px ;
max-width : 800px ;
}
hr {
margin : 0 . 5em 0 ;
2021-09-14 17:44:40 +00:00
border : 1px dashed var ( --border ) ;
2021-06-29 16:29:55 +00:00
width : 100 % ;
}
table {
border-collapse : collapse ;
min-width : 800px ;
max-width : 1000px ;
padding : 5px ;
2021-09-14 17:44:40 +00:00
border : 2px solid var ( --border ) ;
2021-06-29 16:29:55 +00:00
}
td {
padding : 0 5px ;
2021-09-14 17:44:40 +00:00
border : 2px solid var ( --border ) ;
2021-06-29 16:29:55 +00:00
}
code {
font-size : 1rem ;
}
2021-07-07 21:31:25 +00:00
: not ( pre ) > code {
2021-09-14 17:44:40 +00:00
background-color : var ( --bg-code ) ;
2021-07-07 21:31:25 +00:00
padding : 2px ;
border-radius : 3px ;
}
2021-06-29 16:29:55 +00:00
code [ class * = "language-" ] , pre [ class * = "language-" ] {
display : block ;
2021-09-14 17:44:40 +00:00
background : var ( --bg-code ) ;
2021-06-29 16:29:55 +00:00
border-radius : 5px ;
}
/* non-syntax-highlighted code blocks */
pre > code : not ( [ class ] ) {
font-family : Consolas , Menlo , Monaco , "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , "Courier New" , Courier , monospace ;
font-size : 14px ;
display : block ;
2021-09-14 17:44:40 +00:00
background : var ( --bg-code ) ;
color : var ( --code ) ;
2021-06-29 16:29:55 +00:00
border-radius : 5px ;
padding : 1em ;
overflow : auto ;
}
pre [ class * = "language-" ] :: selection , pre [ class * = "language-" ] :: selection ,
code [ class * = "language-" ] :: selection , code [ class * = "language-" ] :: selection {
2021-09-14 17:44:40 +00:00
background : var ( --accent ) ;
color : var ( --bg ) ;
2021-06-29 16:29:55 +00:00
}
pre {
counter-reset : lineNumber ;
}
code . highlight-line : before {
-webkit-user-select : none ;
user-select : none ;
2021-09-14 17:44:40 +00:00
color : var ( --line-num ) ;
2021-06-29 16:29:55 +00:00
content : counter ( lineNumber ) ;
counter-increment : lineNumber ;
display : inline-block ;
font-variant-numeric : tabular-nums ;
2021-07-07 21:31:25 +00:00
/* this is Hacky but should fix wrap with line numbers */
/* im so sorry */
margin-left : -3em ;
margin-right : 1 . 5em ;
2021-06-29 16:29:55 +00:00
padding-right : 1em ;
text-align : right ;
width : 0 . 5em ;
}
2021-07-07 21:31:25 +00:00
code . highlight-line {
margin-left : 1 . 5em ;
padding-left : 1 . 5em ;
2021-09-14 17:44:40 +00:00
border-left : 1px solid var ( --line-num ) ;
2021-07-07 21:31:25 +00:00
}
2021-06-29 16:29:55 +00:00
/* from eleventy docs */
. highlight-line {
display : inline-block ;
/* del, ins, mark default styles */
text-decoration : none ;
color : inherit ;
}
/* allow highlighting empty lines */
. highlight-line : empty : before {
content : " " ;
}
. highlight-line-active {
background-color : # 59447cc4 ;
}
. highlight-line-add {
background-color : # 59d16749 ;
}
. highlight-line-remove {
background-color : # a5505096 ;
}
2021-07-07 21:31:25 +00:00
code [ class * = "language-" ] , pre [ class * = "language-" ] ,
pre > code : not ( [ class ] ) {
width : auto ;
white-space : pre-wrap ;
}
2021-06-29 16:29:55 +00:00
@ media only screen and ( min-width : 1000px ) {
body {
display : inline-block ;
}
2021-07-07 21:31:25 +00:00
div . contents {
max-width : 1200px ;
2021-06-29 16:29:55 +00:00
}
}
@ media only screen and ( max-width : 1000px ) {
img : not ( # header-icon ) {
width : 100 % ;
}
. mobile {
visibility : visible ;
}
. navigation {
margin : auto ;
border : none ;
padding-bottom : 2em ;
padding-left : 3em ;
2021-07-07 21:31:25 +00:00
width : 90 % ;
2021-06-29 16:29:55 +00:00
height : auto ;
position : relative ;
}
div . contents {
margin-left : 0 ;
}
}
@ media only screen and ( max-width : 500px ) {
div . contents , . navigation {
padding-left : 0 . 5em ;
padding-right : 0 . 5em ;
}
2021-07-07 21:31:25 +00:00
2021-07-07 22:04:26 +00:00
a [ class = "heading-anchor" ] {
margin-left : 21px ;
2021-07-07 21:31:25 +00:00
float : right ;
}
2021-06-29 16:29:55 +00:00
}