From 45bfe5a4f354def4b34bd514f4ff6ec2f9d35ca7 Mon Sep 17 00:00:00 2001 From: Daniel Flanagan Date: Fri, 14 Jun 2024 11:06:31 -0500 Subject: [PATCH] Working on porting styles to tailwind --- flake.lock | 34 -- flake.nix | 38 +- package-lock.json | 161 +----- package.json | 8 - readme.md | 1 - src/stylus/styles.css | 1167 +++++++++++++++++++++++++++++++++++++++++ tailwind.config.js | 9 + 7 files changed, 1192 insertions(+), 226 deletions(-) delete mode 100644 package.json create mode 100644 src/stylus/styles.css create mode 100644 tailwind.config.js diff --git a/flake.lock b/flake.lock index 7fc59ab..152ad5a 100644 --- a/flake.lock +++ b/flake.lock @@ -1,23 +1,5 @@ { "nodes": { - "flake-utils": { - "inputs": { - "systems": "systems" - }, - "locked": { - "lastModified": 1694529238, - "narHash": "sha256-zsNZZGTGnMOf9YpHKJqMSsa0dXbfmxeoJ7xHlrt+xmY=", - "owner": "numtide", - "repo": "flake-utils", - "rev": "ff7b65b44d01cf9ba6a71320833626af21126384", - "type": "github" - }, - "original": { - "owner": "numtide", - "repo": "flake-utils", - "type": "github" - } - }, "nixpkgs": { "locked": { "lastModified": 1696375444, @@ -36,24 +18,8 @@ }, "root": { "inputs": { - "flake-utils": "flake-utils", "nixpkgs": "nixpkgs" } - }, - "systems": { - "locked": { - "lastModified": 1681028828, - "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=", - "owner": "nix-systems", - "repo": "default", - "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e", - "type": "github" - }, - "original": { - "owner": "nix-systems", - "repo": "default", - "type": "github" - } } }, "root": "root", diff --git a/flake.nix b/flake.nix index 39f72fb..16c533b 100644 --- a/flake.nix +++ b/flake.nix @@ -1,30 +1,22 @@ { - inputs = { - nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable"; - flake-utils.url = "github:numtide/flake-utils"; - }; + inputs.nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable"; outputs = { nixpkgs, - flake-utils, - ... - }: - flake-utils.lib.eachDefaultSystem (system: let - pkgs = import nixpkgs { - inherit system; - }; - in { - devShells.default = pkgs.mkShell { - buildInputs = with pkgs; [ - hugo - gnumake - netlify-cli - nodejs - ]; - shellHook = '' - npm install - PATH="$(realpath node_modules/.bin):''${PATH}" - ''; + self, + }: let + systems = ["aarch64-linux" "aarch64-darwin" "x86_64-darwin" "x86_64-linux"]; + forAllSystems = nixpkgs.lib.genAttrs systems; + pkgsFor = system: import nixpkgs {inherit system;}; + pkgsForAllSystems = f: (forAllSystems (system: f (pkgsFor system))); + + buildDeps = pkgs: with pkgs; [hugo tailwindcss]; + infraDeps = pkgs: with pkgs; [netlify-cli]; + in { + devShells = pkgsForAllSystems (pkgs: { + default = pkgs.mkShell { + buildInputs = (buildDeps pkgs) ++ (infraDeps pkgs); }; }); + }; } diff --git a/package-lock.json b/package-lock.json index 9cdb778..f41368d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,165 +1,6 @@ { "name": "site.lyte.dev", - "version": "1.0.0", "lockfileVersion": 3, "requires": true, - "packages": { - "": { - "name": "site.lyte.dev", - "version": "1.0.0", - "license": "ISC", - "dependencies": { - "stylus": "^0.60.0" - } - }, - "node_modules/@adobe/css-tools": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz", - "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==" - }, - "node_modules/balanced-match": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" - }, - "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dependencies": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "node_modules/concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" - }, - "node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, - "node_modules/fs.realpath": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" - }, - "node_modules/glob": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", - "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.1.1", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - }, - "engines": { - "node": "*" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "dependencies": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "node_modules/inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" - }, - "node_modules/minimatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", - "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dependencies": { - "brace-expansion": "^1.1.7" - }, - "engines": { - "node": "*" - } - }, - "node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - }, - "node_modules/once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "dependencies": { - "wrappy": "1" - } - }, - "node_modules/path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/sax": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", - "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" - }, - "node_modules/source-map": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", - "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", - "engines": { - "node": ">= 8" - } - }, - "node_modules/stylus": { - "version": "0.60.0", - "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.60.0.tgz", - "integrity": "sha512-j2pBgEwzCu05yCuY4cmyp0FtPQQFBBAGB7TY7QaNl7eztiHwkxzwvIp5vjZJND/a1JNOka+ZW9ewVPFZpI3pcA==", - "dependencies": { - "@adobe/css-tools": "~4.2.0", - "debug": "^4.3.2", - "glob": "^7.1.6", - "sax": "~1.2.4", - "source-map": "^0.7.3" - }, - "bin": { - "stylus": "bin/stylus" - }, - "engines": { - "node": "*" - }, - "funding": { - "url": "https://opencollective.com/stylus" - } - }, - "node_modules/wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" - } - } + "packages": {} } diff --git a/package.json b/package.json deleted file mode 100644 index cae03b1..0000000 --- a/package.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "site.lyte.dev", - "version": "1.0.0", - "license": "ISC", - "dependencies": { - "stylus": "^0.60.0" - } -} diff --git a/readme.md b/readme.md index a29bd16..4586476 100644 --- a/readme.md +++ b/readme.md @@ -4,7 +4,6 @@ + Hugo + `netlify-cli` (for deployments) -+ Stylus ## Build diff --git a/src/stylus/styles.css b/src/stylus/styles.css new file mode 100644 index 0000000..2b2db8c --- /dev/null +++ b/src/stylus/styles.css @@ -0,0 +1,1167 @@ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} +@font-face { + font-family: system-ui; + font-style: normal; + font-weight: 300; + src: local("Cantarell Light"), 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"); +} +@font-face { + font-family: system-ui; + font-style: italic; + font-weight: 300; + src: local("Cantarell Light"), 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"); +} +@font-face { + font-family: system-ui; + font-style: normal; + font-weight: 400; + src: local("Cantarell"), local(".SFNS-Regular"), local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"); +} +@font-face { + font-family: system-ui; + font-style: italic; + font-weight: 400; + src: local("Cantarell"), 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"); +} +@font-face { + font-family: system-ui; + font-style: normal; + font-weight: 500; + src: local("Cantarell"), 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"); +} +@font-face { + font-family: system-ui; + font-style: italic; + font-weight: 500; + src: local("Cantarell"), 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"); +} +@font-face { + font-family: system-ui; + font-style: normal; + font-weight: 700; + src: local("Cantarell"), 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"); +} +@font-face { + font-family: system-ui; + font-style: italic; + font-weight: 700; + src: local("Cantarell"), 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"); +} +@font-face { + font-family: ldiosevka; + font-style: normal; + font-weight: 300; + src: local("Iosevka"), url("/font/iosevkalytewebmin/iosevkalyteweb-regular.subset.woff2"); + font-display: swap; +} +@font-face { + font-family: ldiosevka; + font-style: italic; + font-weight: 300; + src: local("Iosevka"), url("/font/iosevkalytewebmin/iosevkalyteweb-italic.subset.woff2"); + font-display: swap; +} +@font-face { + font-family: ldiosevka; + font-style: italic; + font-weight: 500; + src: local("Iosevka"), url("/font/iosevkalytewebmin/iosevkalyteweb-bolditalic.woff2"); + font-display: swap; +} +:root { + --syntax-bpx: 5px; + --ff: system-ui, sans-serif; + --msff: ldiosevka, IosevkaLyteWeb, IosevkaLyte, Iosevka, "Fira Code", monospace; + --pc: #df3c59; + --pcd: #8e293b; +} +:root, +body.dark-theme { + --syntax-brd: rgba(255,255,255,0.2); + --syntax-bg: #181825; + --syntax-ledg: rgba(116,199,236,0.5); + --syntax-ledgh: #74c7ec; + --syntax-sh: #6c7086; + --icon-shadow: #000; + --syntax-name: #a6e3a1; + --syntax-mag: #f38ba8; + --syntax-lit: #cba6f7; + --syntax-lits: #f9e2af; + --syntax-aq: #74c7ec; + --syntax-err: #f38ba8; + --bg: #1e1e2e; + --header-bg: rgba(255,255,255,0.03); + --header-hover-bg: rgba(255,255,255,0.06); + --fg: #cdd6f4; + --heading-fg: #cdd6f4; + --link-fg: #74c7ec; + --link-visited-fg: #cba6f7; + --inline-code-bg: rgba(0,0,0,0.2); + --inline-code-fg: #fff; + --input-bg: #181825; + --input-hover-bg: #313244; + --input-focus-bg: #45475a; + --button-bg: var(--input-bg); + --button-hover-bg: var(--input-hover-bg); + --button-focus-bg: var(--input-bg); +} +body.light-theme { + --syntax-brd: rgba(255,255,255,0.2); + --syntax-bg: #e6e9ef; + --syntax-ledg: rgba(0,0,0,0.3); + --syntax-sh: #6c6f85; + --syntax-name: #40a02b; + --syntax-mag: #d20f39; + --syntax-lit: #8839ef; + --syntax-lits: #df8e1d; + --syntax-aq: #1e66f5; + --syntax-err: #d20f39; + --icon-shadow: #fff; + --heading-fg: #4c4f69; + --link-fg: #0843b8; + --link-visited-fg: #5c0fc0; + --bg: #eff1f5; + --header-bg: rgba(255,255,255,0.1); + --header-hover-bg: rgba(255,255,255,0.2); + --fg: #4c4f69; + --inline-code-bg: rgba(255,255,255,0.2); + --inline-code-fg: #000; + --input-bg: #dce0e8; + --input-hover-bg: rgba(0,0,0,0.16); + --input-focus-bg: var(--input-bg); + --button-bg: var(--input-bg); + --button-hover-bg: var(--input-hover-bg); + --button-focus-bg: var(--input-bg); +} +@media (prefers-color-scheme: light) { + :root { + --syntax-brd: rgba(255,255,255,0.2); + --syntax-bg: #e6e9ef; + --syntax-ledg: rgba(0,0,0,0.3); + --syntax-sh: #6c6f85; + --syntax-name: #40a02b; + --syntax-mag: #d20f39; + --syntax-lit: #8839ef; + --syntax-lits: #df8e1d; + --syntax-aq: #1e66f5; + --syntax-err: #d20f39; + --icon-shadow: #fff; + --heading-fg: #4c4f69; + --link-fg: #0843b8; + --link-visited-fg: #5c0fc0; + --bg: #eff1f5; + --header-bg: rgba(255,255,255,0.1); + --header-hover-bg: rgba(255,255,255,0.2); + --fg: #4c4f69; + --inline-code-bg: rgba(255,255,255,0.2); + --inline-code-fg: #000; + --input-bg: #dce0e8; + --input-hover-bg: rgba(0,0,0,0.16); + --input-focus-bg: var(--input-bg); + --button-bg: var(--input-bg); + --button-hover-bg: var(--input-hover-bg); + --button-focus-bg: var(--input-bg); + } +} +@media (max-width: 600px) { + :root { + --syntax-bpx: 2px; + } +} +.hide-in-light-theme { + display: none; +} +@media (prefers-color-scheme: dark) { + .hide-in-dark-theme { + display: inherit; + } + .hide-in-light-theme { + display: none; + } + body.light-theme .hide-in-dark-theme { + display: none; + } + body.dark-theme .hide-in-light-theme { + display: inherit; + } +} +body.dark-theme .hide-in-dark-theme { + display: inherit; +} +body.dark-theme .hide-in-light-theme { + display: none; +} +body.light-theme .hide-in-dark-theme { + display: none; +} +body.light-theme .hide-in-light-theme { + display: inherit; +} +body .only-in-light-theme { + display: none; +} +body .only-in-dark-theme { + display: none; +} +body .only-in-system-theme { + display: none; +} +body.dark-theme .only-in-dark-theme { + display: inherit; +} +body.light-theme .only-in-light-theme { + display: inherit; +} +body.system-theme .only-in-system-theme { + display: inherit; +} +code, +pre { + font-family: var(--msff); +} +ul, +ol { + padding-left: 2em; +} +body.nojs > main, +body.nojs > footer { + visibility: hidden; +} +a { + cursor: pointer; + text-decoration-skip-ink: auto; + color: var(--link-fg); +} +a:visited { + color: var(--link-visited-fg); +} +footer a > svg, +main a > svg { + margin-right: 0.5em; +} +button.copy-code-button { + color: var(--link-fg); + text-decoration: underline; + z-index: 10; + position: relative; + align-self: flex-start; + position: absolute; + right: 0; + opacity: 0.75; +} +button.copy-code-button:hover { + opacity: 1; +} +@media (max-width: 600px) { + pre.chroma:hover > button.copy-code-button { + opacity: 0.9; + } +} +img, +embed, +frame, +iframe { + max-width: 100vw; +} +details { + position: relative; +} +details > summary { + cursor: pointer; + list-style: none; + text-decoration: underline; + color: var(--link-fg); +} +details > summary::-webkit-details-marker { + display: none; +} +details > summary::after { + position: absolute; + padding: 0 1em; + top: 0; + right: -1em; + content: "+"; +} +details[open] > summary::after { + content: "-"; +} +.left-border { + position: relative; + padding-left: 0.5em; + border-left: solid var(--syntax-bpx) var(--syntax-ledg); + transition: 0.2s border-color; +} +.left-border:hover { + border-color: var(--syntax-ledgh); +} +html, +body { + min-height: 100vh; + background-color: var(--bg); + color: var(--fg); + font-family: var(--ff); + font-weight: 400; + font-size: 1rem; +} +html> footer, +body> footer { + padding: 0.5em; + padding-top: 5em; + padding-bottom: 5em; +} +html> main, +body> main { + padding: 0.5em; + line-height: 1.6em; +} +html main:first-child, +body main:first-child, +html footer:first-child, +body footer:first-child { + margin-top: 0; +} +html > main .highlight pre.chroma, +body > main .highlight pre.chroma, +html > footer .highlight pre.chroma, +body > footer .highlight pre.chroma { + position: relative; + background-color: var(--syntax-bg); + max-width: 100vw; + border-left: solid var(--syntax-bpx) var(--syntax-ledg); + display: flex; + transition: 0.2s border-color; +} +html > main .highlight pre.chroma:hover, +body > main .highlight pre.chroma:hover, +html > footer .highlight pre.chroma:hover, +body > footer .highlight pre.chroma:hover { + border-color: var(--syntax-ledgh); +} +html > main li, +body > main li, +html > footer li, +body > footer li { + margin-top: 0.5em; + margin-bottom: 0.5em; +} +html > main .highlight, +body > main .highlight, +html > footer .highlight, +body > footer .highlight, +html > main form, +body > main form, +html > footer form, +body > footer form, +html > main > ul, +body > main > ul, +html > footer > ul, +body > footer > ul, +html > main > ol, +body > main > ol, +html > footer > ol, +body > footer > ol, +html > main p, +body > main p, +html > footer p, +body > footer p { + margin-top: 1em; + margin-bottom: 0.25em; +} +html > main h1, +body > main h1, +html > footer h1, +body > footer h1, +html > main h2, +body > main h2, +html > footer h2, +body > footer h2, +html > main h3, +body > main h3, +html > footer h3, +body > footer h3, +html > main h4, +body > main h4, +html > footer h4, +body > footer h4, +html > main h5, +body > main h5, +html > footer h5, +body > footer h5, +html > main h6, +body > main h6, +html > footer h6, +body > footer h6, +html > main details, +body > main details, +html > footer details, +body > footer details { + margin-top: 2em; + margin-bottom: 0.25em; +} +html > main h1, +body > main h1, +html > footer h1, +body > footer h1, +html > main h2, +body > main h2, +html > footer h2, +body > footer h2, +html > main h3, +body > main h3, +html > footer h3, +body > footer h3, +html > main h4, +body > main h4, +html > footer h4, +body > footer h4, +html > main h5, +body > main h5, +html > footer h5, +body > footer h5, +html > main h6, +body > main h6, +html > footer h6, +body > footer h6, +html > main form, +body > main form, +html > footer form, +body > footer form, +html > main ul, +body > main ul, +html > footer ul, +body > footer ul, +html > main ol, +body > main ol, +html > footer ol, +body > footer ol, +html > main p, +body > main p, +html > footer p, +body > footer p { + max-width: 60ch; +} +html > main > h1 + p, +body > main > h1 + p, +html > footer > h1 + p, +body > footer > h1 + p, +html > main > h2 + p, +body > main > h2 + p, +html > footer > h2 + p, +body > footer > h2 + p, +html > main > h3 + p, +body > main > h3 + p, +html > footer > h3 + p, +body > footer > h3 + p, +html > main > h4 + p, +body > main > h4 + p, +html > footer > h4 + p, +body > footer > h4 + p, +html > main > h5 + p, +body > main > h5 + p, +html > footer > h5 + p, +body > footer > h5 + p, +html > main > h6 + p, +body > main > h6 + p, +html > footer > h6 + p, +body > footer > h6 + p { + margin-top: 0; +} +html > main > h1, +body > main > h1, +html > footer > h1, +body > footer > h1, +html > main > h2, +body > main > h2, +html > footer > h2, +body > footer > h2, +html > main > h3, +body > main > h3, +html > footer > h3, +body > footer > h3, +html > main > h4, +body > main > h4, +html > footer > h4, +body > footer > h4, +html > main > h5, +body > main > h5, +html > footer > h5, +body > footer > h5, +html > main > h6, +body > main > h6, +html > footer > h6, +body > footer > h6 { + color: var(--heading-fg); +} +html > main h1, +body > main h1, +html > footer h1, +body > footer h1, +html > main h2, +body > main h2, +html > footer h2, +body > footer h2, +html > main h3, +body > main h3, +html > footer h3, +body > footer h3, +html > main h4, +body > main h4, +html > footer h4, +body > footer h4, +html > main h5, +body > main h5, +html > footer h5, +body > footer h5, +html > main h6, +body > main h6, +html > footer h6, +body > footer h6 { + position: relative; + display: block; +} +html > main h1 .anchor-link, +body > main h1 .anchor-link, +html > footer h1 .anchor-link, +body > footer h1 .anchor-link, +html > main h2 .anchor-link, +body > main h2 .anchor-link, +html > footer h2 .anchor-link, +body > footer h2 .anchor-link, +html > main h3 .anchor-link, +body > main h3 .anchor-link, +html > footer h3 .anchor-link, +body > footer h3 .anchor-link, +html > main h4 .anchor-link, +body > main h4 .anchor-link, +html > footer h4 .anchor-link, +body > footer h4 .anchor-link, +html > main h5 .anchor-link, +body > main h5 .anchor-link, +html > footer h5 .anchor-link, +body > footer h5 .anchor-link, +html > main h6 .anchor-link, +body > main h6 .anchor-link, +html > footer h6 .anchor-link, +body > footer h6 .anchor-link { + flex-grow: 1; + padding: 0 0.5em; + font-weight: normal; + font-size: 75%; + text-decoration: underline; + color: transparent; +} +html > main h1 .anchor-link:focus-visible, +body > main h1 .anchor-link:focus-visible, +html > footer h1 .anchor-link:focus-visible, +body > footer h1 .anchor-link:focus-visible, +html > main h2 .anchor-link:focus-visible, +body > main h2 .anchor-link:focus-visible, +html > footer h2 .anchor-link:focus-visible, +body > footer h2 .anchor-link:focus-visible, +html > main h3 .anchor-link:focus-visible, +body > main h3 .anchor-link:focus-visible, +html > footer h3 .anchor-link:focus-visible, +body > footer h3 .anchor-link:focus-visible, +html > main h4 .anchor-link:focus-visible, +body > main h4 .anchor-link:focus-visible, +html > footer h4 .anchor-link:focus-visible, +body > footer h4 .anchor-link:focus-visible, +html > main h5 .anchor-link:focus-visible, +body > main h5 .anchor-link:focus-visible, +html > footer h5 .anchor-link:focus-visible, +body > footer h5 .anchor-link:focus-visible, +html > main h6 .anchor-link:focus-visible, +body > main h6 .anchor-link:focus-visible, +html > footer h6 .anchor-link:focus-visible, +body > footer h6 .anchor-link:focus-visible { + color: var(--fg); +} +html > main h1:hover .anchor-link, +body > main h1:hover .anchor-link, +html > footer h1:hover .anchor-link, +body > footer h1:hover .anchor-link, +html > main h2:hover .anchor-link, +body > main h2:hover .anchor-link, +html > footer h2:hover .anchor-link, +body > footer h2:hover .anchor-link, +html > main h3:hover .anchor-link, +body > main h3:hover .anchor-link, +html > footer h3:hover .anchor-link, +body > footer h3:hover .anchor-link, +html > main h4:hover .anchor-link, +body > main h4:hover .anchor-link, +html > footer h4:hover .anchor-link, +body > footer h4:hover .anchor-link, +html > main h5:hover .anchor-link, +body > main h5:hover .anchor-link, +html > footer h5:hover .anchor-link, +body > footer h5:hover .anchor-link, +html > main h6:hover .anchor-link, +body > main h6:hover .anchor-link, +html > footer h6:hover .anchor-link, +body > footer h6:hover .anchor-link { + color: var(--fg); +} +@media (max-width: 600px) { + html > main h1 .anchor-link, + body > main h1 .anchor-link, + html > footer h1 .anchor-link, + body > footer h1 .anchor-link, + html > main h2 .anchor-link, + body > main h2 .anchor-link, + html > footer h2 .anchor-link, + body > footer h2 .anchor-link, + html > main h3 .anchor-link, + body > main h3 .anchor-link, + html > footer h3 .anchor-link, + body > footer h3 .anchor-link, + html > main h4 .anchor-link, + body > main h4 .anchor-link, + html > footer h4 .anchor-link, + body > footer h4 .anchor-link, + html > main h5 .anchor-link, + body > main h5 .anchor-link, + html > footer h5 .anchor-link, + body > footer h5 .anchor-link, + html > main h6 .anchor-link, + body > main h6 .anchor-link, + html > footer h6 .anchor-link, + body > footer h6 .anchor-link { + padding: 0 0.25em; + font-weight: normal; + font-size: 75%; + text-decoration: none; + position: absolute; + right: 0; + top: 0; + } +} +html > main > p code, +body > main > p code, +html > footer > p code, +body > footer > p code, +html > main > ol code, +body > main > ol code, +html > footer > ol code, +body > footer > ol code, +html > main > ul code, +body > main > ul code, +html > footer > ul code, +body > footer > ul code, +html > main > h1 code, +body > main > h1 code, +html > footer > h1 code, +body > footer > h1 code, +html > main > h2 code, +body > main > h2 code, +html > footer > h2 code, +body > footer > h2 code, +html > main > h3 code, +body > main > h3 code, +html > footer > h3 code, +body > footer > h3 code, +html > main > h4 code, +body > main > h4 code, +html > footer > h4 code, +body > footer > h4 code, +html > main > h5 code, +body > main > h5 code, +html > footer > h5 code, +body > footer > h5 code, +html > main > h6 code, +body > main > h6 code, +html > footer > h6 code, +body > footer > h6 code, +html > main blockquote code, +body > main blockquote code, +html > footer blockquote code, +body > footer blockquote code { + padding: 0.25em; + border-radius: 0.25em; + background-color: var(--inline-code-bg); +} +html> header, +body> header { + font-family: var(--msff), monospace; + position: relative; + display: flex; + background-color: var(--header-bg); + color: var(--fg); + box-shadow: 0 0 0.5em rgba(0,0,0,0.25); + margin-bottom: 0.5em; +} +@media (max-width: 600px) { + html> header, + body> header { + flex-direction: column; + font-size: 125%; + } +} +html> header> section, +body> header> section { + display: flex; +} +html> header> section > a, +body> header> 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); +} +html> header> section > a:visited, +body> header> section > a:visited { + color: var(--fg); +} +html> header> section > a:hover, +body> header> section > a:hover { + background: var(--header-hover-bg); +} +html> header> section > a> img, +body> header> section > a> img { + max-width: 48px; +} +html> header> section > a> h1, +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:focus, +textarea:focus { + background: var(--input-focus-bg); +} +input:hover, +textarea:hover { + background: var(--input-hover-bg); +} +button, +input[type=submit] { + font: inherit; + background: var(--button-bg); + color: var(--button-fg); + cursor: pointer; + border: 0; + padding: 0.5em 1em; +} +button:focus, +input[type=submit]:focus { + background: var(--button-hover-bg); +} +button:hover, +input[type=submit]:hover { + background: var(--button-hover-bg); +} +.lead { + font-size: 1.5rem; +} +.rounded { + border-radius: 0.5em; +} +table { + border-collapse: collapse; +} +table tr > td.leading { + padding-right: 1em; +} +table tr > th, +table tr > td { + vertical-align: center; + padding: 0.25em 0.5em; + border: solid 1px var(--input-focus-bg); +} +table tr > th { + text-align: center; +} +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; +} +.js-only { + display: none !important; +} +.no-bg { + background: none; +} +.hidden-in-browsers { + display: none; +} +.centerize { + display: flex; + justify-content: center; + align-items: center; + align-content: center; +} +#logo-shadow { + stroke: var(--icon-shadow); +} +@media (max-width: 600px) { + .hidden-on-mobile { + display: none; + } +} +.hide-unless-focused { + transform: translateY(-200%); + position: fixed; + top: 0.5em; + left: 0.5em; + padding: 0.5em 0.8em; + border: dotted 0.1em #ccc; + border-radius: 0.25em; + box-shadow: 0 0 0.5em rgba(0,0,0,0.25); + background: rgba(0,0,0,0.8); +} +.hide-unless-focused:focus { + transform: translateX(0%); +} +.table-container { + position: relative; + max-width: 100vw; + overflow-x: auto; +} +@media (min-width: 600px) { + body.align-left .hide-in-align-left { + display: none; + } + body.align-left .with-align { + text-align: left; + } + body:not(.align-left) .hide-in-align-center { + display: none; + } + body:not(.align-left) .with-align { + text-align: center; + } + body:not(.align-left)> main h1, + body:not(.align-left) > footer h1, + body:not(.align-left)> main h2, + body:not(.align-left) > footer h2, + body:not(.align-left)> main h3, + body:not(.align-left) > footer h3, + body:not(.align-left)> main h4, + body:not(.align-left) > footer h4, + body:not(.align-left)> main h5, + body:not(.align-left) > footer h5, + body:not(.align-left)> main h6, + body:not(.align-left) > footer h6 { + line-height: 1.5em; + text-align: left; + } + body:not(.align-left)> main table, + body:not(.align-left) > footer table { + position: relative; + margin-left: auto; + margin-right: auto; + } + body:not(.align-left)> main h1, + body:not(.align-left) > footer h1, + body:not(.align-left)> main h2, + body:not(.align-left) > footer h2, + body:not(.align-left)> main h3, + body:not(.align-left) > footer h3, + body:not(.align-left)> main h4, + body:not(.align-left) > footer h4, + body:not(.align-left)> main h5, + body:not(.align-left) > footer h5, + body:not(.align-left)> main h6, + body:not(.align-left) > footer h6, + body:not(.align-left)> main form, + body:not(.align-left) > footer form, + body:not(.align-left)> main ul, + body:not(.align-left) > footer ul, + body:not(.align-left)> main ol, + body:not(.align-left) > footer ol, + body:not(.align-left)> main p, + body:not(.align-left) > footer p, + body:not(.align-left)> main .content, + body:not(.align-left) > footer .content, + body:not(.align-left)> main details, + body:not(.align-left) > footer details { + position: relative; + max-width: 600px; + margin-left: auto; + margin-right: auto; + } + body:not(.align-left)> main .highlight pre.chroma, + body:not(.align-left) > footer .highlight pre.chroma { + padding: 0; + display: flex; + flex-direction: column; + width: auto; + flex: 1; + margin-left: auto; + margin-right: auto; + width: 600px; + padding: 0.25em 0.5em; + border-left: solid var(--syntax-bpx) var(--syntax-ledg); + transition: border-color 0.2s; + } + body:not(.align-left)> main .highlight pre.chroma:hover, + body:not(.align-left) > footer .highlight pre.chroma:hover { + border-color: var(--syntax-ledgh); + } + body:not(.align-left)> main img, + body:not(.align-left) > footer img, + body:not(.align-left)> main embed, + body:not(.align-left) > footer embed, + body:not(.align-left)> main frame, + body:not(.align-left) > footer frame, + body:not(.align-left)> main iframe, + body:not(.align-left) > footer iframe { + max-width: 100%; + margin-left: auto; + margin-right: auto; + display: block; + } +} +ul.horizontal-blocks { + display: flex; + flex-wrap: wrap; + list-style: none; + padding: 0; + gap: 0.5em; +} +ul.horizontal-blocks > li { + flex: 1; + display: flex; +} +ul.horizontal-blocks > li > a { + flex-grow: 1; + display: flex; + padding: 0.5em 2em; + background-color: var(--button-bg); + text-align: center; + justify-content: center; + align-items: center; + text-decoration: none; + white-space: nowrap; +} +ul.horizontal-blocks > li > a:hover { + background-color: var(--header-bg); +} +main .highlight pre.chroma { + border: 0; + padding: 0.25em 0.5em; + border-left: solid 0.25em var(--syntax-left-edge); + overflow-y: visible; + 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); +} +.chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; +} +.chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: auto; + overflow: auto; + display: block; +} +.chroma .hl { + display: block; + width: 100%; + background-color: var(--syntax-lhl); +} +.chroma .ln, +.chroma .lnt { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; +} +.chroma .ge { + font-style: italic; +} +.chroma .gs { + font-weight: bold; +} +.chroma .k { + color: var(--syntax-aq); +} +.chroma .kc { + color: var(--syntax-aq); +} +.chroma .kd { + color: var(--syntax-aq); +} +.chroma .kp { + color: var(--syntax-aq); +} +.chroma .kr { + color: var(--syntax-aq); +} +.chroma .kt { + color: var(--syntax-aq); +} +.chroma .no { + color: var(--syntax-aq); +} +.chroma .na { + color: var(--syntax-name); +} +.chroma .nc { + color: var(--syntax-name); +} +.chroma .nd { + color: var(--syntax-name); +} +.chroma .ne { + color: var(--syntax-name); +} +.chroma .gi { + color: var(--syntax-name); +} +.chroma .nf { + color: var(--syntax-name); +} +.chroma .nx { + color: var(--syntax-name); +} +.chroma .l { + color: var(--syntax-lit); +} +.chroma .se { + color: var(--syntax-lit); +} +.chroma .m { + color: var(--syntax-lit); +} +.chroma .mb { + color: var(--syntax-lit); +} +.chroma .mf { + color: var(--syntax-lit); +} +.chroma .mh { + color: var(--syntax-lit); +} +.chroma .mi { + color: var(--syntax-lit); +} +.chroma .il { + color: var(--syntax-lit); +} +.chroma .mo { + color: var(--syntax-lit); +} +.chroma .ld { + color: var(--syntax-lits); +} +.chroma .s { + color: var(--syntax-lits); +} +.chroma .sa { + color: var(--syntax-lits); +} +.chroma .sb { + color: var(--syntax-lits); +} +.chroma .sc { + color: var(--syntax-lits); +} +.chroma .dl { + color: var(--syntax-lits); +} +.chroma .sd { + color: var(--syntax-lits); +} +.chroma .s2 { + color: var(--syntax-lits); +} +.chroma .sh { + color: var(--syntax-lits); +} +.chroma .si { + color: var(--syntax-lits); +} +.chroma .sx { + color: var(--syntax-lits); +} +.chroma .sr { + color: var(--syntax-lits); +} +.chroma .s1 { + color: var(--syntax-lits); +} +.chroma .ss { + color: var(--syntax-lits); +} +.chroma .kn { + color: var(--syntax-mag); +} +.chroma .nt { + color: var(--syntax-mag); +} +.chroma .o { + color: var(--syntax-mag); +} +.chroma .gd { + color: var(--syntax-mag); +} +.chroma .ow { + color: var(--syntax-mag); +} +.chroma .ow { + color: var(--syntax-sh); +} +.chroma .ch { + color: var(--syntax-sh); +} +.chroma .cm { + color: var(--syntax-sh); +} +.chroma .c1 { + color: var(--syntax-sh); +} +.chroma .cs { + color: var(--syntax-sh); +} +.chroma .cp { + color: var(--syntax-sh); +} +.chroma .cpf { + color: var(--syntax-sh); +} +.chroma .gu { + color: var(--syntax-sh); +} +.chroma .gp { + color: var(--syntax-sh); +} +.chroma .go { + color: var(--syntax-sh); +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..d947ab1 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [], + theme: { + extend: {}, + }, + plugins: [], +} +