feat: move theme inline

This commit is contained in:
max_richter 2024-04-03 19:57:22 +02:00
parent d1a235369d
commit 4c1a6ed9f6
3 changed files with 47 additions and 42 deletions

View File

@ -24,47 +24,6 @@ article a {
color: var(--fill) !important; color: var(--fill) !important;
} }
:root {
--neutral-1000: #000000;
--neutral-800: #16161E;
--neutral-500: #252530;
--neutral-400: #2C2C3A;
--neutral-300: #414152;
--neutral-100: #D5D5D7;
--neutral-000: #F1F1F4;
--fill: #cb5a5a;
}
body {
--background-dark: var(--neutral-800);
--background: var(--neutral-000);
--background-light: var(--neutral-400);
--outline: var(--neutral-300);
--text: var(--neutral-800);
--text-light: black;
--border-radius-md: 20px;
--spacing-sm: 10px;
--spacing-md: 20px;
background-color: var(--layer100);
transition: background-color 0.1s;
color: var(--text);
font-family: 'Nunito Sans', sans-serif;
background-color: var(--neutral-000);
}
.dark body {
--background-dark: var(--neutral-800);
--background: var(--neutral-500);
--background-light: var(--neutral-400);
--background-gradient: linear-gradient(-30deg, var(--neutral-500) 0%, var(--neutral-400) 100%);
--outline: var(--neutral-300);
--text: var(--neutral-100);
--text-light: white;
background-color: var(--neutral-1000);
}
.dark .noise::before { .dark .noise::before {
opacity: 1; opacity: 1;

View File

@ -136,7 +136,6 @@
); );
images = wrappers.map((image, i: number) => { images = wrappers.map((image, i: number) => {
console.log({ image });
image.classList.add("image-active"); image.classList.add("image-active");
image.addEventListener("click", () => setIndex(i)); image.addEventListener("click", () => setIndex(i));
image.addEventListener("touch", () => setIndex(i)); image.addEventListener("touch", () => setIndex(i));

View File

@ -54,6 +54,53 @@ const { title, width = "compact" } = Astro.props;
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<!-- <meta http-equiv="refresh" content="0;url=/" /> --> <!-- <meta http-equiv="refresh" content="0;url=/" /> -->
<title>{title}</title> <title>{title}</title>
<style>
:root {
--neutral-1000: #000000;
--neutral-800: #16161e;
--neutral-500: #252530;
--neutral-400: #2c2c3a;
--neutral-300: #414152;
--neutral-100: #d5d5d7;
--neutral-000: #f1f1f4;
--fill: #cb5a5a;
}
body {
--background-dark: var(--neutral-800);
--background: var(--neutral-000);
--background-light: var(--neutral-400);
--outline: var(--neutral-300);
--text: var(--neutral-800);
--text-light: black;
--border-radius-md: 20px;
--spacing-sm: 10px;
--spacing-md: 20px;
background-color: var(--layer100);
transition: background-color 0.1s;
color: var(--text);
font-family: "Nunito Sans", sans-serif;
background-color: var(--neutral-000);
}
.dark body {
--background-dark: var(--neutral-800);
--background: var(--neutral-500);
--background-light: var(--neutral-400);
--background-gradient: linear-gradient(
-30deg,
var(--neutral-500) 0%,
var(--neutral-400) 100%
);
--outline: var(--neutral-300);
--text: var(--neutral-100);
--text-light: white;
background-color: var(--neutral-1000);
}
</style>
<script> <script>
(function () { (function () {
try { try {