style.css — forma ir media užklausa

Dabar apiformink formą ir pridėk vieną media užklausą, kuri suderina puslapį telefonams. Prie style.css prisijungia formos taisyklių blokas ir responsyvus blokas; viskas virš jų lieka kaip buvę.

Visų laukų apiforminimas iškart

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.65rem 1rem;
  font: inherit;
  width: 100%;
}

Pažvelk į tą selektorių. Jis apiformina kiekvieną įvedimo lauką išskyrus žymimuosius langelius ir radijo mygtukus (kuriems reikia savo išvaizdos), plius select ir textarea — tad tavo teksto laukas, el. pašto laukas, iškrentantis sąrašas ir žinutės langas — visi sutampa iš vienos taisyklės. Priežastis, kodėl jis rašomas su :not(), o ne išvardijant input[type="text"], input[type="email"], …, yra tikri spąstai: tikslus sąrašas kaip input[type="text"] neatitinka type="email", tad tą dieną, kai pridedi el. pašto lauką, jis tyliai lieka neapiformintas. :not(checkbox):not(radio) apima kiekvieną esamą tipą ir kiekvieną būsimą.

font: inherit svarbu labiau, nei atrodo: formos valdikliai pagal nutylėjimą nepaveldi puslapio šrifto, tad be jo tavo laukai grįžtų prie senoviško naršyklės numatytojo. O fokuso žiedas, kurį parašei dar nuorodų pamokoje, šiuos laukus jau apima — jis tada įvardijo input, select ir textarea, būtent šiai akimirkai.

Formos forma

Likusi dalis — išdėstymas: .form-card yra apvestas skydelis su max-width, kad eilutės nebūtų per ilgos skaityti; .field išretina kiekvieną užrašo-ir-lauko porą; .form-actions lygiuoja mygtuką į dešinę virš skirtuko; .required nudažo * pavojaus spalva; .hint nustato smulkų šriftą po žinutės langu. Nieko egzotiško — įdomus sprendimas buvo :not() selektorius; likusi dalis — tarpai ir spalva iš kintamųjų, kuriuos jau turi.

Viena media užklausa, deranti kraštus

@media (max-width: 640px) {
  main { padding: 1.5rem 1rem 3rem; }
  .grid { grid-template-columns: 1fr; }
  .navbar { flex-wrap: wrap; gap: 0.75rem; padding: 0.85rem 1rem; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; }
  .nav-link { font-size: 0.875rem; padding: 0.4rem 0.75rem; }
  .form-card { padding: 1.25rem; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
}

Kiekviena taisyklė čia — postūmis, ne perstatymas:

• .grid { grid-template-columns: 1fr } — galerija ir taip pati traukiasi link vieno stulpelio, bet būtent ties 640px auto-fill gali vis dar įsprausti du ankštus stulpelius. Tai priverčia švarų vieną stulpelį telefone. Tai puikus pasidalijimo pavyzdys: auto-fill atlieka responsyvų darbą, media užklausa apkerpa vieną nepatogų kraštą.
• Navigacija apsivynioja ir leidžia savo nuorodoms tapti viso pločio, slenkama eile, o ne išsilieti.
• Forma netenka dalies tarpų, o jos veiksmo mygtukas tampa viso pločio — patogus lietimo taikinys telefone.

Keisk lango dydį peržengdamas 640px ir stebėk, kaip viskas persijungia iškart. Žemiau tos ribos puslapis yra telefono išdėstymas; virš jos — darbalaukio. Tas vienas lūžio taškas, ant jau responsyvios galerijos, yra viskas, ko šiam puslapiui reikia.