tons of logic and performance improvements

The main aim is a more logical DOM structure and more performant CSS.

3 files changed, 86 insertions, 94 deletions

diff --git a/source/css/theme-narrow.css b/source/css/theme-narrow.css
index 56328225..86d78443 100644
--- a/source/css/theme-narrow.css
+++ b/source/css/theme-narrow.css
@@ -1,34 +1,29 @@
-nav {
-    position: static;
-    margin: 5% 0 0 0;
-    text-align: center;
-    height: 100%;
-    width: 100%;
+body {
+    margin: 40px 0 100px 0;
 }
 
-nav div {
-    text-align: center;
-    margin: auto;
+.nav {
+    position: static;
+    width: 100%;
+    height: 150px;
+    margin: 20px 0;
 }
 
-nav div .blog-icon {
-    margin: 0;
-    height: 150px;
+.nav-icon {
     width: 150px;
+    height: 150px;
     background-image: url("/img/icon-150.png");
     background-image: -webkit-image-set( url("/img/icon-150.png") 1x, url("/img/icon-300.png") 2x );
     background-size: 150px;
 }
 
-nav div.title, div.author {
+.nav-title, .nav-author {
     height: 0;
     width: 0;
     visibility: hidden;
     pointer-events: none;
 }
 
-article {
-    position: static;
+.content, .content-separator, .footer {
     width: 80%;
-    margin: 2% 10% 10% 10%;
 }
diff --git a/source/css/theme-wide.css b/source/css/theme-wide.css
index e981c014..9dfcf8fb 100644
--- a/source/css/theme-wide.css
+++ b/source/css/theme-wide.css
@@ -1,4 +1,3 @@
-article {
+.content, .content-separator, .footer {
     width: 50%;
-    left: 25%;
 }
diff --git a/source/css/theme.css b/source/css/theme.css
index 6198d979..b110ded5 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -2,21 +2,19 @@ body {
     color: #333;
     font-family: "PT Serif", serif;
     font-size: 10.99pt;
+    margin: 100px 0;
 }
 
-nav {
+.nav {
     position: fixed;
     left: 5%;
-    top: 10%;
+    top: 90px;
     height: 150px;
     width: 100px;
-}
-
-nav div {
     text-align: center;
 }
 
-nav div .blog-icon {
+.nav-icon {
     margin: 2px 0;
     width: 100px;
     height: 100px;
@@ -30,60 +28,58 @@ nav div .blog-icon {
     font-size: 0;
 }
 
-nav div.title {
+.nav-title {
     font-size: 16px;
     font-weight: bold;
     margin: 1px 0;
 }
 
-nav div.author {
+.nav-author {
     font-size: 12px;
 }
 
-nav a {
+.nav-link {
     text-decoration: none;
 }
 
-article {
-    position: absolute;
+.content, .content-separator, .footer {
     width: 60%;
-    margin: 5% 0;
-    left: 20%;
-    font-size: 1em;
-    text-align: justify;
+    margin: 0 auto;
 }
 
-article code {
-    font-size: 0.95em;
+.content-separator {
+    margin: 15px auto 3px auto;
 }
 
-h1.title {
+.content {
+    text-align: justify;
+}
+
+h1 {
     text-align: center;
     font-size: 1.65em;
+    font-weight: bold;
 }
 
 h2 {
     text-align: center;
     font-size: 1.27em;
+    font-weight: bold;
 }
 
-h2.meta {
+.article-metadata {
     font-size: 1em;
     font-weight: normal;
     font-style: italic;
 }
 
-h2.toc {
-    text-align: left;
-}
-
-h3 {
-    font-size: 1.1em;
+a {
+    color: #333;
 }
 
 code {
+    font-size: 0.95em;
     font-family: 'Droid Sans Mono', 'Courier', monospace;
-    font-weight: thin;
 }
 
 pre {
@@ -103,6 +99,38 @@ pre code {
     line-height: 135%;
 }
 
+blockquote {
+    margin: 0;
+    padding: 0 1em;
+    font-style: italic;
+    border-left: 0.4em solid #ddd;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.figure .caption {
+    text-align: center;
+    font-size: 0.91em;
+}
+
+.figure .caption code {
+    font-size: 0.87em;
+}
+
+noscript {
+    color: #ccc;
+}
+
+noscript a {
+    color: #ccc;
+}
+
 .line-number {
     position: absolute;
     left: 0;
@@ -124,26 +152,19 @@ pre code {
     vertical-align: .3em;
 }
 
-blockquote {
-    margin: 0;
-    padding: 0 1em;
-    font-style: italic;
-    border-left: 0.4em solid #ddd;
-}
-
-div.footnotes {
+.footnotes {
     font-size: 0.91em;
 }
 
-div.footnotes p {
+.footnotes p {
     margin: 0.6em 0;
 }
 
-div.footnotes code {
+.footnotes code {
     font-size: 0.87em;
 }
 
-a.footnotes-backlink {
+.footnotes-backlink {
     margin-left: 0.2em;
     font-size: 1.2em;
     vertical-align: -0.2em;
@@ -151,45 +172,24 @@ a.footnotes-backlink {
     text-decoration: none;
 }
 
-a.footnotes-backlink:hover {
+.footnotes-backlink:hover {
     background-color: #bbb;
     color: #fff;
 }
 
-img {
-    display: block;
-    max-width: 100%;
-    max-height: 100%;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.figure .caption {
-    text-align: center;
-    font-size: 0.91em;
-}
-
-.figure .caption code {
-    font-size: 0.87em;
-}
-
-a {
-    color: #333;
-}
-
-footer .lfooter {
+.lfooter {
     float: left;
 }
 
-footer .lfooter .updated:before {
+.lfooter .updated:before {
     content: "Last updated: "
 }
 
-footer .rfooter {
+.rfooter {
     float: right;
 }
 
-footer .rfooter .cc-icon {
+.cc-icon {
     width: 16px;
     height: 16px;
     margin: 0 2px;
@@ -203,7 +203,7 @@ footer .rfooter .cc-icon {
     font-size: 0;
 }
 
-footer .rfooter .atom-icon {
+.atom-icon {
     width: 16px;
     height: 16px;
     margin: 0 2px;
@@ -217,7 +217,7 @@ footer .rfooter .atom-icon {
     font-size: 0;
 }
 
-footer .rfooter .rss-icon {
+.rss-icon {
     width: 16px;
     height: 16px;
     margin: 0 2px;
@@ -231,22 +231,20 @@ footer .rfooter .rss-icon {
     font-size: 0;
 }
 
-div.indextoc table {
-    margin-left: 1em;
-}
+/* blog index */
 
-div.indextoc td {
-    vertical-align: top;
+.blog-index-year-title {
+    text-align: left;
 }
 
-div.indextoc td.date {
-    width: 5em;
+.blog-index-yearly-index {
+    margin-left: 1em;
 }
 
-noscript {
-    color: #ccc;
+.blog-index td {
+    vertical-align: top;
 }
 
-noscript a {
-    color: #ccc;
+.blog-index-post-date {
+    width: 5em;
 }