feat(pages): add pages-v2 react variant

pages-v2/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-v2/src/assets/css/essentials.css

@@ -0,0 +1,68 @@
+@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:
+    "JetBrains Mono", "SF Mono", "Noto Sans JP", "Noto Sans SC",
+    "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",
+    "Courier New", monospace, sans-serif, system-ui;
+  --bs-font-sans-serif: var(--ddjson-custom-font-main);
+  --bs-font-monospace: var(--ddjson-custom-font-mono);
+}
+
+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-v2/src/assets/css/index.css

@@ -0,0 +1,58 @@
+#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);
+}
+
+.card {
+  --bs-card-bg: color-mix(in srgb, var(--bs-body-bg), transparent 80%);
+  backdrop-filter: blur(24px);
+}
+
+.table {
+  --bs-table-bg: color-mix(in srgb, var(--bs-body-bg), transparent 50%);
+}
+
+.table-transparent {
+  --bs-table-bg: transparent !important;
+}
+
+.accordion {
+  --bs-accordion-bg: color-mix(in srgb, var(--bs-body-bg), transparent 50%);
+}
+.accordion-button:not(.collapsed) {
+  --bs-accordion-active-bg: color-mix(
+    in srgb,
+    var(--bs-primary-bg-subtle),
+    transparent 25%
+  );
+}
+
+.nav-link {
+  background-color: color-mix(in srgb, var(--bs-body-bg), transparent 80%);
+}
+.nav-tabs .nav-link.active {
+  background-color: color-mix(
+    in srgb,
+    var(--bs-nav-tabs-link-active-bg),
+    transparent 25%
+  );
+}
+
+.list-group {
+  --bs-list-group-bg: color-mix(in srgb, var(--bs-body-bg), transparent 50%);
+}
+
+.form-select {
+  background-color: color-mix(in srgb, var(--bs-body-bg), transparent 50%);
+}

pages-v2/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-v2/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");
+}