Basic style changes: removing ul/li, using spans instead. styling ul/li @Sidebar

Author: hkrishna

javascripts/sidebar.js

@@ -9,21 +9,30 @@ $(function() {
 
   // Render license/source information
   _(tutorials).each(function(tutorial){
-    t = $(tutorial)
-    d = t.data()
-    attribution = ""
-    if(d.authorGithub) {
-      attribution += '<li>Author: <a href="http://github.com/' + d.authorGithub + '">' + d.authorGithub + '</a></li>'
-    } else if(d.author) {
-      attribution += "<li>Author: " + d.author + "</li>"
-    }
-    if(d.source) {
-      attribution += '<li><a href="' + d.source + '">Original Source</a></li>'
+    t = $(tutorial);
+    d = t.data();
+    var meta = d.authorGithub || d.author || d.source || d.license;
+    if(meta) {
+      var attribution = "";
+      if(d.authorGithub) {
+        attribution += '<span>by <a href="http://github.com/' + d.authorGithub + '">' + d.authorGithub + '</a></span>';
+      } else if(d.author) {
+        attribution += "<span>by " + d.author + "</span>"
+      }
+      if(d.source) {
+        if (d.authorGithub || d.author) {
+          attribution += '<span>|</span>';
+        }
+        attribution += '<span><a href="' + d.source + '">Original Source</a></span>';
+      }
       if(d.license) {
-        attribution += '<li><a href="' + d.license + '">License</a></li>'
+        if (d.authorGithub || d.author || d.source) {
+          attribution += '<span>|</span>';
+        }
+        attribution += '<span><a href="' + d.license + '">License</a></span>';
       }
+      t.prepend("<p class='about'>" + attribution + "</p>");
     }
-    if(attribution) { t.prepend("<ul>" + attribution + "</ul>")}
   });
 
   dict = _.chain(tutorials)

stylesheets/styles.css

@@ -65,7 +65,7 @@ code, pre {
 
 pre {
   padding:8px 15px;
-  background: #f8f8f8;  
+  background: #f8f8f8;
   border-radius:5px;
   border:1px solid #e5e5e5;
   overflow-x: auto;
@@ -103,17 +103,17 @@ header {
 #download {
   list-style:none;
   height:40px;
-  
+
   padding:0;
-  
+
   background: #eee;
   background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
   background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
   background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
   background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
   background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  
+
   border-radius:5px;
   border:1px solid #d2d2d2;
   box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
@@ -186,33 +186,33 @@ footer {
 }
 
 @media print, screen and (max-width: 960px) {
-  
+
   div.wrapper {
     width:auto;
     margin:0;
   }
-  
+
   header, section#main, footer {
     float:none;
     position:static;
     width:auto;
   }
-  
+
   header {
     padding-right:320px;
   }
-  
+
   section#main {
     border:1px solid #e5e5e5;
     border-width:1px 0;
     padding:20px 0;
     margin:0 0 20px;
   }
-  
+
   header a small {
     display:inline;
   }
-  
+
   #download {
     position:absolute;
     right:50px;
@@ -224,11 +224,11 @@ footer {
   body {
     word-wrap:break-word;
   }
-  
+
   header {
     padding:0;
   }
-  
+
   #download, header p.view {
     position:static;
   }
@@ -238,7 +238,7 @@ footer {
   body {
     padding:15px;
   }
-  
+
   #download {
     display:none;
   }