Customise for Modulo Notes

This commit is contained in:
2023-06-29 00:41:04 +01:00
parent 85a6850cf6
commit 89ad5307ee
4 changed files with 66 additions and 121 deletions

View File

@@ -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.

113
flake.nix
View File

@@ -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 = {
cap = 790;
ascender = 790;
xHeight = 570;
};
iosevka-curly = pkgs.iosevka.override {
set = "curly";
iosevka-regular = pkgs.iosevka.override {
set = "regular";
privateBuildPlan = {
family = "Iosevka Curly Iaso";
spacing = "term";
family = "Iosevka Regular Modulo";
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 = {
shape = 400;
menu = 400;
css = 400;
};
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";
};
slopes.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";
f = "flat-hook-serifed";
j = "flat-hook-serifed";
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";
l = "serifed-flat-tailed";
zero = "dotted";
asterisk = "turn-hex-high";
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"

View File

@@ -1,36 +1,21 @@
@font-face {
font-family: "Iosevka Aile Iaso";
font-weight: 100 900;
font-style: normal;
src: local("Iosevka Aile Iaso")
, 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-family: "Iosevka Regular Modulo";
font-weight: 400 700 900;
src: local("Iosevka Regular Modulo")
, url("iosevka-regular-regular.woff2") format("woff2");
}
@font-face {
font-family: "Iosevka Etoile Iaso";
font-weight: 100 900;
font-family: "Iosevka Etoile Modulo";
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-weight: 100 900;
font-family: "Iosevka Etoile Modulo";
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");
}

View File

@@ -4,24 +4,18 @@ header = '''
<!DOCTYPE html>
<html>
<head>
<title>Iosevka Iaso Specimen</title>
<link type="text/css" rel="stylesheet" href="https://within.website/static/gruvbox.css">
<title>Iosevka Modulo Specimen</title>
<link type="text/css" rel="stylesheet" href="./family.css">
<style>
.aile {
font-family: "Iosevka Aile Iaso";
font-weight: 400;
}
.curly {
font-family: "Iosevka Curly Iaso";
.normal {
font-family: "Iosevka Regular Modulo";
}
.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>
<p class="aile">This page will demonstrate the Iosevka Iaso font family.</p>
<h1 class="etoile">Iosevka Modulo Specimen</h1>
<p class="aile">This page will demonstrate the Iosevka Modulo font family.</p>
<h2 class="etoile">Usage</h2>
<p class="aile">To use this font family, import this CSS:</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>
<h2 class="etoile">Usage:</h2>
<p class="normal">Don't.</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.",
"Curly": "Designed for code. The hacker's canvas and ink.",
"Etoile": "Designed for titles. A serifed font that oozes modernity and classic sensibilities.",
"Regular": "Designed for code.",
"Etoile": "Designed for stuff.",
}
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>