feat: move theme inline
This commit is contained in:
parent
d1a235369d
commit
4c1a6ed9f6
@ -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;
|
||||||
|
@ -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));
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user