graphic style!

added colors and rounded borders
added twitter and dopplr badges

1 files changed, 80 insertions, 20 deletions

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 */