sorceress/kittensite
sorceress
/
kittensite
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add light theme

This commit is contained in:
Agatha Lovelace 2021-09-14 20:44:40 +03:00
parent c3c4307405
commit 214b6a69d7
No known key found for this signature in database
GPG Key ID: 2DB18BA2E0A80BC3
6 changed files with 207 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/page.njk
View File

@ -7,7 +7,6 @@ icon: /assets/flompy.png
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/prism-duotone-dark.css">
<link rel="stylesheet" href="/css/common.css"> <link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/page.css"> <link rel="stylesheet" href="/css/page.css">

43
main/css/common.css
View File

@ -8,18 +8,47 @@
src: url("../fonts/NotoSymbolsSmall.woff2") format('woff2'); src: url("../fonts/NotoSymbolsSmall.woff2") format('woff2');
} }
/* default to dark theme */
:root {
--bg: #21192c;
--bg-alt: #1a1423;
--bg-code: #3b2947;
--border: #3b2d4f;
--accent: #f3c3f7;
--accent-alt: #e5adea;
--line-num: #b37ba7;
--url: #9371bc;
--glow: #78557c;
--code: #9a86fd;
}
@media (prefers-color-scheme: light) {
:root {
--bg: #e0cbe9;
--bg-alt: #bfa7c9;
--bg-code: #e8d2e9;
--border: #a38bad;
--accent: #21192c;
--accent-alt: #1a1423;
--line-num: #b58cb8;
--url: #6b548b;
--glow: #382e46;
--code: #3c3836;
}
}
html { html {
background-color: #21192c; background-color: var(--bg);
scrollbar-color: #1a1423 #21192c; scrollbar-color: var(--bg-alt) var(--bg);
} }
::selection { ::selection {
color: #21192c; color: var(--bg);
background: #f3c3f7; background: var(--accent);
} }
a { a {
color: #9371bc; color: var(--url);
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
display: inline-block; display: inline-block;
@ -27,9 +56,9 @@ a {
} }
a:hover { a:hover {
text-decoration: underline dashed #9371bc; text-decoration: underline dashed var(--url);
text-decoration-thickness: 2px; text-decoration-thickness: 2px;
-webkit-text-decoration: underline dashed #9371bc; -webkit-text-decoration: underline dashed var(--url);
} }
a::before { a::before {

8
main/css/main.css
View File

@ -28,7 +28,7 @@ p {
p, h1, h2 { p, h1, h2 {
margin: 0 2em; margin: 0 2em;
color: #f3c3f7; color: var(--accent);
font-size: 1.8em; font-size: 1.8em;
font-family: "Wenceslas", serif; font-family: "Wenceslas", serif;
} }
@ -47,12 +47,12 @@ h2 {
margin: 0 3em; margin: 0 3em;
font-size: 2em; font-size: 2em;
font-style: italic; font-style: italic;
color: #e5adea; color: var(--accent-alt);
} }
hr { hr {
margin: 0.5em 6em; margin: 0.5em 6em;
border: 1px dashed #21192c; border: 1px dashed var(--bg);
filter: brightness(180%); filter: brightness(180%);
} }
@ -63,7 +63,7 @@ hr {
span { span {
font-size: 0.8em; font-size: 0.8em;
font-style: italic; font-style: italic;
color: #e5adea; color: var(--accent-alt);
} }
#quote { #quote {

38
main/css/page.css
View File

@ -1,3 +1,6 @@
@import './prism-duotone-dark.css' screen;
@import './prism-gruvbox-light.css' screen and (prefers-color-scheme: light);
@font-face { @font-face {
font-family: 'Crimson Text'; font-family: 'Crimson Text';
font-style: normal; font-style: normal;
@ -20,7 +23,7 @@
position: fixed; position: fixed;
height: 98%; height: 98%;
overflow: auto; overflow: auto;
border: 1px dashed #3b2d4f; border: 1px dashed var(--border);
} }
.navigation li { .navigation li {
@ -45,7 +48,7 @@ a[class="heading-anchor"]::before {
} }
a[class="heading-anchor"] svg { a[class="heading-anchor"] svg {
fill: #e5adea; fill: var(--accent-alt);
margin-right: 5px; margin-right: 5px;
margin-left: -21px; margin-left: -21px;
opacity: 0%; opacity: 0%;
@ -70,7 +73,7 @@ a[class="heading-anchor"] svg {
#header-text { #header-text {
position: absolute; position: absolute;
margin: 1em 0 0 2em; margin: 1em 0 0 2em;
filter: drop-shadow(4px 4px 10px #78557c); filter: drop-shadow(4px 4px 10px var(--glow));
border-bottom: none; border-bottom: none;
font-size: 2em; font-size: 2em;
} }
@ -89,19 +92,19 @@ a[class="heading-anchor"] svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
background: linear-gradient(to right, transparent, #21192c); background: linear-gradient(to right, transparent, var(--bg));
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #f3c3f7; color: var(--accent);
font-family: "Wenceslas", serif; font-family: "Wenceslas", serif;
border-bottom: 1px dashed #3b2d4f; border-bottom: 1px dashed var(--border);
} }
p, ul, ol, table { p, ul, ol, table {
font-family: 'Crimson Text', serif; font-family: 'Crimson Text', serif;
font-size: 1.2rem; font-size: 1.2rem;
color: #e5adea; color: var(--accent-alt);
max-width: 1000px; max-width: 1000px;
} }
@ -117,7 +120,7 @@ img:not(#header-icon) {
hr { hr {
margin: 0.5em 0; margin: 0.5em 0;
border: 1px dashed #3b2d4f; border: 1px dashed var(--border);
width: 100%; width: 100%;
} }
@ -126,12 +129,12 @@ table {
min-width: 800px; min-width: 800px;
max-width: 1000px; max-width: 1000px;
padding: 5px; padding: 5px;
border: 2px solid #3b2d4f; border: 2px solid var(--border);
} }
td { td {
padding: 0 5px; padding: 0 5px;
border: 2px solid #3b2d4f; border: 2px solid var(--border);
} }
code { code {
@ -139,14 +142,14 @@ code {
} }
:not(pre) > code { :not(pre) > code {
background-color: #3b2947; background-color: var(--bg-code);
padding: 2px; padding: 2px;
border-radius: 3px; border-radius: 3px;
} }
code[class*="language-"], pre[class*="language-"] { code[class*="language-"], pre[class*="language-"] {
display: block; display: block;
background: #3b2947; background: var(--bg-code);
border-radius: 5px; border-radius: 5px;
} }
@ -155,8 +158,8 @@ 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-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; font-size: 14px;
display: block; display: block;
background: #3b2947; background: var(--bg-code);
color: #9a86fd; color: var(--code);
border-radius: 5px; border-radius: 5px;
padding: 1em; padding: 1em;
overflow: auto; overflow: auto;
@ -164,7 +167,8 @@ pre > code:not([class]) {
pre[class*="language-"]::selection, pre[class*="language-"] ::selection, pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection { code[class*="language-"]::selection, code[class*="language-"] ::selection {
background: #f3c3f7; background: var(--accent);
color: var(--bg);
} }
pre { pre {
@ -174,7 +178,7 @@ pre {
code .highlight-line:before { code .highlight-line:before {
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
color: #b37ba7; color: var(--line-num);
content: counter(lineNumber); content: counter(lineNumber);
counter-increment: lineNumber; counter-increment: lineNumber;
display: inline-block; display: inline-block;
@ -191,7 +195,7 @@ code .highlight-line:before {
code .highlight-line { code .highlight-line {
margin-left: 1.5em; margin-left: 1.5em;
padding-left: 1.5em; padding-left: 1.5em;
border-left: 1px solid #b37ba7; border-left: 1px solid var(--line-num);
} }
/* from eleventy docs */ /* from eleventy docs */

6
main/css/pagelist.css
View File

@ -29,19 +29,19 @@ div.contents, .navigation {
} }
#header-text { #header-text {
filter: drop-shadow(4px 4px 10px #78557c); filter: drop-shadow(4px 4px 10px var(--glow));
font-size: 2em; font-size: 2em;
} }
h1, h2 { h1, h2 {
color: #f3c3f7; color: var(--accent);
font-family: "Wenceslas", serif; font-family: "Wenceslas", serif;
} }
p, ul { p, ul {
font-family: 'Crimson Text', serif; font-family: 'Crimson Text', serif;
font-size: 1.2rem; font-size: 1.2rem;
color: #e5adea; color: var(--accent-alt);
max-width: 1000px; max-width: 1000px;
} }

143
main/css/prism-gruvbox-light.css Normal file
View File

@ -0,0 +1,143 @@
/**
* Gruvbox light theme
*
* Based on Gruvbox: https://github.com/morhetz/gruvbox
* Adapted from PrismJS gruvbox-dark theme: https://github.com/schnerring/prism-themes/blob/master/themes/prism-gruvbox-dark.css
*
* @author Michael Schnerring (https://schnerring.net)
* @version 1.0
*/
code[class*="language-"],
pre[class*="language-"] {
color: #3c3836; /* fg1 / fg */
font-family: Consolas, Monaco, "Andale Mono", monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
color: #282828; /* fg0 */
background: #a89984; /* bg4 */
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
color: #282828; /* fg0 */
background: #a89984; /* bg4 */
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f9f5d7; /* bg0_h */
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
}
.token.comment,
.token.prolog,
.token.cdata {
color: #7c6f64; /* fg4 / gray1 */
}
.token.delimiter,
.token.boolean,
.token.keyword,
.token.selector,
.token.important,
.token.atrule {
color: #9d0006; /* red2 */
}
.token.operator,
.token.punctuation,
.token.attr-name {
color: #7c6f64; /* fg4 / gray1 */
}
.token.tag,
.token.tag .punctuation,
.token.doctype,
.token.builtin {
color: #b57614; /* yellow2 */
}
.token.entity,
.token.number,
.token.symbol {
color: #8f3f71; /* purple2 */
}
.token.property,
.token.constant,
.token.variable {
color: #9d0006; /* red2 */
}
.token.string,
.token.char {
color: #797403; /* green2 */
}
.token.attr-value,
.token.attr-value .punctuation {
color: #7c6f64; /* fg4 / gray1 */
}
.token.url {
color: #797403; /* green2 */
text-decoration: underline;
}
.token.function {
color: #b57614; /* yellow2 */
}
.token.regex {
background: #797403; /* green2 */
}
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.inserted {
background: #7c6f64; /* fg4 / gray1 */
}
.token.deleted {
background: #9d0006; /* red2 */
}