100 lines
2.7 KiB
Plaintext
100 lines
2.7 KiB
Plaintext
---
|
|
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 : "" }`}><</a> {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> |