init

2024-07-04 16:48:57 -07:00 · 2024-07-04 16:48:57 -07:00 · 0a1187788c
commit 0a1187788c
49 changed files with 11570 additions and 0 deletions
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -0,0 +1,98 @@
+---
+interface Props {
+    title: string;
+    description: string;
+}
+
+const { title, description } = Astro.props;
+
+import { ViewTransitions } from "astro:transitions";
+import ReplacementSwap from "astro-vtbot/components/ReplacementSwap.astro";
+
+import Sidebar from "../components/Sidebar.astro";
+import Intro from "../components/Intro.astro";
+
+import "modern-normalize";
+import "../styles/main.css";
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="generator" content={Astro.generator} />
+        <link rel="sitemap" href="/sitemap-index.xml" />
+        <title>reidlab's site - {title}</title>
+        <meta name="description" content={description} />
+
+        <!-- view transitions. actually fucking magical! -->
+        <!-- doesn't work without js, maybe add noscript element? -->
+        <ViewTransitions />
+        <ReplacementSwap />
+    </head>
+    <body>
+        <Intro />
+
+        <Sidebar />
+        <main
+            data-vtbot-replace="main"
+            transition:name="main"
+            transition:animate="initial"
+        >
+            <slot />
+        </main>
+    </body><style is:global>
+        body {
+            display: grid;
+            grid-template-columns: min-content auto;
+            grid-template-rows: auto auto;
+            grid-auto-flow: row;
+        }
+
+        /* mobile */
+        @media screen and (max-width: 600px) {
+            body {
+                grid-template-columns: auto auto;
+                grid-template-rows: min-content auto;
+                grid-auto-flow: column;
+            }
+        }
+
+        main {
+            background: linear-gradient(
+                    275deg,
+                    #f38ba8,
+                    #eba0ac 30%,
+                    transparent 0%
+                ),
+                linear-gradient(
+                    260deg,
+                    #74c7ec,
+                    #89b4fa 45%,
+                    transparent 0%
+                ),
+                linear-gradient(
+                    270deg,
+                    #fab387,
+                    #f9e2af 55%,
+                    transparent 0%
+                ),
+                linear-gradient(
+                    265deg,
+                    #a6e3a1,
+                    #94e2d5 70%,
+                    transparent 0%),
+                #181818;
+            background-attachment: fixed;
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            gap: 1em;
+            padding: 1em;
+            min-height: 100vh;
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+</html>