Lots of cleanup
This commit is contained in:
parent
aa9006bf69
commit
e858b4f59b
GPG key ID:
5B2020A0F9921EF4
24 changed files with 344 additions and 361 deletions
6
.gitignore
vendored
6
.gitignore
vendored
|
|
@ -1,5 +1,5 @@
|
||||||
resources/
|
/resources
|
||||||
public/
|
/public
|
||||||
|
|
||||||
# Local Netlify folder
|
# Local Netlify folder
|
||||||
.netlify
|
/.netlify
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
baseURL: https://lyte.dev
|
baseURL: https://lyte.dev
|
||||||
languageCode: en-us
|
languageCode: en-us
|
||||||
title: lyte.dev
|
title: lyte.dev
|
||||||
theme: lyte
|
|
||||||
pygmentsCodeFences: true
|
pygmentsCodeFences: true
|
||||||
pygmentsCodeFencesGuessSyntax: true
|
pygmentsCodeFencesGuessSyntax: true
|
||||||
pygmentsUseClasses: true
|
pygmentsUseClasses: true
|
||||||
|
|
|
||||||
|
|
@ -3,17 +3,14 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
{{ block "head-begin" . }}{{ end }}
|
|
||||||
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
|
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
|
||||||
<link rel="shortcut icon" href="/icon.png" />
|
<link rel="shortcut icon" href="/icon.png" />
|
||||||
<link rel="stylesheet" href="/styles.css" />
|
<link rel="stylesheet" href="/styles.css" />
|
||||||
<script defer src="/global.js"></script>
|
<script defer src="/global.js"></script>
|
||||||
<script defer src="//a.lyte.dev/matomo.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>
|
<script defer src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
|
||||||
{{ block "head-end" . }}{{ end }}
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{ block "body-begin" . }}{{ end }}
|
|
||||||
<header>
|
<header>
|
||||||
<a href="#start-of-content" class="hidden-in-browsers js-disabled-only">Skip to Content</a>
|
<a href="#start-of-content" class="hidden-in-browsers js-disabled-only">Skip to Content</a>
|
||||||
<section>
|
<section>
|
||||||
|
|
@ -61,12 +58,7 @@
|
||||||
</button>
|
</button>
|
||||||
</section>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>{{ block "main" . }}{{ .Content }}{{ end }}</main>
|
||||||
{{ block "main" . }}{{ .Content }}{{ end }}
|
<footer style="padding-bottom: 5em"></footer>
|
||||||
</main>
|
|
||||||
{{ block "body-end" . }}
|
|
||||||
<footer style="padding-bottom: 5em">
|
|
||||||
</footer>
|
|
||||||
{{ end }}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
17
layouts/_default/logo.svg.html
Normal file
17
layouts/_default/logo.svg.html
Normal 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 |
|
|
@ -1,5 +1,6 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<h2>Hi! I'm Daniel.</h2>
|
|
||||||
|
<h2 class="with-align">Hi! I'm Daniel.</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<img class="rounded" src="/img/avatar-256.jpg" height=256 width=256 />
|
<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>
|
<a href="https://git.lyte.dev/lytedev/site.lyte.dev">Site Code</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
12
makefile
12
makefile
|
|
@ -6,18 +6,20 @@ NETLIFY_DEPLOY ?= deploy -d public
|
||||||
all: build
|
all: build
|
||||||
|
|
||||||
.PHONY: build
|
.PHONY: build
|
||||||
build: themes/lyte/static/styles.css ; @${HUGO}
|
build: static/styles.css ; @${HUGO}
|
||||||
|
|
||||||
.PHONY: public
|
.PHONY: public
|
||||||
public: build
|
public: build
|
||||||
|
|
||||||
.PHONY: dev
|
.PHONY: dev
|
||||||
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}
|
@${HUGO} ${DEV_SERVE}
|
||||||
|
|
||||||
.PHONY: dev-ext
|
.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
|
.PHONY: clean
|
||||||
clean: ; @rm -r public
|
clean: ; @rm -r public
|
||||||
|
|
@ -28,8 +30,8 @@ publish: clean-css public ; @netlify ${NETLIFY_DEPLOY} && echo "Run \`make publi
|
||||||
.PHONY: publish-prod
|
.PHONY: publish-prod
|
||||||
publish-prod: clean-css public ; @netlify ${NETLIFY_DEPLOY} --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 $@
|
stylus --compress $< -o $@
|
||||||
|
|
||||||
.PHONY: clean-css
|
.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
54
src/stylus/font.styl
Normal 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")
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
padding 0
|
padding 0
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
|
|
||||||
@import theme
|
|
||||||
@import font
|
@import font
|
||||||
|
@import theme
|
||||||
|
|
||||||
code, pre { font-family: var(--msff) }
|
code, pre { font-family: var(--msff) }
|
||||||
ul, ol { padding-left: 2em }
|
ul, ol { padding-left: 2em }
|
||||||
|
|
@ -45,7 +45,7 @@ body
|
||||||
font-family var(--msff), monospace
|
font-family var(--msff), monospace
|
||||||
position relative
|
position relative
|
||||||
display flex
|
display flex
|
||||||
background-color var(--bg-header)
|
background-color var(--header-bg)
|
||||||
color var(--fg)
|
color var(--fg)
|
||||||
box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
|
box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
|
||||||
margin-bottom 0.5em
|
margin-bottom 0.5em
|
||||||
|
|
@ -124,18 +124,21 @@ form
|
||||||
.hidden-on-mobile { display: none }
|
.hidden-on-mobile { display: none }
|
||||||
|
|
||||||
@media (min-width 600px)
|
@media (min-width 600px)
|
||||||
body.align-left .hide-in-align-left { display: none }
|
body.align-left
|
||||||
body.align-center .hide-in-align-center { display: none }
|
.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
|
max-width 60ch
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
|
||||||
body.align-center
|
img,
|
||||||
&> main img,
|
embed,
|
||||||
&> main embed,
|
frame,
|
||||||
&> main frame,
|
iframe
|
||||||
&> main iframe
|
|
||||||
max-width 100%
|
max-width 100%
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
display block
|
display block
|
||||||
63
src/stylus/syntax-highlighting.styl
Normal file
63
src/stylus/syntax-highlighting.styl
Normal 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
88
src/stylus/theme.styl
Normal 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 }
|
||||||
|
|
@ -20,14 +20,14 @@ document.querySelectorAll(".js-disabled-only").forEach(a => a.remove())
|
||||||
|
|
||||||
const initAlign = () => {
|
const initAlign = () => {
|
||||||
const cur = localStorage.getItem("align")
|
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.add("align-" + cur)
|
||||||
document.body.classList.remove("align-" + prev)
|
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()
|
initAlign()
|
||||||
const toggleAlign = ev => {
|
const toggleAlign = ev => {
|
||||||
localStorage.setItem("align", localStorage.getItem("align") == "left" ? "center" : "left")
|
localStorage.setItem("align", localStorage.getItem("align") == "center" ? "left" : "center")
|
||||||
initAlign()
|
initAlign()
|
||||||
if (!!ev.target) ev.preventDefault()
|
if (!!ev.target) ev.preventDefault()
|
||||||
return false
|
return false
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
|
|
@ -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) }
|
|
||||||
|
|
@ -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 }
|
|
||||||
Loading…
Reference in a new issue