From 4fb741f96ded92e8fc87396229cebc8555f6879b Mon Sep 17 00:00:00 2001 From: dakkar Date: Mon, 31 Aug 2009 19:01:55 +0200 Subject: graphic style! added colors and rounded borders added twitter and dopplr badges --- additions/layout.css | 100 ++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 80 insertions(+), 20 deletions(-) (limited to 'additions') diff --git a/additions/layout.css b/additions/layout.css index 4ae46d7..2ba50c3 100644 --- a/additions/layout.css +++ b/additions/layout.css @@ -1,7 +1,3 @@ -div { - border: thin solid green; -} - /* sticky footer */ div { @@ -9,21 +5,39 @@ div { padding: 0; } +#wrapper, #footer, #main-col, #sidebar, #content, #title, #tags, #alt-langs { + /* no idea why this is needed… */ + border: solid 1px transparent; +} + +#title, #tags, #alt-langs, #dates, #nav-tags, #nav-links, #dopplr-blog-badge-for-dakkar div.dopplr-badge, #footer { + -moz-border-radius-bottomleft:5px; + -moz-border-radius-bottomright:5px; + -moz-border-radius-topleft:5px; + -moz-border-radius-topright:5px; +} + +#nav-tags, #nav-links, #dopplr-blog-badge-for-dakkar, #twtr-profile-widget { + margin-top: 1em; +} + body { font: normal 100%/1.375 Times, Times New Roman, serif; + background: #b3dbe9; } html, body { height: 100%; + margin: 0; padding: 0; } #wrapper { - min-height: 100%; - margin: 0 auto -4em auto; + min-height: 99%; + margin: 0 auto -7em auto; } #push { - height: 4em; + height: 7em; } #push { @@ -32,8 +46,15 @@ html, body { #footer { margin: 0 auto; - height: 4em; - max-width: 58em; + height: 7em; + max-width: 60em; + background: #1f7a98; +} + +#footer p { + margin: 0; + padding: 0.5em; + font-size: 0.9em; } #wrapper { @@ -55,14 +76,14 @@ html, body { /* title */ #title { - max-width: 60em; - margin: 0.2em auto; + max-width: 99%; + background: #79cde9;; } h1 { font-family: Georgia, serif; font-size: 2em; - line-height: 1.15; + line-height: 1.15em; margin: 0.5em; } @@ -71,12 +92,14 @@ h1 { #tags, #alt-langs { position: relative; text-align: center; - width: 70%; - min-height: 1.5em; - margin: 0 auto; + width: 100%; + margin: 0.5em auto; + background: #1f7a98; + color: #eeeeee; + padding: 0.2em; } -#tags ul, #tags li { +#tags ul, #tags li, #alt-langs ul, #alt-langs li { display: inline; margin: 0.3em; padding: 0; @@ -84,29 +107,66 @@ h1 { list-style: none } -#tags li:before { content: '-' } -#tags li:after { content: '-' } +#tags li:before, #alt-langs li:before { content: '-' } +#tags li:after, #alt-langs li:after { content: '-' } + +#tags a, #alt-langs a { + color: #aaaaaa; +} + +#tags a:visited, #alt-langs a:visited { + color: #aaaaaa; + font-style: italic; +} + /* main content */ #content { width: 100%; - line-height: 1.35; + line-height: 1.5em; + background: #b3dbe9; } #dates { position: relative; width: 80%; margin: 0 auto; + background: #1f7a98; + padding: 0.2em; } /* sidebar */ #nav-links, #nav-tags { position: relative; + background: #2b687c; + color: #eeeeee; + padding: 0.5em; +} + +#nav-links a, #nav-tags a { + color: #aaaaaa; } -#nav-links dt, #nav-links dd { display: inline } +#nav-links a:visited, #nav-tags a:visited { + color: #aaaaaa; + font-style: italic; +} + +div.twtr-doc { + width: 100% !important; +} + +div.twtr-timeline { + height: 15em !important; +} + +div.dopplr-badge { + background: #2b687c; + color: #eeeeee; + border: 1px solid transparent; +} /* boxes, misc */ -- cgit v1.2.3