John O'Keefe
4087599629
Move every tailwind.config.js option into src/style.css: @import, @plugin flowbite/plugin, @source for the flowbite-svelte dist (node_modules is gitignored so auto-detection skips the lib), @theme for the custom primary scale, and @utility container porting the old center plus responsive padding and max-width ladders. darkMode media is v4s default so it needs no equivalent. vite.config.ts gains the tailwindcss() plugin; index.html loses the dead flowbite.js tag. style.css also carries two v4-behavior restorations found while verifying the built CSS: pointer cursor on buttons (v4 preflight dropped v3s rule) and the container max-width ladder the first pass at this file omitted.
99 lines
2.3 KiB
CSS
99 lines
2.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@plugin 'flowbite/plugin';
|
|
|
|
@source "../node_modules/flowbite-svelte/dist";
|
|
|
|
@theme {
|
|
--color-primary-50: #FFF5F2;
|
|
--color-primary-100: #FFF1EE;
|
|
--color-primary-200: #FFE4DE;
|
|
--color-primary-300: #FFD5CC;
|
|
--color-primary-400: #FFBCAD;
|
|
--color-primary-500: #FE795D;
|
|
--color-primary-600: #EF562F;
|
|
--color-primary-700: #EB4F27;
|
|
--color-primary-800: #CC4522;
|
|
--color-primary-900: #A5371B;
|
|
}
|
|
|
|
@utility container {
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
padding-inline: 1rem;
|
|
|
|
@media (width >= theme(--breakpoint-sm)) {
|
|
max-width: theme(--breakpoint-sm);
|
|
padding-inline: 2rem;
|
|
}
|
|
|
|
@media (width >= theme(--breakpoint-md)) {
|
|
max-width: theme(--breakpoint-md);
|
|
}
|
|
|
|
@media (width >= theme(--breakpoint-lg)) {
|
|
max-width: theme(--breakpoint-lg);
|
|
padding-inline: 4rem;
|
|
}
|
|
|
|
@media (width >= theme(--breakpoint-xl)) {
|
|
max-width: theme(--breakpoint-xl);
|
|
padding-inline: 5rem;
|
|
}
|
|
|
|
@media (width >= theme(--breakpoint-2xl)) {
|
|
max-width: theme(--breakpoint-2xl);
|
|
padding-inline: 6rem;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
/* Tailwind v4 removed the v3 preflight rule that gave buttons a
|
|
pointer cursor. Restore it (disabled buttons keep the default). */
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
html {
|
|
background-color: rgba(27, 38, 54, 1);
|
|
/*text-align: center;*/
|
|
color: white;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: white;
|
|
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
|
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
}
|
|
|
|
.maple-font {
|
|
font-family: "Maple Mono NF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
|
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Nunito";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local(""),
|
|
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Maple Mono NF";
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: local(""),
|
|
url("assets/fonts/MapleMono-Bold.woff2") format("woff2");
|
|
}
|
|
|
|
#app {
|
|
height: 100vh;
|
|
text-align: center;
|
|
}
|