Lots of cleanup

This commit is contained in:
Daniel Flanagan 2020-12-16 00:13:13 -06:00
parent aa9006bf69
commit e858b4f59b
Signed by: lytedev
GPG Key ID: 5B2020A0F9921EF4
24 changed files with 344 additions and 361 deletions

6
.gitignore vendored
View File

@ -1,5 +1,5 @@
resources/
public/
/resources
/public
# Local Netlify folder
.netlify
/.netlify

View File

@ -1,7 +1,6 @@
baseURL: https://lyte.dev
languageCode: en-us
title: lyte.dev
theme: lyte
pygmentsCodeFences: true
pygmentsCodeFencesGuessSyntax: true
pygmentsUseClasses: true

View File

@ -3,17 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ block "head-begin" . }}{{ end }}
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
<link rel="shortcut icon" href="/icon.png" />
<link rel="stylesheet" href="/styles.css" />
<script defer src="/global.js"></script>
<script defer src="//a.lyte.dev/matomo.js"></script>
<script defer src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
{{ block "head-end" . }}{{ end }}
</head>
<body>
{{ block "body-begin" . }}{{ end }}
<header>
<a href="#start-of-content" class="hidden-in-browsers js-disabled-only">Skip to Content</a>
<section>
@ -61,12 +58,7 @@
</button>
</section>
</header>
<main>
{{ block "main" . }}{{ .Content }}{{ end }}
</main>
{{ block "body-end" . }}
<footer style="padding-bottom: 5em">
</footer>
{{ end }}
<main>{{ block "main" . }}{{ .Content }}{{ end }}</main>
<footer style="padding-bottom: 5em"></footer>
</body>
</html>

View File

@ -0,0 +1,17 @@
<svg version="1.1" viewBox="0 0 70 60" width="48" height="48" alt="lyte.dev LED icon">
<linearGradient id="logo-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="50%" style="stop-color:var(--pc)"></stop>
<stop offset="100%" style="stop-color:var(--pcd)"></stop>
</linearGradient>
<filter id="logo-shadow">
<feGaussianBlur stdDeviation="1"></feGaussianBlur>
<feOffset dx="0" dy="1.5" result="offsetblur"></feOffset>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<path id="logo-path" stroke-width="3.5" fill-opacity="0" stroke-linecap="round" stroke-linejoin="round" d="M 19.5 44.6 h 30 v -12.3 a 15.0 14.057142857142859 0 0 0 -30 0 v 12.3 M 19.5 44.6 m 8 0 v 7 m 14 -7 v 7 M 19.5 44.6 m -9 -13.3 h -5 M 19.5 44.6 m -2.6999999999999997 -28.3 l -3.55 -3.55 M 19.5 44.6 m 15.0 -35.6 v -5 M 19.5 44.6 m 32.7 -28.3 l 3.55 -3.55 M 19.5 44.6 m 39 -13.3 h 5 M 19.5 44.6 m 8.0 -12.3 a 7.5 6.15 0 0 1 7.0 -6.5"></path>
<use href="#logo-path" style="filter: url(#logo-shadow);" id="icon-shadow"></use>
<use href="#logo-path" stroke="url(#logo-gradient)"></use>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,5 +1,6 @@
{{ define "main" }}
<h2>Hi! I'm Daniel.</h2>
<h2 class="with-align">Hi! I'm Daniel.</h2>
<p>
<img class="rounded" src="/img/avatar-256.jpg" height=256 width=256 />
@ -56,4 +57,5 @@
<a href="https://git.lyte.dev/lytedev/site.lyte.dev">Site Code</a>
</li>
</ul>
{{ end }}

View File

@ -6,18 +6,20 @@ NETLIFY_DEPLOY ?= deploy -d public
all: build
.PHONY: build
build: themes/lyte/static/styles.css ; @${HUGO}
build: static/styles.css ; @${HUGO}
.PHONY: public
public: build
.PHONY: dev
dev:
@stylus -w themes/lyte/styles.styl --sourcemap -o themes/lyte/static/styles.css &
@stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css &
@${HUGO} ${DEV_SERVE}
.PHONY: dev-ext
dev-ext: ; @${HUGO} ${DEV_SERVE} --bind 0.0.0.0
dev-ext:
@stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css &
@${HUGO} ${DEV_SERVE} --bind $(shell ip a | grep -oP '192\.168\.\d+\.\d+/' | head -n 1 | tr -d '/')
.PHONY: clean
clean: ; @rm -r public
@ -28,8 +30,8 @@ publish: clean-css public ; @netlify ${NETLIFY_DEPLOY} && echo "Run \`make publi
.PHONY: publish-prod
publish-prod: clean-css public ; @netlify ${NETLIFY_DEPLOY} --prod
themes/lyte/static/styles.css: themes/lyte/styles.styl $(shell find ./themes/lyte -regex ".*\.styl")
static/styles.css: src/stylus/styles.styl $(shell find src/stylus -regex ".*\.styl")
stylus --compress $< -o $@
.PHONY: clean-css
clean-css: ; rm -f themes/lyte/static/styles.css
clean-css: ; rm -f static/styles.css

54
src/stylus/font.styl Normal file
View File

@ -0,0 +1,54 @@
// Jonathan Neal's system font stack
// https://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css
font-sources(sources)
result = ()
for s in sources
push(result, unquote("local('" + s + "'),"))
push(result, sans-serif)
(result)
system-font-face(style, weight, sources...)
font-family system-ui
font-style normal
font-weight 300
src font-sources(sources)
@font-face
system-font-face(normal, 300, ".SFNS-Light", ".SFNSText-Light", ".HelveticaNeueDeskInterface-Light", ".LucidaGrandeUI", "Segoe UI Light", "Ubuntu Light", "Roboto-Light", "DroidSans", "Tahoma")
@font-face
system-font-face(italic, 300, ".SFNS-LightItalic", ".SFNSText-LightItalic", ".HelveticaNeueDeskInterface-Italic", ".LucidaGrandeUI", "Segoe UI Light Italic", "Ubuntu Light Italic", "Roboto-LightItalic", "DroidSans", "Tahoma")
@font-face
system-font-face(normal, 400, ".SFNS-Regular", ".SFNSText-Regular", ".HelveticaNeueDeskInterface-Regular", ".LucidaGrandeUI", "Segoe UI", "Ubuntu", "Roboto-Regular", "DroidSans", "Tahoma")
@font-face
system-font-face(italic, 400, ".SFNS-Italic", ".SFNSText-Italic", ".HelveticaNeueDeskInterface-Italic", ".LucidaGrandeUI", "Segoe UI Italic", "Ubuntu Italic", "Roboto-Italic", "DroidSans", "Tahoma")
@font-face
system-font-face(normal, 500, ".SFNS-Medium", ".SFNSText-Medium", ".HelveticaNeueDeskInterface-MediumP4", ".LucidaGrandeUI", "Segoe UI Semibold", "Ubuntu Medium", "Roboto-Medium", "DroidSans-Bold", "Tahoma Bold")
@font-face
system-font-face(italic, 500, ".SFNS-MediumItalic", ".SFNSText-MediumItalic", ".HelveticaNeueDeskInterface-MediumItalicP4", ".LucidaGrandeUI", "Segoe UI Semibold Italic", "Ubuntu Medium Italic", "Roboto-MediumItalic", "DroidSans-Bold", "Tahoma Bold")
@font-face
system-font-face(normal, 700, ".SFNS-Bold", ".SFNSText-Bold", ".HelveticaNeueDeskInterface-Bold", ".LucidaGrandeUI", "Segoe UI Bold", "Ubuntu Bold", "Roboto-Bold", "DroidSans-Bold", "Tahoma Bold")
@font-face
system-font-face(italic, 700, ".SFNS-BoldItalic", ".SFNSText-BoldItalic", ".HelveticaNeueDeskInterface-BoldItalic", ".LucidaGrandeUI", "Segoe UI Bold Italic", "Ubuntu Bold Italic", "Roboto-BoldItalic", "DroidSans-Bold", "Tahoma Bold")
iosevka-font-face(style, weight, src)
font-family iosevka
font-style style
font-weight weight
src url(src), monospace
font-display swap
@font-face
iosevka-font-face(normal, 300, "/font/iosevka/ss07-regular.woff2")
@font-face
iosevka-font-face(italic, 300, "/font/iosevka/ss07-italic.woff2")
@font-face
iosevka-font-face(italic, 500, "/font/iosevka/ss07-bold-italic.woff2")

View File

@ -3,8 +3,8 @@
padding 0
box-sizing border-box
@import theme
@import font
@import theme
code, pre { font-family: var(--msff) }
ul, ol { padding-left: 2em }
@ -45,7 +45,7 @@ body
font-family var(--msff), monospace
position relative
display flex
background-color var(--bg-header)
background-color var(--header-bg)
color var(--fg)
box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
margin-bottom 0.5em
@ -124,18 +124,21 @@ form
.hidden-on-mobile { display: none }
@media (min-width 600px)
body.align-left .hide-in-align-left { display: none }
body.align-center .hide-in-align-center { display: none }
body.align-left
.hide-in-align-left { display: none }
.with-align { text-align: left }
body.align-center > main
body.align-center
.hide-in-align-center { display: none }
.with-align { text-align: center }
&> main
max-width 60ch
margin 0 auto
body.align-center
&> main img,
&> main embed,
&> main frame,
&> main iframe
img,
embed,
frame,
iframe
max-width 100%
margin 0 auto
display block

View File

@ -0,0 +1,63 @@
main > .highlight pre.chroma
border 0
padding 0.25em 0.5em
border-left solid 0.25em var(--syntax-left-edge)
overflow-x auto
background-color var(--syntax-bg)
-moz-tab-size 2
tab-size 2
color var(--fg)
.chroma
.err
color var(--syntax-err)
background-color var(--syntax-bg)
// Line Table Cell
.lntd
vertical-align top
padding 0
margin 0
border 0
// Line Table
.lntable
border-spacing 0
padding 0
margin 0
border 0
width auto
overflow auto
display block
// Line Highlight
.hl
display block
width 100%
background-color var(--syntax-lhl)
// Line Numbers and Line Number Table
.ln, .lnt
margin-right 0.4em
padding 0 0.4em 0 0.4em
.ge { font-style: italic } // GenericEmph
.gs { font-weight: bold } // GenericStrong
for c in k kc kd kp kr kt no
.{c} { color: var(--syntax-aq) }
for c in na nc nd ne gi nf nx
.{c} { color: var(--syntax-name) }
for c in l se m mb mf mh mi il mo
.{c} { color: var(--syntax-lit) }
for c in ld s sa sb sc dl sd s2 sh si sx sr s1 ss
.{c} { color: var(--syntax-lits) }
for c in kn nt o gd ow
.{c} { color: var(--syntax-mag) }
for c in c ch cm c1 cs cp cpf gu
.{c} { color: var(--syntax-sh) }

88
src/stylus/theme.styl Normal file
View File

@ -0,0 +1,88 @@
light-syntax = {
brd: rgba(255, 255, 255, 0.2),
bg: rgba(0, 0, 0, 0.05),
ledg: #ccc,
sh: #775,
name: #480,
mag: #d04,
lit: #40f,
lits: #660,
aq: #04d,
err: #960050,
}
dark-syntax = {
brd: rgba(255, 255, 255, 0.2),
bg: rgba(255, 255, 255, 0.03),
ledg: #333,
sh: #75715e,
name: #a6e22e,
mag: #f92672,
lit: #ae81ff,
lits: #e6db74,
aq: #66d9ef,
err: #960050,
}
theme-colors = {
heading-fg: #333,
icon-shadow: #fff,
input-bg: rgba(0, 0, 0, 0.08),
input-hover-bg: rgba(0, 0, 0, 0.16),
}
:root
--ff system-ui
--msff iosevka
--pc #df3c59
--pcd #8e293b
--input-focus-bg var(--input-bg)
--button-bg var(--input-bg)
--button-hover-bg var(--input-hover-bg)
--button-focus-bg var(--input-bg)
--link-fg var(--fg)
--link-visited-fg var(heading-fg)
light-theme =
for k, v in light-syntax
--syntax-{k}: v
for k2, v2 in theme-colors
{unquote("--" + k2)}: v2
--bg #fff
--header-bg #eee
--fg #111
dark-theme =
for k, v in dark-syntax
--syntax-{k}: v
for k2, v2 in theme-colors
{unquote("--" + k2)}: invert(v2)
--bg #111
--header-bg #191919
--fg #fff
--link-visited-fg #aaa
:root, body.light-theme
{light-theme}
body.dark-theme
{dark-theme}
:root
@media (prefers-color-scheme dark)
{dark-theme}
.hide-in-light-theme
display none
@media (prefers-color-scheme dark)
.hide-in-dark-theme
display none
.hide-in-light-theme { display: inherit }
body.light-theme .hide-in-dark-theme { display: inherit }
body.dark-theme .hide-in-light-theme { display: none }
body.dark-theme .hide-in-dark-theme { display: none }
body.dark-theme .hide-in-light-theme { display: inherit }
body.light-theme .hide-in-dark-theme { display: inherit }
body.light-theme .hide-in-light-theme { display: none }

View File

@ -20,14 +20,14 @@ document.querySelectorAll(".js-disabled-only").forEach(a => a.remove())
const initAlign = () => {
const cur = localStorage.getItem("align")
const prev = cur == "left" ? "center" : "left"
const prev = cur == "center" ? "left" : "center"
document.body.classList.add("align-" + cur)
document.body.classList.remove("align-" + prev)
}
if (localStorage.getItem("align") === null) localStorage.setItem("align", "left")
if (localStorage.getItem("align") === null) localStorage.setItem("align", "center")
initAlign()
const toggleAlign = ev => {
localStorage.setItem("align", localStorage.getItem("align") == "left" ? "center" : "left")
localStorage.setItem("align", localStorage.getItem("align") == "center" ? "left" : "center")
initAlign()
if (!!ev.target) ev.preventDefault()
return false

View File

@ -1,83 +0,0 @@
// Jonathan Neal's system font stack
// https://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css
// TODO: condense with stylus
@font-face {
font-family system-ui
font-style normal
font-weight 300
src local(".SFNS-Light"), local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"), sans-serif
}
@font-face {
font-family system-ui
font-style italic
font-weight 300
src local(".SFNS-LightItalic"), local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma"), sans-serif
}
@font-face {
font-family system-ui
font-style normal
font-weight 400
src local(".SFNS-Regular"), local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"), sans-serif
}
@font-face {
font-family system-ui
font-style italic
font-weight 400
src local(".SFNS-Italic"), local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma"), sans-serif
}
@font-face {
font-family system-ui
font-style normal
font-weight 500
src local(".SFNS-Medium"), local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold"), sans-serif
}
@font-face {
font-family system-ui
font-style italic
font-weight 500
src local(".SFNS-MediumItalic"), local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold"), sans-serif
}
@font-face {
font-family system-ui
font-style normal
font-weight 700
src local(".SFNS-Bold"), local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold"), sans-serif
}
@font-face {
font-family system-ui
font-style italic
font-weight 700
src local(".SFNS-BoldItalic"), local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold"), sans-serif
}
// TODO: condense with stylus
@font-face {
font-family iosevka
font-style normal
font-weight 300
src url("/font/iosevka/ss07-regular.woff2"), monospace
font-display swap
}
@font-face {
font-family iosevka
font-style italic
font-weight 300
src url("/font/iosevka/ss07-italic.woff2"), monospace
font-display swap
}
@font-face {
font-family iosevka
font-style italic
font-weight 500
src url("/font/iosevka/ss07-bold-italic.woff2"), monospace
font-display swap
}

View File

@ -1,67 +0,0 @@
main > .highlight pre.chroma
border 0
padding 0.25em 0.5em
border-left solid 0.25em var(--syntax-left-edge)
overflow-x auto
background-color var(--syntax-bg)
/* TabSize */ .chroma { -moz-tab-size: 2; tab-size: 2 }
/* Background */ .chroma { color: var(--fg); border: solid 0.05em var(--syntax-border) }
/* Error */ .chroma .err { color: var(--syntax-err); background-color: var(--syntax-bg) }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%; background-color: var(--syntax-lhl) }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* Keyword */ .chroma .k { color: var(--syntax-aq) }
/* KeywordConstant */ .chroma .kc { color: var(--syntax-aq) }
/* KeywordDeclaration */ .chroma .kd { color: var(--syntax-aq) }
/* KeywordNamespace */ .chroma .kn { color: var(--syntax-mag) }
/* KeywordPseudo */ .chroma .kp { color: var(--syntax-aq) }
/* KeywordReserved */ .chroma .kr { color: var(--syntax-aq) }
/* KeywordType */ .chroma .kt { color: var(--syntax-aq) }
/* NameAttribute */ .chroma .na { color: var(--syntax-name) }
/* NameClass */ .chroma .nc { color: var(--syntax-name) }
/* NameConstant */ .chroma .no { color: var(--syntax-aq) }
/* NameDecorator */ .chroma .nd { color: var(--syntax-name) }
/* NameException */ .chroma .ne { color: var(--syntax-name) }
/* NameFunction */ .chroma .nf { color: var(--syntax-name) }
/* NameOther */ .chroma .nx { color: var(--syntax-name) }
/* NameTag */ .chroma .nt { color: var(--syntax-mag) }
/* Literal */ .chroma .l { color: var(--syntax-lit) }
/* LiteralDate */ .chroma .ld { color: var(--syntax-lits) }
/* LiteralString */ .chroma .s { color: var(--syntax-lits) }
/* LiteralStringAffix */ .chroma .sa { color: var(--syntax-lits) }
/* LiteralStringBacktick */ .chroma .sb { color: var(--syntax-lits) }
/* LiteralStringChar */ .chroma .sc { color: var(--syntax-lits) }
/* LiteralStringDelimiter */ .chroma .dl { color: var(--syntax-lits) }
/* LiteralStringDoc */ .chroma .sd { color: var(--syntax-lits) }
/* LiteralStringDouble */ .chroma .s2 { color: var(--syntax-lits) }
/* LiteralStringEscape */ .chroma .se { color: var(--syntax-lit) }
/* LiteralStringHeredoc */ .chroma .sh { color: var(--syntax-lits) }
/* LiteralStringInterpol */ .chroma .si { color: var(--syntax-lits) }
/* LiteralStringOther */ .chroma .sx { color: var(--syntax-lits) }
/* LiteralStringRegex */ .chroma .sr { color: var(--syntax-lits) }
/* LiteralStringSingle */ .chroma .s1 { color: var(--syntax-lits) }
/* LiteralStringSymbol */ .chroma .ss { color: var(--syntax-lits) }
/* LiteralNumber */ .chroma .m { color: var(--syntax-lit) }
/* LiteralNumberBin */ .chroma .mb { color: var(--syntax-lit) }
/* LiteralNumberFloat */ .chroma .mf { color: var(--syntax-lit) }
/* LiteralNumberHex */ .chroma .mh { color: var(--syntax-lit) }
/* LiteralNumberInteger */ .chroma .mi { color: var(--syntax-lit) }
/* LiteralNumberIntegerLong */ .chroma .il { color: var(--syntax-lit) }
/* LiteralNumberOct */ .chroma .mo { color: var(--syntax-lit) }
/* Operator */ .chroma .o { color: var(--syntax-mag) }
/* OperatorWord */ .chroma .ow { color: var(--syntax-mag) }
/* Comment */ .chroma .c { color: var(--syntax-sh) }
/* CommentHashbang */ .chroma .ch { color: var(--syntax-sh) }
/* CommentMultiline */ .chroma .cm { color: var(--syntax-sh) }
/* CommentSingle */ .chroma .c1 { color: var(--syntax-sh) }
/* CommentSpecial */ .chroma .cs { color: var(--syntax-sh) }
/* CommentPreproc */ .chroma .cp { color: var(--syntax-sh) }
/* CommentPreprocFile */ .chroma .cpf { color: var(--syntax-sh) }
/* GenericDeleted */ .chroma .gd { color: var(--syntax-mag) }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericInserted */ .chroma .gi { color: var(--syntax-name) }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: var(--syntax-sh) }

View File

@ -1,87 +0,0 @@
:root, body.light-theme
--syntax-border rgba(255, 255, 255, 0.2)
--syntax-bg rgba(0, 0, 0, 0.05)
--syntax-left-edge #ccc
--syntax-sh #775
--syntax-name #480
--syntax-mag #d04
--syntax-lit #40f
--syntax-lits #660
--syntax-aq #04d
--syntax-err #960050
--ff system-ui
--msff iosevka
/* primary "brand" colors */
--pc #0af
--pcd #0cf
--bg #fff
--fg #111
--heading-fg #333
--bg-header #eee
--icon-shadow #4df
--input-bg #eee
--input-hover-bg #ddd
--input-focus-bg var(--input-bg)
--button-bg #eee
--button-hover-bg #ddd
--button-focus-bg var(--input-bg)
--link-fg var(--pc)
--link-visited-fg var(--pcd)
dark-theme =
--syntax-border rgba(255, 255, 255, 0.2)
--syntax-bg rgba(255, 255, 255, 0.03)
--syntax-left-edge #333
--syntax-sh #75715e
--syntax-name #a6e22e
--syntax-mag #f92672
--syntax-lit #ae81ff
--syntax-lits #e6db74
--syntax-aq #66d9ef
--syntax-err #960050
--ff system-ui
--msff iosevka
// primary "brand" colors
// --pc #df3c59
// --pcd #8e293b
--pc #0af
--pcd #0cf
--bg #111
--fg #fff
--heading-fg #ccc
--bg-header #191919
--icon-shadow #000
--input-bg #222
--input-hover-bg #333
--input-focus-bg var(--input-bg)
--button-bg #222
--button-hover-bg #333
--button-focus-bg var(--input-bg)
body.dark-theme
{dark-theme}
:root
@media (prefers-color-scheme dark)
{dark-theme}
.hide-in-light-theme
display none
@media (prefers-color-scheme dark)
.hide-in-dark-theme
display none
.hide-in-light-theme { display: inherit }
body.light-theme .hide-in-dark-theme { display: inherit }
body.dark-theme .hide-in-light-theme { display: none }
body.dark-theme .hide-in-dark-theme { display: none }
body.dark-theme .hide-in-light-theme { display: inherit }
body.light-theme .hide-in-dark-theme { display: inherit }
body.light-theme .hide-in-light-theme { display: none }