Vorlage:Main page/header/styles.css: Unterschied zwischen den Versionen
Aus Onos Wiki
Weitere Optionen
Kevkus (Diskussion | Beiträge) Die Seite wurde neu angelegt: „.tg-mainpage-header { position: relative; margin-top: -2rem; margin-bottom: -4rem; padding-top: 6rem; padding-bottom: 6rem; clear: both; overflow: hidden; →Prevent circular inscription from affecting element size: pointer-events: none; →So that you can click elements overlap with the header: } .tg-mainpage-header::before { content: ''; position: absolute; inset: 0; background-image: url(/images/1/1d/Magiccircle.svg); background-repea…“ |
Admin (Diskussion | Beiträge) Add TemplateStyles for main page header |
||
| Zeile 1: | Zeile 1: | ||
. | .onos-mainpage-header { | ||
position: relative; | |||
overflow: hidden; | |||
border-radius: 18px; | |||
padding: 2rem; | |||
margin: 1rem 0 1.5rem; | |||
background: linear-gradient(135deg, #111827 0%, #1e293b 55%, #312e81 100%); | |||
color: #f8fafc; | |||
} | } | ||
. | .onos-mainpage-header a { | ||
color: inherit; | |||
text-decoration: none; | |||
} | } | ||
. | .onos-mainpage-header__bg { | ||
position: absolute; | |||
inset: 0; | |||
opacity: 0.12; | |||
pointer-events: none; | |||
} | } | ||
.onos-mainpage-header__sigil { | |||
position: absolute; | |||
right: -4rem; | |||
top: -5rem; | |||
width: 24rem; | |||
transform: rotate(12deg); | |||
} | |||
.onos-mainpage-header__inner { | |||
. | position: relative; | ||
display: flex; | |||
gap: 1.5rem; | |||
align-items: center; | |||
z-index: 1; | |||
} | } | ||
. | .onos-mainpage-header__logo-image { | ||
width: 160px; | |||
height: auto; | |||
} | } | ||
. | .onos-mainpage-header__eyebrow { | ||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
font-size: 0.82rem; | |||
opacity: 0.8; | |||
margin-bottom: 0.35rem; | |||
} | } | ||
. | .onos-mainpage-header__title { | ||
margin: 0; | |||
font-size: 2.5rem; | |||
line-height: 1.05; | |||
} | } | ||
. | .onos-mainpage-header__subtitle { | ||
max-width: 42rem; | |||
margin: 0.7rem 0 1rem; | |||
font-size: 1rem; | |||
line-height: 1.55; | |||
opacity: 0.95; | |||
} | } | ||
.onos-mainpage-header__actions { | |||
display: flex; | |||
gap: 0.75rem; | |||
flex-wrap: wrap; | |||
} | } | ||
. | .onos-mainpage-button { | ||
display: inline-block; | |||
padding: 0.7rem 1rem; | |||
border-radius: 999px; | |||
background: rgba(255,255,255,0.12); | |||
border: 1px solid rgba(255,255,255,0.18); | |||
font-weight: 600; | |||
} | } | ||
. | .onos-mainpage-button--primary { | ||
background: #f8fafc; | |||
color: #111827; | |||
} | } | ||
@ | @media (max-width: 720px) { | ||
.onos-mainpage-header__inner { | |||
flex-direction: column; | |||
align-items: flex-start; | |||
} | |||
.onos-mainpage-header__logo-image { | |||
width: 120px; | |||
} | |||
} | } | ||
Version vom 24. April 2026, 21:03 Uhr
.onos-mainpage-header {
position: relative; overflow: hidden; border-radius: 18px; padding: 2rem; margin: 1rem 0 1.5rem; background: linear-gradient(135deg, #111827 0%, #1e293b 55%, #312e81 100%); color: #f8fafc;
}
.onos-mainpage-header a {
color: inherit; text-decoration: none;
}
.onos-mainpage-header__bg {
position: absolute; inset: 0; opacity: 0.12; pointer-events: none;
}
.onos-mainpage-header__sigil {
position: absolute; right: -4rem; top: -5rem; width: 24rem; transform: rotate(12deg);
}
.onos-mainpage-header__inner {
position: relative; display: flex; gap: 1.5rem; align-items: center; z-index: 1;
}
.onos-mainpage-header__logo-image {
width: 160px; height: auto;
}
.onos-mainpage-header__eyebrow {
text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; opacity: 0.8; margin-bottom: 0.35rem;
}
.onos-mainpage-header__title {
margin: 0; font-size: 2.5rem; line-height: 1.05;
}
.onos-mainpage-header__subtitle {
max-width: 42rem; margin: 0.7rem 0 1rem; font-size: 1rem; line-height: 1.55; opacity: 0.95;
}
.onos-mainpage-header__actions {
display: flex; gap: 0.75rem; flex-wrap: wrap;
}
.onos-mainpage-button {
display: inline-block; padding: 0.7rem 1rem; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); font-weight: 600;
}
.onos-mainpage-button--primary {
background: #f8fafc; color: #111827;
}
@media (max-width: 720px) {
.onos-mainpage-header__inner {
flex-direction: column;
align-items: flex-start;
}
.onos-mainpage-header__logo-image {
width: 120px;
}
}