231 lines
4.3 KiB
CSS
231 lines
4.3 KiB
CSS
@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;
|
|
border: 1px dashed #3b2d4f;
|
|
}
|
|
|
|
.navigation li {
|
|
display: block;
|
|
}
|
|
|
|
.current > a {
|
|
filter: brightness(140%);
|
|
}
|
|
|
|
div.contents {
|
|
margin-left: 250px;
|
|
padding-left: 3em;
|
|
}
|
|
|
|
#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;
|
|
filter: drop-shadow(4px 4px 10px #78557c);
|
|
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;
|
|
background: linear-gradient(to right, transparent, #21192c);
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
color: #f3c3f7;
|
|
font-family: "Wenceslas", serif;
|
|
font-size: 2rem;
|
|
border-bottom: 1px dashed #3b2d4f;
|
|
}
|
|
|
|
p, ul, ol, table {
|
|
font-family: 'Crimson Text', serif;
|
|
font-size: 1.2rem;
|
|
color: #e5adea;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
img:not(#header-icon) {
|
|
border-radius: 5px;
|
|
max-width: 800px;
|
|
}
|
|
|
|
hr {
|
|
margin: 0.5em 0;
|
|
border: 1px dashed #3b2d4f;
|
|
width: 100%;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
min-width: 800px;
|
|
max-width: 1000px;
|
|
padding: 5px;
|
|
border: 2px solid #3b2d4f;
|
|
}
|
|
|
|
td {
|
|
padding: 0 5px;
|
|
border: 2px solid #3b2d4f;
|
|
}
|
|
|
|
code {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
code[class*="language-"], pre[class*="language-"] {
|
|
display: block;
|
|
background: #3b2947;
|
|
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;
|
|
background: #3b2947;
|
|
color: #9a86fd;
|
|
border-radius: 5px;
|
|
padding: 1em;
|
|
overflow: auto;
|
|
}
|
|
|
|
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
|
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
|
background: #f3c3f7;
|
|
}
|
|
|
|
pre {
|
|
counter-reset: lineNumber;
|
|
}
|
|
|
|
code .highlight-line:before {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
border-right: 1px solid #b37ba7;
|
|
color: #b37ba7;
|
|
content: counter(lineNumber);
|
|
counter-increment: lineNumber;
|
|
display: inline-block;
|
|
font-variant-numeric: tabular-nums;
|
|
margin-right: 1em;
|
|
padding-right: 1em;
|
|
text-align: right;
|
|
width: 0.5em;
|
|
}
|
|
|
|
/* 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:not(:last-child) {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.highlight-line .highlight-line:not(:last-child) {
|
|
min-width: 0;
|
|
}
|
|
|
|
.highlight-line-active {
|
|
background-color: #59447cc4;
|
|
}
|
|
|
|
.highlight-line-add {
|
|
background-color: #59d16749;
|
|
}
|
|
|
|
.highlight-line-remove {
|
|
background-color: #a5505096;
|
|
}
|
|
|
|
@media only screen and (min-width: 1000px) {
|
|
body {
|
|
display: inline-block;
|
|
}
|
|
|
|
code[class*="language-"], pre[class*="language-"],
|
|
pre > code:not([class]) {
|
|
width: max-content;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
width: 95%;
|
|
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;
|
|
}
|
|
} |