sleepmap-theme/static/css/main.css: Major overhaul (pre-cleanup) of element placement. Now featuring a complete (lefthanded) sidebar and a minimal header with an image. 2nd order hover menus have been deprecated in favor of inline lists (can also be properly displayed on mobile devices).

1 files changed, 142 insertions, 89 deletions

diff --git a/sleepmap-theme/static/css/main.css b/sleepmap-theme/static/css/main.css
index 3e6ed2f..2dcf478 100644
--- a/sleepmap-theme/static/css/main.css
+++ b/sleepmap-theme/static/css/main.css
@@ -15,15 +15,16 @@
 /***** Global *****/
 /* Body */
 body {
-    background: #F5F4EF url('../images/bg.png');
-    color: #000305;
+/*  background: #F5F4EF url('../images/bg.png'); */
+    background: #000000 none repeat scroll 0 0;
+/*    color: #000305; */
     font-size: 87.5%; /* Base font size: 14px */
     font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     line-height: 1.429;
     margin: 0;
     padding: 0;
     text-align: left;
-    max-width: 1440px;
+    max-width: 1920px;
     min-width: 1000px;
 }
 
@@ -88,17 +89,19 @@ ul {
 
 ol {
   list-style: outside decimal;
-  margin: 1em 0 1.5em 1.5em;
+/*  margin: 1em 0 1.5em 1.5em; */
 }
 
+/*
 .post-info {
     float:right;
     margin:10px;
     padding:5px;
 }
+*/
 
-.post-info p{
-    margin-bottom: 1px;
+.post-info abbr, .post-info a{
+  margin: 0px 0.3em 1px 0.3em;
 }
 
 .readmore { float: right }
@@ -142,6 +145,15 @@ aside, nav, article, figure {
   display: block;
 }
 
+table.highlighttable {
+  margin: .5em 0 1.5em 0;
+  width: 100%;
+}
+div.highlight pre {
+  margin-left: 0;
+  margin-right: 0;
+}
+
 /***** Layout *****/
 img.right figure.right {float: right; margin: 0 0 2em 2em;}
 img.left, figure.left {float: right; margin: 0 0 2em 2em;}
@@ -149,25 +161,33 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
 /*
   Header
 *****************/
-#banner {
-    clear: both;
-  margin: 0 auto 0 auto;
-  padding: 2.5em 0 0 0;
-}
-
-  /* Banner */
+/* banner */
+  #banner {
+    background-image: url("../images/header.jpg");
+    border-radius: 10px;
+    margin: 0.5em 0.5em 0 0.5em;
+    max-width: 1920px;
+    width: 83%;
+ /*   position: fixed;
+    z-index: 99; */
+  }
   #banner h1 {
-        font-size: 3.571em; 
-        line-height: 0;
-      margin: 0 auto 0 auto;
-    }
+    font-size: 3.571em; 
+    margin: 0 auto 0 auto;
+    padding: 20px 20px 20px 10px;
+/*    display: block; */
+    position: relative;
+  }
   #banner h1 a:link, #banner h1 a:visited {
-    color: #000305;
-    display: block;
+ /*   color: #000305; */
     font-weight: bold;
-    margin: 0 auto .6em auto;
+/*    margin: 0.5em; */
     text-decoration: none;
-    width: 427px;
+    max-width: 250px;
+    min-width: 150px;
+    text-shadow: 1px 1px 1px #222;
+/*    width: 427px; 
+ */
   }
   #banner h1 a:hover, #banner h1 a:active {
     background: none;
@@ -177,108 +197,132 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
 
   #banner h1 strong {font-size: 0.36em; font-weight: normal;}
 
+  /* sidemenu */
+#sidemenu {
+  clear: both;
+/*  margin: 0 auto 0 auto;
+  padding: 2.5em 0 0 0; */
+  position: relative;
+  float: left;
+/*  max-width: 200px; */
+/*  min-width: 200px; */
+  width: 13%;
+}
   /* Main Nav */
-  #banner nav {
-    background: #000305;
-    font-size: 1.143em;
-    height: 40px;
-    line-height: 30px;
-    margin: 0 auto 2em auto;
-    padding: 0;
-    width: 90%;
-    border-radius: 5px;
+  #sidemenu nav {
+    background: #eee;
+/*    font-size: 1.143em;
+    line-height: 30px; */
+    margin: 0.5em;
+    padding: 20px;
+    border-radius: 10px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
   }
-
-  #banner nav ul ul {
-    display:none;
+  #sidemenu nav h2 {
+    margin-bottom:0;
+    margin-top: 0.8em;
+  }
+  #sidemenu nav h2.menuheader{
+    margin:0;
+  }
+  #sidemenu nav ul ul {
+/*    display:none; */
     list-style: none;
     margin: 0 auto;
   }
 
-  #banner nav ul li:hover > ul {
+/*  #sidemenu nav ul li:hover > ul {
     display:block;
   }
-
-  #banner nav ul {
+*/
+  #sidemenu nav ul {
     list-style: none;
     margin: 0 auto;
+    padding: 0;
+/*    display: inline-table;
     box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
-    padding: 0 6px;
-    border-radius: 10px;
-    list-style: none;
-    position: absolute;
-    display: inline-table;
+    border-radius: 10px; */
   }
 
-  #banner nav ul:after {
+  #sidemenu nav ul:after {
     content: ""; clear: both; display: block;
   }
 
-  #banner nav ul li {
+/*  #sidemenu nav ul li {
     float: left;
   }
+*/
+/*
   nav ul li:hover {
     background: #4b545f;
     background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
     background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
     background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
   }
-
-  #banner nav ul li a {
+*/
+  #sidemenu nav ul li a {
     display: block; 
-    padding: 25px 40px;
+    /*padding: 25px 40px; */
     text-decoration: none;
+    border-radius: 10px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
   }
 
-  #banner nav ul ul {
-    background: #5f6975; 
+  #sidemenu nav ul ul {
+/*    background: #5f6975; */
     border-radius: 0px;
     padding: 0;
-    position: absolute;
-    top: 100%;
+/*    position: absolute;
+    left: 100%;
+    top: 0%; */
   }
-  #banner nav ul ul li {
+  #sidemenu nav ul ul li {
     float: none; 
-    border-top: 1px solid #6b727c;
-    border-bottom: 1px solid #575f6a;
+/*    border-top: 1px solid #6b727c;
+    border-bottom: 1px solid #575f6a; */
     position: relative;
   }
-  #banner nav ul ul li a {
+  #sidemenu nav ul ul li a {
     padding: 15px 40px;
-    color: #fff;
+/*    color: #fff; */
   }
-  #banner nav ul ul li:hover {
+/*  #sidemenu nav ul ul li:hover {
     background: #db2d2b;
   }
   nav ul ul li a:hover {
     background: #db2d2b;
   }
-  nav ul ul ul {
+*/
+/*  nav ul ul ul {
     position: absolute; left: 100%; top:0;
-  }
+  } */
+/*
   nav ul ul li.active {
     background: #db2d2b;
   }
+*/
 
-  #banner nav a:link, #banner nav a:visited {
-    color: #fff;
-    display: inline-block;
-    height: 30px;
-    padding: 5px 1.5em;
+  #sidemenu nav a:link, #sidemenu nav a:visited {
+   /*  color: #fff;
+    display: inline-block; 
+    height: 30px;*/
+    padding: 0.23em 1.5em;
     text-decoration: none;
   }
-  #banner nav a:hover, #banner nav a:active, #banner nav .active li:link
-  #banner nav .active a:link, #banner nav .active a:visited {
-    background: #C74451;
+/*  #sidemenu nav a:hover, #sidemenu nav a:active, #sidemenu nav .active li:link
+  #sidemenu nav .active a:link, #sidemenu nav .active a:visited {
     background: #db2d2b;
     color: #fff;
     text-shadow: none !important;
   }
-  
-  
-  #banner nav li:first-child a {
+  */
+  #sidemenu nav ul li ul li a {
+    padding-left: 2em !important;
+  }
+/*  
+  #sidemenu nav li:first-child a {
     border-top-left-radius: 5px;
     -moz-border-radius-topleft: 5px;
     -webkit-border-top-left-radius: 5px;
@@ -287,35 +331,36 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
     -moz-border-radius-bottomleft: 5px;
     -webkit-border-bottom-left-radius: 5px;
   }
-
+*/
 /*
   Featured
 *****************/
 #content {
-  background: #fff;
+  margin: 0.5em;
+/*  background: #fff; */
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
     float: left;
-    margin: 1em 10px 2em 7%;
-  background: #fff;
+/*    margin: 1em 10px 2em 7%; */
+/*  background: #fff; */
   overflow: hidden;
-  padding: 20px 20px;
-  min-width: 600px;
-  width: 60%;
+/*  padding: 20px 20px; */
+/*  min-width: 600px; */
+  width: 70%;
 }
 
 /*
   Extras
 *****************/
 #sidebar {
-    float: right; 
-    margin: 1em 7% 2em 10px;
+/*    float: right;  */
+  margin: 1em 1em 1em 0.5em;
   background: #fff;
   overflow: hidden;
   padding: 20px 20px;
-  width: 15%;
-  
+/*  width: 15%;
+  */
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
@@ -344,10 +389,12 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
 #sidebar li:last-child,
 #sidebar li:last-child a {border: 0}
 
+/*
 #sidebar .blogroll li:nth-last-child(2),
 #sidebar .blogroll li:nth-last-child(3),
 #sidebar .blogroll li:nth-last-child(2) a,
 #sidebar .blogroll li:nth-last-child(3) a {border: 0;}
+*/
 
 /*#sidebar a:hover, #sidebar a:active {color: #fff;}
 */
@@ -401,7 +448,7 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
 
 #about .url:link, #about .url:visited {text-decoration: none;}
 
-#about .bio {float: right; width: 500px;}
+#about .bio {float: right; *width: 500px;}
 
 /*
   Footer
@@ -505,37 +552,42 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
     padding: 5px 1.5em;
     text-decoration: none;
   }
-  #footer nav a:hover, #footer nav a:active, #footer nav .active li:link
+/*  #footer nav a:hover, #footer nav a:active, #footer nav .active li:link
   #footer nav .active a:link, #footer nav .active a:visited {
     background: #C74451;
     background: #db2d2b;
     color: #fff;
     text-shadow: none !important;
   }
+*/
 /***** Sections *****/
 /* Blog */
 .hentry {
   border-bottom: 1px solid #eee;
-  padding: 1.5em 0;
+  padding: 1.5em ;
+  clear: both;
+  background: linear-gradient(#efefff, #eee);
+  border-radius: 10px;
 }
 li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
-#content > .hentry {padding: 1em 0;}
+/*#content > .hentry {padding: 1em 0;} */
 .hentry img{display : none ;}
 .entry-title {font-size: 3em; margin-bottom: 10px; margin-top: 0;}
 .entry-title a:link, .entry-title a:visited {text-decoration: none; color: #333;}
 .entry-title a:visited {background-color: #fff;}
 
-.hentry .post-info * {font-style: normal;}
+.hentry .post-info * {font-style: normal; float:left;}
 
   /* Content */
-  .hentry footer {margin-bottom: 2em;}
+  .hentry footer {padding-top: 3em; padding-bottom:1em}
   .hentry footer address {display: inline;}
   #posts-list footer address {display: block;}
 
   /* Blog Index */
   #posts-list {list-style: none; margin: 0;}
-  #posts-list .hentry {padding-left: 10px; position: relative;}
-  
+/*  #posts-list .hentry {padding-left: 10px; position: relative;} */
+
+/*
   #posts-list footer {
     left: 10px;
     position: relative;
@@ -543,7 +595,8 @@ li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
     top: 0.5em;
     width: 190px;
   }
-  
+*/
+
   /* About the Author */
   #about-author {
     background: #f9f9f9;