Refactor Hero component styles and move inline styles to CSS file

This commit centralizes Hero component styles by moving previously inline styles in `Hero.astro` to `Hero.css`. Additionally, it introduces a `.hero-overlay` class with improved background styling, removes unused component-specific background settings, and aligns spacing for better maintainability and consistency.
This commit is contained in:
2025-07-19 16:56:07 +02:00
parent b830f2edaf
commit 0f13e8eb66
2 changed files with 18 additions and 16 deletions

View File

@ -8,6 +8,19 @@
border-bottom: 1px solid #444;
}
.hero-overlay {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: 2em;
}
h1 {
padding-top: 2em;
}
.nav-main {
display: flex;
align-items: center;
@ -76,7 +89,7 @@
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
/* Background is set in the component */
}
.hero-content {
@ -112,4 +125,4 @@
.button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
}