First draft

2026-02-20 07:31:50 +01:00
parent 75a2514b05
commit fd1cf2e72c
55 changed files with 6202 additions and 5102 deletions
--- a/src/layouts/ReadLayout.astro
+++ b/src/layouts/ReadLayout.astro
@@ -0,0 +1,100 @@
+---
+import CommonLayout from "./CommonLayout.astro";
+import "katex/dist/katex.min.css";
+import "rehype-callouts/theme/obsidian"
+
+export interface Props {
+    title: string;
+    background?: string;
+    bgImageUrl?: string;
+    backAnchor?: string;
+    breadcrumbs?: string[];
+}
+
+const { title, background, bgImageUrl, backAnchor, breadcrumbs } = Astro.props;
+---
+
+<CommonLayout title={title} background={background} bgImageUrl={bgImageUrl}>
+    <body>
+        <main class="glass">
+            <nav><a href={`/${ backAnchor ? "#" + backAnchor : "" }`}>&lt;</a>&nbsp;&nbsp;{breadcrumbs?.join(" / ")}</nav>
+            <slot />
+        </main>
+    </body>
+</CommonLayout>
+
+<style> 
+    main {
+        --glass-color: hsl(238 65 20);
+        --text-color: hsl(0 0 85);
+        --border-width: 2px;
+        width: 100dvw;
+        max-width: 900px;
+        backdrop-filter: blur(12px);
+        padding: 2rem;
+        box-shadow: 2px 2px 5px #000;
+        margin: 1rem auto;
+        color: var(--text-color);
+    }
+</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>
+
+<script>
+    let a = Array.from(document.querySelectorAll("g rect")) as SVGRectElement[];
+
+    const sxFactor = Math.tan(Math.PI * 17/90);
+    const syFactor = 1 / sxFactor;
+
+    a.forEach((rect) => {
+        let anim = document.createElement("animateMotion");
+        anim.setAttribute("repeatCount", "indefinite");
+        anim.setAttribute("calcMode", "linear");
+
+        let startPoint = Math.random();
+        anim.setAttribute("keyPoints", `${startPoint};1;0;${startPoint}`);
+        anim.setAttribute("keyTimes", "0;0.5;0.5;1");
+
+        let duration = 10000 / rect.width.baseVal.value
+        anim.setAttribute("dur", `${duration}s`);
+
+        let sx0 = rect.x.baseVal.value - (sxFactor * rect.y.baseVal.value);
+        let sy0 = 0;
+        if (sx0 < 0) {
+            sx0 = 0;
+            sy0 = rect.y.baseVal.value - (syFactor * rect.x.baseVal.value);
+        }
+
+        let sx1 = rect.x.baseVal.value + ((800 - rect.y.baseVal.value) * sxFactor);
+        let sy1 = 800;
+        if (sx1 > 800) {
+            sx1 = 800;
+            sy1 = rect.y.baseVal.value + ((800 - rect.x.baseVal.value) * syFactor);
+        }
+
+        // Path
+        let { width: wx, height: wy } = rect.getBoundingClientRect();
+
+        anim.setAttribute("path", `M ${sx0 - wx} ${sy0 - wy} L ${sx1 + wx} ${sy1 + wy} M ${sx0 - wx} ${sy0 - wy}`);
+
+        rect.appendChild(anim);
+    })
+</script>