typografie volledig gewijzigd

config.toml

@@ -22,7 +22,7 @@ enableEmoji = true
     highlight = true
     highlightStyle = "paraiso-dark"
     highlightLanguages = ["cs", "c", "scheme", "python", "java", "scala", "javascript"]
-    font = "Open Sans"
+    font = "Cambria"
     copyright = "No <i class='fa fa-copyright'></i> reserved - sharing is caring. <i class='fa fa-github'></i> <a href='https://github.com/wgroeneveld/brainbaking/'>Hack away</a>! <i class='fa fa-lightbulb-o'></i> <a href='/'>Brain Baking</a>"
 
 [Author]

layouts/index.html

@@ -41,9 +41,9 @@
         <hr/>
 
         <div class="freshly-baked">
-	        <h2>
+	        <h3>
 	        	<i class="fa fa-newspaper-o"></i>&nbsp;{{ markdownify .Site.Params.Description }}:
-	        </h2>
+	        </h3>
 
 	        {{ range (.Paginator 1).Pages.ByDate.Reverse }}
 		    	{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") | $.Scratch.Set "subtitle" }}

static/css/brainbaking.css

@@ -60,9 +60,64 @@ img.bordered {
 
 /** general **/
 
-/* voor 20'+ breedbeeldschermen de main content verhogen */
-@media only screen and (min-width: 1600px) {
+/* -- Typography overrides bootstrap.
+   -- default CSS included, can't override less settings from https://getbootstrap.com/docs/3.3/customize/ */
+main {
+  font-size: 14pt !important;
+  line-height: 1.7;
+}
 
+nav {
+  font-family: 'Open Sans', sans-serif !important;
+  font-size: 14px !important;
+  line-height: 1.4 !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.8 !important;
+  font-weight: bold !important;
+}
+
+h2 {
+  font-size: 26pt !important;
+}
+
+h3 {
+  font-size: 22pt !important;
+}
+
+h4 {
+  font-size: 16pt !important;
+}
+
+pre {
+  font-size: 12pt !important;
+}
+
+@media (max-width: 767px) {
+  main {
+    font-size: 12pt !important;
+  }
+  h2 {
+    font-size: 24pt !important;
+  }
+
+  h3 {
+    font-size: 20pt !important;
+  }
+
+  h4 {
+    font-size: 14pt !important;
+  }
+
+  pre {
+    font-size: 10pt !important;
+  }
+}
+
+/* -- voor 20'+ breedbeeldschermen */
+@media only screen and (min-width: 1600px) {
+  /* de main content verhogen */
 	main {
 	    max-width: 930px !important;
 	}
@@ -70,7 +125,14 @@ img.bordered {
   .big-img .container {
     height: 250px !important;
   }
+}
 
+/* -- voor fatsoenlijke schermen */
+@media only screen and (min-width: 768px) {
+  /* indien header image, hoogte vergroten */
+  .big-img .container {
+    height: 150px;
+  }
 }
 
 blockquote {
@@ -102,12 +164,6 @@ main .text-justify blockquote p {
 	border-bottom: 1px solid var(--accent);
 }
 
-@media only screen and (min-width: 768px) {
-  .big-img .container {
-    height: 150px;
-  }
-}
-
 /* --- goodreads widget styles --- */
 .gr_grid_container {
 }