diff --git a/makefile b/makefile index 6f6835a..92a9bc6 100644 --- a/makefile +++ b/makefile @@ -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 diff --git a/readme.md b/readme.md index 4586476..a29bd16 100644 --- a/readme.md +++ b/readme.md @@ -4,6 +4,7 @@ + Hugo + `netlify-cli` (for deployments) ++ Stylus ## Build diff --git a/themes/lyte/font.styl b/themes/lyte/font.styl new file mode 100644 index 0000000..fed18f1 --- /dev/null +++ b/themes/lyte/font.styl @@ -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 +} diff --git a/themes/lyte/static/.gitignore b/themes/lyte/static/.gitignore new file mode 100644 index 0000000..d986a92 --- /dev/null +++ b/themes/lyte/static/.gitignore @@ -0,0 +1,2 @@ +/styles.css +/styles.css.map diff --git a/themes/lyte/static/styles.css b/themes/lyte/static/styles.css deleted file mode 100644 index 17e69c6..0000000 --- a/themes/lyte/static/styles.css +++ /dev/null @@ -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) } diff --git a/themes/lyte/styles.styl b/themes/lyte/styles.styl new file mode 100644 index 0000000..440e73e --- /dev/null +++ b/themes/lyte/styles.styl @@ -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 diff --git a/themes/lyte/syntax-highlighting.styl b/themes/lyte/syntax-highlighting.styl new file mode 100644 index 0000000..1ab29ce --- /dev/null +++ b/themes/lyte/syntax-highlighting.styl @@ -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) } diff --git a/themes/lyte/theme.styl b/themes/lyte/theme.styl new file mode 100644 index 0000000..0ece0df --- /dev/null +++ b/themes/lyte/theme.styl @@ -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 }