Compare commits

..

3 Commits

Author SHA1 Message Date
tobias
e3f725bf5c Tiny footer CSS enhancements
All checks were successful
continuous-integration/drone/push Build is passing
2024-05-19 20:58:07 +02:00
tobias
526bd24742 Reasonabler CSS defaults 2024-05-19 20:46:41 +02:00
tobias
2cbd830255 Add light & dark theme 2024-05-19 20:45:22 +02:00
3 changed files with 46 additions and 3 deletions

View File

@ -3,9 +3,9 @@ import { getCurrentYear } from "@/utils/date";
import ThemeSwitcher from "./ThemeSwitcher.astro"; import ThemeSwitcher from "./ThemeSwitcher.astro";
--- ---
<footer class="flex justify-between"> <footer class="flex justify-between items-center py-4">
<p class="text-lg font-semibold"> <p class="text-lg font-semibold">
&copy; {getCurrentYear()} Example Website. All rights reserved. &copy; {getCurrentYear()} Autonomic. Template distributed under AGPL 3.0.
</p> </p>
<ThemeSwitcher/> <ThemeSwitcher/>
</footer> </footer>

View File

@ -2,6 +2,45 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.light {
--black: 10, 16, 19;
--white: 243, 252, 248;
--absolute-black: 0, 0, 0;
--absolute-white: 255, 255, 255;
/* Use these in tailwind.config.cjs */
--primary: var(--black);
--secondary: var(--black);
--tertiary: var(--black);
--text: var(--black);
--textInverted: var(--absolute-white);
--link: var(--black);
--background: var(--white);
}
.dark {
--black: 10, 16, 19;:root {
}
--white: 243, 252, 248;
--absolute-black: 0, 0, 0;
--absolute-white: 255, 255, 255;
/* Use these in tailwind.config.cjs */
--primary: var(--white);
--secondary: var(--white);
--tertiary: var(--white);
--text: var(--white);
--textInverted: var(--absolute-black);
--link: var(--white);
--background: var(--black);
}
.autonomic { .autonomic {
/* Palette */ /* Palette */
/* RGBA instead of hex so that opacity will work */ /* RGBA instead of hex so that opacity will work */
@ -60,4 +99,8 @@
ul { ul {
@apply list-disc; @apply list-disc;
} }
select {
@apply bg-background border-primary border px-2 py-1 text-lg;
}
} }

View File

@ -31,7 +31,7 @@ import "@/global.css"
} }
</style> </style>
</head> </head>
<body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-4 text-primary bg-background"> <body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 text-primary bg-background">
<slot /> <slot />
</body> </body>
</html> </html>