Start working on images

css/blog.scss

@@ -1,44 +0,0 @@
----
----
-@import 'util';
-@import 'colors';
-@import 'fonts';
-
-
-    .post-entry {
-        .post-title {
-            color: $body-text;
-            text-decoration: none;
-            font-size: $body-size + 8;
-            font-weight: bold;
-
-        }
-        .post-title:hover {
-            text-decoration: underline;
-        }
-
-        .post-date {
-            text-align: right;
-            font-size: $body-size - 4;
-        }
-
-        .post-tags {
-            text-align: left;
-            font-size: $body-size - 4;
-        }
-
-        .post-see-more {
-            color: $body-text-subtle;
-        }
-        .post-see-more:hover {
-            color: $body-text;
-        }
-
-        table {
-            width: 100%;
-        }
-
-        hr {
-            margin: 5px;
-        }
-    }

css/sidebar.scss

@@ -68,7 +68,7 @@ $mobile-width: {{ site.mobile-width }};
     text-align: center;
     float: right;
     width: 160px;
-    top:12px;
+    top: 0.6em;
     color: $sidebar-text;
 }
 

css/style.scss

@@ -55,9 +55,10 @@ $mobile-width: {{ site.mobile-width }};
 ::-moz-selection {
     color: white;
     background: $orange;
-    /* WebKit/Blink Browsers */
+    /* Mozilla Browsers */
 }
 
+// base page format
 html {
     margin: 0;
     background-color: $margin;
@@ -65,6 +66,10 @@ html {
 
 body {
     background-color: $background;
+    font-size: $body-size;
+    font-family: $body-font;
+    color: $body-text;
+
     max-width: 800px;
     z-index: 0;
     margin-left: auto;
@@ -103,13 +108,6 @@ header {
     }
 }
 
-//WHAT THE FUCK
-
-hr {
-    border-width: 0;
-    height: 1px;
-    background-color: $body-text;
-}
 
 #box {
     display: flex;
@@ -121,17 +119,80 @@ hr {
         left: 20px;
     }
     flex-grow: 1;
-    font-family: $body-font;
+}
+
+hr {
+    border-width: 0;
+    height: 1px;
+    background-color: $body-text;
+}
+
+a {
     color: $body-text;
-    line-height: 1.5em;
-    p {
-        margin: {
-            top: 0;
-            bottom: 15px;
-        }
+}
+a:hover {
+    color: $body-text-subtle;
+}
+
+p {
+    margin: {
+        top: 0;
+        bottom: 15px;
     }
 }
 
+h1,h2,h3 {
+    margin: {
+        top: 0px;
+        bottom: 10px;
+    }
+    a {
+        text-decoration: none;
+    }
+}
+
+h1 {
+    font-size: 2em;
+}
+
+small {
+    font-size: 0.8em;
+}
+
+figure {
+    margin: 0;
+
+
+    .figure-contents {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+    }
+
+    a {
+        padding: 3px;
+        margin: 0;
+        height: 100%;
+        width: auto;
+        flex-basis: auto;
+        flex-shrink: 1;
+
+    }
+
+    img {
+        margin: auto;
+        max-height: 240px;
+        min-height: 100px;
+    }
+
+    figcaption {
+        text-align: center;
+
+    }
+}
+
+
+// narrow screens override
 @media screen and (max-width: $mobile-width) {
     header {
         top: 0;
@@ -159,6 +220,7 @@ hr {
             }
         }
     }
+
     #box {
         flex-direction: column;
     }