tons of logic and performance improvements

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

1 files changed, 11 insertions, 16 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%;
 }