We introduceren het concept van @mediaqueries in CSS.
Veel van wat we met Sass in dit project kunnen doen, is DROOG blijven (herhaal jezelf niet). We hebben dat gedaan door kleur- en maatvariabelen in te stellen. Dat hebben we gedaan met onze fontstacks. Nu doen we het weer met mediaquery's. Elke keer dat we een mediaquery nodig hebben, hebben we nu een @mixin die we kunnen gebruiken. Op die manier, als we ze moeten aanpassen, kunnen we ze op slechts één plek wijzigen.
In plaats van onze mediaquery's dingen te noemen als "iPad" of iets overdreven specifieks zoals dat, gebruiken we gewoon een aantal willekeurige maar begrijpelijke namen zoals "Baby Beer" en "Papa Beer".
We beginnen met een breed scherm en verkleinen het tot de navigatie er slecht uitziet, en dat is onze eerste pauze in de mediaquery. Op dat punt splitsen we de navigatie op in twee rijen van vier in plaats van één rij van acht. We moeten de schaduwen aanpassen om het er goed uit te laten zien.
We passen ook de breedte van de paginaomslag aan bij bepaalde mediaquery's, wat betekent dat we ook moeten aanpassen hoe het logo werkt.
