From 0a90fef2e2c74d9b46af406d79eb1592e07533b0 Mon Sep 17 00:00:00 2001 From: Anirudh Oppiliappan Date: Sun, 6 Apr 2025 22:38:38 +0300 Subject: [PATCH] appview: switch to Inter and IBM Plex Mono --- flake.lock | 33 +++++++++++------ flake.nix | 21 +++++++---- input.css | 88 +++++----------------------------------------- tailwind.config.js | 81 +++++++++++++++++++++++------------------- 4 files changed, 89 insertions(+), 134 deletions(-) diff --git a/flake.lock b/flake.lock index 03fb60cc..368b8f62 100644 --- a/flake.lock +++ b/flake.lock @@ -32,20 +32,17 @@ "url": "https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js" } }, - "ia-fonts-src": { + "ibm-plex-mono-src": { "flake": false, "locked": { - "lastModified": 1686932517, - "narHash": "sha256-2T165nFfCzO65/PIHauJA//S+zug5nUwPcg8NUEydfc=", - "owner": "iaolo", - "repo": "iA-Fonts", - "rev": "f32c04c3058a75d7ce28919ce70fe8800817491b", - "type": "github" + "lastModified": 1731402384, + "narHash": "sha256-OwUmrPfEehLDz0fl2ChYLK8FQM2p0G1+EMrGsYEq+6g=", + "type": "tarball", + "url": "https://github.com/IBM/plex/releases/download/@ibm/plex-mono@1.1.0/ibm-plex-mono.zip" }, "original": { - "owner": "iaolo", - "repo": "iA-Fonts", - "type": "github" + "type": "tarball", + "url": "https://github.com/IBM/plex/releases/download/@ibm/plex-mono@1.1.0/ibm-plex-mono.zip" } }, "indigo": { @@ -64,6 +61,19 @@ "type": "github" } }, + "inter-fonts-src": { + "flake": false, + "locked": { + "lastModified": 1731680160, + "narHash": "sha256-5vdKKvHAeZi6igrfpbOdhZlDX2/5+UvzlnCQV6DdqoQ=", + "type": "tarball", + "url": "https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip" + }, + "original": { + "type": "tarball", + "url": "https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip" + } + }, "lucide-src": { "flake": false, "locked": { @@ -97,8 +107,9 @@ "inputs": { "gitignore": "gitignore", "htmx-src": "htmx-src", - "ia-fonts-src": "ia-fonts-src", + "ibm-plex-mono-src": "ibm-plex-mono-src", "indigo": "indigo", + "inter-fonts-src": "inter-fonts-src", "lucide-src": "lucide-src", "nixpkgs": "nixpkgs" } diff --git a/flake.nix b/flake.nix index 5b25088d..5a51f0c2 100644 --- a/flake.nix +++ b/flake.nix @@ -15,10 +15,14 @@ url = "https://github.com/lucide-icons/lucide/releases/download/0.483.0/lucide-icons-0.483.0.zip"; flake = false; }; - ia-fonts-src = { - url = "github:iaolo/iA-Fonts"; + inter-fonts-src = { + url = "https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip"; flake = false; }; + ibm-plex-mono-src = { + url = "https://github.com/IBM/plex/releases/download/%40ibm%2Fplex-mono%401.1.0/ibm-plex-mono.zip"; + flake = false; + }; gitignore = { url = "github:hercules-ci/gitignore.nix"; inputs.nixpkgs.follows = "nixpkgs"; @@ -32,7 +36,8 @@ htmx-src, lucide-src, gitignore, - ia-fonts-src, + inter-fonts-src, + ibm-plex-mono-src, }: let supportedSystems = ["x86_64-linux" "x86_64-darwin" "aarch64-linux" "aarch64-darwin"]; forAllSystems = nixpkgs.lib.genAttrs supportedSystems; @@ -74,8 +79,9 @@ mkdir -p appview/pages/static/{fonts,icons} cp -f ${htmx-src} appview/pages/static/htmx.min.js cp -rf ${lucide-src}/*.svg appview/pages/static/icons/ - cp -f ${ia-fonts-src}/"iA Writer Quattro"/Static/*.ttf appview/pages/static/fonts/ - cp -f ${ia-fonts-src}/"iA Writer Mono"/Static/*.ttf appview/pages/static/fonts/ + cp -f ${inter-fonts-src}/Inter/web/InterVariable*.woff2 appview/pages/static/fonts/ + cp -f ${inter-fonts-src}/Inter/web/InterDisplay*.woff2 appview/pages/static/fonts/ + cp -f ${ibm-plex-mono-src}/fonts/complete/woff2/IBMPlexMono-Regular.woff2 appview/pages/static/fonts/ ${pkgs.tailwindcss}/bin/tailwindcss -i input.css -o appview/pages/static/tw.css popd ''; @@ -153,8 +159,9 @@ mkdir -p appview/pages/static/{fonts,icons} cp -f ${htmx-src} appview/pages/static/htmx.min.js cp -rf ${lucide-src}/*.svg appview/pages/static/icons/ - cp -f ${ia-fonts-src}/"iA Writer Quattro"/Static/*.ttf appview/pages/static/fonts/ - cp -f ${ia-fonts-src}/"iA Writer Mono"/Static/*.ttf appview/pages/static/fonts/ + cp -f ${inter-fonts-src}/web/InterVariable*.woff2 appview/pages/static/fonts/ + cp -f ${inter-fonts-src}/web/InterDisplay*.woff2 appview/pages/static/fonts/ + cp -f ${ibm-plex-mono-src}/fonts/complete/woff2/IBMPlexMono-Regular.woff2 appview/pages/static/fonts/ ''; }; }); diff --git a/input.css b/input.css index 32a40567..11cd1478 100644 --- a/input.css +++ b/input.css @@ -3,108 +3,36 @@ @tailwind utilities; @layer base { @font-face { - font-family: "iA Writer Quattro S"; - src: url("/static/fonts/iAWriterQuattroS-Regular.ttf") - format("truetype"); + font-family: "InterVariable"; + src: url("/static/fonts/InterVariable.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; - font-feature-settings: - "calt" 1, - "kern" 1; - } - @font-face { - font-family: "iA Writer Quattro S"; - src: url("/static/fonts/iAWriterQuattroS-Bold.ttf") format("truetype"); - font-weight: bold; - font-style: normal; - font-display: swap; - font-feature-settings: - "calt" 1, - "kern" 1; } + @font-face { - font-family: "iA Writer Quattro S"; - src: url("/static/fonts/iAWriterQuattroS-Italic.ttf") format("truetype"); + font-family: "InterVariable"; + src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; - font-feature-settings: - "calt" 1, - "kern" 1; - } - @font-face { - font-family: "iA Writer Quattro S"; - src: url("/static/fonts/iAWriterQuattroS-BoldItalic.ttf") - format("truetype"); - font-weight: bold; - font-style: italic; - font-display: swap; - font-feature-settings: - "calt" 1, - "kern" 1; } @font-face { - font-family: "iA Writer Mono S"; - src: url("/static/fonts/iAWriterMonoS-Regular.ttf") format("truetype"); - font-weight: normal; - font-style: normal; - font-display: swap; - font-feature-settings: - "calt" 1, - "kern" 1; - } - @font-face { - font-family: "iA Writer Mono S"; - src: url("/static/fonts/iAWriterMonoS-Bold.ttf") format("truetype"); - font-weight: bold; - font-style: normal; - font-display: swap; - font-feature-settings: - "calt" 1, - "kern" 1; - } - @font-face { - font-family: "iA Writer Mono S"; - src: url("/static/fonts/iAWriterMonoS-Italic.ttf") format("truetype"); + font-family: "IBMPlexMono"; + src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; - font-feature-settings: - "calt" 1, - "kern" 1; - } - @font-face { - font-family: "iA Writer Mono S"; - src: url("/static/fonts/iAWriterMonoS-BoldItalic.ttf") - format("truetype"); - font-weight: bold; - font-style: italic; - font-display: swap; - font-feature-settings: - "calt" 1, - "kern" 1; } - @font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 400; - font-display: swap; - font-feature-settings: - "calt" 1, - "kern" 1; - } ::selection { @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white; } @layer base { html { - letter-spacing: -0.01em; - word-spacing: -0.07em; - font-size: 14px; + font-size: 15px; } a { @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300; diff --git a/tailwind.config.js b/tailwind.config.js index 93eae04d..d132a5eb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,40 +2,49 @@ const colors = require("tailwindcss/colors"); module.exports = { - content: ["./appview/pages/templates/**/*.html", "./appview/pages/chroma.go"], - darkMode: "media", - theme: { - container: { - padding: "2rem", - center: true, - screens: { - sm: "500px", - md: "600px", - lg: "800px", - xl: "1000px", - "2xl": "1200px" - }, - }, - extend: { - fontFamily: { - sans: ["iA Writer Quattro S", "Inter", "system-ui", "sans-serif", "ui-sans-serif"], - mono: ["iA Writer Mono S", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"], - }, - typography: { - DEFAULT: { - css: { - maxWidth: 'none', - pre: { - backgroundColor: colors.gray[100], - color: colors.black, - '@apply dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 dark:border': {} - }, - }, - }, - }, - }, - }, - plugins: [ - require('@tailwindcss/typography'), - ] + content: ["./appview/pages/templates/**/*.html", "./appview/pages/chroma.go"], + darkMode: "media", + theme: { + container: { + padding: "2rem", + center: true, + screens: { + sm: "500px", + md: "600px", + lg: "800px", + xl: "1000px", + "2xl": "1200px", + }, + }, + extend: { + fontFamily: { + sans: ["InterVariable", "system-ui", "sans-serif", "ui-sans-serif"], + mono: [ + "IBMPlexMono", + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "Liberation Mono", + "Courier New", + "monospace", + ], + }, + typography: { + DEFAULT: { + css: { + maxWidth: "none", + pre: { + backgroundColor: colors.gray[100], + color: colors.black, + "@apply dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 dark:border": + {}, + }, + }, + }, + }, + }, + }, + plugins: [require("@tailwindcss/typography")], }; -- 2.51.2