Ábris ismét megtisztelt bizalmával. Legutóbbi kooperációnk eredménye a sublab.pro volt, ami egy táncprojekt bemutakozó weboldala volt. Most Jessica Simet kortárs táncos saját weboldalát kellett elkészítenem egyedi webdesignból.
Most is Adobe Illustratorban kaptam a terveket. A weboldal alapvetően egy portfólió oldal néhány egyedi CSS megoldással. Ábris azt találta ki, hogy az arculati színek mellett minden nap más színkombóval jelenjen meg a weboldal. A színek miatt a főoldali főképen lévő logó egy screen lencseeffekttel van elhelyezve, ami ráadásul SVG-ben van. A CSS3-nak köszönhetően azonban meg tudtam oldani mix-blend-mode paraméterrel. A kép fölött van még egy külön mix-blend-mode effekt, ami elszaturálja a képet az amúgy minden nap változó alapszínnel. Az alapszíneket 3 sornyi CSS kóddal oldottam meg, ami a PHP date függvényével lekéri a napot és mindig a megfelelő 3 CSS sornyi kóddal felülírja.
A layout egyáltalán nem megszokott, nekem nagyon bejön. Három különböző elrendezést talált ki hozzá:
- A képernyő 40%-nyi szélességének bal oldalán a menüpontok és egy image kép van fixen, 60%-nyi szélességben jobb oldalon pedig a görgethető tartalom 100% magasságban. Ilyen a works, info és a naptár oldal.
- A projekt részletes oldalakon hármas felosztás van, a menü fixen 150 pixel szélességben, a szöveges tartalom és a fotó,- és videógaléria mellette a fennmaradó képernyőszélesség (100% – 150 pixel) felosztva 30%-ban a bal, 70%-ban a jobb oldalon.
- A Showreel oldal hasonlít az előzőhöz annyi különbséggel, hogy a 150 pixel széles bal oldali fix menü mellett a maradék képernyőszélességen egy videó helyezkedik el 16:9-es automatikus képaránnyal
Külön érdekesség, hogy a mobilverzióban a projekt részletes oldalakon shortcode-okkal oldottam meg a beilleszhető fotógaléria és videók elhelyezkedését, amely nem automatikus, hanem a felhasználónak kell megadnia, mivel az nem a szöveg alá rendeződik dinamikusan (mint a legtöbb mobilverzióban), hanem a felhasználó tudja megadni.
Az admin felülethez ACF Pro-t használtam, más plugin nem is használtam, csak egy Contact Form 7 captcha védelemmel, valamint egy tűzfal a szokásos védelemmel beállítva.
