style.css — apiformink struktūrą

Žymėjimas teisingas; dabar jį apiformink. Šis žingsnis prideda taisyklių į style.css — praėjusios pamokos kintamieji, „reset" ir body lieka lygiai tokie, kokie buvo, o viskas žemiau jų — nauja. Apžvelgsime tas vietas, kurios kažko moko.

Puslapio rėmas

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

max-width neleidžia turiniui išsitempti iki absurdiško pločio dideliame monitoriuje; margin: 0 auto jį centruoja. Būtent ši viena taisyklė ir yra priežastis, kodėl visas puslapis sėdi patogiame stulpelyje, o ne driekiasi nuo krašto iki krašto.

Navigacija ir hero

.navbar yra flex eilė (display: flex), kuri slenkant prilimpa prie viršaus (position: sticky; top: 0). .nav-link.active taisyklė nudažo dabartinio puslapio „piliulę" — ir ji aprašyta po .nav-link:hover, tad ant aktyvios nuorodos „tu esi čia" stilius laimi net tada, kai virš jos yra pelė. Hero pasiskolina tik dvi taisykles — .hero-text h1 didžiajai antraštei ir .hero-sub prigesintai įžangos eilutei.

Kortelės ir vienas pozicionavimo triukas

Kodėl ♡ sėdi tvarkingai kiekvieno paveikslėlio kampe, o ne stumdo išdėstymą? Pažvelk į dvi taisykles kartu:

.card-header { position: relative; }

.fav-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  /* … */
}

position: absolute išima mygtuką iš įprastos tėkmės ir prisega jį pagal koordinates — bet kurio atžvilgiu? — artimiausio protėvio, kuris pats yra pozicionuotas. Būtent todėl .card-header yra position: relative: jis tampa inkaru, tad mygtukas sėdi 0.75rem nuo viršaus ir dešinės savo paties paveikslėlio, o ne viso puslapio. Pašalink position: relative nuo antraštės — ir kiekvienas ♡ nušoks į lango kampą. Ši pora — relative tėvas, laikantis absolute vaiką — yra vienas dažniausiai naudojamų CSS šablonų.

Paveikslėlio taisyklė nedidelė, bet atlieka tikrą darbą:

.picture-card img { width: 100%; height: 200px; object-fit: cover; display: block; }

Trys šaltinio paveikslėliai yra labai skirtingų formų, tačiau kiekviena kortelė vienodo aukščio. height: 200px fiksuoja dėžę; object-fit: cover ją užpildo neišplodamas paveikslėlio, o vietoj to nukerpa tai, kas netelpa. Su object-fit kaip reikiant susipažinsi kliento dalies takelyje.

„Praleidimo" nuoroda — atskleista

.skip-link { position: absolute; top: -100px; /* … */ }
.skip-link:focus { top: 0; }

Štai ir visas „nematoma, kol nefokusuota" triukas: nuoroda pastatyta 100px virš viršutinio krašto, už akiračio. Kai klaviatūros naudotojas prie jos prieina Tab klavišu, :focus suveikia ir ji nuslysta iki top: 0. Jokio JavaScript — viską padaro naršyklės fokuso tvarkymas.

Vieną dalyką galbūt pastebėsi: trys kortelės sustatytos vienu stulpeliu, o ne išdėliotos per puslapį. Taip ir turi būti. <div class="grid"> aplink jas kol kas neturi jokios taisyklės — kortelių sudėliojimas į responsyvų tinklelį yra atskira pamoka, o klasė jau čia, jos laukia. Kol kas apiformintas stulpelis yra visiškai sąžininga tarpinė būsena.