Move themes into their own style tag in Layout.astro
This commit is contained in:
parent
0fe23c7020
commit
e7aa57adcb
2 changed files with 53 additions and 43 deletions
|
|
@ -52,7 +52,6 @@ const { title, optionalPreloads } = Astro.props;
|
|||
window.dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "G-P1JX4G9KSF");
|
||||
</script>
|
||||
<script>
|
||||
|
|
@ -87,15 +86,6 @@ const { title, optionalPreloads } = Astro.props;
|
|||
--background-color: black;
|
||||
--text-color: #fff;
|
||||
}
|
||||
[data-theme="alu"] {
|
||||
--background-color: #211d29;
|
||||
--background-highlight: #35314a;
|
||||
--accent-color: #624978;
|
||||
--accent-color-brighter: #543d65;
|
||||
--text-color: #fff;
|
||||
--text-color-accent: #c7c7c7;
|
||||
--dropdown-background-color: #262539;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -148,39 +138,6 @@ const { title, optionalPreloads } = Astro.props;
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
[data-theme="mocha"] {
|
||||
/* Catppucin Mocha theme */
|
||||
--background-color: #1e1e2e;
|
||||
--background-highlight: #45475a;
|
||||
--accent-color: #181825;
|
||||
--accent-color-brighter: #242539;
|
||||
--text-color: #cdd6f4;
|
||||
--text-color-accent: #bac2de;
|
||||
--dropdown-background-color: #32324e;
|
||||
}
|
||||
|
||||
[data-theme="macchiato"] {
|
||||
/* Catppuccin Macchiato Theme */
|
||||
--background-color: #24273a;
|
||||
--background-highlight: #494d64;
|
||||
--accent-color: #1e2030;
|
||||
--accent-color-brighter: #2a2d42;
|
||||
--text-color: #cad3f5;
|
||||
--text-color-accent: #b8c0e0;
|
||||
--dropdown-background-color: #323550;
|
||||
}
|
||||
|
||||
[data-theme="rose_pine"] {
|
||||
/* Rosé Pine Theme */
|
||||
--background-color: #191724;
|
||||
--background-highlight: #1f1d2e;
|
||||
--accent-color: #26233a;
|
||||
--accent-color-brighter: #2e2b4a;
|
||||
--text-color: #e0def4;
|
||||
--text-color-accent: #c7c5e0;
|
||||
--dropdown-background-color: #1f1d2e;
|
||||
}
|
||||
|
||||
.skip-to-main-content-link {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
|
@ -330,5 +287,48 @@ const { title, optionalPreloads } = Astro.props;
|
|||
border: 2px solid var(--text-color);
|
||||
}
|
||||
</style>
|
||||
<style is:global>
|
||||
[data-theme="alu"] {
|
||||
--background-color: #211d29;
|
||||
--background-highlight: #35314a;
|
||||
--accent-color: #624978;
|
||||
--accent-color-brighter: #543d65;
|
||||
--text-color: #fff;
|
||||
--text-color-accent: #c7c7c7;
|
||||
--dropdown-background-color: #262539;
|
||||
}
|
||||
[data-theme="mocha"] {
|
||||
/* Catppucin Mocha theme */
|
||||
--background-color: #1e1e2e;
|
||||
--background-highlight: #45475a;
|
||||
--accent-color: #181825;
|
||||
--accent-color-brighter: #242539;
|
||||
--text-color: #cdd6f4;
|
||||
--text-color-accent: #bac2de;
|
||||
--dropdown-background-color: #32324e;
|
||||
}
|
||||
|
||||
[data-theme="macchiato"] {
|
||||
/* Catppuccin Macchiato Theme */
|
||||
--background-color: #24273a;
|
||||
--background-highlight: #494d64;
|
||||
--accent-color: #1e2030;
|
||||
--accent-color-brighter: #2a2d42;
|
||||
--text-color: #cad3f5;
|
||||
--text-color-accent: #b8c0e0;
|
||||
--dropdown-background-color: #323550;
|
||||
}
|
||||
|
||||
[data-theme="rose_pine"] {
|
||||
/* Rosé Pine Theme */
|
||||
--background-color: #191724;
|
||||
--background-highlight: #1f1d2e;
|
||||
--accent-color: #26233a;
|
||||
--accent-color-brighter: #2e2b4a;
|
||||
--text-color: #e0def4;
|
||||
--text-color-accent: #c7c5e0;
|
||||
--dropdown-background-color: #1f1d2e;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,16 @@ import { ViewTransitions } from "astro:transitions";
|
|||
<meta property="twitter:description" content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization." />
|
||||
<meta property="twitter:image" content="/logo.png" />
|
||||
<ViewTransitions />
|
||||
<script src="https://www.googletagmanager.com/gtag/js?id=G-P1JX4G9KSF" is:inline></script>
|
||||
<script is:inline>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
window.dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "G-P1JX4G9KSF");
|
||||
</script>
|
||||
<script>
|
||||
const currentLang = localStorage.getItem("alu__selectedLanguage");
|
||||
const redirect = (loc: string) => (window.location.href = loc);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue