Create the Fangs page.

source/fangs/index.html

@@ -0,0 +1,45 @@
+{% extends "source/includes/base.html" %}
+{% import "source/includes/macros.html" as macros %}
+
+{% set title = "Fangs 🧛" %}
+
+{% block head %}
+<link rel="stylesheet" href="/scss/fangs/fangs.scss">
+{% endblock %}
+
+{% block body %}
+<header class="page-header">
+  <h1>
+    <img src="../assets/fangs-128-opaque.png" alt="Fangs Logo">
+    Fangs
+  </h1>
+  <p class="byline">Inject custom DuckDuckGo Bangs.</p>
+</header>
+
+<main class="page-main">
+  <p class="store-links">
+    <a title="Get Fangs for Firefox"
+      href="https://addons.mozilla.org/firefox/addon/fangs">
+      <img src="../assets/mozilla-addons.png" alt="Get Fangs for Firefox">
+    </a>
+    <a title="Get Fangs for Chrome"
+      href="https://chrome.google.com/webstore/detail/fangs/dlllfannplfkhbiidhihagjkbmcolclf">
+      <img src="../assets/chrome-web-store.png" alt="Get Fangs for Chrome">
+    </a>
+    <a title="Get Fangs for Edge"
+      href="https://microsoftedge.microsoft.com/addons/detail/fangs/fgfkpbflhnljpfniippaagjjlncobhjd">
+      <img src="../assets/microsoft.png" alt="Get Fangs for Edge">
+    </a>
+  </p>
+
+  <img class="screenshot" alt="Fangs Screenshot" title="Fangs Screenshot"
+    src="../assets/fangs-screenshot.png">
+</main>
+
+<footer class="page-footer">
+  &copy;
+  <a href="https://git.bauke.xyz/Holllo/fangs">AGPL-3.0-or-later</a>
+  💖
+  <a href="mailto:helllo@holllo.org">helllo@holllo.org</a>
+</footer>
+{% endblock %}

source/scss/fangs/fangs.scss

@@ -0,0 +1,78 @@
+@use '../mixins';
+
+body {
+  padding: var(--spacing-16);
+}
+
+.page-header {
+  @include mixins.responsive-container($width-breakpoint: 600px);
+
+  margin-bottom: var(--spacing-16);
+
+  h1 {
+    align-items: center;
+    border: 1px solid var(--foreground-2);
+    display: flex;
+    font-size: 2.5rem;
+    margin-bottom: var(--spacing-08);
+  }
+
+  img {
+    align-items: center;
+    background-color: var(--df-2);
+    color: var(--db-1);
+    display: inline-flex;
+    height: 4.5rem;
+    justify-content: center;
+    margin-right: var(--spacing-08);
+    padding: var(--spacing-08);
+    width: 4.5rem;
+  }
+
+  .byline {
+    background-color: var(--background-2);
+    font-weight: bold;
+    padding: var(--spacing-08);
+    text-align: center;
+  }
+}
+
+.page-main {
+  @include mixins.responsive-container($width-breakpoint: 900px);
+
+  margin-bottom: var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+
+  .store-links {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-08);
+    justify-content: center;
+    margin-bottom: var(--spacing-16);
+
+    @media (max-width: 600px) {
+      flex-direction: column;
+    }
+
+    a {
+      padding: var(--spacing-04);
+      text-decoration: none;
+    }
+
+    img {
+      display: block;
+      height: fit-content;
+    }
+  }
+
+  .screenshot {
+    border: 1px solid var(--foreground-2);
+  }
+}
+
+.page-footer {
+  @include mixins.responsive-container($width-breakpoint: 600px);
+
+  text-align: center;
+}

vite.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
     outDir: buildDir,
     rollupOptions: {
       input: {
+        fangs: path.join(sourceDir, 'fangs/index.html'),
         home: path.join(sourceDir, 'index.html'),
         queue: path.join(sourceDir, 'queue/index.html'),
       },