128 lines
5.3 KiB
Plaintext
128 lines
5.3 KiB
Plaintext
---
|
|
import "../styles/main.scss";
|
|
import Navbar from "../components/Navbar.astro";
|
|
import Footer from "../components/Footer.astro";
|
|
import ScrollReveal from "../components/ScrollReveal.vue";
|
|
import CursorGlow from "../components/CursorGlow.vue";
|
|
import MobileMenu from "../components/MobileMenu.astro";
|
|
|
|
interface Props {
|
|
pageTitle?: string;
|
|
contentClass?: string;
|
|
wide?: boolean;
|
|
home?: boolean;
|
|
}
|
|
|
|
const { pageTitle, contentClass, wide, home } = Astro.props;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="zh" th:lang="${theme.config?.basic?.language ?: #locale.language}" th:classappend="${theme.config?.animation?.animation_enabled == false} ? 'wi-no-animations'">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta th:if="${theme.config?.basic?.site_description}" name="description" th:content="${theme.config?.basic?.site_description}" />
|
|
<script is:inline th:attr="data-scheme=${theme.config?.style?.color_scheme}">
|
|
(function () {
|
|
var stored = localStorage.getItem("wi-theme");
|
|
var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
var scheme = null;
|
|
if (document.currentScript && document.currentScript.getAttribute("data-scheme")) {
|
|
scheme = document.currentScript.getAttribute("data-scheme");
|
|
}
|
|
var isDark = false;
|
|
if (stored === "dark") {
|
|
isDark = true;
|
|
} else if (stored === "light") {
|
|
isDark = false;
|
|
} else if (scheme === "dark") {
|
|
isDark = true;
|
|
} else if (scheme === "light") {
|
|
isDark = false;
|
|
} else if (!stored && prefersDark) {
|
|
isDark = true;
|
|
}
|
|
if (isDark) {
|
|
document.documentElement.classList.add("dark");
|
|
document.documentElement.setAttribute("data-color-scheme", "dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
document.documentElement.setAttribute("data-color-scheme", "light");
|
|
}
|
|
})();
|
|
</script>
|
|
<link
|
|
rel="icon"
|
|
th:href="${theme.config?.basic?.favicon ?: '/favicon.ico'}"
|
|
/>
|
|
<link rel="alternate" type="application/rss+xml" th:title="${site.title}" th:href="@{/feed.xml}" />
|
|
<style th:if="${theme.config?.style?.accent_color}" th:utext="${':root { --accent: ' + theme.config?.style?.accent_color + '; --accent-hover: ' + theme.config?.style?.accent_color + '; }'}"></style>
|
|
<style th:if="${theme.config?.style?.border_radius == 'small'}" th:utext="${':root { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; }'}"></style>
|
|
<style th:if="${theme.config?.style?.border_radius == 'medium' or theme.config?.style?.border_radius == null}" th:utext="${':root { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 24px; }'}"></style>
|
|
<style th:if="${theme.config?.style?.border_radius == 'large'}" th:utext="${':root { --radius-sm: 12px; --radius-md: 20px; --radius-lg: 36px; }'}"></style>
|
|
<style th:if="${theme.config?.style?.layout_container_width == 'narrow'}" th:utext="${'.wi-content-wrap { max-width: 680px; } .wi-content-wrap--wide { max-width: 1000px; } .wi-main--wide { max-width: 1200px; }'}"></style>
|
|
<style th:if="${theme.config?.style?.layout_container_width == 'medium' or theme.config?.style?.layout_container_width == null}" th:utext="${'.wi-content-wrap { max-width: 800px; } .wi-content-wrap--wide { max-width: 1200px; } .wi-main--wide { max-width: 1400px; }'}"></style>
|
|
<style th:if="${theme.config?.style?.layout_container_width == 'wide'}" th:utext="${'.wi-content-wrap { max-width: 900px; } .wi-content-wrap--wide { max-width: 1400px; } .wi-main--wide { max-width: 1600px; }'}"></style>
|
|
<style th:if="${theme.config?.style?.custom_css}" th:utext="${theme.config?.style?.custom_css}"></style>
|
|
<slot name="head" />
|
|
</head>
|
|
<body class="wi-body">
|
|
<Navbar />
|
|
<main class:list={["wi-main", { "wi-main--wide": wide || home, "wi-main--home": home }]}>
|
|
{home ? (
|
|
<slot />
|
|
) : (
|
|
<div class:list={["wi-content-wrap", { "wi-content-wrap--wide": wide }]}>
|
|
<slot />
|
|
</div>
|
|
)}
|
|
</main>
|
|
<Footer />
|
|
<MobileMenu />
|
|
<ScrollReveal th:if="${theme.config?.animation?.animation_enabled != false and theme.config?.animation?.animation_scroll_reveal != false}" client:visible />
|
|
<CursorGlow th:if="${theme.config?.animation?.animation_enabled != false and theme.config?.animation?.animation_cursor_glow == true}" client:idle />
|
|
</body>
|
|
</html>
|
|
|
|
<style is:global>
|
|
html {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
html.wi-theme-transition,
|
|
html.wi-theme-transition *,
|
|
html.wi-theme-transition *::before,
|
|
html.wi-theme-transition *::after {
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
|
|
}
|
|
|
|
.wi-body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.wi-main {
|
|
flex: 1;
|
|
}
|
|
|
|
.wi-reveal {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition:
|
|
opacity var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
|
|
transform var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
|
|
}
|
|
|
|
.wi-revealed {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
html.wi-no-animations .wi-reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
</style>
|