Po raz pierwszy tworzyłem layout w ciemnych kolorach. Nie było to proste, ale po kilku długich wieczorach udało mi się stworzyć wstępne zarysy. Screen, który zamieściłem we wcześniejszym wpisie stracił trochę na aktualności. Myślę jednak, że zmiany były tego warte.

Coś się zmieniło?

Nie da się nie zauważyć, że zmiany są dosyć gruntowne. Homepage stał się teraz takim hubem, od którego można zacząć przeglądanie reszty podstron. Zrezygnowałem ze standardowego układu bloga. Chronologiczna lista wpisów wydawała mi się trochę nudna, więc zaproponowałem coś, co moim zdaniem jest bardziej atrakcyjne dla czytelnika.

Strona główna zawiera tylko jeden, najświeższy wpis. Właściwie tylko nawet jego teaser mający zachęcić do przeczytania reszty. Jeśli odwiedzający nie będzie nim zainteresowany, to pod spodem znajdzie różnorodne sposoby na przeglądanie innych zasobów. Archiwum, kategorie, tagi, najnowsze wpisy i komentarze. Wszystko to jeszcze wizualnie rozdziela feed wyświetlający 12 ostatnich zdjęć na Flickr.

W takiej bardziej rozbudowanej stopce znalazły się niewielkie boksy zawierające:

• krótkie informacje kontaktowe,
• linki, którymi chcę się podzielić,
• oraz fragment widget wyświetlający moją najnowszą aktywność (źródło z FriendFeedu)

Więcej informacji na mój temat oczywiście na stronie o mnie. Aktywność z FriendFeedu również wygląda tam dużo ciekawiej.

Widgety i javascript

Większość z elementów na głównej stronie jest poskładana z widgetów, które oferują sporo ciekawych funkcjonalności. Niestety w moim mniemaniu ich wyświetlanie nie jest zbyt elastyczne. Aby ułatwić pozycjonowanie elementów w kontenerze z czterema kolumnami, pomogłem sobie trochę prostą funkcją JS, która po załadowaniu strony grupuje dwa widgety (tagi i kategorie) przenosząc je do dodatkowego kontenera.

function fixWidgets(){
var middleBox = new Element('div',{'class':'second-col','id':'second-col'})
middleBox.insert($$('div.widget_categories')[0]).insert($$('div.widget_tag_cloud')[0])
$('archives').insert({ 'after': middleBox })
}
document.observe('dom:loaded',fixWidgets)


Podobne funkcje wykorzystałem jeszcze w paru innych miejscach. Te kilka linijek kodu nie byłoby oczywiście możliwe bez wspaniałej biblioteki Prototype JS.

Problem z fontami

Przy okazji tworzenia ciemnego layotu jeden problem nie dawał mi spokoju. Używany przeze mnie font Lucida Grande (i jak się później okazało, w ogóle wszystkie fonty) wyglądają okropnie grubo na czarnym tle. Normalne – ciemne litery na białym tle – wyglądały całkiem w porządku.

Pogooglałem trochę w poszukiwaniu wyjaśnienia tego dziwnego zachowania. Na jednym z blogów znalazłem odpowiedź. Winnym okazał się bug w module Core Text odpowiedzialnym za renderowanie czcionek w systemie Mac OS X. Na Leopardzie wszystkie jasne czcionki na ciemnym tle wyglądają w ten sposób. Zarówno pod Firefoxem jak i Safari.

Autor podał rozwiązanie, które tymczasowo zastosowałem w swoim arkuszu stylów. Hack polega na ustawieniu opacity (przeźroczystości) na 0.999999 zmuszając w ten sposób przeglądarkę do zmiany sposobu renderowania tekstu.

/* OS X CSS font rendering hack */
h1,h2,h3,h4,h5,p,li,a,span,strong,input,td,th,caption,textarea{
opacity:0.999999;
}


Doraźnie pomogło. Nie jestem jednak przekonany ostatecznie o stuprocentowej poprawności takiego rozwiązania. Przydałaby się tutaj jeszcze detekcja systemu operacyjnego odwiedzających. Użytkownicy systemów Windows i Linux są wolni od tego błędu. Nie potrzeba więc dodatkowo obciążać sposobu renderowania strony przez inne przeglądarki. Dodatkowo nie wiem też, czy zastosowanie przezroczystości nie będzie miało odczuwalnego wpływu na płynność wyświetlania strony. Musiałbym to przetestować na jakimś wolniejszym komputerze (co wcale nie jest takie proste )

Czy to wszystko?

Na początek wystarczy. Jestem zadowolony z efektu i chciałbym teraz moją uwagę poświęcić przede wszystkim pisaniu. Ale na pewno kilka elementów będę jeszcze dopracowywał. Nie do końca pasuje mi sekcja z archiwum. Muszę też zrobić porządek w postach, kategoriach i tagach. Niektóre rzeczy były tam wcześniej nie do końca przemyślane i zrobił się tam mały bałagan.

Chętnie wysłucham waszych opinii na temat zmiany, która zaszła. Czy podoba się wam nowy wygląd? Co sądzicie kolorach, tekstach, kontraście (sam chyba myślę, że w niektórych miejscach jest zbyt słaby), układzie i nawigacji? Które elementy się wam podobają, a które przeszkadzają?

Nie chcę na razie mówić o detalach. Poniżej wrzucam małą zajawkę tego, co będzie można zobaczyć wkrótce. Powiem tylko jedno: it is going to be dark.