diff --git a/src/components/Header.astro b/src/components/Header.astro
index d9885cd..8f2dfed 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -35,8 +35,8 @@ import "../../styles/components/Header.css"
- About
- Contact
+ About
+ Contact
diff --git a/src/components/Layout.astro b/src/components/Layout.astro
index 45eec31..574ba22 100644
--- a/src/components/Layout.astro
+++ b/src/components/Layout.astro
@@ -2,6 +2,7 @@
// src/components/Layout.astro
import Header from "./Header.astro";
import Footer from "./Footer.astro";
+import "../../styles/components/Layout.css"
---
diff --git a/styles/components/Header.css b/styles/components/Header.css
index ee047a6..cd92d64 100644
--- a/styles/components/Header.css
+++ b/styles/components/Header.css
@@ -7,6 +7,11 @@
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
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 {
display: flex;
align-items: center;
- margin-right: 377px;
}
.nav-main a,
@@ -86,16 +90,8 @@
}
@media (max-width: 768px) {
- .nav-container {
- padding: 1rem;
- }
-
- .nav-links {
- gap: 1rem;
- }
-
- .nav-main {
- margin-right: 20px;
+ .header {
+ height: 65px;
}
.logo {
@@ -106,14 +102,16 @@
.dropdown-content {
right: 0;
}
+
+ .header-spacer {
+ height: 65px;
+ }
}
@media (max-width: 480px) {
.header {
- display: flex;
- justify-content: space-between;
- align-items: center;
padding: 0.5rem;
+ height: 60px;
}
.logo {
@@ -121,13 +119,13 @@
height: 2.5em;
}
- .nav-main {
- margin-right: 10px;
- }
-
.nav-main a,
.dropdbtn {
margin: 0 0.5rem;
font-size: 0.9rem;
}
+
+ .header-spacer {
+ height: 60px;
+ }
}
diff --git a/styles/components/Layout.css b/styles/components/Layout.css
new file mode 100644
index 0000000..99181a4
--- /dev/null
+++ b/styles/components/Layout.css
@@ -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;
+}
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
index 68e3acd..8a4d2b2 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -11,7 +11,7 @@ html {
}
body {
- font-family: var(--font-family-primary);
+ font-family: var(--font-family-primary), serif;
background-color: var(--color-background);
color: var(--color-text);
line-height: var(--line-height);