Add pages

pages/src/assets/css/about.css

@@ -0,0 +1,8 @@
+#endmin-thumbsup {
+  width: 200px;
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: -1000;
+}

pages/src/assets/css/essentials.css

@@ -0,0 +1,66 @@
+@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+@import "../fonts/line_seed/line_seed.css";
+@import "../fonts/iosevka/Iosevka.css";
+/* @import "../fonts/novecento_sans/novecento_sans.css"; */
+@import "../fonts/novecento_sans/novecento_sans_wide_number_only.css";
+/* @import "../fonts/novecento_sans/novecento_sans_normal_number_only.css"; */
+@import "../fonts/harmonyos_sans/harmonyos_sans.css";
+/* @import "../fonts/dseg/dseg.css"; */
+
+:root {
+  /* --ddjson-custom-font-main: 'Malgun Gothic'; */
+  /* --ddjson-custom-font-main:
+    "Inter", "LINE Seed JP (Web)", "Noto Sans JP", "Noto Sans SC", "SF Pro",
+    -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif, system-ui; */
+  --ddjson-custom-font-main:
+    "Novecento Sans Wide (Number Only)", "HarmonyOS Sans", "Noto Sans JP",
+    "Noto Sans SC", "SF Pro", -apple-system, "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial",
+    sans-serif, system-ui;
+  --ddjson-custom-font-mono:
+    "Iosevka Web", "JetBrains Mono", "SF Mono", "Noto Sans JP", "Noto Sans SC",
+    "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",
+    "Courier New", monospace, sans-serif, system-ui;
+}
+
+html,
+body {
+  font-family: var(--ddjson-custom-font-main);
+  font-feature-settings:
+    "liga" 1,
+    "calt" 1,
+    "palt";
+  word-break: auto-phrase;
+}
+
+.font-monospace {
+  font-family: var(--ddjson-custom-font-mono) !important;
+  font-feature-settings: "palt" 0 !important;
+}
+
+pre,
+code,
+kbd,
+samp,
+tt {
+  font-family: var(--ddjson-custom-font-mono);
+  font-feature-settings: "palt" 0;
+}
+
+.material-symbols-outlined {
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 400,
+    "GRAD" 0,
+    "opsz" 24;
+  font-size: inherit;
+}
+
+.user-drag-none {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

pages/src/assets/css/index.css

@@ -0,0 +1,15 @@
+#debug-log-inner {
+  display: block;
+  white-space: pre-wrap !important;
+}
+
+#debug-log-inner div {
+  padding-left: 15ch;
+  text-indent: -15ch;
+  margin: 0;
+}
+
+.accordion-button {
+  padding: calc(var(--bs-accordion-btn-padding-y) / 1.5)
+    calc(var(--bs-accordion-btn-padding-x) / 1.5);
+}

pages/src/assets/fonts/harmonyos_sans/harmonyos_sans.css

@@ -0,0 +1,321 @@
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: normal;
+  font-style: normal;
+  src:
+    url("./normal/harmonyos_sans_thin.woff2") format("woff2"),
+    url("./normal/harmonyos_sans_thin.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: normal;
+  font-style: normal;
+  src:
+    url("./normal/harmonyos_sans_light.woff2") format("woff2"),
+    url("./normal/harmonyos_sans_light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: normal;
+  font-style: normal;
+  src:
+    url("./normal/harmonyos_sans_regular.woff2") format("woff2"),
+    url("./normal/harmonyos_sans_regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  src:
+    url("./normal/harmonyos_sans_medium.woff2") format("woff2"),
+    url("./normal/harmonyos_sans_medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: normal;
+  src:
+    url("./normal/harmonyos_sans_semibold.woff2") format("woff2"),
+    url("./normal/harmonyos_sans_semibold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: normal;
+  font-style: normal;
+  src:
+    url("./normal/harmonyos_sans_bold.woff2") format("woff2"),
+    url("./normal/harmonyos_sans_bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: normal;
+  font-style: normal;
+  src:
+    url("./normal/harmonyos_sans_black.woff2") format("woff2"),
+    url("./normal/harmonyos_sans_black.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: normal;
+  font-style: italic;
+  src:
+    url("./italic/harmonyos_sans_italic_thin.woff2") format("woff2"),
+    url("./italic/harmonyos_sans_italic_thin.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: normal;
+  font-style: italic;
+  src:
+    url("./italic/harmonyos_sans_italic_light.woff2") format("woff2"),
+    url("./italic/harmonyos_sans_italic_light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: normal;
+  font-style: italic;
+  src:
+    url("./italic/harmonyos_sans_italic_regular.woff2") format("woff2"),
+    url("./italic/harmonyos_sans_italic_regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: italic;
+  src:
+    url("./italic/harmonyos_sans_italic_medium.woff2") format("woff2"),
+    url("./italic/harmonyos_sans_italic_medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: italic;
+  src:
+    url("./italic/harmonyos_sans_italic_semibold.woff2") format("woff2"),
+    url("./italic/harmonyos_sans_italic_semibold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: normal;
+  font-style: italic;
+  src:
+    url("./italic/harmonyos_sans_italic_bold.woff2") format("woff2"),
+    url("./italic/harmonyos_sans_italic_bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: normal;
+  font-style: italic;
+  src:
+    url("./italic/harmonyos_sans_italic_black.woff2") format("woff2"),
+    url("./italic/harmonyos_sans_italic_black.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: condensed;
+  font-style: normal;
+  src:
+    url("./condensed/harmonyos_sans_condensed_thin.woff2") format("woff2"),
+    url("./condensed/harmonyos_sans_condensed_thin.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: condensed;
+  font-style: normal;
+  src:
+    url("./condensed/harmonyos_sans_condensed_light.woff2") format("woff2"),
+    url("./condensed/harmonyos_sans_condensed_light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: condensed;
+  font-style: normal;
+  src:
+    url("./condensed/harmonyos_sans_condensed_regular.woff2") format("woff2"),
+    url("./condensed/harmonyos_sans_condensed_regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: condensed;
+  font-style: normal;
+  src:
+    url("./condensed/harmonyos_sans_condensed_medium.woff2") format("woff2"),
+    url("./condensed/harmonyos_sans_condensed_medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: condensed;
+  font-style: normal;
+  src:
+    url("./condensed/harmonyos_sans_condensed_semibold.woff2") format("woff2"),
+    url("./condensed/harmonyos_sans_condensed_semibold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: condensed;
+  font-style: normal;
+  src:
+    url("./condensed/harmonyos_sans_condensed_bold.woff2") format("woff2"),
+    url("./condensed/harmonyos_sans_condensed_bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: condensed;
+  font-style: normal;
+  src:
+    url("./condensed/harmonyos_sans_condensed_black.woff2") format("woff2"),
+    url("./condensed/harmonyos_sans_condensed_black.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: condensed;
+  font-style: italic;
+  src:
+    url("./condensed_italic/harmonyos_sans_condensed_italic_thin.woff2")
+      format("woff2"),
+    url("./condensed_italic/harmonyos_sans_condensed_italic_thin.ttf")
+      format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: condensed;
+  font-style: italic;
+  src:
+    url("./condensed_italic/harmonyos_sans_condensed_italic_light.woff2")
+      format("woff2"),
+    url("./condensed_italic/harmonyos_sans_condensed_italic_light.ttf")
+      format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: condensed;
+  font-style: italic;
+  src:
+    url("./condensed_italic/harmonyos_sans_condensed_italic_regular.woff2")
+      format("woff2"),
+    url("./condensed_italic/harmonyos_sans_condensed_italic_regular.ttf")
+      format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: condensed;
+  font-style: italic;
+  src:
+    url("./condensed_italic/harmonyos_sans_condensed_italic_medium.woff2")
+      format("woff2"),
+    url("./condensed_italic/harmonyos_sans_condensed_italic_medium.ttf")
+      format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: condensed;
+  font-style: italic;
+  src:
+    url("./condensed_italic/harmonyos_sans_condensed_italic_semibold.woff2")
+      format("woff2"),
+    url("./condensed_italic/harmonyos_sans_condensed_italic_semibold.ttf")
+      format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: condensed;
+  font-style: italic;
+  src:
+    url("./condensed_italic/harmonyos_sans_condensed_italic_bold.woff2")
+      format("woff2"),
+    url("./condensed_italic/harmonyos_sans_condensed_italic_bold.ttf")
+      format("truetype");
+}
+
+@font-face {
+  font-family: "HarmonyOS Sans";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: condensed;
+  font-style: italic;
+  src:
+    url("./condensed_italic/harmonyos_sans_condensed_italic_black.woff2")
+      format("woff2"),
+    url("./condensed_italic/harmonyos_sans_condensed_italic_black.ttf")
+      format("truetype");
+}

pages/src/assets/fonts/iosevka/Iosevka.css

@@ -0,0 +1,631 @@
+/* Version 33.3.3 */
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: normal;
+  font-style: normal;
+  src: url("woff2/Iosevka-Thin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: expanded;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtendedThin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: normal;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ThinOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: normal;
+  src: url("woff2/Iosevka-ThinOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: expanded;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtendedThinOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: expanded;
+  src: url("woff2/Iosevka-ExtendedThinOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: normal;
+  font-style: italic;
+  src: url("woff2/Iosevka-ThinItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 100;
+  font-stretch: expanded;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtendedThinItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 200;
+  font-stretch: normal;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 200;
+  font-stretch: expanded;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtendedExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 200;
+  font-stretch: normal;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtraLightOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 200;
+  font-stretch: normal;
+  src: url("woff2/Iosevka-ExtraLightOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 200;
+  font-stretch: expanded;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtendedExtraLightOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 200;
+  font-stretch: expanded;
+  src: url("woff2/Iosevka-ExtendedExtraLightOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 200;
+  font-stretch: normal;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtraLightItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 200;
+  font-stretch: expanded;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtendedExtraLightItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: normal;
+  font-style: normal;
+  src: url("woff2/Iosevka-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: expanded;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtendedLight.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: normal;
+  font-style: oblique;
+  src: url("woff2/Iosevka-LightOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: normal;
+  src: url("woff2/Iosevka-LightOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: expanded;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtendedLightOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: expanded;
+  src: url("woff2/Iosevka-ExtendedLightOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: normal;
+  font-style: italic;
+  src: url("woff2/Iosevka-LightItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 300;
+  font-stretch: expanded;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtendedLightItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: normal;
+  font-style: normal;
+  src: url("woff2/Iosevka-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: expanded;
+  font-style: normal;
+  src: url("woff2/Iosevka-Extended.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: normal;
+  font-style: oblique;
+  src: url("woff2/Iosevka-Oblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: normal;
+  src: url("woff2/Iosevka-Oblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: expanded;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtendedOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: expanded;
+  src: url("woff2/Iosevka-ExtendedOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: normal;
+  font-style: italic;
+  src: url("woff2/Iosevka-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 400;
+  font-stretch: expanded;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtendedItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  src: url("woff2/Iosevka-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: expanded;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtendedMedium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: oblique;
+  src: url("woff2/Iosevka-MediumOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: normal;
+  src: url("woff2/Iosevka-MediumOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: expanded;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtendedMediumOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: expanded;
+  src: url("woff2/Iosevka-ExtendedMediumOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: italic;
+  src: url("woff2/Iosevka-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 500;
+  font-stretch: expanded;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtendedMediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: normal;
+  src: url("woff2/Iosevka-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: expanded;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtendedSemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: oblique;
+  src: url("woff2/Iosevka-SemiBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: normal;
+  src: url("woff2/Iosevka-SemiBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: expanded;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtendedSemiBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: expanded;
+  src: url("woff2/Iosevka-ExtendedSemiBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: italic;
+  src: url("woff2/Iosevka-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 600;
+  font-stretch: expanded;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtendedSemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: normal;
+  font-style: normal;
+  src: url("woff2/Iosevka-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: expanded;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtendedBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: normal;
+  font-style: oblique;
+  src: url("woff2/Iosevka-BoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: normal;
+  src: url("woff2/Iosevka-BoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: expanded;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtendedBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: expanded;
+  src: url("woff2/Iosevka-ExtendedBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: normal;
+  font-style: italic;
+  src: url("woff2/Iosevka-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 700;
+  font-stretch: expanded;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtendedBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 800;
+  font-stretch: normal;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtraBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 800;
+  font-stretch: expanded;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtendedExtraBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 800;
+  font-stretch: normal;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtraBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 800;
+  font-stretch: normal;
+  src: url("woff2/Iosevka-ExtraBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 800;
+  font-stretch: expanded;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtendedExtraBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 800;
+  font-stretch: expanded;
+  src: url("woff2/Iosevka-ExtendedExtraBoldOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 800;
+  font-stretch: normal;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtraBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 800;
+  font-stretch: expanded;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtendedExtraBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: normal;
+  font-style: normal;
+  src: url("woff2/Iosevka-Heavy.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: expanded;
+  font-style: normal;
+  src: url("woff2/Iosevka-ExtendedHeavy.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: normal;
+  font-style: oblique;
+  src: url("woff2/Iosevka-HeavyOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: normal;
+  src: url("woff2/Iosevka-HeavyOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: expanded;
+  font-style: oblique;
+  src: url("woff2/Iosevka-ExtendedHeavyOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web Oblique";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: expanded;
+  src: url("woff2/Iosevka-ExtendedHeavyOblique.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: normal;
+  font-style: italic;
+  src: url("woff2/Iosevka-HeavyItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Iosevka Web";
+  font-display: swap;
+  font-weight: 900;
+  font-stretch: expanded;
+  font-style: italic;
+  src: url("woff2/Iosevka-ExtendedHeavyItalic.woff2") format("woff2");
+}