Gebruiker:SanderSpek/Stylesheet

Naast een bulk code die ik ergens vandaan kopieerde — en waarvan het gehele resultaat mij wel beviel en ik dus niet in detail naar gekeken heb — maakte ik de volgende wijzigingen in mijn stylesheet.

Lettertypen

Ik lees lange teksten het liefst in een lettertype met schreef, terwijl ik korte kreten schreefloos het meest prettig vind. Vandaar dat ik pagina's geheel in sans-serif wil, met uitzondering van de daadwerkelijke inhoud van de artikelen.

body {
  font-family: sans-serif;
}

#content { 
  font-family: serif;
}

Met de kopjes mag dan wel weer iets leuks gebeuren.

h1, h2, h3, h4, h5, h6 {
   color: Black;
   font-family: sans-serif;
   font-weight: bold;
   margin: 0 6.5em 0 0;
   padding-top: 0.5em;
   padding-bottom: 0.17em;
   border-bottom: 1px solid #aaaaaa;
}

h1 { font-size: 160%; }
h2 { font-size: 132%; }
h3, h4, h5, h6 { 
border-bottom: none;
}
h3 { font-size: 116%; }
h4 { font-size: 100%; }
h5 { font-size: 80%; }
h6 { font-size: 60%; }

In mijn browser heb ik de gratis lettertypen uit de Bitstream Vera-serie (Serif, Sans en Sans Monospace) als standaard ingesteld.

Kleur

Witte achtergrond is te fel om lange teksten comfortabel te lezen. Vandaar dat ik het inhoudsveld een andere achtergrondkleur geef.

content {
  background-color: #F9F9FF;
}

Daarnaast mogen de links een mooi kleurtje hebben.

a { color: #0000FF; text-decoration: none;} 
a:visited { color: #7F007F; } 
a:active { color: #7F007F; } 
a.interwiki, a.external { color: #3366BB; }

Achtergrondafbeelding

Het achtergrondplaatje is erg mooi, maar het lijdt wel af. Van Jeroenvrp begreep ik dat hij dit plaatje via zijn stylesheet had geblokkeerd. Ikzelf heb 'm 'gewoon' in de adblockfilter van Mozilla gegooid.

Teksten

Ik heb de breedte van de tekst beperkt (maximaal 450 px) en gebruik een lekker brede linkermarge. Ook heb ik de line-height op 200% gezet, omdat ik dit prettig vind lezen. Plus nog wat andere marges.

p {
  margin: 0.4em 8.5em 0.7em 40px;
  max-width: 450px;
}

dd {
  max-width: 450px;
  margin-top: 10px;
  margin-left: 40px;
}

li {
   max-width: 450px;
   margin-top: 5px;
   margin-left: 40px;
}  

ul {
   margin-top: 10px;
}

ol {
   margin-top: 10px;
}
 
body {
   line-height: 200%;
}

Plaatjes

Wanneer je een andere achtergrondkleur hebt krijgen plaatjes zo'n redelijk wit randje. Met deze code verdwijnt dat.

/* plaatjes zonder wit randje */
div.tright, div.floatright { border-width: 0.0em 0.0em 0.0em 0.0em; }