Small redesign.

static/cranefly/css/cranefly.css

@@ -863,10 +863,10 @@ a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#ffffff;text-decor
 .header-primary .header-tabs li a.btn{border:1px solid #cccccc;*border:0;border-radius:3px;margin:0px;padding:4px 12px;color:#333333;}.header-primary .header-tabs li a.btn i{position:relative;top:0px;}
 .header-primary .header-tabs li a.btn:visited,.header-primary .header-tabs li a.btn:hover{background-color:#ffffff;border-color:#a6a6a6;}
 html,body{height:100%;}
-#wrap{min-height:100%;height:auto !important;height:100%;margin:0 auto -100px;}#wrap .container-primary{padding-top:20px;padding-bottom:120px;}#wrap .container-primary .page-description{margin-bottom:20px;}
+#wrap{min-height:100%;height:auto !important;height:100%;margin:0 auto -132px;}#wrap .container-primary{padding-top:20px;padding-bottom:150px;}#wrap .container-primary .page-description{margin-bottom:20px;}
 #wrap .container-primary hr{border:none;border-top:1px solid #eeeeee;}
-footer{background-color:#eeeeee;border-top:1px solid #dadada;height:80px;padding:11px 19px;}footer hr{border-bottom:1px solid #dadada;margin:10px 0px;}
-footer .credits{color:#555555;font-size:90%;}footer .credits a:link,footer .credits a:active,footer .credits a:visited,footer .credits a:hover{color:#555555;}
+footer{background-color:#eeeeee;border-top:1px solid #dadada;height:120px;padding:11px 19px;padding-bottom:0px;}footer .container hr{border-bottom:1px solid #dadada;margin:10px 0px;}
+footer .container .credits p{margin-bottom:0px;color:#555555;font-size:90%;}footer .container .credits p a:link,footer .container .credits p a:active,footer .container .credits p a:visited,footer .container .credits p a:hover{color:#555555;}
 ::selection{background:#f89406;color:#ffffff;}
 ::-moz-selection{background:#f89406;color:#ffffff;}
 .navbar-header .navbar-inner{background:none;background-color:#f3f3f3;border-bottom:1px solid #dfdfdf;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.navbar-header .navbar-inner .container{background:url("../img/logo.png");background-position:left center;background-repeat:no-repeat;}
@@ -956,9 +956,12 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .markdown blockquote blockquote{background-color:#ffffff;border:1px solid #f2f2f2;border-radius:3px;padding:14px;}
 .markdown code{background-color:#333333;border:none;color:#eeeeee;font-size:14px;}
 .markdown pre{background-color:#222222;padding:7px 14px;}.markdown pre code{background:none;border:none;color:#eeeeee;font-size:11.9px;}
-.markdown img{background-color:#ffffff;border-radius:3px;box-shadow:0px 0px 4px #555555;margin:10px 0px;}
-.markdown .md-img{overflow:auto;margin:10px 0px;}.markdown .md-img .md-img-span{float:none;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg{text-align:center;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error{background:url('../img/img_broken.jpg');border-radius:3px;padding:50px 0px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error span{background-color:#333333;border-radius:5px;opacity:0.8;filter:alpha(opacity=80);padding:7px 14px;margin:0px auto;color:#ffffff;text-shadow:0px 1px 0px #000000;}
-.markdown .md-img .md-img-span .md-img-wrap .md-img-label{display:block;margin-top:-4.05px;color:#999999;font-size:11.9px;text-align:center;}.markdown .md-img .md-img-span .md-img-wrap .md-img-label:hover,.markdown .md-img .md-img-span .md-img-wrap .md-img-label:active{color:#333333;text-decoration:none;}
+.markdown img{background-color:#ffffff;border-radius:3px;box-shadow:0px 0px 3px #555555;margin:10px 0px;}
+.markdown .md-img{overflow:auto;margin:10px 0px;padding:4px;position:relative;right:4px;}.markdown .md-img .md-img-span{float:none;margin:0px;}.markdown .md-img .md-img-span .md-img-wrap{float:left;max-width:600px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg img{margin:0px;}
+.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error{background:url('../img/img_broken.jpg');border-radius:3px;padding:50px 0px;width:160px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error span{background-color:#333333;border-radius:3px;opacity:0.8;filter:alpha(opacity=80);padding:7px 14px;margin:0px auto;color:#ffffff;text-shadow:0px 1px 0px #000000;}
+.markdown .md-img .md-img-span .md-img-wrap .md-img-label{background:rgba(0, 0, 0, 0.8);border-radius:0px 0px 3px 3px;display:block;position:relative;bottom:26px;margin-bottom:-20px;opacity:0.5;filter:alpha(opacity=50);color:#eeeeee;font-size:10.5px;text-align:left;padding:3px 9px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-label:hover,.markdown .md-img .md-img-span .md-img-wrap .md-img-label:active{color:#ffffff;text-decoration:none;}
+.markdown .md-img .md-img-span .md-img-wrap:hover .md-img-label{opacity:1;filter:alpha(opacity=100);}
+.markdown blockquote .md-img-label{bottom:19px !important;}
 .markdown pre,.markdown blockquote,.markdown iframe{margin-top:20px;margin-bottom:20px;}.markdown pre>:first-child,.markdown blockquote>:first-child,.markdown iframe>:first-child{margin-top:0px;}
 .markdown pre>:last-child,.markdown blockquote>:last-child,.markdown iframe>:last-child{margin-bottom:0px;}
 .index-sidebar{position:relative;bottom:9px;}

static/cranefly/css/cranefly/markdown.less

@@ -95,29 +95,39 @@
   img {
     background-color: @white;
     border-radius: @baseBorderRadius;
-    box-shadow: 0px 0px 4px @gray;
+    box-shadow: 0px 0px 3px @gray;
     margin: (@baseLineHeight / 2) 0px;
   }
 
   .md-img {
     overflow: auto;
     margin: (@baseLineHeight / 2) 0px;
+    padding: 4px;
+    position: relative;
+    right: 4px;
 
     .md-img-span {
       float: none;
+      margin: 0px;
 
       .md-img-wrap {
-        .md-img-bg {          
-          text-align: center;
+        float: left;
+        max-width: 600px;
+
+        .md-img-bg {
+          img {
+            margin: 0px;
+          }
 
           .md-img-error {
             background: url('../img/img_broken.jpg');
             border-radius: @baseBorderRadius;
             padding: (@baseLineHeight * 2.5) 0px;
+            width: 160px;
 
             span {
               background-color: @grayDark;
-              border-radius: @borderRadiusLarge;
+              border-radius: @baseBorderRadius;
               .opacity(80);
               padding: (@baseFontSize / 2) @baseFontSize;
               margin: 0px auto;
@@ -129,22 +139,41 @@
         }
 
         .md-img-label {
+          background: fadeout(@black, 20);
+          border-radius: 0px 0px @baseBorderRadius @baseBorderRadius;
           display: block;
-          margin-top: (@baseLineHeight - @fontSizeSmall) / -2;
+          position: relative;
+          bottom: @baseLineHeight + 6px;
+          margin-bottom: @baseLineHeight * -1;
+          .opacity(50);
 
-          color: @grayLight;
-          font-size: @fontSizeSmall;
-          text-align: center;
+          color: @grayLighter;
+          font-size: @fontSizeMini;
+          text-align: left;
+          padding: 3px 9px;
 
           &:hover, &:active {
-            color: @textColor;
+            color: @white;
             text-decoration: none;
           }
         }
+
+        &:hover {
+          .md-img-label {
+            .opacity(100);
+          }
+        }
       }
     }
   }
 
+  // Quoted image label
+  blockquote {
+    .md-img-label {
+      bottom: @baseLineHeight - 1px !important;
+    }
+  }
+
   // Blocks margins
   pre, blockquote, iframe {
     margin-top: @baseLineHeight;

static/cranefly/css/cranefly/scaffolding.less

@@ -9,11 +9,11 @@ html, body {
   min-height: 100%;
   height: auto !important;
   height: 100%;
-  margin: 0 auto ((@footerHeight + @baseLineHeight) * -1);
+  margin: 0 auto ((@footerHeight * -1) - @baseFontSize + 2px);
 
   .container-primary {
     padding-top: @baseLineHeight;
-    padding-bottom: @footerHeight + (@footerHeight * 0.5);
+    padding-bottom: @footerHeight + (@baseLineHeight * 1.5);
 
     .page-description {
       margin-bottom: @baseLineHeight;
@@ -33,18 +33,25 @@ footer {
   border-top: 1px solid @footerBorder;
   height: @footerHeight;
   padding: @paddingLarge;
+  padding-bottom: 0px;
 
-  hr {
-    border-bottom: 1px solid @footerBorder;
-    margin: (@baseLineHeight / 2) 0px;
-  }
+  .container {
+    hr {
+      border-bottom: 1px solid @footerBorder;
+      margin: (@baseLineHeight / 2) 0px;
+    }
+
+    .credits {
+      p {
+        margin-bottom: 0px;
 
-  .credits {
-    color: @gray;
-    font-size: 90%;
+        color: @gray;
+        font-size: 90%;
 
-    a:link, a:active, a:visited, a:hover {
-      color: @gray;
+        a:link, a:active, a:visited, a:hover {
+          color: @gray;
+        }
+      }
     }
   }
 }

static/cranefly/css/variables.less

@@ -248,7 +248,7 @@
 
 // Footer
 // -------------------------
-@footerHeight:                        80px;
+@footerHeight:                        90px;
 @footerBackground:                    darken(@bodyBackground, 5%);
 @footerBorder:                        darken(@footerBackground, 8%);