Kenzo/Gallus_Pub
2
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Update styles and layout for improved responsiveness and consistency:

Browse Source 
- **Global fonts**: Adjusted `font-family` fallback to include `serif`.
- **Header improvements**: Refined structure with flexbox, adjusted heights, and fixed responsive issues (e.g., removed hardcoded margins).
- **New Layout styles**: Added scoped `Layout.css` for better layout control and modularity.
- **Links fix**: Corrected casing in `About` and `Contact` links for proper navigation.
This commit is contained in:
k
2025-07-20 13:57:33 +02:00
parent f3952e7e81
commit 3c1a6fae2c
5 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Header.astro
View File

@ -35,8 +35,8 @@ import "../../styles/components/Header.css"
</div> </div>
<a href="/about">About</a> <a href="/About">About</a>
<a href="/contact">Contact</a> <a href="/Contact">Contact</a>
</nav> </nav>

1
src/components/Layout.astro
View File

@ -2,6 +2,7 @@
// src/components/Layout.astro // src/components/Layout.astro
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"
--- ---
<!doctype html> <!doctype html>

34
styles/components/Header.css
View File

@ -7,6 +7,11 @@
z-index: 1000; z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
height: 70px;
} }
@ -34,7 +39,6 @@
.nav-main { .nav-main {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 377px;
} }
.nav-main a, .nav-main a,
@ -86,16 +90,8 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.nav-container { .header {
padding: 1rem; height: 65px;
}
.nav-links {
gap: 1rem;
}
.nav-main {
margin-right: 20px;
} }
.logo { .logo {
@ -106,14 +102,16 @@
.dropdown-content { .dropdown-content {
right: 0; right: 0;
} }
.header-spacer {
height: 65px;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.header { .header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem; padding: 0.5rem;
height: 60px;
} }
.logo { .logo {
@ -121,13 +119,13 @@
height: 2.5em; height: 2.5em;
} }
.nav-main {
margin-right: 10px;
}
.nav-main a, .nav-main a,
.dropdbtn { .dropdbtn {
margin: 0 0.5rem; margin: 0 0.5rem;
font-size: 0.9rem; font-size: 0.9rem;
} }
.header-spacer {
height: 60px;
}
} }

15
styles/components/Layout.css Normal file
View File

@ -0,0 +1,15 @@
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
padding: 0 1rem;
}

2
styles/index.css
View File

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