Documentation Index
Fetch the complete documentation index at: https://docs.karpatokforrasa.hu/llms.txt
Use this file to discover all available pages before exploring further.
Szekció alapja
Minden szekció a kf-section osztályból indul:
.kf-section {
padding: clamp(60px, 8vw, 100px) 0;
border-bottom: 1px solid var(--kf-border);
}
Szekció variánsok
| Osztály | Háttér | Mikor |
|---|
kf-section | Átlátszó (oldal háttér látszódik) | Alap szekció |
kf-section kf-dark | var(--kf-surface) + bottom border | Kiemelt / sötétebb szekciók |
kf-section kf-hero | Speciális gradiens hero háttér | Csak a nyitóblokknál |
kf-section kf-instagram-section | Pink/zöld radial gradiens | Csak az Instagram szekciónál |
Container
.kf-container {
width: min(1180px, 100%);
margin-left: auto;
margin-right: auto;
padding-left: clamp(16px, 4vw, 48px);
padding-right: clamp(16px, 4vw, 48px);
}
Elrendezési módosítók
Középre igazított (kf-center)
.kf-center {
text-align: center;
}
.kf-center .kf-section-text {
margin-left: auto;
margin-right: auto;
}
Kétoszlopos split (kf-split)
.kf-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
@media (max-width: 860px) {
.kf-split {
grid-template-columns: 1fr;
gap: 40px;
}
}
Hero grid (kf-hero-grid)
.kf-hero-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
min-height: calc(100vh - 80px);
padding: clamp(60px, 8vw, 100px) 0;
}
@media (max-width: 860px) {
.kf-hero-grid {
grid-template-columns: 1fr;
min-height: auto;
text-align: center;
}
}
Kártyarács (kf-cards)
.kf-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
@media (max-width: 860px) {
.kf-cards { grid-template-columns: 1fr; }
}
Programrács (kf-program-grid)
.kf-program-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 48px;
text-align: left;
}
@media (max-width: 640px) {
.kf-program-grid { grid-template-columns: 1fr; }
}
Szekció-sorrend a főoldalon
kf-hero ← Átlátszó, min-height 100vh
kf-dark ← Küldetés + kártyák
kf-section ← Programok
kf-dark ← Merch & Támogatás
kf-section ← Közösségi jelenlét
kf-instagram ← Instagram feed
kf-dark ← Támogatás + adatok
Spacing skála
| Token | Érték | Felhasználás |
|---|
clamp(60px, 8vw, 100px) | Szekció padding Y | Minden kf-section |
48px | Kártyarács margin-top | Kártyák a szekciócím alatt |
24px | Kártyarács gap | kf-cards, kf-program-grid |
20px | Programrács gap | kf-program-grid |
clamp(32px, 6vw, 80px) | Split gap | kf-split |
