Szekció alapja
Minden szekció akf-section osztályból indul:
Komponensek
Szekció-layout rendszer
Az oldalszekciók grid-, container- és spacing-rendszere
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Az oldalszekciók grid-, container- és spacing-rendszere
kf-section osztályból indul:
.kf-section {
padding: clamp(60px, 8vw, 100px) 0;
border-bottom: 1px solid var(--kf-border);
}
| 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 |
.kf-container {
width: min(1180px, 100%);
margin-left: auto;
margin-right: auto;
padding-left: clamp(16px, 4vw, 48px);
padding-right: clamp(16px, 4vw, 48px);
}
kf-center).kf-center {
text-align: center;
}
.kf-center .kf-section-text {
margin-left: auto;
margin-right: auto;
}
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;
}
}
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;
}
}
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; }
}
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; }
}
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
| 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 |