a

2026-02-23 06:46:52 +01:00
parent fd1cf2e72c
commit 7576f6bcf6
24 changed files with 827 additions and 182 deletions
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -0,0 +1,110 @@
+---
+import CommonLayout from "./CommonLayout.astro";
+import Background from "../assets/ripple-line.svg";
+import BackgroundStatic from "../assets/ripple-line-static.svg";
+import BackgroundGradient from "../components/bits/BackgroundGradient.astro";
+import "katex/dist/katex.min.css";
+import "rehype-callouts/theme/obsidian"
+
+export interface Props {
+    title: string;
+    backLink?: string;
+    breadcrumbs?: string[];
+}
+
+const { title, backLink, breadcrumbs } = Astro.props;
+---
+
+<CommonLayout title={title}>
+    <body>
+        <div class="background-container-outer">
+            <div class="background-container-inner">
+                <Background class="motion" />
+                <BackgroundStatic class="static" />
+                <BackgroundGradient />
+            </div>
+        </div>
+        <div class="content">
+            <main class="glass">
+                <nav><a href={backLink ? backLink : "#"}>&lt;</a>&nbsp;&nbsp;{breadcrumbs?.join(" / ")}</nav>
+                <slot />
+            </main>
+        </div>
+    </body>
+</CommonLayout>
+
+<style> 
+    html {
+		height: 100dvh;
+		width: 100dvw;
+	}
+
+	body {
+		height: 100%;
+		min-height: 100dvh;
+		width: 100dvw;
+        position: relative;
+    }
+
+    .background-container-outer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100dvw;
+        height: 100dvh;
+        overflow: hidden;
+    }
+
+    .background-container-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
+    .content {
+        padding: 1rem;
+    }
+
+    main {
+        --glass-color: hsl(238 65 20);
+        --text-color: hsl(0 0 85);
+        --border-width: 2px;
+        width: 98dvw;
+        max-width: 900px;
+        backdrop-filter: blur(12px);
+        padding: 2rem;
+        box-shadow: 2px 2px 5px #000;
+        margin: 0 auto;
+        color: var(--text-color);
+    }
+
+    svg {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100vh;
+		pointer-events: none;
+		z-index: -10;
+	}
+</style>
+
+<style is:global>
+    details {
+        border: 1px solid #aaaaaa;
+        border-radius: 4px;
+        padding: 0.5em 0.5em 0;
+    }
+
+    summary {
+        font-weight: bold;
+        font-size: 130%;
+        margin: -0.5em -0.5em 0;
+        padding: 0.5em;
+        cursor: pointer;
+    }
+
+    .callout {
+        mix-blend-mode: unset !important;
+    }
+</style>