MediaWiki: LandingPage.css: Unterschied zwischen den Versionen
Aus Joachim Camerarius (1500-1574)
Noeth (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Noeth (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 3: | Zeile 3: | ||
width: 100vw; | width: 100vw; | ||
margin-left: calc(50% - 50vw); | margin-left: calc(50% - 50vw); | ||
background: url(" | background: url("/hero.jpeg") center center / cover no-repeat; | ||
color: #fff; | color: #fff; | ||
padding: | margin-bottom: 2rem; | ||
padding: 15rem 1rem; | |||
text-align: left; | text-align: left; | ||
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); | box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); | ||
| Zeile 12: | Zeile 13: | ||
.hero h2 { | .hero h2 { | ||
font-weight: 700; | font-weight: 700; | ||
font-size: | font-size: 3rem; | ||
animation: fadeIn 1.7s cubic-bezier(.55,.085,.68,.53) both; | animation: fadeIn 1.7s cubic-bezier(.55,.085,.68,.53) both; | ||
} | } | ||
.hero h5 { | .hero h5 { | ||
font-size: 1. | font-size: 1.5rem; | ||
font-weight: 500; | |||
font-style: normal !important; | font-style: normal !important; | ||
animation: fadeIn 2s cubic-bezier(.55,.085,.68,.53) both; | animation: fadeIn 2s cubic-bezier(.55,.085,.68,.53) both; | ||
Aktuelle Version vom 11. November 2025, 13:33 Uhr
.hero {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
background: url("/hero.jpeg") center center / cover no-repeat;
color: #fff;
margin-bottom: 2rem;
padding: 15rem 1rem;
text-align: left;
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
}
.hero h2 {
font-weight: 700;
font-size: 3rem;
animation: fadeIn 1.7s cubic-bezier(.55,.085,.68,.53) both;
}
.hero h5 {
font-size: 1.5rem;
font-weight: 500;
font-style: normal !important;
animation: fadeIn 2s cubic-bezier(.55,.085,.68,.53) both;
}
/* --- Fade-in animation --- */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Optional: scroll hint link if you re-add it --- */
.hero-scroll a {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
text-decoration: none;
font-weight: 500;
letter-spacing: .1em;
transition: opacity .3s;
}
.hero-scroll a:hover {
opacity: .6;
}