================================================================================ Manual pro stylopisy webu Hippos design ================================================================================ Projekt URL: www.hipposdesign.com Autor: Martin Michalek, Studio Shortcat, michalek@shortcat.cz -------------------------------------------------------------------------------- Soubory -------------------------------------------------------------------------------- index.css centralni stylopis ie.css MSIE stylopis print.css tiskovy stylopis /blueprint soubory frameworku Blueprint CSS blueprint-extra.css nase predefinice vlastnosti Blueprint CSS -------------------------------------------------------------------------------- Index barev -------------------------------------------------------------------------------- Aktivni prvky modra - aktivni prvky #3AB3DE barva textu #000 barva pozadi #fff -------------------------------------------------------------------------------- Pismo -------------------------------------------------------------------------------- Zakladni font-size: 12px; line-height: 16px;(=1.34em) Vetsi (Cufon delsi texty) font-size: 20px; Nejvetsi (Cufon nadpisy) font-size: 41px; -------------------------------------------------------------------------------- Z-index "index" -------------------------------------------------------------------------------- Nahledy praci 230 nejvetsi (nejnovejsi) .work.size_new 220 stredni (starsi) .work.size_older 210 nejmensi (nejstarsi) .work.size_oldest 250 mousover nad praci Layout 340 #what_we_like - slogan za "logem" 350 #text_content - obsah stranky/vrstvy s textovym obsahem 370 #navigation FancyBox 510 #fancy_bigIframe, #fancy_freeIframe - nezname casti FancyBoxu 570 .fancy_bg - stin pod obsahem FancyBoxu (nepouzivame) 570 #fancy_overlay - prekryvaci polopruhledna vrstva 573 #fancy_left, #fancy_right - strankovani je pod obsahem kvuli popisku 575 #fancy_title, #fancy_bottom- popisek obrazku je normalne schovany pod obrazkem 580 #fancy_outer - vnejsi obal obsahu FancyBoxu 597 #fancy_content, #fancy_img - samotny obsah - v nasem pripade jen obrazky 598 .fancy_loading, .first_image_in_set #fancy_title, .first_image_in_set #fancy_bottom, #fancy_paging - navigacni prvky musi byt nad obsahem 600 .first_image_in_set #fancy_outer:hover, #fancy_title:hover - na prvnim obrazku musi po najeti mysi byt titulek prekryt obrazkem Titulek stranky 650 #navigation, #we_are_hippos, #project_title - navigace, hippos "logo", nazev projektu v detailu Loading indikator 670 #loading Zavirani stranky/vrstvy 690 #closing_cross, .fancy_close - krizek pro zavirani stranky/vrstvy s textovym obsahem a FancyBoxu, musi byt nejvyse, aby prekryval pripadne presahujici text titulku stranky -------------------------------------------------------------------------------- Layout -------------------------------------------------------------------------------- Spodni cast Fancyboxu: / --- fancy_bottom --- / (absolute, bottom, 100%) / 40 / --- title --- / 20 / --- paging --- / 50 / (float: left) (float: right) - Šířka paging při obsahu "99/99" = cca 90 px (počítáme 100) - Min šířka title celkem bez zalomení 640x480 = 400 px - Max šířka title kvůli čitelnosti = 630 px Mouseover nad nahledem prace (.work) / --- img (120-160px) --- / 15 / --- span (125px) --- / 4 /