graphic style!

added colors and rounded borders added twitter and dopplr badges
author: dakkar <dakkar@thenautilus.net> 2009-08-31 19:01:55 +0200
committer: dakkar <dakkar@thenautilus.net> 2009-08-31 19:01:55 +0200
commit: 4fb741f96ded92e8fc87396229cebc8555f6879b (patch)
tree: 12702e3705fc3e50de76b314c8474ccc42915e27
parent: stylesheets, and better ReST conformance (diff)
download: thenautilus-4fb741f96ded92e8fc87396229cebc8555f6879b.tar.gz
thenautilus-4fb741f96ded92e8fc87396229cebc8555f6879b.tar.bz2
thenautilus-4fb741f96ded92e8fc87396229cebc8555f6879b.zip
2 files changed, 113 insertions, 22 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 */
 
diff --git a/templates/du2html.xsl b/templates/du2html.xsl
index 6d30510..22cf48c 100644
--- a/templates/du2html.xsl
+++ b/templates/du2html.xsl
@@ -144,7 +144,7 @@
  <x:template match="/document">
   <html xml:lang="{$language}" lang="{$language}">
    <head>
-    <title><x:value-of select="title"/></title>
+    <title><x:value-of select="normalize-space(title)"/></title>
     <link rel="stylesheet" type="text/css" href="/layout.css" />
     <link rel="stylesheet" type="text/css" href="/html4css1.css" />
     <link rel="stylesheet" type="text/css" href="/content.css" />
@@ -193,11 +193,42 @@
        <hr />
        <a href="{wc:dst-uri-for('/contacts/')}"><x:apply-templates select="wc:title-for($language,$filename,'/contacts/')/node()" /></a>
       </div>
+      <!-- twitter -->
+      <div id="twtr-profile-widget"></div>
+      <script src="http://widgets.twimg.com/j/1/widget.js"></script>
+      <link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet" />
+      <script>
+      new TWTR.Widget({
+          profile: true,
+          id: 'twtr-profile-widget',
+          loop: true,
+          width: 150,
+          height: 100,
+          theme: {
+              shell: {
+                  background: '#2b687c',
+                  color: '#eeeeee'
+              },
+              tweets: {
+                  background: '#b3dbe9',
+                  color: '#444444',
+                  links: '#1985b5'
+              }
+          }
+      }).render().setProfile('dakkar').start();
+      </script>
+      <!-- dopplr -->
+      <div id="dopplr-blog-badge-for-dakkar"><script type="text/javascript" src="http://www.dopplr.com/blogbadge/script/519a00f0a79fd8c53a39657c86edcca5?div-id=dopplr-blog-badge-for-dakkar"></script></div>
      </div>
      <div id="push"></div>
     </div>
     <div id="footer">
-     blah blah blah blah
+     <p class="license">
+      <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.5/it/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/2.5/it/88x31.png" /></a> “<span xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/Text" property="dc:title" rel="dc:type"><x:value-of select="normalize-space(/document/title)"/></span>” di <a xmlns:cc="http://creativecommons.org/ns#" href="mailto:dakkar@thenautilus.net" property="cc:attributionName" rel="cc:attributionURL">Gianni Ceccarelli</a> è distribuito sotto una licenza <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.5/it/">Creative Commons By-SA 2.5 It</a>.
+     </p>
+     <p class="contacts">
+      Per commenti, <a href="mailto:dakkar@thenautilus.net?subject={s:encode-uri(concat('Commenti su ',normalize-space(string(/document/title))),false)}">scrivetemi</a>.
+     </p>
     </div>
    </body>
   </html>
author	dakkar <dakkar@thenautilus.net>	2009-08-31 19:01:55 +0200
committer	dakkar <dakkar@thenautilus.net>	2009-08-31 19:01:55 +0200
commit	4fb741f96ded92e8fc87396229cebc8555f6879b (patch)
tree	12702e3705fc3e50de76b314c8474ccc42915e27
parent	stylesheets, and better ReST conformance (diff)
download	thenautilus-4fb741f96ded92e8fc87396229cebc8555f6879b.tar.gz thenautilus-4fb741f96ded92e8fc87396229cebc8555f6879b.tar.bz2 thenautilus-4fb741f96ded92e8fc87396229cebc8555f6879b.zip