[SITE CSS] add code style to main.scss + add image and text size to blog.scss + enable smartypants

assets/css/blog.css

@@ -7,6 +7,11 @@ h2 {
 a:hover, a:active, a:focus {
   text-decoration: none; }
 
+figure {
+  text-align: center; }
+  figure img {
+    max-width: 100%; }
+
 main.blog .container {
   max-width: 700px; }
 
@@ -14,7 +19,8 @@ main.blog h1 a {
   color: inherit; }
 
 main.blog article div.meta {
-  color: #a6a6a6; }
+  color: #a6a6a6;
+  font-size: 0.85em; }
   main.blog article div.meta span.tags {
     margin-left: 5px;
     border-left: 1px solid #a6a6a6;
@@ -27,6 +33,7 @@ main.blog article div.meta {
       content: ''; }
 
 main.blog article.excerpt {
+  font-size: 1.05em;
   padding-bottom: 30px;
   margin-top: 25px;
   border-bottom: 1px solid #a6a6a6;
@@ -38,10 +45,17 @@ main.blog article.excerpt {
     top: 0.03em; }
 
 main.blog article.blogarticle {
+  font-size: 1.15em;
   margin-top: 30px;
-  padding-bottom: 60px;
+  padding-bottom: 15px;
   border-bottom: 2px solid silver;
   margin-bottom: 50px; }
+  main.blog article.blogarticle h1 {
+    margin-bottom: 0; }
+  main.blog article.blogarticle div.meta.title {
+    margin-bottom: 20px; }
+  main.blog article.blogarticle div.meta.bottom {
+    margin-top: 45px; }
 
 main.blog div.teasers article.excerpt:last-child {
   border-bottom: none; }

assets/css/foundation.css

@@ -322,47 +322,6 @@ mark,
 dl.row > dd + dt {
   clear: left; }
 
-code,
-kbd,
-pre,
-samp {
-  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
-
-code {
-  padding: 0.2rem 0.4rem;
-  font-size: 90%;
-  color: #bd4147;
-  background-color: #f7f7f9;
-  border-radius: 0.25rem; }
-
-kbd {
-  padding: 0.2rem 0.4rem;
-  font-size: 90%;
-  color: #fff;
-  background-color: #333;
-  border-radius: 0.2rem; }
-  kbd kbd {
-    padding: 0;
-    font-size: 100%;
-    font-weight: bold; }
-
-pre {
-  display: block;
-  margin-top: 0;
-  margin-bottom: 1rem;
-  font-size: 90%;
-  color: #373a3c; }
-  pre code {
-    padding: 0;
-    font-size: inherit;
-    color: inherit;
-    background-color: transparent;
-    border-radius: 0; }
-
-.pre-scrollable {
-  max-height: 340px;
-  overflow-y: scroll; }
-
 .container {
   margin-left: auto;
   margin-right: auto;
@@ -1920,6 +1879,15 @@ a.bg-danger:hover {
   display: table;
   clear: both; }
 
+.d-block {
+  display: block !important; }
+
+.d-inline-block {
+  display: inline-block !important; }
+
+.d-inline {
+  display: inline !important; }
+
 .pull-xs-left {
   float: left !important; }
 
@@ -1980,6 +1948,9 @@ a.bg-danger:hover {
   overflow: visible;
   clip: auto; }
 
+.w-100 {
+  width: 100% !important; }
+
 .m-x-auto {
   margin-right: auto !important;
   margin-left: auto !important; }

assets/css/main.css

@@ -25,6 +25,40 @@ a {
   a:active, a:hover, a:focus {
     color: #1f7001; }
 
+blockquote {
+  font-size: 1.4em;
+  border-left: 4px solid #dddddd;
+  padding: 0 15px;
+  color: #777777; }
+
+blockquote > :first-child {
+  margin-top: 0; }
+
+blockquote > :last-child {
+  margin-bottom: 0; }
+
+code {
+  padding: 0 5px;
+  white-space: nowrap;
+  border: 1px solid #eaeaea;
+  background-color: #f8f8f8;
+  border-radius: 3px; }
+
+pre {
+  background-color: #f8f8f8;
+  border: 1px solid #cccccc;
+  font-size: 14px;
+  line-height: 19px;
+  overflow: auto;
+  padding: 6px 10px;
+  border-radius: 3px; }
+  pre code {
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+    border: none;
+    background: transparent; }
+
 main div.container {
   margin-top: 10px; }
   @media (min-width: 992px) {

assets/scss/blog.scss

@@ -16,11 +16,18 @@ body {
 h2 {
   margin-bottom: 5px;
 }
-
 a:hover, a:active, a:focus {
   text-decoration: none;
 }
 
+figure {
+  text-align: center;
+  img {
+    max-width: 100%;
+  }
+}
+
+
 
 // additional css
 main.blog {
@@ -34,6 +41,7 @@ main.blog {
   article {
     div.meta {
       color: $blog_color_meta;
+      font-size: 0.85em;
       span.tags {
         margin-left: 5px;
         border-left: 1px solid $blog_color_meta;
@@ -46,6 +54,7 @@ main.blog {
   }
 
   article.excerpt {
+    font-size: 1.05em;
     padding-bottom: 30px;
     margin-top: 25px;
     border-bottom: 1px solid $blog_color_meta;
@@ -60,6 +69,7 @@ main.blog {
   }
 
   article.blogarticle {
+    font-size: 1.15em;
     margin-top: 30px;
 
     h1 {

assets/scss/foundation.scss

@@ -15,7 +15,7 @@
 @import "reboot"; // needed for correct grid behaviour
 @import "type";
 //@import "images";
-@import "code";
+//@import "code";
 @import "grid";
 //@import "tables";
 //@import "forms";

assets/scss/main.scss

@@ -32,6 +32,41 @@ a {
     color: $link_active;
   }
 }
+blockquote {
+  font-size: 1.4em;
+  border-left: 4px solid #dddddd;
+  padding: 0 15px;
+  color: #777777;
+}
+blockquote > :first-child {
+  margin-top: 0;
+}
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+code {
+  padding: 0 5px;
+  white-space: nowrap;
+  border: 1px solid #eaeaea;
+  background-color: #f8f8f8;
+  border-radius: 3px;
+}
+pre {
+  background-color: #f8f8f8;
+  border: 1px solid #cccccc;
+  font-size: 14px;
+  line-height: 19px;
+  overflow: auto;
+  padding: 6px 10px;
+  border-radius: 3px;
+  code {
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+    border: none;
+    background: transparent;
+  }
+}
 
 main div.container {
   margin-top: 10px;

site/config/config.php

@@ -15,6 +15,10 @@ Kirby Configuration
 c::set('cache', true);
 c::set('cache.ignore', array('sitemap'));
 
+c::set('smartypants', true);
+c::set('smartypants.doublequote.open', '„');
+c::set('smartypants.doublequote.close', '“');
+
 c::set('ssl', true);
 
 c::set('routes', array(