Deploy crossxcell99/crossxcell99.github.io to crossxcell99/crossxcell…

…99.github.io:master
crossxcell99 · Aug 16, 2024 · 6762a93 · 6762a93
commit 6762a93
Show file tree

Hide file tree

Showing 45 changed files with 4,204 additions and 0 deletions.
diff --git a/.nojekyll b/.nojekyll
diff --git a/404.html b/404.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<html class="not-ready lg:text-base" lang="en">
+  <head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+  <!-- Title -->
+  <title>
+    crossxcell99
+  </title>
+
+  <!-- Meta -->
+  <meta name="theme-color" />
+
+
+  <!-- Author -->
+
+  <!---->
+  <meta name="description" content="My blog posts and projects" />
+  <meta name="author" content="crossxcell99" />
+  <!-- The Open Graph protocol -->
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="crossxcell99" />
+  <meta property="og:description" content="My blog posts and projects" />
+  <meta property="og:url" content="https://crossxcell99.github.io" />
+
+  <!---->
+
+
+  <!-- CSS & JS -->
+  <link rel="preload stylesheet" as="style" href="https://crossxcell99.github.io/main.css" />
+  <style>
+    :root {
+      --bg: #f4f4f5;
+      --bg-dark: #18181b;
+      --header: #e4e4e7;
+      --header-dark: #27272a;
+    }
+  </style>
+
+
+
+  <!-- Dark Icon -->
+  <link rel="preload" as="image" href="https://crossxcell99.github.io/icons/theme.svg" />
+
+  <!-- Math -->
+
+  <!---->
+
+  <!-- Mermaid -->
+
+  <!---->
+
+  <!-- Favicon -->
+  <link rel="icon" href="https://crossxcell99.github.io/favicon.ico" />
+  <link rel="apple-touch-icon" href="https://crossxcell99.github.io/apple-touch-icon.png" />
+
+  <!-- Feeds -->
+
+
+  <!-- Canonical -->
+  <link rel="canonical" href="https:&#x2F;&#x2F;crossxcell99.github.io" />
+</head>
+
+  <body class="text-black duration-200 ease-out dark:text-white">
+    <header
+  class="header fixed top-0 z-40 mx-auto min-h-[3.5rem] w-full"
+>
+  <div class="mx-auto w-full max-w-4xl p-3 lg:flex lg:justify-between">
+    <div class="flex justify-between">
+      <div class="flex items-center">
+        <a class="text-2xl font-semibold" href="https://crossxcell99.github.io">crossxcell99</a>
+        <div
+          class="btn-dark ml-4 h-6 w-6 shrink-0 cursor-pointer text-[0] [background:url(./icons/theme.svg)_left_center/cover_no-repeat] dark:invert dark:[background-position:right]"
+          role="button"
+          aria-label="Dark"
+        ></div>
+      </div>
+
+      <div
+        class="btn-menu relative z-50 flex h-8 w-8 shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 lg:hidden"
+        role="button"
+        aria-label="Menu"
+      ></div>
+
+    </div>
+    <script>
+      // base
+      const htmlClass = document.documentElement.classList;
+      setTimeout(() => {
+        htmlClass.remove("not-ready");
+      }, 10);
+
+      // mobile menu
+      const btnMenu = document.querySelector(".btn-menu");
+      btnMenu?.addEventListener("click", () => {
+        htmlClass.toggle("open");
+      });
+
+      // dark theme
+      const setDark = (isDark) => {
+        if (isDark) {
+          document.body.dispatchEvent(new CustomEvent("set-theme", { detail: "dark" }));
+          htmlClass.add("dark");
+        } else {
+          document.body.dispatchEvent(new CustomEvent("set-theme", { detail: "light" }));
+          htmlClass.remove("dark");
+        }
+        localStorage.setItem("dark", isDark);
+      };
+
+      // init
+      const darkScheme = window.matchMedia("(prefers-color-scheme: dark)");
+      if (htmlClass.contains("dark")) {
+        setDark(true);
+      } else {
+        const darkVal = localStorage.getItem("dark");
+        setDark(darkVal ? darkVal === "true" : darkScheme.matches);
+      }
+
+      // listen system
+      darkScheme.addEventListener("change", (event) => {
+        setDark(event.matches);
+      });
+
+      // manual switch
+      const btnDark = document.querySelector(".btn-dark");
+      btnDark.addEventListener("click", () => {
+        setDark(localStorage.getItem("dark") !== "true");
+      });
+    </script>
+
+    <nav class="flex w-full items-center lg:w-auto">
+      <ul
+        class="nav-wrapper flex w-full flex-col py-2 lg:w-auto lg:flex-row lg:self-center lg:py-0"
+      >
+
+        <li>
+          <a
+            class="primary-link block py-2 text-center text-lg font-medium lg:px-3 lg:py-0"
+            href="/projects"
+            >Projects</a
+          >
+        </li>
+
+        <li>
+          <a
+            class="primary-link block py-2 text-center text-lg font-medium lg:px-3 lg:py-0"
+            href="/blog"
+            >Blog</a
+          >
+        </li>
+
+        <li>
+          <a
+            class="primary-link block py-2 text-center text-lg font-medium lg:px-3 lg:py-0"
+            href="/tags"
+            >Tags</a
+          >
+        </li>
+
+      </ul>
+    </nav>
+
+  </div>
+</header>
+
+
+    <main
+      class="prose prose-neutral relative mx-auto min-h-[calc(100%-9rem)] max-w-3xl break-words px-4 pb-16 pt-32 dark:prose-invert prose-pre:rounded-lg prose-img:rounded-lg"
+    >
+      <!---->
+<h1 class="absolute inset-x-8 bottom-20 top-0 flex items-center justify-center text-9xl">404</h1>
+
+    </main>
+
+    <footer class="mx-auto flex max-w-3xl flex-wrap items-center px-8 py-4 text-sm opacity-60">
+  <div class="mr-auto basis-full lg:basis-1/2">
+
+    &copy; 2024
+    <a class="link" href="https://crossxcell99.github.io"
+      >crossxcell99</a
+    >
+
+  </div>
+  <div class="flex basis-full lg:basis-1/2 lg:justify-end">
+    <a class="link mr-6 lg:ml-6" href="https://www.getzola.org/" rel="noopener" target="_blank"
+      >Powered by Zola</a
+    >
+    <a class="link" href="https://github.com/st1020/kita" rel="noopener" target="_blank">✎ Kita</a>
+  </div>
+</footer>
+
+  </body>
+</html>
diff --git a/app.css b/app.css
@@ -0,0 +1,121 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html,
+  body {
+    @apply h-full;
+  }
+
+  html {
+    --bg: transparent;
+    --bg-dark: transparent;
+    --header: transparent;
+    --header-dark: transparent;
+  }
+
+  body {
+    -webkit-tap-highlight-color: transparent;
+    background: var(--bg);
+  }
+
+  .dark body {
+    background: var(--bg-dark);
+  }
+
+  *,
+  ::before,
+  ::after {
+    /* Auto direction for text */
+    unicode-bidi: plaintext;
+  }
+
+  /* Code block */
+  pre mark {
+    @apply block text-inherit;
+  }
+
+  pre table {
+    @apply !m-0 !w-full border-collapse;
+  }
+
+  pre table tr {
+    @apply !border-0 !border-none;
+  }
+
+  pre table td {
+    @apply !p-0;
+  }
+
+  pre table td:nth-of-type(1) {
+    @apply min-w-4 select-none;
+  }
+}
+
+@layer utilities {
+  .not-ready * {
+    @apply !transition-none;
+  }
+
+  .btn-menu::before,
+  .btn-menu::after {
+    @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
+  }
+
+  .open {
+    @apply overflow-hidden;
+  }
+
+  .open .btn-menu::before {
+    @apply w-6 translate-y-[5.5px] rotate-45;
+  }
+
+  .open .btn-menu::after {
+    @apply w-6 -translate-y-[5.5px] -rotate-45;
+  }
+
+  .nav-wrapper {
+    @apply hidden lg:flex;
+  }
+
+  .open .nav-wrapper {
+    @apply flex;
+  }
+
+  article {
+    @apply text-lg;
+  }
+
+  .header {
+    background-color: var(--header);
+  }
+
+  .dark .header {
+    background: var(--header-dark);
+  }
+
+  .blur-header {
+    @apply bg-black/10 backdrop-blur dark:bg-white/10;
+  }
+
+  .block-bg {
+    @apply bg-black/[3%] dark:bg-white/[8%];
+  }
+
+  .block-hover {
+    @apply hover:bg-black/[5%] dark:hover:bg-white/[11%];
+  }
+
+  .block-hover-mask {
+    @apply hover:bg-black/[2%] dark:hover:bg-white/[3%];
+  }
+
+  .primary-link {
+    @apply text-black no-underline hover:opacity-80 dark:text-white;
+  }
+
+  .secondary-link {
+    @apply text-[var(--tw-prose-body)] no-underline hover:text-black dark:hover:text-white;
+  }
+}
diff --git a/apple-touch-icon.png b/apple-touch-icon.png