web: host grotesk draws the ui and prose and kode mono the code, the repo name and the tabs, in place of outfit and maple mono
Signed-off-by: dawn <dawn@tangled.org>
109 unmodified linesExpand all11011111211311411511611711811912012112212312412512612712812913040 unmodified lines17117217317416217517617717816617918016818118218318417218518618718818947 unmodified lines23723823924022822923023123223323423523623723823924024124224324424524624724824925025125125225325425525525625725825978 unmodified lines109 unmodified linesExpand all "repo": "gomod2nix", "type": "github" } }, "host-grotesk-src": { "flake": false, "locked": { "lastModified": 499162500, "narHash": "sha256-bs8SEqMPbZSa4czejPlaxJ31yraYVP/DfuDjOMIlWgc=", "type": "tarball", "url": "https://registry.npmjs.org/@fontsource/host-grotesk/-/host-grotesk-5.3.0.tgz" }, "original": { "type": "tarball", "url": "https://registry.npmjs.org/@fontsource/host-grotesk/-/host-grotesk-5.3.0.tgz" } }, "hydrant": { "flake": false, "locked": { "lastModified": 1792544679,40 unmodified lines "repo": "indigo", "type": "github" } }, "maple-mono-src": { "kode-mono-src": { "flake": false, "locked": { "lastModified": 499162500, "narHash": "sha256-dLPdcm6c4/PqPfgAVcvBj7pRKoVoaqGbRFqoQWZm9Hk=", "narHash": "sha256-NIdM9SFwEg5Zo7Qbe8j2Xrdpi0JM9j0lcyvWhW1ahIg=", "type": "tarball", "url": "https://registry.npmjs.org/@fontsource/maple-mono/-/maple-mono-5.3.0.tgz" "url": "https://registry.npmjs.org/@fontsource/kode-mono/-/kode-mono-5.3.0.tgz" }, "original": { "type": "tarball", "url": "https://registry.npmjs.org/@fontsource/maple-mono/-/maple-mono-5.3.0.tgz" "url": "https://registry.npmjs.org/@fontsource/kode-mono/-/kode-mono-5.3.0.tgz" } }, "microvm": { "inputs": {47 unmodified lines "repo": "nixpkgs", "type": "github" } }, "outfit-src": { "flake": false, "locked": { "lastModified": 499162500, "narHash": "sha256-cumnAfh8tmt/GdYt+nqTka+o6M656VPZfHAp3xRXGKM=", "type": "tarball", "url": "https://registry.npmjs.org/@fontsource/outfit/-/outfit-5.3.0.tgz" }, "original": { "type": "tarball", "url": "https://registry.npmjs.org/@fontsource/outfit/-/outfit-5.3.0.tgz" } }, "root": { "inputs": { "fenix": "fenix", "fetch-tangled": "fetch-tangled", "flake-compat": "flake-compat", "glisten-src": "glisten-src", "gomod2nix": "gomod2nix", "host-grotesk-src": "host-grotesk-src", "hydrant": "hydrant", "hydrant-dev": "hydrant-dev", "indigo": "indigo", "maple-mono-src": "maple-mono-src", "kode-mono-src": "kode-mono-src", "microvm": "microvm", "nixpkgs": "nixpkgs", "nixpkgs-pds": "nixpkgs-pds", "outfit-src": "outfit-src", "sqlite-lib-src": "sqlite-lib-src", "timeless-fonts-src": "timeless-fonts-src" } },78 unmodified lines25 unmodified lines26272829303130313233343534353637383927 unmodified lines676869707172717273747576142 unmodified linesExpand all219220221222223223224225226227606 unmodified linesExpand all25 unmodified lines timeless-fonts-src = { url = "https://media.timeless.co/type/Timeless-Type-Family-1.094.zip"; flake = false; }; outfit-src = { url = "https://registry.npmjs.org/@fontsource/outfit/-/outfit-5.3.0.tgz"; host-grotesk-src = { url = "https://registry.npmjs.org/@fontsource/host-grotesk/-/host-grotesk-5.3.0.tgz"; flake = false; }; maple-mono-src = { url = "https://registry.npmjs.org/@fontsource/maple-mono/-/maple-mono-5.3.0.tgz"; kode-mono-src = { url = "https://registry.npmjs.org/@fontsource/kode-mono/-/kode-mono-5.3.0.tgz"; flake = false; }; sqlite-lib-src = { url = "https://sqlite.org/2024/sqlite-amalgamation-3450100.zip";27 unmodified lines gomod2nix, indigo, timeless-fonts-src, sqlite-lib-src, outfit-src, maple-mono-src, host-grotesk-src, kode-mono-src, microvm, fetch-tangled, hydrant, hydrant-dev,142 unmodified linesExpand all }; lexgen = self.callPackage ./nix/pkgs/lexgen.nix {inherit indigo;}; goat = self.callPackage ./nix/pkgs/goat.nix {inherit indigo;}; web-static-files = self.callPackage ./nix/pkgs/web-static-files.nix { inherit outfit-src maple-mono-src; inherit host-grotesk-src kode-mono-src; }; glisten = self.callPackage ./nix/pkgs/glisten.nix { inherit glisten-src; };606 unmodified linesExpand all123453457891011121367891516171810111213141516172021222324252627282930313233341819202122{ runCommandLocal, python3, outfit-src, maple-mono-src, host-grotesk-src, kode-mono-src, dolly,}: let fonttools = python3.withPackages (ps: [ps.fonttools ps.brotli]); # fontsource's latin range latin = "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD";in runCommandLocal "web-static-files" {nativeBuildInputs = [fonttools];} '' mkdir -p $out/{fonts,logos}}:runCommandLocal "web-static-files" {} '' mkdir -p $out/{fonts,logos}
for weight in 400 500 600 700; do cp -f ${outfit-src}/files/outfit-latin-$weight-normal.woff2 $out/fonts/ done cp -f ${outfit-src}/LICENSE $out/fonts/outfit-LICENSE.txt # fontsource's latin subsets, each already only a few kb for weight in 400 500 600 700; do cp -f ${host-grotesk-src}/files/host-grotesk-latin-$weight-normal.woff2 $out/fonts/ cp -f ${kode-mono-src}/files/kode-mono-latin-$weight-normal.woff2 $out/fonts/ done cp -f ${host-grotesk-src}/LICENSE $out/fonts/host-grotesk-LICENSE.txt cp -f ${kode-mono-src}/LICENSE $out/fonts/kode-mono-LICENSE.txt
# maple mono's ligatures and character variants are most of its size, and code shows as written for weight in 400 700; do for style in normal italic; do pyftsubset ${maple-mono-src}/files/maple-mono-latin-$weight-$style.woff2 \ --unicodes=${latin} --layout-features=kern,mark,mkmk --flavor=woff2 \ --output-file=$out/fonts/maple-mono-latin-$weight-$style.woff2 done done cp -f ${maple-mono-src}/LICENSE $out/fonts/maple-mono-LICENSE.txt
${dolly}/bin/dolly -output $out/logos/dolly.png -size 180 ${dolly}/bin/dolly -output $out/logos/dolly.ico -size 48 ${dolly}/bin/dolly -output $out/logos/dolly.svg -color currentColor -favicon ${dolly}/bin/dolly -output $out/logos/logotype.svg -kind logotype -color currentColor '' ${dolly}/bin/dolly -output $out/logos/dolly.png -size 180 ${dolly}/bin/dolly -output $out/logos/dolly.ico -size 48 ${dolly}/bin/dolly -output $out/logos/dolly.svg -color currentColor -favicon ${dolly}/bin/dolly -output $out/logos/logotype.svg -kind logotype -color currentColor''14 unmodified lines151617181919202122232425262627282930313233333435363738394040414243444546474748495051525354545556575828 unmodified lines14 unmodified lines <link rel="apple-touch-icon" href="/logos/dolly.png" /> <!-- the faces a page's first screen draws, so it paints in them and not in a fallback --> <link rel="preload" href="/fonts/outfit-latin-400-normal.woff2" href="/fonts/host-grotesk-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/maple-mono-latin-400-normal.woff2" href="/fonts/kode-mono-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/outfit-latin-600-normal.woff2" href="/fonts/host-grotesk-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/outfit-latin-700-normal.woff2" href="/fonts/kode-mono-latin-700-normal.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/maple-mono-latin-700-normal.woff2" href="/fonts/kode-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/outfit-latin-500-normal.woff2" href="/fonts/host-grotesk-latin-500-normal.woff2" as="font" type="font/woff2" crossorigin />28 unmodified lines2 unmodified lines34567878910111213141516151617181920212223242324252627282930313231323334353637383940394041424344454647484950474849505152535455565755565758596061626364636465666667682 unmodified lines
/* block, not swap: the head preloads the faces a first screen draws, so a page paints once they're in instead of painting a fallback and swapping */@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin-400-normal.woff2") format("woff2"); font-family: "Host Grotesk"; src: url("/fonts/host-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block;}
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin-500-normal.woff2") format("woff2"); font-family: "Host Grotesk"; src: url("/fonts/host-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block;}
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin-600-normal.woff2") format("woff2"); font-family: "Host Grotesk"; src: url("/fonts/host-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block;}
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin-700-normal.woff2") format("woff2"); font-family: "Host Grotesk"; src: url("/fonts/host-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block;}
@font-face { font-family: "Maple Mono"; src: url("/fonts/maple-mono-latin-400-normal.woff2") format("woff2"); font-family: "Kode Mono"; src: url("/fonts/kode-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block;}
@font-face { font-family: "Maple Mono"; src: url("/fonts/maple-mono-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-family: "Kode Mono"; src: url("/fonts/kode-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block;}
@font-face { font-family: "Maple Mono"; src: url("/fonts/maple-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-family: "Kode Mono"; src: url("/fonts/kode-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block;}
@font-face { font-family: "Maple Mono"; src: url("/fonts/maple-mono-latin-700-italic.woff2") format("woff2"); font-family: "Kode Mono"; src: url("/fonts/kode-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: italic; font-style: normal; font-display: block;}174 unmodified linesExpand all175176177178179180181179180181182183184185325 unmodified linesExpand all174 unmodified linesExpand all }}
@layer base { /* outfit's x-height is lower than maple mono's: both are drawn at one x-height, so a size reads the same in either and a fallback face lands close. ui digits are tabular, so counts and ages hold their columns */ /* host grotesk and kode mono both have an x-height of half the em: this holds a fallback face there too, so a size reads the same whichever face draws it. ui digits are tabular, so counts and ages hold their columns */ html { font-size-adjust: ex-height 0.5; } body {325 unmodified linesExpand all29 unmodified lines303132333434353636373839401031 unmodified linesExpand all29 unmodified lines@theme { --radius-sm: 0.375rem; --radius-md: 0.5rem;
--font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif; --font-sans: "Host Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "Maple Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Kode Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-sans--font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
1031 unmodified linesExpand all161 unmodified linesExpand all16216316416516616716816917032 unmodified lines20320420520620720820921021163 unmodified lines161 unmodified linesExpand all .name { flex: 0 1 auto; min-width: var(--keep); color: var(--y-text); font-family: var(--font-mono); font-weight: 700; } .own, .name {32 unmodified lines color: var(--y-accent); } .full a + .sl + a { color: var(--y-text); font-family: var(--font-mono); font-weight: 700; } .clone { display: flex;63 unmodified lines141 unmodified linesExpand all14214314414514614714814915076 unmodified lines141 unmodified linesExpand all .tabs { border: 0; border-right: 1px solid var(--y-border); background: transparent; font-family: var(--font-mono); font-size: 0.86em; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;76 unmodified lines