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

Refactor Hero component styles and move inline styles to CSS file

Browse Source 
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:
Kenzo
2025-07-19 16:56:07 +02:00
parent b830f2edaf
commit 0f13e8eb66
2 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
Gallus_Pub_v1/src/components/Hero.astro
View File

@ -8,11 +8,11 @@ import "../../styles/components/Hero.css"
<div class="hero-overlay">
<div class="hero-content">
<h1>Dein Irish Pub</h1>
<p>Im Herzen von St.Gallen</p>
<a href="#" class="button">Aktuelles ↓</a>
</div>
@ -21,16 +21,5 @@ import "../../styles/components/Hero.css"
</section>
<style>
.hero-overlay {
background-image: url('/images/Background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: 2em;
}
h1 {
padding-top: 2em;
}
</style>

17
Gallus_Pub_v1/styles/components/Hero.css
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);
}
}