1 files changed, 81 insertions, 46 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 574a0cd..9096a28 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,6 +1,20 @@
-main {
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Source Sans Pro", sans-serif;
+	font-size: 17px;
+	line-height: 1.58823529;
+	margin: 0;
+}
+
+.container {
     max-width: 750px;
     word-wrap: break-word;
+	margin-right: auto;
+	margin-left: auto;
+	padding: 0 15px;
 }
 
 /* Header */
@@ -39,11 +53,6 @@ main {
     text-decoration: none;
 }
 
-.btn-home {
-    position: absolute;
-    left: 20px;
-}
-
 /* Navbar */
 
 .navbar-container {
@@ -81,7 +90,7 @@ main {
 }
 
 @media (min-width: 900px) {
-  .language-container, .btn-home {
+  .language-container {
     top: 20px;
   }
 }
@@ -160,6 +169,8 @@ main {
 }
 
 .author-info {
+    display: flex;
+	flex-direction: row;
     overflow: auto;
 }
 
@@ -167,6 +178,10 @@ main {
     margin: 0 0 5px 0;
 }
 
+.author-avatar {
+	margin-right: 25px;
+}
+
 .author-avatar img {
     max-width: 100px;
     max-height: 100px;
@@ -178,6 +193,10 @@ main {
     margin-top: 10px;
 }
 
+.author-meta {
+    flex-grow: 1;
+}
+
 /* Article list */
 
 .li-h1 {
@@ -207,6 +226,14 @@ main {
     align-items: flex-start;
 }
 
+/* Clearfix */
+
+.clearfix {
+    display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
 /* Tag list */
 
 #container-tags-title {
@@ -223,30 +250,36 @@ main {
 
 /* Bootstrap adjustions */
 
-h1,
-.h1 {
+h1 {
   font-size: 36px;
 }
-h2,
-.h2 {
+h2 {
   font-size: 30px;
 }
-h3,
-.h3 {
+h3 {
   font-size: 24px;
 }
-h4,
-.h4 {
+h4 {
   font-size: 18px;
 }
-h5,
-.h5 {
+h5 {
   font-size: 14px;
 }
-h6,
-.h6 {
+h6 {
   font-size: 12px;
 }
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+	font-weight: 300;
+	line-height: 1.1;
+}
+h1, h2, h3 {
+    margin-top: 26px;
+	margin-bottom: 13px;
+}
+h4, h5, h6 {
+    margin-top: 13px;
+	margin-bottom: 13px;
+}
 
 pre {
     font-size: 13px;
@@ -262,16 +295,30 @@ blockquote {
      font-style:italic;
 }
 
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-    font-family: "Source Sans Pro", "Kozuka Gothic Pr6N", Meiryo, sans-serif !important;
+p {
+	margin-top: 0;
+    margin-bottom: 13px;
+}
+
+a {
+    text-decoration: none;
+}
+
+ul, ol {
+    margin-top: 0;
+	margin-bottom: 13px;
 }
 
 small, .small {
   font-size: 80%;
 }
 
-a > .btn:hover {
-  text-decoration: none;
+sup {
+    top: -0.5em;
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
 }
 
 article section img {
@@ -280,13 +327,8 @@ article section img {
     margin: 13px auto;
 }
 
-.btn {
-    font-size: 13px;
-    line-height: 1.58823529;
-    /*
-    XXX Specify a radius for the buttons here
-    */
-    border-radius: 0px;
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+    display: block;
 }
 
 blockquote {
@@ -295,19 +337,15 @@ blockquote {
 	font-size: unset;
 }
 
-/*
-XXX Maybe but this in? Somethimes it's not smooth and that makes it ugly...
-.btn, .btn-primary, a.btn-default, a {
-    transition: all 0.1s linear;
+figure {
+    margin: 0;
 }
-*/
 
-.btn-older-posts {
-    float: left;
-}
-
-.btn-newer-posts {
-    float: right;
+hr {
+    margin: 20px 0;
+	border: none;
+	border-top: 1px solid #0000001B;
+	height: 0;
 }
 
 /*
@@ -319,11 +357,6 @@ I don't use the default pager-class because I want to use the normal buttons wit
     overflow: auto;
 }
 
-.delimiter {
-    margin-top: 20px;
-    margin-bottom: 20px;
-}
-
 .pagination {
     display: flex;
     justify-content: space-between;
@@ -365,6 +398,7 @@ I don't use the default pager-class because I want to use the normal buttons wit
 /* Images */
 .embedded-image {
 	padding: 5px;
+	vertical-align: middle;
 }
 
 /* Note box */
@@ -383,4 +417,5 @@ table, th, td {
     border: 1px solid black;
     border-collapse: collapse;
     padding: 5px;
+	text-align: left;
 }