Update CSS imports and Dockerfile for consistent styles handling

- Enforced `!important` for `--color-background` in `variables.css`.
- Centralized CSS imports in `Layout.astro` for cleaner markup.
- Adjusted Dockerfile to ensure CSS variables are copied to `public/styles`.
- Refined fallback handling in `index.css` for `background-color`.
This commit is contained in:
2025-07-23 21:57:33 +02:00
committed by k
parent 8e6bd12da5
commit 761bd6be80
4 changed files with 8 additions and 4 deletions

View File

@ -4,6 +4,9 @@ WORKDIR /app
COPY package*.json ./ COPY package*.json ./
RUN npm ci RUN npm ci
COPY . . COPY . .
# Ensure CSS variables are present
RUN mkdir -p public/styles
RUN cp -r styles/* public/styles/ || true
RUN npm run build RUN npm run build
FROM node:20-alpine AS production FROM node:20-alpine AS production

View File

@ -3,6 +3,8 @@
import Header from "./Header.astro"; import Header from "./Header.astro";
import Footer from "./Footer.astro"; import Footer from "./Footer.astro";
import "../../styles/components/Layout.css" import "../../styles/components/Layout.css"
import "../../styles/variables.css"
import "../../styles/index.css"
--- ---
<!doctype html> <!doctype html>
@ -14,8 +16,6 @@ import "../../styles/components/Layout.css"
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gallus Pub</title> <title>Gallus Pub</title>
<link rel="stylesheet" href="/styles/variables.css" />
<link rel="stylesheet" href="/styles/index.css" />
</head> </head>
<body> <body>

View File

@ -12,7 +12,8 @@ html {
body { body {
font-family: var(--font-family-primary), serif; font-family: var(--font-family-primary), serif;
background-color: var(--color-background); background-color: var(--color-background, #000000);
background: #000000;
color: var(--color-text); color: var(--color-text);
line-height: var(--line-height); line-height: var(--line-height);
} }

View File

@ -1,6 +1,6 @@
:root { :root {
/* Colors */ /* Colors */
--color-background: #000; --color-background: #000000 !important;
--color-text: #f5f5f5; --color-text: #f5f5f5;
--color-accent-green: #213b28; --color-accent-green: #213b28;
--color-accent-beige: #ceb39b; --color-accent-beige: #ceb39b;