lytedev
/
site.lyte.dev
1
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

work on stylus sheet

Browse Source
df/accessibility-and-system-color-scheme
Daniel Flanagan 2 years ago
parent 0486d73fdc
commit aa9006bf69
Signed by: lytedev
GPG Key ID: 5B2020A0F9921EF4
8 changed files with 395 additions and 548 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 16
      makefile
  2. 1
      readme.md
  3. 83
      themes/lyte/font.styl
  4. 2
      themes/lyte/static/.gitignore
  5. 544
      themes/lyte/static/styles.css
  6. 143
      themes/lyte/styles.styl
  7. 67
      themes/lyte/syntax-highlighting.styl
  8. 87
      themes/lyte/theme.styl

16
makefile
Unescape View File

@ -6,13 +6,15 @@ NETLIFY_DEPLOY ?= deploy -d public
all: build
.PHONY: build
build: ; @${HUGO}
build: themes/lyte/static/styles.css ; @${HUGO}
.PHONY: public
public: build
.PHONY: dev
dev: ; @${HUGO} ${DEV_SERVE}
dev:
@stylus -w themes/lyte/styles.styl --sourcemap -o themes/lyte/static/styles.css &
@${HUGO} ${DEV_SERVE}
.PHONY: dev-ext
dev-ext: ; @${HUGO} ${DEV_SERVE} --bind 0.0.0.0
@ -21,7 +23,13 @@ dev-ext: ; @${HUGO} ${DEV_SERVE} --bind 0.0.0.0
clean: ; @rm -r public
.PHONY: publish
publish: public ; @netlify ${NETLIFY_DEPLOY} && echo "Run \`make publish-prod\` when ready."
publish: clean-css public ; @netlify ${NETLIFY_DEPLOY} && echo "Run \`make publish-prod\` when ready."
.PHONY: publish-prod
publish-prod: 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")
stylus --compress $< -o $@
.PHONY: clean-css
clean-css: ; rm -f themes/lyte/static/styles.css

1
readme.md
Unescape View File

@ -4,6 +4,7 @@
+ Hugo
+ `netlify-cli` (for deployments)
+ Stylus
## Build

83
themes/lyte/font.styl
Unescape View File

@ -0,0 +1,83 @@
// 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
}

2
themes/lyte/static/.gitignore vendored
Unescape View File

@ -0,0 +1,2 @@
/styles.css
/styles.css.map

544
themes/lyte/static/styles.css
Unescape View File

@ -1,544 +0,0 @@
/* Jonathan Neal's system font stack
https://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css */
@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;
}
@font-face {
font-family: iosevka;
font-style: normal;
font-weight: 300;
src: url("/font/iosevka/ss07-regular.woff2");
font-display: swap;
}
@font-face {
font-family: iosevka;
font-style: italic;
font-weight: 300;
src: url("/font/iosevka/ss07-italic.woff2");
font-display: swap;
}
@font-face {
font-family: iosevka;
font-style: italic;
font-weight: 500;
src: url("/font/iosevka/ss07-bold-italic.woff2");
font-display: swap;
}
*,*::before,*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
: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);
}
.hide-in-light-theme {
display: none;
}
@media (prefers-color-scheme: dark) {
:root {
--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; /* original red */
/* --pcd: #8e293b; /* darker version for gradients */
--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);
}
.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 {
--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; /* original red */
/* --pcd: #8e293b; /* darker version for gradients */
--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 .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;
}
input[type=image] {
stroke: var(--button-fg);
fill: var(--button-fg);
}
body > main {
padding: 0.5em;
line-height: 1.6em;
}
body > main > .highlight,
main > h1,
main > h2,
main > h3,
main > h4,
main > h5,
main > h6,
body > main > form,
body > main > ul,
body > main > ol,
body > main > p {
margin-top: 1em;
margin-bottom: 0.25em;
max-width: 60ch;
}
body > main > .highlight {
max-width: 100vw;
}
main > h1 + p,
main > h2 + p,
main > h3 + p,
main > h4 + p,
main > h5 + p,
main > h6 + p {
margin-top: 0;
}
main > h1,
main > h2,
main > h3,
main > h4,
main > h5,
main > h6 {
color: var(--heading-fg);
}
main > *:first-child {
margin-top: 0;
}
main > p > code {
padding: 0.1em 0.25em;
border-radius: 0.25em;
background-color: rgba(255, 255, 255, 0.03);
}
body {
background-color: var(--bg);
color: var(--fg);
font-family: var(--ff);
font-weight: 500;
font-size: 1rem;
}
code, pre {
font-family: var(--msff), monospace;
}
body > header {
font-family: var(--msff), monospace;
position: relative;
display: flex;
background-color: var(--bg-header);
color: var(--fg);
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.25);
margin-bottom: 0.5em;
}
body > header > section {
display: flex;
}
body > header > section > a {
line-height: 1.5em;
display: flex;
justify-content: center;
align-items: center;
padding: 0.25em 0.5em;
color: var(--fg);
}
body > header > section > a:visited {
color: var(--fg);
}
body > header > section > a:hover {
background: rgba(255, 255, 255, 0.1);
}
body > header > section > a > img,
body > header > section > a > img {
max-width: 48px;
}
body > header > section > a {
text-decoration: none;
}
body > header > section > a > h1 {
font-weight: 300;
font-size: 150%;
}
input, textarea {
background: var(--input-bg);
border: 0;
font: inherit;
padding: 0.5em 1em;
color: var(--input-fg);
border-radius: 0.25em;
}
input:hover, textarea:hover {
background: var(--input-hover-bg);
}
input:focus, textarea:focus {
background: var(--input-focus-bg);
}
button, input[type=submit] {
font: inherit;
background: var(--button-bg);
color: var(--button-fg);
cursor: pointer;
border: 0;
padding: 0.5em 1em;
}
button:hover, input[type=submit]:hover {
background: var(--button-hover-bg);
}
button:focus, input[type=submit]:focus {
background: var(--button-hover-bg);
}
ul, ol {
padding-left: 2em;
}
a {
text-decoration-skip-ink: auto;
color: var(--link-fg);
}
a:visited {
color: var(--link-visited-fg);
}
.lead {
font-size: 1.5rem;
}
.rounded {
border-radius: 0.5em;
}
form > label,
form > fieldset {
border: 0;
display: flex;
flex-direction: column;
}
form > fieldset ~ label,
form > label ~ fieldset,
form > label ~ label,
form > fieldset ~ fieldset {
margin-top: 0.5em;
}
img, embed, frame, iframe {
max-width: 100vw;
}
@media (max-width: 600px) {
body > header {
flex-direction: column;
font-size: 125%;
}
}
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);
}
.js-only {
display: none;
}
.no-bg {
background: none;
}
.hidden-in-browsers {
display: none;
}
.centerize {
display: flex;
justify-content: center;
align-items: center;
align-content: conter;
}
#icon-shadow {
stroke:var(--icon-shadow);
}
@media (max-width: 600px) {
.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-center > main {
max-width: 60ch;
margin: 0 auto;
}
body.align-center > main img,
body.align-center > main embed,
body.align-center > main frame,
body.align-center > main iframe {
max-width: 100%;
margin: 0 auto;
display: block
}
}
/* syntax highlighting */
/* 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) }

143
themes/lyte/styles.styl
Unescape View File

@ -0,0 +1,143 @@
*,*::before,*::after
margin 0
padding 0
box-sizing border-box
@import theme
@import font
code, pre { font-family: var(--msff) }
ul, ol { padding-left: 2em }
a
text-decoration-skip-ink auto
color var(--link-fg)
&:visited { color: var(--link-visited-fg) }
img, embed, frame, iframe { max-width: 100vw }
body
background-color var(--bg)
color var(--fg)
font-family var(--ff)
font-weight 500
font-size 1rem
&> main
padding 0.5em
line-height 1.6em
.highlight { max-width: 100vw }
.highlight, h1, h2, h3, h4, h5, h6, form, ul, ol, p
margin-top 1em
margin-bottom 0.25em
max-width 60ch
&> h1 + p, > h2 + p, > h3 + p, > h4 + p, > h5 + p, > h6 + p { margin-top: 0 }
&> h1, > h2, > h3, > h4, > h5, > h6 { color: var(--heading-fg) }
*:first-child { margin-top: 0 }
&> p > code
padding 0.1em 0.25em
border-radius 0.25em
background-color rgba(255, 255, 255, 0.03)
&> header
font-family var(--msff), monospace
position relative
display flex
background-color var(--bg-header)
color var(--fg)
box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
margin-bottom 0.5em
@media (max-width: 600px)
flex-direction column
font-size 125%
&> section { display: flex }
&> section > a
text-decoration none
line-height 1.5em
display flex
justify-content center
align-items center
padding 0.25em 0.5em
color var(--fg)
&:visited { color: var(--fg) }
&:hover { background: rgba(255, 255, 255, 0.1) }
&> img { max-width: 48px }
&> h1
font-weight 300
font-size 150%
input, textarea
background var(--input-bg)
border 0
font inherit
padding 0.5em 1em
color var(--input-fg)
border-radius 0.25em
&:hover { background: var(--input-hover-bg) }
&:focus { background: var(--input-focus-bg) }
button, input[type=submit]
font inherit
background var(--button-bg)
color var(--button-fg)
cursor pointer
border 0
padding 0.5em 1em
&:hover { background: var(--button-hover-bg) }
&:focus { background: var(--button-hover-bg) }
.lead { font-size: 1.5rem }
.rounded { border-radius: 0.5em }
form
&> label, > fieldset
border 0
display flex
flex-direction column
&> fieldset ~ label,
&> label ~ fieldset,
&> label ~ label,
&> fieldset ~ fieldset
margin-top 0.5em
.js-only { display: none } // script removes this class on load
.no-bg { background: none }
.hidden-in-browsers { display: none }
.centerize
display flex
justify-content center
align-items center
align-content conter
#icon-shadow { stroke: var(--icon-shadow) }
@media (max-width 600px)
.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-center > main
max-width 60ch
margin 0 auto
body.align-center
&> main img,
&> main embed,
&> main frame,
&> main iframe
max-width 100%
margin 0 auto
display block
@import syntax-highlighting

67
themes/lyte/syntax-highlighting.styl
Unescape View File

@ -0,0 +1,67 @@
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) }

87
themes/lyte/theme.styl
Unescape View File

@ -0,0 +1,87 @@
: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 }
Write Preview
Loading…
Cancel
Save