Customise for Modulo Notes

README.md

@@ -1,3 +1,5 @@
-# Iosevka Iaso font set
+# Iosevka Modulo font set
 
-This contains my variants of Iosevka that I will use across my websites.
+Forked from [Xe's custom Iosevka build](https://github.com/Xe/iosevka/).
+
+This contains a variant of Iosevka for use in Modulo Notes.

flake.nix

@@ -1,5 +1,5 @@
 {
-  description = "Iosevka Iaso fonts";
+  description = "Iosevka fonts for Modulo Notes";
 
   inputs = {
     nixpkgs.url = "nixpkgs/nixos-unstable";
@@ -11,30 +11,25 @@
       let pkgs = import nixpkgs { inherit system; };
       in {
         packages.default = pkgs.stdenvNoCC.mkDerivation {
-          name = "iosevka-iaso";
+          name = "iosevka-modulo";
           dontUnpack = true;
           buildInputs = with pkgs; [ python311Packages.brotli python311Packages.fonttools ];
           buildPhase = let
-            metric-override = {
+            iosevka-regular = pkgs.iosevka.override {
-              cap = 790;
+              set = "regular";
-              ascender = 790;
-              xHeight = 570;
-            };
-            iosevka-curly = pkgs.iosevka.override {
-              set = "curly";
               privateBuildPlan = {
-                family = "Iosevka Curly Iaso";
+                family = "Iosevka Regular Modulo";
-                spacing = "term";
+                spacing = "normal";
                 serifs = "sans";
                 no-ligation = false;
-                ligations = { "inherit" = "default-calt"; };
                 no-cv-ss = true;
                 variants = {
-                  inherits = "ss01";
                   design = {
-                    tilde = "low";
+                    l = "flat-tailed";
+                    zero = "dotted";
+                    asterisk = "turn-hex-high";
                     number-sign = "slanted-tall";
-                    at = "fourfold-solid-inner-tall";
+                    at = "fourfold-solid-inner";
                   };
                 };
                 slopes.upright = {
@@ -43,54 +38,27 @@
                   menu = "upright";
                   css = "normal";
                 };
-                weights.regular = {
+                slopes.italic = {
-                  shape = 400;
+                  angle = 9.4;
-                  menu = 400;
+                  shape = "italic";
-                  css = 400;
+                  menu = "italic";
-                };
+                  css = "italic";
-                widths.normal = {
-                  shape = 500;
-                  menu = 7;
-                  css = "normal";
-                };
-                inherit metric-override;
-              };
-            };
-            iosevka-aile = pkgs.iosevka.override {
-              set = "aile";
-              privateBuildPlan = {
-                family = "Iosevka Aile Iaso";
-                spacing = "quasi-proportional";
-                no-ligation = true;
-                no-cv-ss = true;
-                variants = {
-                  inherits = "ss01";
-                  design = {
-                    tilde = "low";
-                    number-sign = "slanted-tall";
-                    at = "fourfold-solid-inner-tall";
-                  };
-                };
-                slopes = {
-                  upright = {
-                    angle = 0;
-                    shape = "upright";
-                    menu = "upright";
-                    css = "normal";
-                  };
-                  italic = {
-                    angle = 9.4;
-                    shape = "italic";
-                    menu = "italic";
-                    css = "italic";
-                  };
                 };
                 weights.regular = {
                   shape = 400;
                   menu = 400;
                   css = 400;
                 };
-                inherit metric-override;
+                weights.bold = {
+                  shape = 700;
+                  menu = 700;
+                  css = 700;
+                };
+                weights.heavy = {
+                  shape = 900;
+                  menu = 900;
+                  css = 900;
+                };
               };
             };
             iosevka-etoile = pkgs.iosevka.override {
@@ -102,23 +70,13 @@
                 no-ligation = true;
                 no-cv-ss = true;
                 variants = {
-                  inherits = "ss01";
                   design = {
-                    capital-w = "straight-flat-top";
+                    l = "serifed-flat-tailed";
-                    f = "flat-hook-serifed";
+                    zero = "dotted";
-                    j = "flat-hook-serifed";
+                    asterisk = "turn-hex-high";
-                    t = "flat-hook";
-                    capital-t = "serifed"; # not part of original Iosevka Aile
-                    w = "straight-flat-top";
-                    #capital-g = "toothless-rounded-serifless-hooked";
-                    i = "zshaped";
-                    r = "serifed";
-
-                    tilde = "low";
                     number-sign = "slanted-tall";
-                    at = "fourfold-solid-inner-tall";
+                    at = "fourfold-solid-inner";
                   };
-                  italic = { f = "flat-hook-tailed"; };
                 };
                 slopes = {
                   upright = {
@@ -139,12 +97,21 @@
                   menu = 400;
                   css = 400;
                 };
-                inherit metric-override;
+                weights.bold = {
+                  shape = 700;
+                  menu = 700;
+                  css = 700;
+                };
+                weights.heavy = {
+                  shape = 900;
+                  menu = 900;
+                  css = 900;
+                };
               };
             };
           in ''
             mkdir -p ttf
-            for ttf in ${iosevka-curly}/share/fonts/truetype/*.ttf ${iosevka-aile}/share/fonts/truetype/*.ttf ${iosevka-etoile}/share/fonts/truetype/*.ttf; do
+            for ttf in ${iosevka-regular}/share/fonts/truetype/*.ttf ${iosevka-etoile}/share/fonts/truetype/*.ttf; do
               cp $ttf .
 
               echo "processing $ttf"

src/family.css

@@ -1,36 +1,21 @@
 @font-face {
-    font-family: "Iosevka Aile Iaso";
+    font-family: "Iosevka Regular Modulo";
-    font-weight: 100 900;
+    font-weight: 400 700 900;
-    font-style: normal;
+    src: local("Iosevka Regular Modulo")
-    src: local("Iosevka Aile Iaso")
+       , url("iosevka-regular-regular.woff2") format("woff2");
-       , url("iosevka-aile-regular.woff2") format("woff2");
-}
-@font-face {
-    font-family: "Iosevka Aile Iaso";
-    font-weight: 100 900;
-    font-style: italic;
-    src: local("Iosevka Aile Iaso")
-       , url("iosevka-aile-italic.woff2") format("woff2");
-}
-    
-@font-face {
-    font-family: "Iosevka Curly Iaso";
-    font-weight: 100 900;
-    src: local("Iosevka Curly Iaso")
-       , url("iosevka-curly-regular.woff2") format("woff2");
 }
 
 @font-face {
-    font-family: "Iosevka Etoile Iaso";
+    font-family: "Iosevka Etoile Modulo";
-    font-weight: 100 900;
+    font-weight: 400 700 900;
     font-style: normal;
-    src: local("Iosevka Etoile Iaso")
+    src: local("Iosevka Etoile Modulo")
        , url("iosevka-etoile-regular.woff2") format("woff2");
 }
 @font-face {
-    font-family: "Iosevka Etoile Iaso";
+    font-family: "Iosevka Etoile Modulo";
-    font-weight: 100 900;
+    font-weight: 400 700 900;
     font-style: italic;
-    src: local("Iosevka Etoile Iaso")
+    src: local("Iosevka Etoile Modulo")
        , url("iosevka-etoile-italic.woff2") format("woff2");
 }

src/specimen.py

@@ -4,24 +4,18 @@ header = '''
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Iosevka Iaso Specimen</title>
+        <title>Iosevka Modulo Specimen</title>
-        <link type="text/css" rel="stylesheet" href="https://within.website/static/gruvbox.css">
         <link type="text/css" rel="stylesheet" href="./family.css">
         <style>
-         .aile {
+         .normal {
-            font-family: "Iosevka Aile Iaso";
+            font-family: "Iosevka Regular Modulo";
-            font-weight: 400;
-         }
-         .curly {
-            font-family: "Iosevka Curly Iaso";
          }
          .etoile {
-            font-family: "Iosevka Etoile Iaso";
+            font-family: "Iosevka Etoile Modulo";
          }
          big {
             font-size: xx-large;
          }
-
          main {
             max-width: 60rem;
          }
@@ -30,18 +24,16 @@ header = '''
     </head>
     <body class="snow" id="top">
         <main>
-            <h1 class="etoile">Iosevka Iaso Specimen</h1>
+            <h1 class="etoile">Iosevka Modulo Specimen</h1>
-            <p class="aile">This page will demonstrate the Iosevka Iaso font family.</p>
+            <p class="aile">This page will demonstrate the Iosevka Modulo font family.</p>
 
-            <h2 class="etoile">Usage</h2>
+            <h2 class="etoile">Usage:</h2>
-            <p class="aile">To use this font family, import this CSS:</p>
+            <p class="normal">Don't.</p>
-            <code class="curly"><pre>&lt;link rel="stylesheet" href="https://cdn.xeiaso.net/static/css/iosevka/family.css" /&gt;</pre></code>
-            <p class="aile">Then use the fonts as normal.</p>
 '''
 
 footer = '''
             <footer>
-                <p>Xe Iaso</p>
+                <p>Daniel Patterson</p>
             </footer>
         </main>
     </body>
@@ -49,15 +41,14 @@ footer = '''
 '''
 
 blurbs = {
-    "Aile": "Designed for body text. A quasi-proportional font that evokes moods of the terminal days gone past.",
+    "Regular": "Designed for code.",
-    "Curly": "Designed for code. The hacker's canvas and ink.",
+    "Etoile": "Designed for stuff.",
-    "Etoile": "Designed for titles. A serifed font that oozes modernity and classic sensibilities.",
 }
 
 with open("specimen.html", "w") as fout:
     fout.write(header)
 
-    for family in ["Aile", "Curly", "Etoile"]:
+    for family in ["Regular", "Etoile"]:
         fout.write(f'''
         <h2 class="{family.lower()}">{family}</h2>
         <p class="{family.lower()}">{blurbs[family]}</p>