Start inital schema html adaption, improve gulp workflow, incorporate rucksack.

5 files changed, 374 insertions, 24 deletions

diff --git a/layouts/index.html b/layouts/index.html
index f4cc0b6..7b5f6cd 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -2,13 +2,15 @@
 {{ partial "header.html" . }}
 {{ $paginator := .Paginate (where .Data.Pages "Type" "post") 5 }}
 {{ range $paginator.Pages }}
-<div class="empty">&nbsp;</div>
-  <div class="post-title">
-    <a class="post-title-link" href="{{ .Permalink }}">{{ .Title }}</a>
-  </div>{{ if isset .Params "tags" }}
-      <div class="tags">tags:</br>
-        {{ range  .Params.tags }}<a class="tag-link" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }} </a>{{ end }}</div>
-    <div class="content-tags"><p>{{.Summary}}</p></div>{{ else }}
-    <div class="content-full"><p>{{.Summary}}</p></div>  {{ end }}{{ end }}
-    {{ partial "pagination.html" . }}
-    {{ partial "footer.html" . }}
+  <article itemscope itemtype="http://schema.org/Blog">
+    <div class="post-title">
+      <a class="post-title-link" href="{{ .Permalink }}" itemprop="name">{{ .Title }}</a>
+    </div>{{ if isset .Params "tags" }}
+        <div class="tags">tags:</br>
+          <span itemprop="keywords">{{ range  .Params.tags }}<a class="tag-link" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" rel="tag">{{ . }} </a>{{ end }}</span></div>
+      <div class="content-tags"><p>{{.Summary}}</p></div>{{ else }}
+      <div class="content-full"><p>{{.Summary}}</p></div>  {{ end }}
+  </article>
+  {{ end }}
+{{ partial "pagination.html" . }}
+{{ partial "footer.html" . }}
diff --git a/postcss/dest/style.min.css b/postcss/dest/style.min.css
index a7d4147..0369262 100644
--- a/postcss/dest/style.min.css
+++ b/postcss/dest/style.min.css
@@ -1 +1,171 @@
-@font-face{font-family:Lora;font-style:italic;font-weight:400;src:local("Lora Italic"),local(Lora-Italic),url(https://fonts.gstatic.com/s/lora/v9/EJ2E0VlN4DLy-wT0t9nagw.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/wXeMvRh7Gui36p_I04Ex6g.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/wXeMvRh7Gui36p_I04Ex6g.woff) format("woff")}@font-face{font-family:Lora;font-style:italic;font-weight:700;src:local("Lora Bold Italic"),local(Lora-BoldItalic),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7fY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")}@font-face{font-family:Lora;font-style:normal;font-weight:400;src:local(Lora),local(Lora-Regular),url(https://fonts.gstatic.com/s/lora/v9/rMDaOpSw-8ss9B8Y3bLqyA.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/5-AYViExptypIdFoLKAxTA.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/5-AYViExptypIdFoLKAxTA.woff) format("woff")}@font-face{font-family:Lora;font-style:normal;font-weight:700;src:local("Lora Bold"),local(Lora-Bold),url(https://fonts.gstatic.com/s/lora/v9/1HJZfNlOezBHPPwzRKlEcQ.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/XpaepWHcooQHSRnzoohUng.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/XpaepWHcooQHSRnzoohUng.woff) format("woff")}body{line-height:1.6;font-weight:400;font-family:Lora,HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;background:#181818}.post-list-pagination,a:hover,body{color:#fff}a:hover{text-decoration:underline}.wrap{display:flex;flex-flow:row wrap;max-width:1140px;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px}.wrap:before{content:'';display:table}.wrap:after{content:'';display:table;clear:both}h1,h2,h3,h4,h5,h6{color:#676767}.header,.navbar{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 12/12 - (30px - 30px * 12/12));width:calc(99.9% * 12/12 - (30px - 30px * 12/12))}.header:nth-child(1n),.navbar:nth-child(1n){margin-right:30px;margin-left:0}.header:last-child,.navbar:last-child{margin-right:0}.header:nth-child(12n),.navbar:nth-child(12n){margin-right:0;margin-left:auto}.header a{text-decoration:none;color:#fff;opacity:1;transition:opacity .55s ease-in-out;-moz-transition:opacity .55s ease-in-out;-webkit-transition:opacity .55s ease-in-out}.header a.active{color:#585858}.header a:hover{opacity:.5}.header,.tags{color:#fff}.header,.tags,a.navbar-link,a.post-title-link{font-weight:700}code{color:#866c6c}a{color:#676767}.navbar-list{list-style:none;margin-bottom:0}.navbar-item{position:relative;float:left;margin-bottom:0}.navbar-link{text-transform:uppercase;font-size:14px;font-weight:900;letter-spacing:.2rem;margin-right:35px;text-decoration:none;color:#676767}.navbar-link.active{color:#585858}.navbar-link:hover{color:#aeaeae}.copyright{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 12/12 - (30px - 30px * 12/12));width:calc(99.9% * 12/12 - (30px - 30px * 12/12));font-size:small;color:#676767}.copyright:nth-child(1n){margin-right:30px;margin-left:0}.copyright:last-child{margin-right:0}.copyright:nth-child(12n){margin-right:0;margin-left:auto}.content-tags,.post-title{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 8/12 - (30px - 30px * 8/12));width:calc(99.9% * 8/12 - (30px - 30px * 8/12))}.content-tags:nth-child(1n),.post-title:nth-child(1n){margin-right:30px;margin-left:0}.content-tags:last-child,.post-title:last-child{margin-right:0}.content-tags:nth-child(0n),.post-title:nth-child(0n){margin-right:0;margin-left:auto}.content-full,.pagination{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 12/12 - (30px - 30px * 12/12));width:calc(99.9% * 12/12 - (30px - 30px * 12/12))}.content-full:nth-child(1n),.pagination:nth-child(1n){margin-right:30px;margin-left:0}.content-full:last-child,.pagination:last-child{margin-right:0}.content-full:nth-child(12n),.pagination:nth-child(12n){margin-right:0;margin-left:auto}.pagination{text-align:center}.tags{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 3/12 - (30px - 30px * 3/12));width:calc(99.9% * 3/12 - (30px - 30px * 3/12));border-left:3px solid gray;padding-left:8px;margin-top:4px}.tags:nth-child(1n){margin-right:30px;margin-left:0}.tags:last-child{margin-right:0}.tags:nth-child(0n){margin-right:0;margin-left:auto}.tags,.tags a{font-size:small}.pagination a,.tags a{color:#676767;text-decoration:none}.pagination a:hover,a.tag-link:hover{color:#aeaeae;text-decoration:underline}p{margin-top:5px}.empty{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 12/12 - (30px - 30px * 12/12));width:calc(99.9% * 12/12 - (30px - 30px * 12/12))}.empty:nth-child(1n){margin-right:30px;margin-left:0}.empty:last-child{margin-right:0}.empty:nth-child(12n){margin-right:0;margin-left:auto}.post-title-link{font-weight:700;font-size:30px;color:#676767;text-decoration:none}.post-title-link:hover{color:#aeaeae}
\ No newline at end of file
+@font-face {  font-family: Lora;  font-style: italic;  font-weight: 400;  src: local("Lora Italic"),local(Lora-Italic),url(https://fonts.gstatic.com/s/lora/v9/EJ2E0VlN4DLy-wT0t9nagw.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/wXeMvRh7Gui36p_I04Ex6g.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/wXeMvRh7Gui36p_I04Ex6g.woff) format("woff");
+}
+@font-face {  font-family: Lora;  font-style: italic;  font-weight: 700;  src: local("Lora Bold Italic"),local(Lora-BoldItalic),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7fY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
+}
+@font-face {  font-family: Lora;  font-style: normal;  font-weight: 400;  src: local(Lora),local(Lora-Regular),url(https://fonts.gstatic.com/s/lora/v9/rMDaOpSw-8ss9B8Y3bLqyA.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/5-AYViExptypIdFoLKAxTA.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/5-AYViExptypIdFoLKAxTA.woff) format("woff");
+}
+@font-face {  font-family: Lora;  font-style: normal;  font-weight: 700;  src: local("Lora Bold"),local(Lora-Bold),url(https://fonts.gstatic.com/s/lora/v9/1HJZfNlOezBHPPwzRKlEcQ.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/XpaepWHcooQHSRnzoohUng.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/XpaepWHcooQHSRnzoohUng.woff) format("woff");
+}
+body {  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Lora", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background:#181818;color:#fff;
+  }
+a:hover, .post-list-pagination{color:#fff;}
+a:hover{text-decoration: underline;}
+.wrap {
+  display: flex;
+  flex-flow: row wrap;
+  max-width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+h1,h2,h3,h4,h5,h6 {color: #676767;}
+.header, .navbar { flex-grow: 0; flex-shrink: 0; flex-basis: calc(99.9% * 12/12 - (30px - 30px * 12/12)); width: calc(99.9% * 12/12 - (30px - 30px * 12/12));}
+.header:nth-child(1n), .navbar:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.header:last-child, .navbar:last-child {  margin-right: 0;
+}
+.header:nth-child(12n), .navbar:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.header a{
+  text-decoration: none;
+  color: #fff;
+  opacity: 1;
+  transition: opacity .55s ease-in-out;
+  -moz-transition: opacity .55s ease-in-out;
+  -webkit-transition: opacity .55s ease-in-out;
+}
+.header a.active{
+  color: #585858; }
+.header a:hover{
+  opacity: 0.5;
+  }
+.header, .tags {color:#fff;font-weight:700;}
+a.navbar-link, a.post-title-link{font-weight:700;}
+code {color: #866c6c;}
+a {color: #676767;}
+.navbar-list {
+  list-style: none;
+  margin-bottom: 0;
+  }
+.navbar-item {
+  position: relative;
+  float: left;
+  margin-bottom: 0; }
+.navbar-link {
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 900;
+  letter-spacing: .2rem;
+  margin-right: 35px;
+  text-decoration: none;
+  color: #676767; }
+  .navbar-link.active {
+  color: #585858; }
+  .navbar-link:hover {
+  color: #aeaeae;
+}
+.copyright{
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  width: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  font-size:small; color: #676767;
+}
+.copyright:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.copyright:last-child {  margin-right: 0;
+}
+.copyright:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.content-tags, .post-title {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 7/12 - (30px - 30px * 7/12));
+  width: calc(99.9% * 7/12 - (30px - 30px * 7/12));
+}
+.content-tags:nth-child(1n), .post-title:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.content-tags:last-child, .post-title:last-child {  margin-right: 0;
+}
+.content-tags:nth-child(0n), .post-title:nth-child(0n) {  margin-right: 0;  margin-left: auto;
+}
+.content-full {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 1 - (30px - 30px * 1));
+  width: calc(99.9% * 1 - (30px - 30px * 1));
+}
+.content-full:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.content-full:last-child {  margin-right: 0;
+}
+.content-full:nth-child(undefinedn) {  margin-right: 0;  margin-left: auto;
+}
+.pagination{
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  width: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  text-align:center;
+}
+.pagination:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.pagination:last-child {  margin-right: 0;
+}
+.pagination:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.tags {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 2/12 - (30px - 30px * 2/12));
+  width: calc(99.9% * 2/12 - (30px - 30px * 2/12));
+  border-left: 3px solid #808080;  padding-left: 8px; margin-top: 4px;
+  font-size:small;
+}
+.tags:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.tags:last-child {  margin-right: 0;
+}
+.tags:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.tags a {  font-size:small;}
+.tags a, .pagination a{
+  color: #676767;
+  text-decoration: none;
+}
+a.tag-link:hover, .pagination a:hover{
+color: #aeaeae;
+text-decoration: underline;
+}
+p { margin-top: 5px; font-size: calc(12px + 9 * ((100vw - 420px) / 860));}
+@media screen and (min-width: 1280px) {
+  p {  font-size: 21px;
+  }
+}
+@media screen and (max-width: 420px) {
+  p {  font-size: 12px;
+  }
+}
+.empty {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  width: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+}
+.empty:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.empty:last-child {  margin-right: 0;
+}
+.empty:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.post-title-link {
+font-weight: 700;
+font-size: 30px;
+color: #676767;
+text-decoration: none;
+ }
+.post-title-link:hover {
+color: #aeaeae;
+}
diff --git a/postcss/gulpfile.js b/postcss/gulpfile.js
index d825a15..b2eceeb 100644
--- a/postcss/gulpfile.js
+++ b/postcss/gulpfile.js
@@ -1,19 +1,26 @@
 // Gulp.js configuration
 var gulp = require('gulp'),
+    lost = require('lost'),
+    cssnano = require('cssnano'),
+    autoprefixer = require('autoprefixer')({}),
     watch = require('gulp-watch'),
+    rucksack = require('rucksack-css'),
+    simplevars = require('postcss-simple-vars'),
+    fontmagician = require('postcss-font-magician')({protocol: 'https:'}),
     postcss = require('gulp-postcss');
 
 // apply PostCSS plugins
 gulp.task('css', function() {
   return gulp.src('src/style.min.css')
     .pipe(postcss([
-      require('autoprefixer')({}),
-      require('cssnano'),
-      require('lost'),
-      require('postcss-font-magician')({protocol: 'https:'}),
-      require('postcss-simple-vars')
+      autoprefixer,
+      //cssnano,
+      lost,
+      rucksack,
+      fontmagician,
+      simplevars
     ]))
-    .pipe(gulp.dest('dest'));
+    .pipe(gulp.dest('../static/css'));
 });
 
 gulp.task('default', ['css', 'watch']);
diff --git a/postcss/src/style.min.css b/postcss/src/style.min.css
index 34dee20..cc03c74 100644
--- a/postcss/src/style.min.css
+++ b/postcss/src/style.min.css
@@ -15,8 +15,7 @@ body {  line-height: 1.6;
 a:hover, .post-list-pagination{color:$textColor;}
 a:hover{text-decoration: underline;}
 .wrap {
-  lost-center: 1140px 30px flex;
-  lost-utility: clearfix;
+  lost-center: 80% flex;
 }
 h1,h2,h3,h4,h5,h6 {color: $headlineTextColor;}
 .header, .navbar { lost-column: 12/12;}
@@ -63,17 +62,17 @@ a {color: $linkTextColor;}
   font-size:small; color: $copyrightTextColor;
 }
 .content-tags, .post-title {
-  lost-column: 8/12 0;
+  lost-column: 7/12 0;
 }
 .content-full {
-  lost-column: 12/12;
+  lost-column: 1;
 }
 .pagination{
   lost-column: 12/12;
   text-align:center;
 }
 .tags {
-  lost-column: 3/12 0;
+  lost-column: 2/12;
   border-left: 3px solid #808080;  padding-left: 8px; margin-top: 4px;
   font-size:small;
 }
@@ -86,7 +85,8 @@ a.tag-link:hover, .pagination a:hover{
 color: $linkHoverColor;
 text-decoration: underline;
 }
-p { margin-top: 5px; }
+p { margin-top: 5px; 
+font-size: responsive;}
 .empty {
   lost-column: 12/12;
 }
diff --git a/static/css/style.min.css b/static/css/style.min.css
index a7d4147..d09843c 100644
--- a/static/css/style.min.css
+++ b/static/css/style.min.css
@@ -1 +1,172 @@
-@font-face{font-family:Lora;font-style:italic;font-weight:400;src:local("Lora Italic"),local(Lora-Italic),url(https://fonts.gstatic.com/s/lora/v9/EJ2E0VlN4DLy-wT0t9nagw.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/wXeMvRh7Gui36p_I04Ex6g.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/wXeMvRh7Gui36p_I04Ex6g.woff) format("woff")}@font-face{font-family:Lora;font-style:italic;font-weight:700;src:local("Lora Bold Italic"),local(Lora-BoldItalic),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7fY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")}@font-face{font-family:Lora;font-style:normal;font-weight:400;src:local(Lora),local(Lora-Regular),url(https://fonts.gstatic.com/s/lora/v9/rMDaOpSw-8ss9B8Y3bLqyA.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/5-AYViExptypIdFoLKAxTA.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/5-AYViExptypIdFoLKAxTA.woff) format("woff")}@font-face{font-family:Lora;font-style:normal;font-weight:700;src:local("Lora Bold"),local(Lora-Bold),url(https://fonts.gstatic.com/s/lora/v9/1HJZfNlOezBHPPwzRKlEcQ.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/XpaepWHcooQHSRnzoohUng.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/XpaepWHcooQHSRnzoohUng.woff) format("woff")}body{line-height:1.6;font-weight:400;font-family:Lora,HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;background:#181818}.post-list-pagination,a:hover,body{color:#fff}a:hover{text-decoration:underline}.wrap{display:flex;flex-flow:row wrap;max-width:1140px;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px}.wrap:before{content:'';display:table}.wrap:after{content:'';display:table;clear:both}h1,h2,h3,h4,h5,h6{color:#676767}.header,.navbar{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 12/12 - (30px - 30px * 12/12));width:calc(99.9% * 12/12 - (30px - 30px * 12/12))}.header:nth-child(1n),.navbar:nth-child(1n){margin-right:30px;margin-left:0}.header:last-child,.navbar:last-child{margin-right:0}.header:nth-child(12n),.navbar:nth-child(12n){margin-right:0;margin-left:auto}.header a{text-decoration:none;color:#fff;opacity:1;transition:opacity .55s ease-in-out;-moz-transition:opacity .55s ease-in-out;-webkit-transition:opacity .55s ease-in-out}.header a.active{color:#585858}.header a:hover{opacity:.5}.header,.tags{color:#fff}.header,.tags,a.navbar-link,a.post-title-link{font-weight:700}code{color:#866c6c}a{color:#676767}.navbar-list{list-style:none;margin-bottom:0}.navbar-item{position:relative;float:left;margin-bottom:0}.navbar-link{text-transform:uppercase;font-size:14px;font-weight:900;letter-spacing:.2rem;margin-right:35px;text-decoration:none;color:#676767}.navbar-link.active{color:#585858}.navbar-link:hover{color:#aeaeae}.copyright{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 12/12 - (30px - 30px * 12/12));width:calc(99.9% * 12/12 - (30px - 30px * 12/12));font-size:small;color:#676767}.copyright:nth-child(1n){margin-right:30px;margin-left:0}.copyright:last-child{margin-right:0}.copyright:nth-child(12n){margin-right:0;margin-left:auto}.content-tags,.post-title{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 8/12 - (30px - 30px * 8/12));width:calc(99.9% * 8/12 - (30px - 30px * 8/12))}.content-tags:nth-child(1n),.post-title:nth-child(1n){margin-right:30px;margin-left:0}.content-tags:last-child,.post-title:last-child{margin-right:0}.content-tags:nth-child(0n),.post-title:nth-child(0n){margin-right:0;margin-left:auto}.content-full,.pagination{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 12/12 - (30px - 30px * 12/12));width:calc(99.9% * 12/12 - (30px - 30px * 12/12))}.content-full:nth-child(1n),.pagination:nth-child(1n){margin-right:30px;margin-left:0}.content-full:last-child,.pagination:last-child{margin-right:0}.content-full:nth-child(12n),.pagination:nth-child(12n){margin-right:0;margin-left:auto}.pagination{text-align:center}.tags{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 3/12 - (30px - 30px * 3/12));width:calc(99.9% * 3/12 - (30px - 30px * 3/12));border-left:3px solid gray;padding-left:8px;margin-top:4px}.tags:nth-child(1n){margin-right:30px;margin-left:0}.tags:last-child{margin-right:0}.tags:nth-child(0n){margin-right:0;margin-left:auto}.tags,.tags a{font-size:small}.pagination a,.tags a{color:#676767;text-decoration:none}.pagination a:hover,a.tag-link:hover{color:#aeaeae;text-decoration:underline}p{margin-top:5px}.empty{flex-grow:0;flex-shrink:0;flex-basis:calc(99.9% * 12/12 - (30px - 30px * 12/12));width:calc(99.9% * 12/12 - (30px - 30px * 12/12))}.empty:nth-child(1n){margin-right:30px;margin-left:0}.empty:last-child{margin-right:0}.empty:nth-child(12n){margin-right:0;margin-left:auto}.post-title-link{font-weight:700;font-size:30px;color:#676767;text-decoration:none}.post-title-link:hover{color:#aeaeae}
\ No newline at end of file
+@font-face {  font-family: Lora;  font-style: italic;  font-weight: 400;  src: local("Lora Italic"),local(Lora-Italic),url(https://fonts.gstatic.com/s/lora/v9/EJ2E0VlN4DLy-wT0t9nagw.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/wXeMvRh7Gui36p_I04Ex6g.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/wXeMvRh7Gui36p_I04Ex6g.woff) format("woff");
+}
+@font-face {  font-family: Lora;  font-style: italic;  font-weight: 700;  src: local("Lora Bold Italic"),local(Lora-BoldItalic),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7fY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
+}
+@font-face {  font-family: Lora;  font-style: normal;  font-weight: 400;  src: local(Lora),local(Lora-Regular),url(https://fonts.gstatic.com/s/lora/v9/rMDaOpSw-8ss9B8Y3bLqyA.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/5-AYViExptypIdFoLKAxTA.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/5-AYViExptypIdFoLKAxTA.woff) format("woff");
+}
+@font-face {  font-family: Lora;  font-style: normal;  font-weight: 700;  src: local("Lora Bold"),local(Lora-Bold),url(https://fonts.gstatic.com/s/lora/v9/1HJZfNlOezBHPPwzRKlEcQ.eot?#) format("eot"),url(https://fonts.gstatic.com/s/lora/v9/XpaepWHcooQHSRnzoohUng.woff) format("woff2"),url(https://fonts.gstatic.com/s/lora/v9/XpaepWHcooQHSRnzoohUng.woff) format("woff");
+}
+body {  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Lora", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background:#181818;color:#fff;
+  }
+a:hover, .post-list-pagination{color:#fff;}
+a:hover{text-decoration: underline;}
+.wrap {
+  display: flex;
+  flex-flow: row wrap;
+  max-width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+h1,h2,h3,h4,h5,h6 {color: #676767;}
+.header, .navbar { flex-grow: 0; flex-shrink: 0; flex-basis: calc(99.9% * 12/12 - (30px - 30px * 12/12)); width: calc(99.9% * 12/12 - (30px - 30px * 12/12));}
+.header:nth-child(1n), .navbar:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.header:last-child, .navbar:last-child {  margin-right: 0;
+}
+.header:nth-child(12n), .navbar:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.header a{
+  text-decoration: none;
+  color: #fff;
+  opacity: 1;
+  transition: opacity .55s ease-in-out;
+  -moz-transition: opacity .55s ease-in-out;
+  -webkit-transition: opacity .55s ease-in-out;
+}
+.header a.active{
+  color: #585858; }
+.header a:hover{
+  opacity: 0.5;
+  }
+.header, .tags {color:#fff;font-weight:700;}
+a.navbar-link, a.post-title-link{font-weight:700;}
+code {color: #866c6c;}
+a {color: #676767;}
+.navbar-list {
+  list-style: none;
+  margin-bottom: 0;
+  }
+.navbar-item {
+  position: relative;
+  float: left;
+  margin-bottom: 0; }
+.navbar-link {
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 900;
+  letter-spacing: .2rem;
+  margin-right: 35px;
+  text-decoration: none;
+  color: #676767; }
+  .navbar-link.active {
+  color: #585858; }
+  .navbar-link:hover {
+  color: #aeaeae;
+}
+.copyright{
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  width: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  font-size:small; color: #676767;
+}
+.copyright:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.copyright:last-child {  margin-right: 0;
+}
+.copyright:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.content-tags, .post-title {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 7/12 - (30px - 30px * 7/12));
+  width: calc(99.9% * 7/12 - (30px - 30px * 7/12));
+}
+.content-tags:nth-child(1n), .post-title:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.content-tags:last-child, .post-title:last-child {  margin-right: 0;
+}
+.content-tags:nth-child(0n), .post-title:nth-child(0n) {  margin-right: 0;  margin-left: auto;
+}
+.content-full {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 1 - (30px - 30px * 1));
+  width: calc(99.9% * 1 - (30px - 30px * 1));
+}
+.content-full:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.content-full:last-child {  margin-right: 0;
+}
+.content-full:nth-child(undefinedn) {  margin-right: 0;  margin-left: auto;
+}
+.pagination{
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  width: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  text-align:center;
+}
+.pagination:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.pagination:last-child {  margin-right: 0;
+}
+.pagination:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.tags {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 2/12 - (30px - 30px * 2/12));
+  width: calc(99.9% * 2/12 - (30px - 30px * 2/12));
+  border-left: 3px solid #808080;  padding-left: 8px; margin-top: 4px;
+  font-size:small;
+}
+.tags:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.tags:last-child {  margin-right: 0;
+}
+.tags:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.tags a {  font-size:small;}
+.tags a, .pagination a{
+  color: #676767;
+  text-decoration: none;
+}
+a.tag-link:hover, .pagination a:hover{
+color: #aeaeae;
+text-decoration: underline;
+}
+p { margin-top: 5px; 
+font-size: calc(12px + 9 * ((100vw - 420px) / 860));}
+@media screen and (min-width: 1280px) {
+  p {  font-size: 21px;
+  }
+}
+@media screen and (max-width: 420px) {
+  p {  font-size: 12px;
+  }
+}
+.empty {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+  width: calc(99.9% * 12/12 - (30px - 30px * 12/12));
+}
+.empty:nth-child(1n) {  margin-right: 30px;  margin-left: 0;
+}
+.empty:last-child {  margin-right: 0;
+}
+.empty:nth-child(12n) {  margin-right: 0;  margin-left: auto;
+}
+.post-title-link {
+font-weight: 700;
+font-size: 30px;
+color: #676767;
+text-decoration: none;
+ }
+.post-title-link:hover {
+color: #aeaeae;
+}