Lite uppdateringar på bloggen
Ingen vila för en utarbetat webbdesigner!
En klok man, Jakob Nielsen, sa att ”Enda sättet att förbättra design är att identifiera dålig design och förbättra den”. Det har jag börjat med på bloggen senaste veckan.
Faktum är att det är en hel del av designen som jag har varit och pillrat på, så naturligtvis måste det rapporteras om.
Jag har bytt typsnittet på sidan på rubriker, menyer och kod-stycken. Förut använde jag Droid Sans som rubrik-typsnitt och en vanlig monospace på kod och i menyn, men detta blev klart bättre:
Rubrikerna i inläggen
Dessa innehåller den del regler för hur alla rubriker på sidan skall hanteras. Jag använder nu den underbara Ubuntu-fonten till dessa:
h1, h2, h3, h4, h5, h6 { font-family: 'Ubuntu', sans-serif; font-weight: bold; padding-top: 1.1rem; line-height: 120%; }
Varje artikels rubrik
Just rubriken på artiklarna på bloggen har ett lite speciellt utseende för att bli extra tydligt att läsa. De har en lite ljusare färg (#333), men som kontrast mot detta har de en liten skuggning med färgen #ccc tack vare text-shadow. Detta ger ingen stor skillnad, men nu är det som sagt detaljerna som jagas.
article header a, article header a:visited { color: #333; letter-spacing: 0.0625rem; text-decoration: none; font-size: 2rem; line-height:110%; text-shadow: 1px 1px 1px #ccc; }
Kod-stycke
Kod är faktiskt inte helt enkelt att få bra utan plugins. En klar förbättring vore ju att ha ett plugin som ger fördelar som syntax-highlightning och kanske till och med radnumrering, men även utan plugins går det att lösa. Ett problem jag hade var att pre-texten stack utanför ”kod-lådan”, men detta åtgärdades genom att lägga på display:block samt white-space: pre. Annars används Ubuntu’s Mono som typsnitt för kod.
pre { display: block; font-family: 'Ubuntu Mono', monospace; font-size: 1rem; background-color: #222; margin: 2rem 0; padding: 1rem; color: #eee; white-space: pre; word-wrap:break-word; }
Widgets
Mina widgets har även de fått en uppdatering. De använde förut den namngivna färgen ”chocolate”, men jag ville ha det lite mer likt logotypen, så det fick bli en gradient-fyllning på dessa.
aside .widget h3 { background: linear-gradient(#ffa500, #FF6F16); font-size: 1rem; text-align: center; margin-bottom: 1rem; padding: 0.1rem; padding-bottom: 0.3rem; }
Sökknappen
Utöver detta har jag byggt om sökknappen/sökruta här till höger en hel del. För att få bort orginal-funktionen på sökrutan gjorde jag en ersättare i filen searchform.php. När denna fil finns kommer dess innehåll att användas istället för orginalet på sidan.
<div id="search-area"> <form method="get" id="searchform" action="<?php bloginfo('url'); ?>"> <input class="text" type="text" value="Sök på bloggen" name="s" id="s" onfocus="empty_search();" /> <input type="submit" class="submit" id="searchbutton" name="Submit" value="" /> </form> </div><!-- END SEARCH-AREA -->
CSS för detta
Den CSS som inte syns här är all CSS för att ställa om storleken på sökrutan vid de olika responsiva upplösningarna.
#searchbutton { background-image: url('images/icons/sokknapp.png'); background-repeat: no-repeat; background-position: center center; display: table-cell; vertical-align: middle; border: none; } #searchbutton:hover { border: thin solid #FF672A; } #s { font-style: italic; color: #686868; display: table-cell; width: 80%; }
Hoppas att du tycker att dessa nyheter förbättrar och förenklar läsningen av bloggen!