feat(pages): add pages-v2 react variant

pages-v2/src/App.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useState } from 'react';
+import AboutTab from './components/tabs/AboutTab';
+import GamePackagesTab from './components/tabs/GamePackagesTab';
+import LauncherTab from './components/tabs/LauncherTab';
+import OverviewTab from './components/tabs/OverviewTab';
+import PatchesTab from './components/tabs/PatchesTab';
+import ResourcesTab from './components/tabs/ResourcesTab';
+import WebTab from './components/tabs/WebTab';
+import type { LauncherWebMainBgImage, MirrorFileEntry, StoredData } from './types';
+import { fetchJson, preloadData } from './utils/api';
+import { BASE_URL } from './utils/constants';
+
+const getMirrorUrl = (url: string) => {
+  try {
+    const u = new URL(url);
+    return `https://raw.githubusercontent.com/daydreamer-json/ak-endfield-api-archive/refs/heads/main/output/raw/${u.hostname}${u.pathname}`;
+  } catch {
+    return url;
+  }
+};
+
+function App() {
+  const [activeTab, setActiveTab] = useState('overview');
+  const [mirrorFileDb, setMirrorFileDb] = useState<MirrorFileEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [bgImage, setBgImage] = useState<string | null>(null);
+  const [bgVisible, setBgVisible] = useState(false);
+
+  useEffect(() => {
+    const getPreferredTheme = () => {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    };
+    const setTheme = (theme: string) => {
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    };
+
+    setTheme(getPreferredTheme());
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => setTheme(getPreferredTheme());
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        await preloadData();
+      } catch (e) {
+        console.warn('Preload failed', e);
+      }
+
+      // Fetch mirror list
+      try {
+        const db = await fetchJson<MirrorFileEntry[]>(`${BASE_URL}/mirror_file_list.json`);
+        setMirrorFileDb(db);
+      } catch (e) {
+        console.warn('Failed to fetch mirror list', e);
+      } finally {
+        setLoading(false);
+      }
+
+      // Fetch latest background image
+      try {
+        const url = `${BASE_URL}/akEndfield/launcher/web/6/main_bg_image/en-us/all.json`;
+        const data = await fetchJson<StoredData<LauncherWebMainBgImage>[]>(url);
+        if (data.length > 0) {
+          // Sort by updatedAt descending
+          const sorted = data.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
+          const latest = sorted.find((entry) => entry.rsp?.main_bg_image?.url);
+          if (latest?.rsp?.main_bg_image?.url) {
+            const mirrorUrl = getMirrorUrl(latest.rsp.main_bg_image.url);
+
+            // Preload the image
+            const img = new Image();
+            img.src = mirrorUrl;
+            img.onload = () => {
+              setBgImage(mirrorUrl);
+              // Small delay to trigger transition
+              setTimeout(() => setBgVisible(true), 1);
+            };
+          }
+        }
+      } catch (e) {
+        console.warn('Failed to fetch background image', e);
+      }
+    };
+    init();
+  }, []);
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div className='text-center'>
+          <div className='spinner-border' role='status'></div>
+          <p>Loading data...</p>
+        </div>
+      );
+    }
+
+    switch (activeTab) {
+      case 'overview':
+        return <OverviewTab mirrorFileDb={mirrorFileDb} />;
+      case 'game':
+        return <GamePackagesTab mirrorFileDb={mirrorFileDb} />;
+      case 'patch':
+        return <PatchesTab mirrorFileDb={mirrorFileDb} />;
+      case 'resources':
+        return <ResourcesTab />;
+      case 'launcher':
+        return <LauncherTab mirrorFileDb={mirrorFileDb} />;
+      case 'web-pretty':
+        return <WebTab />;
+      case 'about':
+        return <AboutTab />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      {(() => {
+        const blurRadius = 4;
+        const opacity = 0.3;
+
+        const opacityAnimSec = 1;
+        const blurAnimSec = 1;
+
+        const blurRadiusTmp = bgVisible ? blurRadius : blurRadius * 2;
+        return (
+          <div
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              backgroundImage: bgImage ? `url(${bgImage})` : 'none',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              zIndex: -1,
+              opacity: bgVisible ? opacity : 0,
+              transition: `opacity ${opacityAnimSec}s ease-in-out`,
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                backdropFilter: `blur(${blurRadiusTmp}px)`,
+                WebkitBackdropFilter: `blur(${blurRadiusTmp}px)`,
+                transition: `backdrop-filter ${blurAnimSec}s ease-in-out`,
+              }}
+            />
+          </div>
+        );
+      })()}
+      <div className='container my-4 px-4' id='mainContainer'>
+        <section>
+          <h1 className='text-center fw-bold'>Arknights: Endfield API Archive</h1>
+          <ul className='nav nav-tabs justify-content-center'>
+            <li className='nav-item'>
+              <button
+                className={`nav-link ${activeTab === 'overview' ? 'active' : ''}`}
+                onClick={() => setActiveTab('overview')}
+              >
+                Overview
+              </button>
+            </li>
+            <li className='nav-item'>
+              <button
+                className={`nav-link ${activeTab === 'game' ? 'active' : ''}`}
+                onClick={() => setActiveTab('game')}
+              >
+                Game Packages
+              </button>
+            </li>
+            <li className='nav-item'>
+              <button
+                className={`nav-link ${activeTab === 'patch' ? 'active' : ''}`}
+                onClick={() => setActiveTab('patch')}
+              >
+                Patches
+              </button>
+            </li>
+            <li className='nav-item'>
+              <button
+                className={`nav-link ${activeTab === 'resources' ? 'active' : ''}`}
+                onClick={() => setActiveTab('resources')}
+              >
+                Resources
+              </button>
+            </li>
+            <li className='nav-item'>
+              <button
+                className={`nav-link ${activeTab === 'launcher' ? 'active' : ''}`}
+                onClick={() => setActiveTab('launcher')}
+              >
+                Launcher
+              </button>
+            </li>
+            <li className='nav-item'>
+              <button
+                className={`nav-link ${activeTab === 'web-pretty' ? 'active' : ''}`}
+                onClick={() => setActiveTab('web-pretty')}
+              >
+                Web
+              </button>
+            </li>
+            <li className='nav-item'>
+              <button
+                className={`nav-link ${activeTab === 'about' ? 'active' : ''}`}
+                onClick={() => setActiveTab('about')}
+              >
+                About
+              </button>
+            </li>
+          </ul>
+        </section>
+
+        <section id='content' className='mt-4'>
+          {renderContent()}
+        </section>
+
+        <hr />
+
+        <section>
+          <button
+            id='debug-log-openBtn'
+            className='d-none btn btn-secondary btn-sm'
+            data-bs-toggle='modal'
+            data-bs-target='#debug-log-modal'
+          >
+            Open Debug Log
+          </button>
+          <p className='text-center text-muted'>
+            <small>(C) daydreamer-json and contributors</small>
+          </p>
+        </section>
+
+        <div className='modal fade' id='debug-log-modal' tabIndex={-1}>
+          <div className='modal-dialog modal-dialog-centered modal-dialog-scrollable'>
+            <div className='modal-content'>
+              <div className='modal-header'>
+                <h1 className='modal-title fs-5' id='debug-log-modal-label'>
+                  Debug Panel
+                </h1>
+                <button type='button' className='btn-close' data-bs-dismiss='modal'></button>
+              </div>
+              <div className='modal-body'>
+                <section>
+                  <p>Debug Log</p>
+                  <pre id='debug-log'>
+                    <code id='debug-log-inner'></code>
+                  </pre>
+                </section>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default App;

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