Optimize style for bigger screen

layouts/_default/baseof.html

@@ -18,7 +18,7 @@
 	<link rel="dns-prefetch" href="//cdn1.lncld.net">
 	<link rel="dns-prefetch" href="//unpkg.com">
 	{{ range .AlternativeOutputFormats -}}
-  	{{ printf `<link rel="%s" type="%s+%s" href="%s" title="%s" />` .Rel .MediaType.Type .MediaType.Suffix .Permalink $.Site.Title | safeHTML }}
+		{{ printf `<link rel="%s" type="%s+%s" href="%s" title="%s" />` .Rel .MediaType.Type .MediaType.Suffix .Permalink $.Site.Title | safeHTML }}
 	{{ end -}}
 	<link rel="stylesheet" href="{{ "css/style.css" | absURL }}">
 </head>

layouts/posts/single.html

@@ -6,8 +6,8 @@
 	<main class="site-main section-inner animated bounceInUp">
 		<article class="thin">
 			<header class="post-header">
-				<h1>{{ .Title }}</h1>
 				<p class="post-meta">{{ .Date.Format .Site.Params.dateformSingle }} &#183; {{ .ReadingTime }} min read</p>
+				<h1>{{ .Title }}</h1>
 			</header>
 			<div class="content">
 				{{ .Content }}

static/scss/style.scss

@@ -20,8 +20,7 @@
 html {
   background: $light-grey;
   line-height: 1.6;
-  letter-spacing: .1em;
-
+  letter-spacing: .06em;
 }
 
 body, button, input, select, textarea {
@@ -273,7 +272,7 @@ table {
       &:first-child {
         margin-right: 1em;
       }
-  
+
       &:hover {
         background-color: $theme;
       }
@@ -350,13 +349,20 @@ table {
 // single.html
 //
 .post-header {
+  margin-top: 1.2em;
+  margin-bottom: 2em;
   border-bottom: 2px solid;
-  margin-bottom: 1.5em;
-  
+  line-height: normal;
+
   .post-meta {
-  margin-top: -1.6em;
-  margin-bottom: .6em;
-  @include dimmed;
+    margin: 0;
+    letter-spacing: normal;
+    @include dimmed;
+  }
+
+  h1 {
+    margin-top: 0;
+    margin-bottom: .3em;
   }
 }
 
@@ -479,18 +485,38 @@ figure.right {
   }
 }
 
-@media (min-width: 860px) {
+
+@media (min-width: 800px) {
   .site-main {
-    margin-top: 4em;
+    margin-top: 3em;
   }
 }
 
-@media (min-width: 1300px) {
+@media (min-width: 960px) {
   .site-main {
     margin-top: 6em;
   }
 }
 
+@media (min-width: 1300px) {
+  .site-main {
+    margin-top: 8em;
+  }
+}
+
+@media (min-width: 1800px) {
+  .site-main {
+    margin-top: 10em;
+  }
+
+  .section-inner {
+    max-width: 1600px;
+  }
+  .thin {
+    max-width: 960px;
+  }
+}
+
 @media (max-width: 760px) {
   .mobile, .site-nav.mobile {
     display: none;
@@ -523,5 +549,5 @@ figure.right {
   figure.left, figure.right {
     float: unset;
     margin: 0;
-  }   
+  }
 }