BoP #9: Wygląd postów

Kolejnym elementem, któremu zmienimy wygląd na ten „właściwy” jest lista postów.

 

Przygotowanie

Na początek musimy usunąć tło, które zdecydowanie nie pasuje 🙂 Usuwamy

https://codepen.io/morawcik/pen/vZNdpo

 

Następnie zmienimy czcionkę na całej stronie i zmienimy kolor tekstu na odrobinę jaśniejszy. Przypiszemy te style do <body>

https://codepen.io/morawcik/pen/qjOxoL

 

Nagłówek

Zaczniemy od nadania marginesu dla postów aby tekst nie „zlewał” się z krawędziami.

https://codepen.io/morawcik/pen/weKyXz

 

Postanowiłem, że nagłówki będą w „boxie”, który utworzymy za pomocą cienia – a raczej dwóch cieni nałożonych na siebie.

https://codepen.io/morawcik/pen/weKyEz

 

Jak możecie zauważyć nagłówek znajduje się nieco niżej niż nasz „sidebar”. Jest to spowodowane tym, że <h2> w nagłówku ma ustawiony margines, który nie jest wliczony do całego nagłówka. Możemy to naprawić na kilka sposobów. My po prostu usuniemy wszystkie marginesy z każdego elementu w nagłówku (z <h2> i <p>)

https://codepen.io/morawcik/pen/zzvRXM

 

 

Oczywiście teraz musimy sami „poprawić” marginesy, które usunęliśmy ale w nieco inny sposób. Dodamy padding (zamiast marginesów) nie do <h2> ale do całego nagłówka.

https://codepen.io/morawcik/pen/pwjLbK

 

I na koniec dodamy mały margines dolny do <h2>

https://codepen.io/morawcik/pen/rwOdMP

 

Treść posta

Z tym nie mamy dużo pracy – wystarczy, że dodamy padding i zwiększymy nieco odstępy między liniami.

https://codepen.io/morawcik/pen/weKmor

 

Wykończenie

Tutaj moglibyśmy skończyć ale zobaczcie co się stanie jak dodamy więcej postów (wystarczy skopiować <article> i wkleić jako drugi):

https://codepen.io/morawcik/pen/LLpdyV

 

Stopka znajduje się nie tam gdzie powinna. Aby temu zaradzić musimy nieco zmodyfikować flexowe style w #content. Musimy zamienić:

na:

Po więcej szczegółów zapraszam do odpowiedniego posta dotyczącego flexboxa.

 

Oprócz tego musimy usunąć:

Dlaczego? Przy zmniejszaniu wysokości okna stopka dalej by „latała” a tego nie chcemy 😉

 

https://codepen.io/morawcik/pen/rwOdmR

 

Ostatnia kwestia to małe oddzielenie (wizualne) postów. Użyjemy do tego „delikatnej” ramki ale tylko na dole

Moglibyśmy do dodaj bezpośrednio do <article> ale czy chcemy by ostatni post też miał na dole ramkę? Jeśli nie to musimy użyć takiego selektora:

Co można przetłumaczyć na: każdy <article>, który nie jest (:not()) ostatnim <article> (:last-of-type)

 

Dodałem też dolny margines, bo bez tego ramka nachodziłaby na cień z następnego nagłówka.

https://codepen.io/morawcik/pen/PjPewe

 

Dzisiaj to już wszystko a w następnej części ostatni element czyli sidebar.

 

PS Jeśli stylujecie inaczej to podzielcie się efektami 🙂

 


Post 9 z 13 z serii Blog od podstaw