Initial Commit

2026-08-28 21:50:26 +10:00
commit d8d4ecbe8a
142 changed files with 25234 additions and 0 deletions
@@ -0,0 +1,98 @@
+<script setup lang="ts"></script>
+
+<template>
+    <header class="topbar">
+        <span class="wordmark">Dredge<em>Gram</em></span>
+        <span class="icons">
+            <button class="icon-btn" aria-label="Notifications">
+                <span class="mdi mdi-heart"></span>
+            </button>
+            <button class="icon-btn" aria-label="Messages">
+                <span class="mdi mdi-message"></span>
+            </button>
+        </span>
+    </header>
+</template>
+
+<style scoped>
+.wordmark {
+    font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
+    font-weight: 600;
+    font-size: 1.3rem;
+    letter-spacing: -0.02em;
+}
+
+.wordmark em {
+    font-style: normal;
+    color: var(--bioluminum);
+}
+
+.topbar {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 1.5rem;
+    background: rgba(5, 11, 20, 0.9);
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--line);
+}
+
+.icons {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    transition:
+        background-color 0.15s ease,
+        transform 0.1s ease;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.icon-btn .mdi {
+    font-size: 1.5rem;
+    line-height: 1;
+}
+
+.icon-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.icon-btn:active {
+    background: rgba(255, 255, 255, 0.14);
+    transform: scale(0.94);
+}
+
+@media (max-width: 480px) {
+    .topbar {
+        padding: 0.75rem 1rem;
+    }
+
+    .icons {
+        gap: 0;
+    }
+
+    .icon-btn {
+        width: 2.9rem;
+        height: 2.9rem;
+    }
+
+    .icon-btn .mdi {
+        font-size: 1.6rem;
+    }
+}
+</style>