many things

author: Miguel <m.i@gmx.at> 2019-03-17 13:34:44 +0100
committer: Miguel <m.i@gmx.at> 2019-03-17 13:34:44 +0100
commit: 331195b0d690d89d43e7eca9565ea2b013e87f25 (patch)
tree: cda936e57d6378183d535800d9c3dec0a0267350
parent: 3b32429a0064159842a4147eb4accc7bdba63553 (diff)
42 files changed, 2572 insertions, 286 deletions
diff --git a/00_css/custom.css b/00_css/custom.css
new file mode 100644
index 0000000..3baf6e0
--- /dev/null
+++ b/00_css/custom.css
@@ -0,0 +1,59 @@
+/* miguel's custom */
+body{background-color:#dde;}
+
+.clear{
+    clear:both;
+}
+footer{
+    border-top: 1px solid black;
+}
+header a{
+    color:black;
+    text-decoration:none;
+}
+
+a{
+    color:#45b;
+}
+
+ul li{
+  list-style-type: none;
+}
+
+ul li:before{
+  content: ">>";
+  padding-right: 1em; 
+  color: #e21;
+}
+
+#breadcrumbs{
+    border-top: 1px solid black;
+}
+#breadcrumbs li{
+    float:left;
+    margin-right:0;
+}
+#breadcrumbs ul li:first-child:before {
+  content: '';
+  padding-right: 0em; 
+}
+#breadcrumbs ul li:not(:first-child):before {
+  content: '>>';
+  position: relative; 
+  top: 0px; 
+  padding-right: 1em; 
+  padding-left: 1em; 
+  color: #e21;
+}
+#submenu ul{
+     list-style-type: none;
+}
+
+video{
+    width:640px;
+    max-width:100%
+}
+
+.container img{
+    max-width:100%
+}
diff --git a/00_css/normalize.css b/00_css/normalize.css
new file mode 100644
index 0000000..81c6f31
--- /dev/null
+++ b/00_css/normalize.css
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+\ No newline at end of file
diff --git a/pandoc_breezedark.css b/00_css/pandoc_breezedark.css
index 9582310..9582310 100644
--- a/pandoc_breezedark.css
+++ b/00_css/pandoc_breezedark.css
diff --git a/pandoc_espresso.css b/00_css/pandoc_espresso.css
index b85a63a..b85a63a 100644
--- a/pandoc_espresso.css
+++ b/00_css/pandoc_espresso.css
diff --git a/pandoc_haddock.css b/00_css/pandoc_haddock.css
index f8d434d..f8d434d 100644
--- a/pandoc_haddock.css
+++ b/00_css/pandoc_haddock.css
diff --git a/pandoc_kate.css b/00_css/pandoc_kate.css
index 426dce9..426dce9 100644
--- a/pandoc_kate.css
+++ b/00_css/pandoc_kate.css
diff --git a/pandoc_monochrome.css b/00_css/pandoc_monochrome.css
index bb56806..bb56806 100644
--- a/pandoc_monochrome.css
+++ b/00_css/pandoc_monochrome.css
diff --git a/pandoc_pygments.css b/00_css/pandoc_pygments.css
index cee8875..cee8875 100644
--- a/pandoc_pygments.css
+++ b/00_css/pandoc_pygments.css
diff --git a/pandoc_tango.css b/00_css/pandoc_tango.css
index ec04f53..ec04f53 100644
--- a/pandoc_tango.css
+++ b/00_css/pandoc_tango.css
diff --git a/pandoc_zenburn.css b/00_css/pandoc_zenburn.css
index 9632339..9632339 100644
--- a/pandoc_zenburn.css
+++ b/00_css/pandoc_zenburn.css
diff --git a/00_css/skeleton.css b/00_css/skeleton.css
new file mode 100644
index 0000000..13840bf
--- /dev/null
+++ b/00_css/skeleton.css
@@ -0,0 +1,419 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #1EAEDB; }
+a:hover {
+  color: #0FA0CE; }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* REM BY MIGUEL (we have pandoc css for code)
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+*/
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
diff --git a/080_blog/00038_Theory/00010_Totient-Function/index.md b/00_xxx/00038_Theory/00010_Totient-Function/index.md
index eea75f4..eea75f4 100644
--- a/080_blog/00038_Theory/00010_Totient-Function/index.md
+++ b/00_xxx/00038_Theory/00010_Totient-Function/index.md
diff --git a/080_blog/00038_Theory/index.md b/00_xxx/00038_Theory/index.md
index e69de29..e69de29 100644
--- a/080_blog/00038_Theory/index.md
+++ b/00_xxx/00038_Theory/index.md
diff --git a/080_blog/00015_Admin/00050_Wine-in-LXC/index.md b/080_blog/00015_Admin/00050_Wine-in-LXC/index.md
new file mode 100644
index 0000000..24344e0
--- /dev/null
+++ b/080_blog/00015_Admin/00050_Wine-in-LXC/index.md
@@ -0,0 +1,197 @@
+Wine inside LXC
+===============
+
+Abstract
+--------
+
+Running Wine inside an unpriviliged LXC Container as a secondary user,
+utilizing the host systems OpenGL 3D acceleration and PulseAudio.
+
+Host System
+-----------
+
+* Debian 9 / Stretch
+* Xorg running as primary user "miguel"
+* NVIDIA proprietary drivers (debian's contrib/non-free)
+* PulseAudio up & running as primary user (I run pavucontrol as miguel)
+* A Secondary user "retard2" with uid/gid=1002
+
+Preparations
+------------
+
+Allow access to the display server and audio. Note that you should 
+restrict this in a real world setup (e.g. auth-ip-acl):
+
+    migue@host$ xhost + # allow remote X access
+
+add this lines to /etc/pulse/default.pa and restart pulsaudio:
+
+    load-module module-native-protocol-tcp auth-anonymous=1
+    load-module module-zeroconf-publish
+
+Create Container
+----------------
+
+    1. In order to allow the creation of virutal network bridges as our 
+    secondary user, add the following two lines to /etc/lxc/lxc-usernet:
+
+    retard2  veth         virbr0     2
+    retard2  veth         lxcbr0     10
+
+    2. Login as retard2 ("su" does not work well with cgroups)
+
+    miguel@host$ sudo machinectl login   # than login as retard2
+    retard2@host$ cat /proc/self/cgroup  # just check cgroups if you want
+
+    3. Add subuid subgid mappings to /home/retard2/.config/lxc/default.conf
+    You can check the ranges in /etc/subuid and /etc/subgid:
+
+    lxc.id_map = u 0 1541792 65536
+    lxc.id_map = g 0 1541792 65536
+
+    4. We are ready to create the lxc container as retard2: 
+
+    retard2@host$ lxc-create -n winebox -t download
+
+    Select exactly the same distro / version / arch as you run on the
+    host. i.e. debian / stretch / amd64
+
+    retard2@host$ lxc-ls # assure that "winebox" LXC was created
+
+    5. Adapt the new config in: ~/.local/share/lxc/winebox/config adding:
+
+    # NET
+    lxc.network.type = veth
+    lxc.network.link = lxcbr0
+    lxc.network.flags = up
+    lxc.network.hwaddr = 00:16:3e:be:3c:5a 
+
+    # X
+    lxc.mount.entry = /dev/dri dev/dri none bind,create=dir
+    lxc.mount.entry = /tmp/.X11-unix tmp/.X11-unix none bind,create=dir
+
+    # NVIDIA
+    lxc.mount.entry = /dev/nvidia0 dev/nvidia0 none bind,create=file
+    lxc.mount.entry = /dev/nvidiactl dev/nvidiactl none bind,create=file
+
+    6. Finally start the container and enter its realm:
+
+    retard2@host$ lxc-start -n winebox
+    retard2@host$ lxc-ls --running            # check it is up & running
+    retard2@host$ lxc-attach -n winebox -- su # enter container (as root)
+
+Inside the Container
+--------------------
+
+    1. Adapt /etc/apt/sources.list to make use of "contrib" and "non-free" 
+    and run:
+
+    root@winebox$ apt update
+
+    2. Get OpenGL running
+
+    root@winebox$ apt upgrade
+    root@winebox$ apt install mesa-utils
+    root@winebox$ apt install xserver-xorg-video-nvidia
+    root@winebox$ DISPLAY=:0 glxgears                        # check
+    root@winebox$ DISPLAY=:0 glxinfo  | grep "direct render" # check
+
+    3. Get PulseAudio running.
+    Please adapt the IP to the host's lxcbr0 ip address.
+
+    root@winebox$ apt install pavucontrol
+    root@winebox$ DISPLAY=:0 PULSE_SERVER=10.0.5.1 pavucontrol
+
+    At this point we should have accelerated video and audio running from 
+    inside our LXC. Well Done!
+
+Wine
+----
+
+A few trivial requirements:
+
+    root@winebox$ apt install wget
+    root@winebox$ apt install gnupg
+    root@winebox$ apt install apt-transport-https
+
+Now let's get some wine accoring to: https://wiki.winehq.org/Debian:
+
+    root@winebox$ sudo dpkg --add-architecture i386
+    root@winebox$ wget -nc https://dl.winehq.org/wine-builds/Release.key
+    root@winebox$ sudo apt-key add Release.key
+
+Add the debian stretch wine repo to your /etc/apt/sources.list:
+
+    deb https://dl.winehq.org/wine-builds/debian/ stretch main
+
+    root@winebox$ apt update
+    root@winebox$ apt-get install --install-recommends winehq-stable
+
+Unfortunatelly wine still depends on the 32-bit versions of some libs so
+we have to replace our 64-bit verions by running:
+
+    root@winebox$ apt install libgl1-nvidia-glx:i386
+
+Restrict Networking
+-------------------
+
+Now You can optionally restrict any communication with the outside world:
+
+    miguel@host$ sudo iptables -F FORWARD       #block traffic
+    miguel@host$ sudo iptables -P FORWARD DROP  #block traffic
+
+If your host is forwarding traffic you will need to set up some rules.
+
+Finalizing Contianer
+--------------------
+
+    1. Create a non-root user:
+    root@winebox$ adduser lxc-retard
+
+    2. Now we can exit the container with :
+    root@winebox$ exit
+
+    3. Stop the container on the host. This might take some while.
+    retard2@host$ lxc-stop -n winebox
+
+    4. THIS WOULD BE A VERY GOOD MOMENT TO SNAPSHOT THE CONTIANER 
+    FOR LATER REUSE!
+
+Summary
+-------
+
+Congratulations! Now you are running "wine" as an unprivileged user
+inside of an unprivileged container of a secondary user, utlizing your
+hosts hardware acceleration and PulseAudio capabilities.
+
+Optionally traffic forwarding has been blocked, for increased security.
+
+Using the Container
+-------------------
+
+To use your new container you will need to go through the following 
+steps each time:
+
+    miguel@host$ xhost +
+    miguel@host$ sudo iptables -F FORWARD       #block traffic
+    miguel@host$ sudo iptables -P FORWARD DROP  #block traffic
+    miguel$host$ sudo machinectl login # and login as retard2
+
+    retard2@host$ lxc-start -n winebox
+
+Now you can attach to the container as lxc-retard user:
+
+    retard2@host$ lxc-attach -n winebox -- su lxc-retard
+
+Alternatively we can attach as root:
+
+    retard2@host$ lxc-attach -n winebox -- su
+
+Do not forget to stop container once you are finished:
+
+    retard2@host$ lxc-stop -n winebox
+
+Remember that stopping might take a while. Be patient!
+
+Make sure to automate/adapt the process, according to your personal
+preferences and requirements.
diff --git a/080_blog/00040_Haskell/00010_Links-and-Literature/index.md b/080_blog/00040_Haskell/00010_Links-and-Literature/index.md
new file mode 100644
index 0000000..999c574
--- /dev/null
+++ b/080_blog/00040_Haskell/00010_Links-and-Literature/index.md
@@ -0,0 +1,17 @@
+# Haskell - Books, Links and Papers
+
+A growing collection of external links and books concerning Haskell.
+
+* **Learn You a Haskell** for Great Good by Marian Lipovaca
+* **Real World Haskell** by Bryan O'Sullivan, Don Stewart, and John Goerzen
+* **Parallel and Concurrent Programming in Haskell** by Simon Marlow
+* **Haskell Wiki** <https://wiki.haskell.org>
+* **UPENN CIS 194** <https://www.seas.upenn.edu/~cis194/spring13/>
+* **What I Wish I Knew When Learning Haskell** by Stephen Diehl <http://dev.stephendiehl.com/hask/>
+* **Data61 Course** <https://github.com/data61/fp-course>
+* **Monads for functional programming (paper)** by Philip Wadler
+* **Functional Pearl (paper)**  
+* **Why Functional Programming Matters (paper)**
+* **Mailing Lists** <https://www.haskell.org/mailing-lists/>
+* **IRC** #haskell at chat.freenode.at
+* **Monadic Warsaw** 
diff --git a/080_blog/00040_Haskell/00010_Links-and-Notes-and-Literature/index.md b/080_blog/00040_Haskell/00020_GHC-Notes/index.md
index 2eb1215..c945319 100644
--- a/080_blog/00040_Haskell/00010_Links-and-Notes-and-Literature/index.md
+++ b/080_blog/00040_Haskell/00020_GHC-Notes/index.md
@@ -1,29 +1,4 @@
-# Haskell
-
-## Books, Links and Papers
-
-* **Learn You a Haskell** for Great Good by Marian Lipovaca
-* **Real World Haskell** by Bryan O'Sullivan, Don Stewart, and John Goerzen
-* **Parallel and Concurrent Programming in Haskell** by Simon Marlow
-
-* **Haskell Wiki** <https://wiki.haskell.org>
-* **UPENN CIS 194** <https://www.seas.upenn.edu/~cis194/spring13/>
-* **What I Wish I Knew When Learning Haskell** by Stephen Diehl <http://dev.stephendiehl.com/hask/>
-* **Data61 Course** <https://github.com/data61/fp-course>
-
-* **Monads for functional programming (paper)** by Philip Wadler
-* **Functional Pearl (paper)**  
-* **Why Functional Programming Matters (paper)**
-
-* **Mailing Lists** <https://www.haskell.org/mailing-lists/>
-* **IRC** #haskell at chat.freenode.at
-* **Monadic Warsaw** 
-
-
-## xmonad-contrib contribution
-
-Added a pretty printer for empty visible workspaces\
-<https://github.com/xmonad/xmonad-contrib/pull/241>
+# The Glasgow Haskell Compiler
 
 ## Some GHC Flags
 
@@ -62,8 +37,3 @@ Added a pretty printer for empty visible workspaces\
 
         Note: render the heap profile as graph with: hp2ps -e8in -c file.hp
               show eventlog with: threadscope file.eventlog
-
-## monad transformers in action
-
-    Main Control.Monad.Writer Control.Monad.State> runState (runWriterT  (get >>= \a -> tell ["foo"] >> put (a*a) >> tell ["bar"] >> tell [show a])) 5
-
diff --git a/080_blog/00040_Haskell/00030_Xmonad-contribution/index.md b/080_blog/00040_Haskell/00030_Xmonad-contribution/index.md
new file mode 100644
index 0000000..1a5bf0f
--- /dev/null
+++ b/080_blog/00040_Haskell/00030_Xmonad-contribution/index.md
@@ -0,0 +1,20 @@
+    April 2018
+# Pretty printer for empty visible workspaces
+
+My little contribution to **xmonad-contrib**, adding functionality to the 
+marvelous xmonad tiling window manager, I love and use since a couple of 
+years.
+
+## Description
+
+Simple extensions of the pretty printer to differentiate between empty and non-empty visible workspaces. Analogical to the existing functionality for hidden workspaces. Particularly useful if some displays managed by xmonad are turned off temporarily.
+
+The new 'ppVisibleNoWindows' function was wrapped in a Maybe data type. Its value dafaults to 'Nothing' and 'ppVisible' is used as fallback.
+
+## Motivation
+
+My TV is often turned off. Still I want to know if its workspace contains any windows, without having to switch workspaces.
+
+## Github Link
+| _Xmonad-Contrib: Added pretty printer for empty visible workspaces (wrapped in Maybe)_
+| <https://github.com/xmonad/xmonad-contrib/pull/241>
diff --git a/080_blog/00040_Haskell/00065_Base64-Encoder/base64.cast b/080_blog/00040_Haskell/00065_Base64-Encoder/base64.cast
index 54f3ab5..b32cd78 100644
--- a/080_blog/00040_Haskell/00065_Base64-Encoder/base64.cast
+++ b/080_blog/00040_Haskell/00065_Base64-Encoder/base64.cast
@@ -1,226 +1,146 @@
 {
-  "command": null,
-  "width": 101,
-  "title": null,
-  "height": 6,
   "env": {
-    "SHELL": "/bin/bash",
-    "TERM": "screen-256color"
+    "TERM": "screen-256color",
+    "SHELL": "/bin/bash"
   },
+  "version": 1,
+  "command": null,
+  "title": null,
+  "width": 90,
+  "height": 7,
+  "duration": 26.498611,
   "stdout": [
     [
-      0.020042,
+      0.018948,
       "miguel@megaloman:~/git/haskell/base64$ "
     ],
     [
-      0.972847,
-      "cat /dev/urandom | pv | ./base64 > /dev/null "
+      0.831467,
+      "cat /tmp/random.bin | pv | ./base64 > /dev/null "
     ],
     [
-      0.43902,
-      "\r\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[1Pecho \"Welcome to Base64 encoding\" | ./base64"
+      0.269283,
+      "\r\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[17Pecho \"Hello Base64!\" | ./base64"
     ],
     [
-      0.83889,
+      1.242802,
       "\r\n"
     ],
     [
-      0.001251,
-      "V2VsY29tZSB0byBCYXNlNjQgZW5jb2RpbmcK\r\n"
+      0.002817,
+      "SGVsbG8gQmFzZTY0IQo=\r\n"
     ],
     [
-      0.000356,
+      0.000531,
       "miguel@megaloman:~/git/haskell/base64$ "
     ],
     [
-      1.151505,
-      "echo \"Welcome to Base64 encoding\" | ./base64"
+      0.827791,
+      "echo \"Hello Base64!\" | ./base64"
     ],
     [
-      0.328933,
-      "\r\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[Ccat /dev/urandom | pv | ./base64 > /dev/null "
+      0.207417,
+      "\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bcat /tmp/random.bin | pv | ./base64 > /dev/null "
     ],
     [
-      0.833,
+      0.963475,
       "\r\n"
     ],
     [
-      1.001665,
-      " 253MiB 0:00:01 [ 253MiB/s] [ <=>                                                                   ]\r"
-    ],
-    [
-      0.999837,
-      " 500MiB 0:00:02 [ 247MiB/s] [  <=>                                                                  ]\r"
-    ],
-    [
-      1.000048,
-      " 753MiB 0:00:03 [ 252MiB/s] [    <=>                                                                ]\r"
-    ],
-    [
-      1.000117,
-      "1001MiB 0:00:04 [ 247MiB/s] [     <=>                                                               ]\r"
-    ],
-    [
-      0.999649,
-      "1.22GiB 0:00:05 [ 251MiB/s] [      <=>                                                              ]\r"
-    ],
-    [
-      1.000026,
-      "1.47GiB 0:00:06 [ 250MiB/s] [        <=>                                                            ]\r"
-    ],
-    [
-      1.000236,
-      "1.72GiB 0:00:07 [ 253MiB/s] [         <=>                                                           ]\r"
-    ],
-    [
-      1.000056,
-      "1.96GiB 0:00:08 [ 252MiB/s] [          <=>                                                          ]\r"
-    ],
-    [
-      0.999645,
-      " 2.2GiB 0:00:09 [ 244MiB/s] [            <=>                                                        ]\r"
-    ],
-    [
-      1.000274,
-      "2.45GiB 0:00:10 [ 253MiB/s] [             <=>                                                       ]\r"
-    ],
-    [
-      0.999751,
-      "2.69GiB 0:00:11 [ 244MiB/s] [              <=>                                                      ]\r"
+      1.002914,
+      " 434MiB 0:00:01 [ 434MiB/s] [ <=>                                                        ]\r"
     ],
     [
-      1.000191,
-      "2.93GiB 0:00:12 [ 252MiB/s] [                <=>                                                    ]\r"
+      0.99997,
+      " 876MiB 0:00:02 [ 441MiB/s] [  <=>                                                       ]\r"
     ],
     [
-      0.999772,
-      "3.18GiB 0:00:13 [ 248MiB/s] [                 <=>                                                   ]\r"
+      1.000022,
+      "1.28GiB 0:00:03 [ 439MiB/s] [   <=>                                                      ]\r"
     ],
     [
-      1.000312,
-      "3.43GiB 0:00:14 [ 257MiB/s] [                   <=>                                                 ]\r"
+      1.000032,
+      "1.73GiB 0:00:04 [ 455MiB/s] [    <=>                                                     ]\r"
     ],
     [
-      0.999856,
-      "3.68GiB 0:00:15 [ 254MiB/s] [                    <=>                                                ]\r"
-    ],
-    [
-      1.000239,
-      "3.93GiB 0:00:16 [ 253MiB/s] [                     <=>                                               ]\r"
-    ],
-    [
-      0.99986,
-      "4.17GiB 0:00:17 [ 248MiB/s] [                       <=>                                             ]\r"
-    ],
-    [
-      0.999739,
-      " 4.4GiB 0:00:18 [ 242MiB/s] [                        <=>                                            ]\r"
-    ],
-    [
-      1.000023,
-      "4.65GiB 0:00:19 [ 252MiB/s] [                         <=>                                           ]\r"
-    ],
-    [
-      1.000103,
-      "4.89GiB 0:00:20 [ 245MiB/s] [                           <=>                                         ]\r"
-    ],
-    [
-      1.000106,
-      "5.14GiB 0:00:21 [ 255MiB/s] [                            <=>                                        ]\r"
-    ],
-    [
-      1.000102,
-      "5.38GiB 0:00:22 [ 246MiB/s] [                             <=>                                       ]\r"
-    ],
-    [
-      1.000042,
-      "5.63GiB 0:00:23 [ 252MiB/s] [                               <=>                                     ]\r"
-    ],
-    [
-      0.999787,
-      "5.87GiB 0:00:24 [ 250MiB/s] [                                <=>                                    ]\r"
-    ],
-    [
-      1.000079,
-      "6.11GiB 0:00:25 [ 248MiB/s] [                                  <=>                                  ]\r"
+      0.999929,
+      "2.18GiB 0:00:05 [ 464MiB/s] [     <=>                                                    ]\r"
     ],
     [
-      1.000035,
-      "6.36GiB 0:00:26 [ 247MiB/s] [                                   <=>                                 ]\r"
+      0.999976,
+      "2.64GiB 0:00:06 [ 464MiB/s] [      <=>                                                   ]\r"
     ],
     [
-      0.999929,
-      " 6.6GiB 0:00:27 [ 250MiB/s] [                                    <=>                                ]\r"
+      1.000019,
+      "3.09GiB 0:00:07 [ 466MiB/s] [       <=>                                                  ]\r"
     ],
     [
-      0.999966,
-      "6.84GiB 0:00:28 [ 244MiB/s] [                                      <=>                              ]\r"
+      1.00003,
+      "3.55GiB 0:00:08 [ 467MiB/s] [         <=>                                                ]\r"
     ],
     [
-      1.000047,
-      "7.09GiB 0:00:29 [ 252MiB/s] [                                       <=>                             ]\r"
+      1.0,
+      "3.99GiB 0:00:09 [ 452MiB/s] [          <=>                                               ]\r"
     ],
     [
-      0.999829,
-      "7.33GiB 0:00:30 [ 250MiB/s] [                                        <=>                            ]\r"
+      0.999962,
+      "4.43GiB 0:00:10 [ 451MiB/s] [           <=>                                              ]\r"
     ],
     [
-      0.99996,
-      "7.57GiB 0:00:31 [ 245MiB/s] [                                          <=>                          ]\r"
+      1.000027,
+      "4.88GiB 0:00:11 [ 459MiB/s] [            <=>                                             ]\r"
     ],
     [
-      1.000063,
-      "7.81GiB 0:00:32 [ 248MiB/s] [                                           <=>                         ]\r"
+      1.000061,
+      "5.32GiB 0:00:12 [ 451MiB/s] [             <=>                                            ]\r"
     ],
     [
-      0.999947,
-      "8.06GiB 0:00:33 [ 251MiB/s] [                                            <=>                        ]\r"
+      0.999986,
+      "5.76GiB 0:00:13 [ 449MiB/s] [              <=>                                           ]\r"
     ],
     [
-      1.000249,
-      " 8.3GiB 0:00:34 [ 246MiB/s] [                                              <=>                      ]\r"
+      0.999944,
+      "6.19GiB 0:00:14 [ 441MiB/s] [               <=>                                          ]\r"
     ],
     [
-      1.000158,
-      "8.55GiB 0:00:35 [ 253MiB/s] [                                               <=>                     ]\r"
+      0.999991,
+      "6.64GiB 0:00:15 [ 453MiB/s] [                 <=>                                        ]\r"
     ],
     [
-      0.999634,
-      "8.79GiB 0:00:36 [ 254MiB/s] [                                                <=>                    ]\r"
+      1.000027,
+      "7.07GiB 0:00:16 [ 442MiB/s] [                  <=>                                       ]\r"
     ],
     [
-      1.000289,
-      "9.04GiB 0:00:37 [ 251MiB/s] [                                                  <=>                  ]\r"
+      1.00001,
+      " 7.5GiB 0:00:17 [ 442MiB/s] [                   <=>                                      ]\r"
     ],
     [
-      0.99977,
-      "9.29GiB 0:00:38 [ 251MiB/s] [                                                   <=>                 ]\r"
+      1.000009,
+      "7.93GiB 0:00:18 [ 440MiB/s] [                    <=>                                     ]\r"
     ],
     [
-      1.000013,
-      "9.53GiB 0:00:39 [ 248MiB/s] [                                                     <=>               ]\r"
+      0.999988,
+      "8.37GiB 0:00:19 [ 449MiB/s] [                     <=>                                    ]\r"
     ],
     [
-      1.000045,
-      "9.77GiB 0:00:40 [ 247MiB/s] [                                                      <=>              ]\r"
+      1.000024,
+      "8.81GiB 0:00:20 [ 445MiB/s] [                      <=>                                   ]\r"
     ],
     [
-      0.999859,
-      "  10GiB 0:00:41 [ 248MiB/s] [                                                       <=>             ]\r"
+      0.99992,
+      "9.26GiB 0:00:21 [ 461MiB/s] [                       <=>                                  ]\r"
     ],
     [
-      0.760304,
-      "^C\r\n"
+      1.000016,
+      "9.71GiB 0:00:22 [ 461MiB/s] [                         <=>                                ]\r"
     ],
     [
-      0.000409,
-      "\r\n"
+      0.129892,
+      "9.77GiB 0:00:22 [ 451MiB/s] [                          <=>                               ]\r\r\n"
     ],
     [
-      0.000128,
+      0.000604,
       "miguel@megaloman:~/git/haskell/base64$ "
     ]
-  ],
-  "version": 1,
-  "duration": 46.348438
+  ]
 }
 \ No newline at end of file
diff --git a/080_blog/00040_Haskell/00065_Base64-Encoder/index.md b/080_blog/00040_Haskell/00065_Base64-Encoder/index.md
index 3fd87ee..cabf19e 100644
--- a/080_blog/00040_Haskell/00065_Base64-Encoder/index.md
+++ b/080_blog/00040_Haskell/00065_Base64-Encoder/index.md
@@ -1,15 +1,12 @@
 Miguel's Base64 Encoder 
 =======================
     February 19, 2018
-
 Initially coded on a cold winter afternoon to fully understand **base64 encoding** and play with 
-**Haskell**, which is always an indisputable pleasure.
-
-Coded in _big anger_, due to my friend Nick's fairy tales about saving his encrypted binary
-data in plain _ASCII_ configuration files, featuring strange letters and non-printable characters. :smile:
+**Haskell**, which is always an indisputable pleasure. Hacked together in _big anger_, due to my 
+friend Nick's fairy tales about saving his encrypted binary data in plain _ASCII_ 
+configuration files,... featuring strange letters and non-printable characters. :smile: 
 
-_EDIT_: After optimizing my naive implementation, the encoder now reaches speeds 
-of around **240MB/s** on a single core of my _i7-4790K_.
+After optimizing quite a bit, the encoder performs around **460MB/s** on a single core of my _i7-4790K_.
 
 <asciinema-player loop="1" preload="true" theme="solarized-dark" autoplay="true" src="base64.cast"></asciinema-player>
 
diff --git a/080_blog/00040_Haskell/00130_Calculator-on-Parsec-and-GTK/calc.png b/080_blog/00040_Haskell/00130_Calculator-on-Parsec-and-GTK/calc.png
new file mode 100644
index 0000000..19b47f0
--- /dev/null
+++ b/080_blog/00040_Haskell/00130_Calculator-on-Parsec-and-GTK/calc.png
diff --git a/080_blog/00040_Haskell/00130_Calculator-on-Parsec-and-GTK/index.md b/080_blog/00040_Haskell/00130_Calculator-on-Parsec-and-GTK/index.md
index 381b017..cc0aa28 100644
--- a/080_blog/00040_Haskell/00130_Calculator-on-Parsec-and-GTK/index.md
+++ b/080_blog/00040_Haskell/00130_Calculator-on-Parsec-and-GTK/index.md
@@ -1,23 +1,21 @@
+    May 2018
 Simple Calculator on Parsec and GTK
 ===================================
 
-    May 3, 2018
-
-![](calc.png){.img-fluid .border}
+![](scale_calc.png){ width=220px }
 
 Today I implemented this simple stupid calulator as a side effect of playing 
 around with parsec [1] and haskells gtk3 [2] bindings, as well as glade [3] -
 an interactive user interface designer.
 
-Source Files
+Source Files 
 ------------
 
-* [calc.hs](calc.hs)
-* [calc.glade](calc.glade)
+* <https://gitweb.softwarefools.com/?p=miguel/haskell.git;a=tree;f=calcGTK>
 
 Ref
 ---
 
-    [1] https://hackage.haskell.org/package/parsec
-    [2] https://hackage.haskell.org/package/gtk3
-    [3] https://glade.gnome.org/
+* [1] <https://hackage.haskell.org/package/parsec>
+* [2] <https://hackage.haskell.org/package/gtk3>
+* [3] <https://glade.gnome.org/>
diff --git a/080_blog/00040_Haskell/00140_Minimalistic-SVG-Generator/index.md b/080_blog/00040_Haskell/00140_Minimalistic-SVG-Generator/index.md
index 8211ba2..2c21d91 100644
--- a/080_blog/00040_Haskell/00140_Minimalistic-SVG-Generator/index.md
+++ b/080_blog/00040_Haskell/00140_Minimalistic-SVG-Generator/index.md
@@ -1,7 +1,7 @@
+    May 2018
 A Minimalistic SVG Generator
 ============================
 
-    May 11, 2018
 
 
 A minimalistic SVG generator for my humble requirements.
@@ -10,22 +10,18 @@ They might grow someday however...
 The SVG in the following screenshot was generated from the following code
 to demonstrate a simple use case.
 
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.haskell .numberLines}
-svgExample1      = svgAddList (svgEmpty (svgShGray 200) 300 200) $
-                    [ svgRedLine (0,0) (200,200)
-                     ,svgRedLine (300,0) (100,200)
-                     ,svgBluePoint (33,133)
-                     ,svgBluePoint (33,22)
-                     ,svgBluePoint (66,25)
-                     ,svgFilledTriangle svgBlack svgWhite (20,20) (100,100) (10,90)
-                     ,svgFilledCircle svgWhite svgGreen (150,120) 30
-                    ]++
-                    map (svgBluePoint . (,) 250) [50,60..150]
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+The source code below was auto-fetched from: 
+<https://gitweb.softwarefools.com/?p=miguel/haskell.git;a=blob;f=simpleSVG/TestSvg.hs>
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.haskell .numberLines}
+{BEGIN:EMBED}
+https://gitweb.softwarefools.com/?p=miguel/haskell.git;a=blob_plain;f=simpleSVG/TestSvg.hs
+{END:EMBED}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 ![](svg.png){.img-fluid .border}
 
 Source Files
 ------------
 
-* [SimpleSvg.hs](SimpleSvg.hs)
+* <https://gitweb.softwarefools.com/?p=miguel/haskell.git;a=tree;f=simpleSVG>
diff --git a/080_blog/00040_Haskell/00150_Applicative-vs-Monadic-Parsing/index.md b/080_blog/00040_Haskell/00150_Applicative-vs-Monadic-Parsing/index.md
index f9b3a4e..6e4418b 100644
--- a/080_blog/00040_Haskell/00150_Applicative-vs-Monadic-Parsing/index.md
+++ b/080_blog/00040_Haskell/00150_Applicative-vs-Monadic-Parsing/index.md
@@ -1 +1,175 @@
-Coming sooner... or later.
+    March 2019
+# Applicative vs. Monadic Parsing
+
+Some _real world parsers_ as _Parsec_, let us choose between applicative and
+monadic parsing.  The applicative style should be sufficient to parse 
+_context-free_ languages and is easier to reason about, but it is not capable
+of parsing _context-sensitive_ grammars.
+
+## Functor, Applicative, Alternative, Monad
+
+Before we discuss Applicative and Monadic Parsing, it is important to 
+understand what Functors, Applicative Functors, Alternatives and Monads 
+have to offer. When in doubt simply look up the type-class definition.
+
+Two well-known data types which are instances of all of the above are
+**Maybe** and **List**. Try it yourself in _GHCi_.
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.haskell .numberLines}
+-- Maybe as Functor
+fmap (+20) (Just 10)
+fmap (+20) (Nothing)
+
+-- List as Functor
+fmap (+20) [1..10]
+
+-- Maybe as Applicative Functor
+Nothing <*> Just (22)
+Just (+1) <*> Nothing
+Just (+15) <*> Just (22)
+
+-- List as Applicative Functor
+[]<*>[1..5]
+[(+1),(+15)]<*>[]
+[(+1),(+15)]<*>[1..5]
+
+-- Maybe as Alternative 
+Nothing <|> Just 5
+Just 5 <|> Nothing
+Just 22 <|> Just 10
+
+-- List as Alternative
+[1..5] <|> [5..10]
+
+-- Maybe as Monad
+Just 5 >>= Just . (+10)
+Just 5 >>= return . (+10)
+Just 10 >>= return . (+5) >>=return . (+10)
+Nothing >>= return . (+5) >>=return . (+10)
+Just 10 >>= \x-> return  (x*2) >>=return . (+x`div`2)
+
+-- List as Monad
+[1..10] >>= (:[]) . (*5)
+[1..5] >>= return . (^2)
+[[1..5],[5..10],[],[12]]>>=id
+[[1..5],[5..10],[],[12]]>>= map (*4)
+[1..5] >>= \a -> [100..100+a] >>= \b -> return (a+b)
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+## Simple Parser
+
+Our simple toy Parser simply encapsulates a parsing function that returns
+_Nothing_ if parsing fails. Otherwise a _pair_ consisting of the parsed and 
+unparsed input inside its respective elements.
+
+Notice that we made our Parser instance of all the type-classes already.
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.haskell .numberLines}
+data Parser a b = Parser (a->Maybe (b,a))
+
+instance Functor (Parser a) where
+  fmap f p = Parser g
+    where g inp = case parse p inp of Just (x,y) -> Just (f x,y)
+                                      _          -> Nothing
+
+instance Applicative (Parser a) where 
+  pure v = Parser (\inp -> Just (v,inp))
+  pg <*> px = Parser g
+    where g inp = case parse pg inp of Just (f,b) -> parse (fmap f px) b
+                                       _          -> Nothing
+
+instance Alternative (Parser a) where
+  empty = Parser (\_ -> Nothing)
+  p1 <|> p2 = Parser g
+    where g inp = case parse p1 inp of Nothing -> parse p2 inp
+                                       x       -> x
+
+instance Monad (Parser a) where
+  return = pure
+  p >>= f = Parser g
+    where g inp = case parse p inp of Just (a,b) -> parse (f a) b
+                                      _          -> Nothing
+
+parse :: Parser a b -> a -> Maybe (b,a)
+parse (Parser f) inp = f inp
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+## Primitives
+
+We also need at least a minimal set of primitives to parse something.
+Note that the primitives can give you the effects of Applicative or 
+Alternative even if there's no instance (as dmwit pointed out on #haskell).
+E.g. the _word_ primitive below, could not be composed, by combining the
+_char_ parsers in an applicative style only.
+
+The _num_ parser makes use of the _some_ combinator which requires our
+Parser to be an instance of _Alternative_ as well. _Applicative_ 
+alone is of limited use in practice since without it, we also lack 
+the <|> combinator.
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.haskell .numberLines}
+word :: String -> Parser String String
+word w = Parser g where l     = length w
+                        g inp = if take l inp == w then Just (w,drop l inp) 
+                                                   else Nothing
+
+satisfy :: (Char -> Bool) -> Parser String Char
+satisfy f = Parser g  where g (x:xs) | f x = Just (x,xs)
+                            g _            = Nothing
+
+space :: Parser String Char
+space = satisfy (==' ')
+    
+char :: Char -> Parser String Char
+char c = satisfy (==c)
+
+notChar :: Char -> Parser String Char
+notChar c = satisfy (/=c)
+
+num :: Parser String Int
+num = read <$> some (satisfy isDigit) 
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+## Applicative / Alternative parsing
+
+Let's parse something! 
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.haskell .numberLines}
+-- well-formed parentheses are the canonical example of a context-free grammar
+parsePar = concat <$> some parseP where parseP = word "()" <|> (char '(' *> parsePar <* char ')')
+parse parsePar "((()())()())"
+
+-- a simple context-free language with matching pairs of a's and b's, which is not regular
+parseAB = (\a x b -> a:x++"b") <$> char 'a' <*> parseAB <*> char 'b' <|> word "ab"
+parse parseAB "aaaaabbbbb"
+
+-- parse basic mathematical operations and calulate the results.
+parseOp op sig = (pure (op) <* many space <*> num <* many space <* char sig <* many space <*> num )
+parse (parseOp (+) '+' <|> parseOp (-) '-' <|> parseOp (*) '*' <|> parseOp (div) '/') " 111  * 747 "
+parse (parseOp (+) '+' <|> parseOp (-) '-' <|> parseOp (*) '*' <|> parseOp (div) '/') "111+747"
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+## Monadic parsing of context-sensitive grammars
+
+The canonical non-context-free language can not be caputred by applicative parsing anymore: $$\{a^n b^n c^n : n \geqslant 1\}$$
+
+The following monadic parser will work here:
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.haskell .numberLines}
+parseABC = length <$> (many $ char 'a') >>= \la -> 
+           length <$> (many $ char 'b') >>= \lb ->
+           length <$> (many $ char 'c') >>= \lc ->
+           if la==lb&&lb==lc then pure ("ABCok") else empty
+
+parse parseABC "aaaaabbbbbccccc"
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+## Summary
+
+As usual, use the simplest tool that will suffice :smile:
+
+## Ref / Further Reading
+
+* <http://dev.stephendiehl.com/fun/002_parsers.html>
+* <https://eli.thegreenplace.net/2017/deciphering-haskells-applicative-and-monadic-parsers/>
+* <https://byorgey.wordpress.com/2012/01/05/parsing-context-sensitive-languages-with-applicative/>
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index.md b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index.md
new file mode 100644
index 0000000..5060081
--- /dev/null
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index.md
@@ -0,0 +1,20 @@
+# Pandoc Color Themes
+
+Color-themes for syntax-highlighting obtained from Pandoc.
+E.g. To get the pygments theme you need to have some source-code embedded 
+in your markdown and run:
+
+    stack exec pandoc -- -s file.md --highlight-style pygments
+
+Then you can extract the css from the resulting standalone html file.
+Here you can find my extracted html files for reference:
+
+* [breezedark](index_breezedark.html)
+* [espresso](index_espresso.html)
+* [haddock](index_haddock.html)
+* [kate](index_kate.html)
+* [monochrome](index_monochrome.html)
+* [pygments](index_pygments.html)
+* [tango](index_tango.html)
+* [zenburn](index_zenburn.html)
+
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_breezedark.html b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_breezedark.html
new file mode 100644
index 0000000..6b89b97
--- /dev/null
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_breezedark.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>index</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <style type="text/css">
+a.sourceLine { display: inline-block; line-height: 1.25; }
+a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
+a.sourceLine:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode { white-space: pre; position: relative; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+code.sourceCode { white-space: pre-wrap; }
+a.sourceLine { text-indent: -1em; padding-left: 1em; }
+}
+pre.numberSource a.sourceLine
+  { position: relative; left: -4em; }
+pre.numberSource a.sourceLine::before
+  { content: attr(title);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; pointer-events: all; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+    background-color: #232629;
+    color: #7a7c7d;
+  }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #7a7c7d;  padding-left: 4px; }
+div.sourceCode
+  { color: #cfcfc2; background-color: #232629; }
+@media screen {
+a.sourceLine::before { text-decoration: underline; }
+}
+code span. { color: #cfcfc2; } /* Normal */
+code span.al { color: #95da4c; } /* Alert */
+code span.an { color: #3f8058; } /* Annotation */
+code span.at { color: #2980b9; } /* Attribute */
+code span.bn { color: #f67400; } /* BaseN */
+code span.bu { color: #7f8c8d; } /* BuiltIn */
+code span.cf { color: #fdbc4b; } /* ControlFlow */
+code span.ch { color: #3daee9; } /* Char */
+code span.cn { color: #27aeae; } /* Constant */
+code span.co { color: #7a7c7d; } /* Comment */
+code span.cv { color: #7f8c8d; } /* CommentVar */
+code span.do { color: #a43340; } /* Documentation */
+code span.dt { color: #2980b9; } /* DataType */
+code span.dv { color: #f67400; } /* DecVal */
+code span.er { color: #da4453; } /* Error */
+code span.ex { color: #0099ff; } /* Extension */
+code span.fl { color: #f67400; } /* Float */
+code span.fu { color: #8e44ad; } /* Function */
+code span.im { color: #27ae60; } /* Import */
+code span.in { color: #c45b00; } /* Information */
+code span.kw { color: #cfcfc2; } /* Keyword */
+code span.op { color: #cfcfc2; } /* Operator */
+code span.ot { color: #27ae60; } /* Other */
+code span.pp { color: #27ae60; } /* Preprocessor */
+code span.re { color: #2980b9; } /* RegionMarker */
+code span.sc { color: #3daee9; } /* SpecialChar */
+code span.ss { color: #da4453; } /* SpecialString */
+code span.st { color: #f44f4f; } /* String */
+code span.va { color: #27aeae; } /* Variable */
+code span.vs { color: #da4453; } /* VerbatimString */
+code span.wa { color: #da4453; } /* Warning */
+  </style>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<div class="sourceCode" id="cb1"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">import</span> <span class="dt">Data.Array.Base</span>(unsafeAt)</a>
+<a class="sourceLine" id="cb1-2" title="2"><span class="kw">import</span> <span class="dt">Data.Bits</span>(shiftL,shiftR,(.&amp;.))</a>
+<a class="sourceLine" id="cb1-3" title="3"><span class="kw">import</span> <span class="dt">Foreign.Ptr</span> (plusPtr)</a>
+<a class="sourceLine" id="cb1-4" title="4"><span class="kw">import</span> <span class="dt">Foreign.Storable</span> (peek, poke)</a>
+<a class="sourceLine" id="cb1-5" title="5"><span class="kw">import</span> <span class="dt">Foreign.ForeignPtr</span> (withForeignPtr)</a>
+<a class="sourceLine" id="cb1-6" title="6"><span class="kw">import</span> <span class="dt">System.IO.Unsafe</span> (unsafePerformIO)</a>
+<a class="sourceLine" id="cb1-7" title="7"></a>
+<a class="sourceLine" id="cb1-8" title="8"><span class="co">-- |Perform base64 encoding of data from standard input</span></a>
+<a class="sourceLine" id="cb1-9" title="9"><span class="ot">main ::</span> <span class="dt">IO</span>()</a>
+<a class="sourceLine" id="cb1-10" title="10">main <span class="fu">=</span> BL.getContents<span class="fu">&gt;&gt;=</span>BL.putStr<span class="fu">.</span>BL.fromChunks<span class="fu">.map</span> encode64<span class="fu">.</span>reChunk<span class="fu">.</span>BL.toChunks</a>
+<a class="sourceLine" id="cb1-11" title="11"></a>
+<a class="sourceLine" id="cb1-12" title="12"><span class="co">-- |Base64 index table </span></a>
+<a class="sourceLine" id="cb1-13" title="13"><span class="ot">tab64 ::</span> <span class="dt">UArray</span> <span class="dt">Word32</span> <span class="dt">Word8</span></a>
+<a class="sourceLine" id="cb1-14" title="14">tab64 <span class="fu">=</span> array (<span class="dv">0</span>,<span class="dv">63</span>) <span class="fu">$</span> <span class="fu">zip</span> [<span class="dv">0</span><span class="fu">..</span>] <span class="fu">$</span> <span class="fu">map</span> (BI.c2w) <span class="fu">$</span> </a>
+<a class="sourceLine" id="cb1-15" title="15">        [<span class="ch">&#39;A&#39;</span><span class="fu">..</span><span class="ch">&#39;Z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;a&#39;</span><span class="fu">..</span><span class="ch">&#39;z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;0&#39;</span><span class="fu">..</span><span class="ch">&#39;9&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;+&#39;</span>,<span class="ch">&#39;/&#39;</span>]</a>
+<a class="sourceLine" id="cb1-16" title="16"></a>
+<a class="sourceLine" id="cb1-17" title="17"><span class="co">-- |Encodes 3 octets into 4 sextets</span></a>
+<a class="sourceLine" id="cb1-18" title="18"><span class="ot">enc64 ::</span> (<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)<span class="ot">-&gt;</span>(<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)</a>
+<a class="sourceLine" id="cb1-19" title="19">enc64 (b1,b2,b3) <span class="fu">=</span> (t <span class="dv">3</span>,t <span class="dv">2</span>,t <span class="dv">1</span>,t <span class="dv">0</span>)</a>
+<a class="sourceLine" id="cb1-20" title="20">    <span class="kw">where</span> t x   <span class="fu">=</span> tab64 <span class="ot">`unsafeAt`</span> (n <span class="ot">`shiftR`</span> (x<span class="fu">*</span><span class="dv">6</span>) <span class="fu">.&amp;.</span> <span class="dv">63</span>)</a>
+<a class="sourceLine" id="cb1-21" title="21">          f b n <span class="fu">=</span> <span class="fu">fromIntegral</span> b <span class="ot">`shiftL`</span> n</a>
+<a class="sourceLine" id="cb1-22" title="22">          n     <span class="fu">=</span> f b1 <span class="dv">16</span> <span class="fu">+</span> f b2 <span class="dv">8</span> <span class="fu">+</span> f b3 <span class="dv">0</span></a>
+<a class="sourceLine" id="cb1-23" title="23"></a>
+<a class="sourceLine" id="cb1-24" title="24"><span class="co">-- |Transforms list of ByteStrings to a new list of ByteStrings with </span></a>
+<a class="sourceLine" id="cb1-25" title="25"><span class="co">-- lengths guaranteed to be multiples of 3 (excepting the last one)</span></a>
+<a class="sourceLine" id="cb1-26" title="26"><span class="co">-- Assumes that all input ByteStrings (excepting the last one) have </span></a>
+<a class="sourceLine" id="cb1-27" title="27"><span class="co">-- at least a length of 3.</span></a>
+<a class="sourceLine" id="cb1-28" title="28"><span class="ot">reChunk ::</span> [<span class="dt">BS.ByteString</span>] <span class="ot">-&gt;</span> [<span class="dt">BS.ByteString</span>]</a>
+<a class="sourceLine" id="cb1-29" title="29">reChunk (y<span class="fu">:</span>[]) <span class="fu">=</span> [y]</a>
+<a class="sourceLine" id="cb1-30" title="30">reChunk (y<span class="fu">:</span>z<span class="fu">:</span>zs) <span class="fu">=</span> <span class="kw">let</span> c <span class="fu">=</span> BS.length y <span class="ot">`mod`</span> <span class="dv">3</span> </a>
+<a class="sourceLine" id="cb1-31" title="31">                    <span class="kw">in</span> BS.append y (BS.take <span class="dv">3</span> z)<span class="fu">:</span>(reChunk <span class="fu">$</span> (BS.drop <span class="dv">3</span> z)<span class="fu">:</span>zs)</a></code></pre></div>
+</body>
+</html>
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_espresso.html b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_espresso.html
new file mode 100644
index 0000000..6b0d627
--- /dev/null
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_espresso.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>index</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <style type="text/css">
+a.sourceLine { display: inline-block; line-height: 1.25; }
+a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
+a.sourceLine:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode { white-space: pre; position: relative; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+code.sourceCode { white-space: pre-wrap; }
+a.sourceLine { text-indent: -1em; padding-left: 1em; }
+}
+pre.numberSource a.sourceLine
+  { position: relative; left: -4em; }
+pre.numberSource a.sourceLine::before
+  { content: attr(title);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; pointer-events: all; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+    background-color: #2a211c;
+    color: #bdae9d;
+  }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #bdae9d;  padding-left: 4px; }
+div.sourceCode
+  { color: #bdae9d; background-color: #2a211c; }
+@media screen {
+a.sourceLine::before { text-decoration: underline; }
+}
+code span.al { color: #ffff00; } /* Alert */
+code span.an { color: #0066ff; font-weight: bold; font-style: italic; } /* Annotation */
+code span.at { } /* Attribute */
+code span.bn { color: #44aa43; } /* BaseN */
+code span.bu { } /* BuiltIn */
+code span.cf { color: #43a8ed; font-weight: bold; } /* ControlFlow */
+code span.ch { color: #049b0a; } /* Char */
+code span.cn { } /* Constant */
+code span.co { color: #0066ff; font-weight: bold; font-style: italic; } /* Comment */
+code span.do { color: #0066ff; font-style: italic; } /* Documentation */
+code span.dt { text-decoration: underline; } /* DataType */
+code span.dv { color: #44aa43; } /* DecVal */
+code span.er { color: #ffff00; font-weight: bold; } /* Error */
+code span.ex { } /* Extension */
+code span.fl { color: #44aa43; } /* Float */
+code span.fu { color: #ff9358; font-weight: bold; } /* Function */
+code span.im { } /* Import */
+code span.in { color: #0066ff; font-weight: bold; font-style: italic; } /* Information */
+code span.kw { color: #43a8ed; font-weight: bold; } /* Keyword */
+code span.op { } /* Operator */
+code span.pp { font-weight: bold; } /* Preprocessor */
+code span.sc { color: #049b0a; } /* SpecialChar */
+code span.ss { color: #049b0a; } /* SpecialString */
+code span.st { color: #049b0a; } /* String */
+code span.va { } /* Variable */
+code span.vs { color: #049b0a; } /* VerbatimString */
+code span.wa { color: #ffff00; font-weight: bold; } /* Warning */
+  </style>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<div class="sourceCode" id="cb1"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">import</span> <span class="dt">Data.Array.Base</span>(unsafeAt)</a>
+<a class="sourceLine" id="cb1-2" title="2"><span class="kw">import</span> <span class="dt">Data.Bits</span>(shiftL,shiftR,(.&amp;.))</a>
+<a class="sourceLine" id="cb1-3" title="3"><span class="kw">import</span> <span class="dt">Foreign.Ptr</span> (plusPtr)</a>
+<a class="sourceLine" id="cb1-4" title="4"><span class="kw">import</span> <span class="dt">Foreign.Storable</span> (peek, poke)</a>
+<a class="sourceLine" id="cb1-5" title="5"><span class="kw">import</span> <span class="dt">Foreign.ForeignPtr</span> (withForeignPtr)</a>
+<a class="sourceLine" id="cb1-6" title="6"><span class="kw">import</span> <span class="dt">System.IO.Unsafe</span> (unsafePerformIO)</a>
+<a class="sourceLine" id="cb1-7" title="7"></a>
+<a class="sourceLine" id="cb1-8" title="8"><span class="co">-- |Perform base64 encoding of data from standard input</span></a>
+<a class="sourceLine" id="cb1-9" title="9"><span class="ot">main ::</span> <span class="dt">IO</span>()</a>
+<a class="sourceLine" id="cb1-10" title="10">main <span class="fu">=</span> BL.getContents<span class="fu">&gt;&gt;=</span>BL.putStr<span class="fu">.</span>BL.fromChunks<span class="fu">.map</span> encode64<span class="fu">.</span>reChunk<span class="fu">.</span>BL.toChunks</a>
+<a class="sourceLine" id="cb1-11" title="11"></a>
+<a class="sourceLine" id="cb1-12" title="12"><span class="co">-- |Base64 index table </span></a>
+<a class="sourceLine" id="cb1-13" title="13"><span class="ot">tab64 ::</span> <span class="dt">UArray</span> <span class="dt">Word32</span> <span class="dt">Word8</span></a>
+<a class="sourceLine" id="cb1-14" title="14">tab64 <span class="fu">=</span> array (<span class="dv">0</span>,<span class="dv">63</span>) <span class="fu">$</span> <span class="fu">zip</span> [<span class="dv">0</span><span class="fu">..</span>] <span class="fu">$</span> <span class="fu">map</span> (BI.c2w) <span class="fu">$</span> </a>
+<a class="sourceLine" id="cb1-15" title="15">        [<span class="ch">&#39;A&#39;</span><span class="fu">..</span><span class="ch">&#39;Z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;a&#39;</span><span class="fu">..</span><span class="ch">&#39;z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;0&#39;</span><span class="fu">..</span><span class="ch">&#39;9&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;+&#39;</span>,<span class="ch">&#39;/&#39;</span>]</a>
+<a class="sourceLine" id="cb1-16" title="16"></a>
+<a class="sourceLine" id="cb1-17" title="17"><span class="co">-- |Encodes 3 octets into 4 sextets</span></a>
+<a class="sourceLine" id="cb1-18" title="18"><span class="ot">enc64 ::</span> (<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)<span class="ot">-&gt;</span>(<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)</a>
+<a class="sourceLine" id="cb1-19" title="19">enc64 (b1,b2,b3) <span class="fu">=</span> (t <span class="dv">3</span>,t <span class="dv">2</span>,t <span class="dv">1</span>,t <span class="dv">0</span>)</a>
+<a class="sourceLine" id="cb1-20" title="20">    <span class="kw">where</span> t x   <span class="fu">=</span> tab64 <span class="ot">`unsafeAt`</span> (n <span class="ot">`shiftR`</span> (x<span class="fu">*</span><span class="dv">6</span>) <span class="fu">.&amp;.</span> <span class="dv">63</span>)</a>
+<a class="sourceLine" id="cb1-21" title="21">          f b n <span class="fu">=</span> <span class="fu">fromIntegral</span> b <span class="ot">`shiftL`</span> n</a>
+<a class="sourceLine" id="cb1-22" title="22">          n     <span class="fu">=</span> f b1 <span class="dv">16</span> <span class="fu">+</span> f b2 <span class="dv">8</span> <span class="fu">+</span> f b3 <span class="dv">0</span></a>
+<a class="sourceLine" id="cb1-23" title="23"></a>
+<a class="sourceLine" id="cb1-24" title="24"><span class="co">-- |Transforms list of ByteStrings to a new list of ByteStrings with </span></a>
+<a class="sourceLine" id="cb1-25" title="25"><span class="co">-- lengths guaranteed to be multiples of 3 (excepting the last one)</span></a>
+<a class="sourceLine" id="cb1-26" title="26"><span class="co">-- Assumes that all input ByteStrings (excepting the last one) have </span></a>
+<a class="sourceLine" id="cb1-27" title="27"><span class="co">-- at least a length of 3.</span></a>
+<a class="sourceLine" id="cb1-28" title="28"><span class="ot">reChunk ::</span> [<span class="dt">BS.ByteString</span>] <span class="ot">-&gt;</span> [<span class="dt">BS.ByteString</span>]</a>
+<a class="sourceLine" id="cb1-29" title="29">reChunk (y<span class="fu">:</span>[]) <span class="fu">=</span> [y]</a>
+<a class="sourceLine" id="cb1-30" title="30">reChunk (y<span class="fu">:</span>z<span class="fu">:</span>zs) <span class="fu">=</span> <span class="kw">let</span> c <span class="fu">=</span> BS.length y <span class="ot">`mod`</span> <span class="dv">3</span> </a>
+<a class="sourceLine" id="cb1-31" title="31">                    <span class="kw">in</span> BS.append y (BS.take <span class="dv">3</span> z)<span class="fu">:</span>(reChunk <span class="fu">$</span> (BS.drop <span class="dv">3</span> z)<span class="fu">:</span>zs)</a></code></pre></div>
+</body>
+</html>
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_haddock.html b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_haddock.html
new file mode 100644
index 0000000..5c5af29
--- /dev/null
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_haddock.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>index</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <style type="text/css">
+a.sourceLine { display: inline-block; line-height: 1.25; }
+a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
+a.sourceLine:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode { white-space: pre; position: relative; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+code.sourceCode { white-space: pre-wrap; }
+a.sourceLine { text-indent: -1em; padding-left: 1em; }
+}
+pre.numberSource a.sourceLine
+  { position: relative; left: -4em; }
+pre.numberSource a.sourceLine::before
+  { content: attr(title);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; pointer-events: all; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+    color: #aaaaaa;
+  }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
+div.sourceCode
+  {  }
+@media screen {
+a.sourceLine::before { text-decoration: underline; }
+}
+code span.al { color: #ff0000; } /* Alert */
+code span.an { color: #008000; } /* Annotation */
+code span.at { } /* Attribute */
+code span.bu { } /* BuiltIn */
+code span.cf { color: #0000ff; } /* ControlFlow */
+code span.ch { color: #008080; } /* Char */
+code span.cn { } /* Constant */
+code span.co { color: #008000; } /* Comment */
+code span.cv { color: #008000; } /* CommentVar */
+code span.do { color: #008000; } /* Documentation */
+code span.er { color: #ff0000; font-weight: bold; } /* Error */
+code span.ex { } /* Extension */
+code span.im { } /* Import */
+code span.in { color: #008000; } /* Information */
+code span.kw { color: #0000ff; } /* Keyword */
+code span.op { } /* Operator */
+code span.ot { color: #ff4000; } /* Other */
+code span.pp { color: #ff4000; } /* Preprocessor */
+code span.sc { color: #008080; } /* SpecialChar */
+code span.ss { color: #008080; } /* SpecialString */
+code span.st { color: #008080; } /* String */
+code span.va { } /* Variable */
+code span.vs { color: #008080; } /* VerbatimString */
+code span.wa { color: #008000; font-weight: bold; } /* Warning */
+  </style>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<div class="sourceCode" id="cb1"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">import</span> <span class="dt">Data.Array.Base</span>(unsafeAt)</a>
+<a class="sourceLine" id="cb1-2" title="2"><span class="kw">import</span> <span class="dt">Data.Bits</span>(shiftL,shiftR,(.&amp;.))</a>
+<a class="sourceLine" id="cb1-3" title="3"><span class="kw">import</span> <span class="dt">Foreign.Ptr</span> (plusPtr)</a>
+<a class="sourceLine" id="cb1-4" title="4"><span class="kw">import</span> <span class="dt">Foreign.Storable</span> (peek, poke)</a>
+<a class="sourceLine" id="cb1-5" title="5"><span class="kw">import</span> <span class="dt">Foreign.ForeignPtr</span> (withForeignPtr)</a>
+<a class="sourceLine" id="cb1-6" title="6"><span class="kw">import</span> <span class="dt">System.IO.Unsafe</span> (unsafePerformIO)</a>
+<a class="sourceLine" id="cb1-7" title="7"></a>
+<a class="sourceLine" id="cb1-8" title="8"><span class="co">-- |Perform base64 encoding of data from standard input</span></a>
+<a class="sourceLine" id="cb1-9" title="9"><span class="ot">main ::</span> <span class="dt">IO</span>()</a>
+<a class="sourceLine" id="cb1-10" title="10">main <span class="fu">=</span> BL.getContents<span class="fu">&gt;&gt;=</span>BL.putStr<span class="fu">.</span>BL.fromChunks<span class="fu">.map</span> encode64<span class="fu">.</span>reChunk<span class="fu">.</span>BL.toChunks</a>
+<a class="sourceLine" id="cb1-11" title="11"></a>
+<a class="sourceLine" id="cb1-12" title="12"><span class="co">-- |Base64 index table </span></a>
+<a class="sourceLine" id="cb1-13" title="13"><span class="ot">tab64 ::</span> <span class="dt">UArray</span> <span class="dt">Word32</span> <span class="dt">Word8</span></a>
+<a class="sourceLine" id="cb1-14" title="14">tab64 <span class="fu">=</span> array (<span class="dv">0</span>,<span class="dv">63</span>) <span class="fu">$</span> <span class="fu">zip</span> [<span class="dv">0</span><span class="fu">..</span>] <span class="fu">$</span> <span class="fu">map</span> (BI.c2w) <span class="fu">$</span> </a>
+<a class="sourceLine" id="cb1-15" title="15">        [<span class="ch">&#39;A&#39;</span><span class="fu">..</span><span class="ch">&#39;Z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;a&#39;</span><span class="fu">..</span><span class="ch">&#39;z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;0&#39;</span><span class="fu">..</span><span class="ch">&#39;9&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;+&#39;</span>,<span class="ch">&#39;/&#39;</span>]</a>
+<a class="sourceLine" id="cb1-16" title="16"></a>
+<a class="sourceLine" id="cb1-17" title="17"><span class="co">-- |Encodes 3 octets into 4 sextets</span></a>
+<a class="sourceLine" id="cb1-18" title="18"><span class="ot">enc64 ::</span> (<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)<span class="ot">-&gt;</span>(<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)</a>
+<a class="sourceLine" id="cb1-19" title="19">enc64 (b1,b2,b3) <span class="fu">=</span> (t <span class="dv">3</span>,t <span class="dv">2</span>,t <span class="dv">1</span>,t <span class="dv">0</span>)</a>
+<a class="sourceLine" id="cb1-20" title="20">    <span class="kw">where</span> t x   <span class="fu">=</span> tab64 <span class="ot">`unsafeAt`</span> (n <span class="ot">`shiftR`</span> (x<span class="fu">*</span><span class="dv">6</span>) <span class="fu">.&amp;.</span> <span class="dv">63</span>)</a>
+<a class="sourceLine" id="cb1-21" title="21">          f b n <span class="fu">=</span> <span class="fu">fromIntegral</span> b <span class="ot">`shiftL`</span> n</a>
+<a class="sourceLine" id="cb1-22" title="22">          n     <span class="fu">=</span> f b1 <span class="dv">16</span> <span class="fu">+</span> f b2 <span class="dv">8</span> <span class="fu">+</span> f b3 <span class="dv">0</span></a>
+<a class="sourceLine" id="cb1-23" title="23"></a>
+<a class="sourceLine" id="cb1-24" title="24"><span class="co">-- |Transforms list of ByteStrings to a new list of ByteStrings with </span></a>
+<a class="sourceLine" id="cb1-25" title="25"><span class="co">-- lengths guaranteed to be multiples of 3 (excepting the last one)</span></a>
+<a class="sourceLine" id="cb1-26" title="26"><span class="co">-- Assumes that all input ByteStrings (excepting the last one) have </span></a>
+<a class="sourceLine" id="cb1-27" title="27"><span class="co">-- at least a length of 3.</span></a>
+<a class="sourceLine" id="cb1-28" title="28"><span class="ot">reChunk ::</span> [<span class="dt">BS.ByteString</span>] <span class="ot">-&gt;</span> [<span class="dt">BS.ByteString</span>]</a>
+<a class="sourceLine" id="cb1-29" title="29">reChunk (y<span class="fu">:</span>[]) <span class="fu">=</span> [y]</a>
+<a class="sourceLine" id="cb1-30" title="30">reChunk (y<span class="fu">:</span>z<span class="fu">:</span>zs) <span class="fu">=</span> <span class="kw">let</span> c <span class="fu">=</span> BS.length y <span class="ot">`mod`</span> <span class="dv">3</span> </a>
+<a class="sourceLine" id="cb1-31" title="31">                    <span class="kw">in</span> BS.append y (BS.take <span class="dv">3</span> z)<span class="fu">:</span>(reChunk <span class="fu">$</span> (BS.drop <span class="dv">3</span> z)<span class="fu">:</span>zs)</a></code></pre></div>
+</body>
+</html>
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_kate.html b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_kate.html
new file mode 100644
index 0000000..03aa0c6
--- /dev/null
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_kate.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>index</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <style type="text/css">
+a.sourceLine { display: inline-block; line-height: 1.25; }
+a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
+a.sourceLine:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode { white-space: pre; position: relative; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+code.sourceCode { white-space: pre-wrap; }
+a.sourceLine { text-indent: -1em; padding-left: 1em; }
+}
+pre.numberSource a.sourceLine
+  { position: relative; left: -4em; }
+pre.numberSource a.sourceLine::before
+  { content: attr(title);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; pointer-events: all; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+    background-color: #ffffff;
+    color: #a0a0a0;
+  }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #a0a0a0;  padding-left: 4px; }
+div.sourceCode
+  { color: #1f1c1b; background-color: #ffffff; }
+@media screen {
+a.sourceLine::before { text-decoration: underline; }
+}
+code span. { color: #1f1c1b; } /* Normal */
+code span.al { color: #bf0303; background-color: #f7e6e6; font-weight: bold; } /* Alert */
+code span.an { color: #ca60ca; } /* Annotation */
+code span.at { color: #0057ae; } /* Attribute */
+code span.bn { color: #b08000; } /* BaseN */
+code span.bu { color: #644a9b; font-weight: bold; } /* BuiltIn */
+code span.cf { color: #1f1c1b; font-weight: bold; } /* ControlFlow */
+code span.ch { color: #924c9d; } /* Char */
+code span.cn { color: #aa5500; } /* Constant */
+code span.co { color: #898887; } /* Comment */
+code span.cv { color: #0095ff; } /* CommentVar */
+code span.do { color: #607880; } /* Documentation */
+code span.dt { color: #0057ae; } /* DataType */
+code span.dv { color: #b08000; } /* DecVal */
+code span.er { color: #bf0303; text-decoration: underline; } /* Error */
+code span.ex { color: #0095ff; font-weight: bold; } /* Extension */
+code span.fl { color: #b08000; } /* Float */
+code span.fu { color: #644a9b; } /* Function */
+code span.im { color: #ff5500; } /* Import */
+code span.in { color: #b08000; } /* Information */
+code span.kw { color: #1f1c1b; font-weight: bold; } /* Keyword */
+code span.op { color: #1f1c1b; } /* Operator */
+code span.ot { color: #006e28; } /* Other */
+code span.pp { color: #006e28; } /* Preprocessor */
+code span.re { color: #0057ae; background-color: #e0e9f8; } /* RegionMarker */
+code span.sc { color: #3daee9; } /* SpecialChar */
+code span.ss { color: #ff5500; } /* SpecialString */
+code span.st { color: #bf0303; } /* String */
+code span.va { color: #0057ae; } /* Variable */
+code span.vs { color: #bf0303; } /* VerbatimString */
+code span.wa { color: #bf0303; } /* Warning */
+  </style>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<div class="sourceCode" id="cb1"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">import</span> <span class="dt">Data.Array.Base</span>(unsafeAt)</a>
+<a class="sourceLine" id="cb1-2" title="2"><span class="kw">import</span> <span class="dt">Data.Bits</span>(shiftL,shiftR,(.&amp;.))</a>
+<a class="sourceLine" id="cb1-3" title="3"><span class="kw">import</span> <span class="dt">Foreign.Ptr</span> (plusPtr)</a>
+<a class="sourceLine" id="cb1-4" title="4"><span class="kw">import</span> <span class="dt">Foreign.Storable</span> (peek, poke)</a>
+<a class="sourceLine" id="cb1-5" title="5"><span class="kw">import</span> <span class="dt">Foreign.ForeignPtr</span> (withForeignPtr)</a>
+<a class="sourceLine" id="cb1-6" title="6"><span class="kw">import</span> <span class="dt">System.IO.Unsafe</span> (unsafePerformIO)</a>
+<a class="sourceLine" id="cb1-7" title="7"></a>
+<a class="sourceLine" id="cb1-8" title="8"><span class="co">-- |Perform base64 encoding of data from standard input</span></a>
+<a class="sourceLine" id="cb1-9" title="9"><span class="ot">main ::</span> <span class="dt">IO</span>()</a>
+<a class="sourceLine" id="cb1-10" title="10">main <span class="fu">=</span> BL.getContents<span class="fu">&gt;&gt;=</span>BL.putStr<span class="fu">.</span>BL.fromChunks<span class="fu">.map</span> encode64<span class="fu">.</span>reChunk<span class="fu">.</span>BL.toChunks</a>
+<a class="sourceLine" id="cb1-11" title="11"></a>
+<a class="sourceLine" id="cb1-12" title="12"><span class="co">-- |Base64 index table </span></a>
+<a class="sourceLine" id="cb1-13" title="13"><span class="ot">tab64 ::</span> <span class="dt">UArray</span> <span class="dt">Word32</span> <span class="dt">Word8</span></a>
+<a class="sourceLine" id="cb1-14" title="14">tab64 <span class="fu">=</span> array (<span class="dv">0</span>,<span class="dv">63</span>) <span class="fu">$</span> <span class="fu">zip</span> [<span class="dv">0</span><span class="fu">..</span>] <span class="fu">$</span> <span class="fu">map</span> (BI.c2w) <span class="fu">$</span> </a>
+<a class="sourceLine" id="cb1-15" title="15">        [<span class="ch">&#39;A&#39;</span><span class="fu">..</span><span class="ch">&#39;Z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;a&#39;</span><span class="fu">..</span><span class="ch">&#39;z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;0&#39;</span><span class="fu">..</span><span class="ch">&#39;9&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;+&#39;</span>,<span class="ch">&#39;/&#39;</span>]</a>
+<a class="sourceLine" id="cb1-16" title="16"></a>
+<a class="sourceLine" id="cb1-17" title="17"><span class="co">-- |Encodes 3 octets into 4 sextets</span></a>
+<a class="sourceLine" id="cb1-18" title="18"><span class="ot">enc64 ::</span> (<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)<span class="ot">-&gt;</span>(<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)</a>
+<a class="sourceLine" id="cb1-19" title="19">enc64 (b1,b2,b3) <span class="fu">=</span> (t <span class="dv">3</span>,t <span class="dv">2</span>,t <span class="dv">1</span>,t <span class="dv">0</span>)</a>
+<a class="sourceLine" id="cb1-20" title="20">    <span class="kw">where</span> t x   <span class="fu">=</span> tab64 <span class="ot">`unsafeAt`</span> (n <span class="ot">`shiftR`</span> (x<span class="fu">*</span><span class="dv">6</span>) <span class="fu">.&amp;.</span> <span class="dv">63</span>)</a>
+<a class="sourceLine" id="cb1-21" title="21">          f b n <span class="fu">=</span> <span class="fu">fromIntegral</span> b <span class="ot">`shiftL`</span> n</a>
+<a class="sourceLine" id="cb1-22" title="22">          n     <span class="fu">=</span> f b1 <span class="dv">16</span> <span class="fu">+</span> f b2 <span class="dv">8</span> <span class="fu">+</span> f b3 <span class="dv">0</span></a>
+<a class="sourceLine" id="cb1-23" title="23"></a>
+<a class="sourceLine" id="cb1-24" title="24"><span class="co">-- |Transforms list of ByteStrings to a new list of ByteStrings with </span></a>
+<a class="sourceLine" id="cb1-25" title="25"><span class="co">-- lengths guaranteed to be multiples of 3 (excepting the last one)</span></a>
+<a class="sourceLine" id="cb1-26" title="26"><span class="co">-- Assumes that all input ByteStrings (excepting the last one) have </span></a>
+<a class="sourceLine" id="cb1-27" title="27"><span class="co">-- at least a length of 3.</span></a>
+<a class="sourceLine" id="cb1-28" title="28"><span class="ot">reChunk ::</span> [<span class="dt">BS.ByteString</span>] <span class="ot">-&gt;</span> [<span class="dt">BS.ByteString</span>]</a>
+<a class="sourceLine" id="cb1-29" title="29">reChunk (y<span class="fu">:</span>[]) <span class="fu">=</span> [y]</a>
+<a class="sourceLine" id="cb1-30" title="30">reChunk (y<span class="fu">:</span>z<span class="fu">:</span>zs) <span class="fu">=</span> <span class="kw">let</span> c <span class="fu">=</span> BS.length y <span class="ot">`mod`</span> <span class="dv">3</span> </a>
+<a class="sourceLine" id="cb1-31" title="31">                    <span class="kw">in</span> BS.append y (BS.take <span class="dv">3</span> z)<span class="fu">:</span>(reChunk <span class="fu">$</span> (BS.drop <span class="dv">3</span> z)<span class="fu">:</span>zs)</a></code></pre></div>
+</body>
+</html>
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_monochrome.html b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_monochrome.html
new file mode 100644
index 0000000..60c229d
--- /dev/null
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_monochrome.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>index</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <style type="text/css">
+a.sourceLine { display: inline-block; line-height: 1.25; }
+a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
+a.sourceLine:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode { white-space: pre; position: relative; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+code.sourceCode { white-space: pre-wrap; }
+a.sourceLine { text-indent: -1em; padding-left: 1em; }
+}
+pre.numberSource a.sourceLine
+  { position: relative; left: -4em; }
+pre.numberSource a.sourceLine::before
+  { content: attr(title);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; pointer-events: all; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+  }
+pre.numberSource { margin-left: 3em;  padding-left: 4px; }
+div.sourceCode
+  {  }
+@media screen {
+a.sourceLine::before { text-decoration: underline; }
+}
+code span.al { font-weight: bold; } /* Alert */
+code span.an { font-style: italic; } /* Annotation */
+code span.cf { font-weight: bold; } /* ControlFlow */
+code span.co { font-style: italic; } /* Comment */
+code span.cv { font-style: italic; } /* CommentVar */
+code span.do { font-style: italic; } /* Documentation */
+code span.dt { text-decoration: underline; } /* DataType */
+code span.er { font-weight: bold; } /* Error */
+code span.in { font-style: italic; } /* Information */
+code span.kw { font-weight: bold; } /* Keyword */
+code span.pp { font-weight: bold; } /* Preprocessor */
+code span.wa { font-style: italic; } /* Warning */
+  </style>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<div class="sourceCode" id="cb1"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">import</span> <span class="dt">Data.Array.Base</span>(unsafeAt)</a>
+<a class="sourceLine" id="cb1-2" title="2"><span class="kw">import</span> <span class="dt">Data.Bits</span>(shiftL,shiftR,(.&amp;.))</a>
+<a class="sourceLine" id="cb1-3" title="3"><span class="kw">import</span> <span class="dt">Foreign.Ptr</span> (plusPtr)</a>
+<a class="sourceLine" id="cb1-4" title="4"><span class="kw">import</span> <span class="dt">Foreign.Storable</span> (peek, poke)</a>
+<a class="sourceLine" id="cb1-5" title="5"><span class="kw">import</span> <span class="dt">Foreign.ForeignPtr</span> (withForeignPtr)</a>
+<a class="sourceLine" id="cb1-6" title="6"><span class="kw">import</span> <span class="dt">System.IO.Unsafe</span> (unsafePerformIO)</a>
+<a class="sourceLine" id="cb1-7" title="7"></a>
+<a class="sourceLine" id="cb1-8" title="8"><span class="co">-- |Perform base64 encoding of data from standard input</span></a>
+<a class="sourceLine" id="cb1-9" title="9"><span class="ot">main ::</span> <span class="dt">IO</span>()</a>
+<a class="sourceLine" id="cb1-10" title="10">main <span class="fu">=</span> BL.getContents<span class="fu">&gt;&gt;=</span>BL.putStr<span class="fu">.</span>BL.fromChunks<span class="fu">.map</span> encode64<span class="fu">.</span>reChunk<span class="fu">.</span>BL.toChunks</a>
+<a class="sourceLine" id="cb1-11" title="11"></a>
+<a class="sourceLine" id="cb1-12" title="12"><span class="co">-- |Base64 index table </span></a>
+<a class="sourceLine" id="cb1-13" title="13"><span class="ot">tab64 ::</span> <span class="dt">UArray</span> <span class="dt">Word32</span> <span class="dt">Word8</span></a>
+<a class="sourceLine" id="cb1-14" title="14">tab64 <span class="fu">=</span> array (<span class="dv">0</span>,<span class="dv">63</span>) <span class="fu">$</span> <span class="fu">zip</span> [<span class="dv">0</span><span class="fu">..</span>] <span class="fu">$</span> <span class="fu">map</span> (BI.c2w) <span class="fu">$</span> </a>
+<a class="sourceLine" id="cb1-15" title="15">        [<span class="ch">&#39;A&#39;</span><span class="fu">..</span><span class="ch">&#39;Z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;a&#39;</span><span class="fu">..</span><span class="ch">&#39;z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;0&#39;</span><span class="fu">..</span><span class="ch">&#39;9&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;+&#39;</span>,<span class="ch">&#39;/&#39;</span>]</a>
+<a class="sourceLine" id="cb1-16" title="16"></a>
+<a class="sourceLine" id="cb1-17" title="17"><span class="co">-- |Encodes 3 octets into 4 sextets</span></a>
+<a class="sourceLine" id="cb1-18" title="18"><span class="ot">enc64 ::</span> (<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)<span class="ot">-&gt;</span>(<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)</a>
+<a class="sourceLine" id="cb1-19" title="19">enc64 (b1,b2,b3) <span class="fu">=</span> (t <span class="dv">3</span>,t <span class="dv">2</span>,t <span class="dv">1</span>,t <span class="dv">0</span>)</a>
+<a class="sourceLine" id="cb1-20" title="20">    <span class="kw">where</span> t x   <span class="fu">=</span> tab64 <span class="ot">`unsafeAt`</span> (n <span class="ot">`shiftR`</span> (x<span class="fu">*</span><span class="dv">6</span>) <span class="fu">.&amp;.</span> <span class="dv">63</span>)</a>
+<a class="sourceLine" id="cb1-21" title="21">          f b n <span class="fu">=</span> <span class="fu">fromIntegral</span> b <span class="ot">`shiftL`</span> n</a>
+<a class="sourceLine" id="cb1-22" title="22">          n     <span class="fu">=</span> f b1 <span class="dv">16</span> <span class="fu">+</span> f b2 <span class="dv">8</span> <span class="fu">+</span> f b3 <span class="dv">0</span></a>
+<a class="sourceLine" id="cb1-23" title="23"></a>
+<a class="sourceLine" id="cb1-24" title="24"><span class="co">-- |Transforms list of ByteStrings to a new list of ByteStrings with </span></a>
+<a class="sourceLine" id="cb1-25" title="25"><span class="co">-- lengths guaranteed to be multiples of 3 (excepting the last one)</span></a>
+<a class="sourceLine" id="cb1-26" title="26"><span class="co">-- Assumes that all input ByteStrings (excepting the last one) have </span></a>
+<a class="sourceLine" id="cb1-27" title="27"><span class="co">-- at least a length of 3.</span></a>
+<a class="sourceLine" id="cb1-28" title="28"><span class="ot">reChunk ::</span> [<span class="dt">BS.ByteString</span>] <span class="ot">-&gt;</span> [<span class="dt">BS.ByteString</span>]</a>
+<a class="sourceLine" id="cb1-29" title="29">reChunk (y<span class="fu">:</span>[]) <span class="fu">=</span> [y]</a>
+<a class="sourceLine" id="cb1-30" title="30">reChunk (y<span class="fu">:</span>z<span class="fu">:</span>zs) <span class="fu">=</span> <span class="kw">let</span> c <span class="fu">=</span> BS.length y <span class="ot">`mod`</span> <span class="dv">3</span> </a>
+<a class="sourceLine" id="cb1-31" title="31">                    <span class="kw">in</span> BS.append y (BS.take <span class="dv">3</span> z)<span class="fu">:</span>(reChunk <span class="fu">$</span> (BS.drop <span class="dv">3</span> z)<span class="fu">:</span>zs)</a></code></pre></div>
+</body>
+</html>
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_pygments.html b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_pygments.html
new file mode 100644
index 0000000..e637f29
--- /dev/null
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_pygments.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>index</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <style type="text/css">
+a.sourceLine { display: inline-block; line-height: 1.25; }
+a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
+a.sourceLine:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode { white-space: pre; position: relative; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+code.sourceCode { white-space: pre-wrap; }
+a.sourceLine { text-indent: -1em; padding-left: 1em; }
+}
+pre.numberSource a.sourceLine
+  { position: relative; left: -4em; }
+pre.numberSource a.sourceLine::before
+  { content: attr(title);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; pointer-events: all; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+    color: #aaaaaa;
+  }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
+div.sourceCode
+  {  }
+@media screen {
+a.sourceLine::before { text-decoration: underline; }
+}
+code span.al { color: #ff0000; font-weight: bold; } /* Alert */
+code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
+code span.at { color: #7d9029; } /* Attribute */
+code span.bn { color: #40a070; } /* BaseN */
+code span.bu { } /* BuiltIn */
+code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
+code span.ch { color: #4070a0; } /* Char */
+code span.cn { color: #880000; } /* Constant */
+code span.co { color: #60a0b0; font-style: italic; } /* Comment */
+code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
+code span.do { color: #ba2121; font-style: italic; } /* Documentation */
+code span.dt { color: #902000; } /* DataType */
+code span.dv { color: #40a070; } /* DecVal */
+code span.er { color: #ff0000; font-weight: bold; } /* Error */
+code span.ex { } /* Extension */
+code span.fl { color: #40a070; } /* Float */
+code span.fu { color: #06287e; } /* Function */
+code span.im { } /* Import */
+code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
+code span.kw { color: #007020; font-weight: bold; } /* Keyword */
+code span.op { color: #666666; } /* Operator */
+code span.ot { color: #007020; } /* Other */
+code span.pp { color: #bc7a00; } /* Preprocessor */
+code span.sc { color: #4070a0; } /* SpecialChar */
+code span.ss { color: #bb6688; } /* SpecialString */
+code span.st { color: #4070a0; } /* String */
+code span.va { color: #19177c; } /* Variable */
+code span.vs { color: #4070a0; } /* VerbatimString */
+code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
+  </style>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<div class="sourceCode" id="cb1"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">import</span> <span class="dt">Data.Array.Base</span>(unsafeAt)</a>
+<a class="sourceLine" id="cb1-2" title="2"><span class="kw">import</span> <span class="dt">Data.Bits</span>(shiftL,shiftR,(.&amp;.))</a>
+<a class="sourceLine" id="cb1-3" title="3"><span class="kw">import</span> <span class="dt">Foreign.Ptr</span> (plusPtr)</a>
+<a class="sourceLine" id="cb1-4" title="4"><span class="kw">import</span> <span class="dt">Foreign.Storable</span> (peek, poke)</a>
+<a class="sourceLine" id="cb1-5" title="5"><span class="kw">import</span> <span class="dt">Foreign.ForeignPtr</span> (withForeignPtr)</a>
+<a class="sourceLine" id="cb1-6" title="6"><span class="kw">import</span> <span class="dt">System.IO.Unsafe</span> (unsafePerformIO)</a>
+<a class="sourceLine" id="cb1-7" title="7"></a>
+<a class="sourceLine" id="cb1-8" title="8"><span class="co">-- |Perform base64 encoding of data from standard input</span></a>
+<a class="sourceLine" id="cb1-9" title="9"><span class="ot">main ::</span> <span class="dt">IO</span>()</a>
+<a class="sourceLine" id="cb1-10" title="10">main <span class="fu">=</span> BL.getContents<span class="fu">&gt;&gt;=</span>BL.putStr<span class="fu">.</span>BL.fromChunks<span class="fu">.map</span> encode64<span class="fu">.</span>reChunk<span class="fu">.</span>BL.toChunks</a>
+<a class="sourceLine" id="cb1-11" title="11"></a>
+<a class="sourceLine" id="cb1-12" title="12"><span class="co">-- |Base64 index table </span></a>
+<a class="sourceLine" id="cb1-13" title="13"><span class="ot">tab64 ::</span> <span class="dt">UArray</span> <span class="dt">Word32</span> <span class="dt">Word8</span></a>
+<a class="sourceLine" id="cb1-14" title="14">tab64 <span class="fu">=</span> array (<span class="dv">0</span>,<span class="dv">63</span>) <span class="fu">$</span> <span class="fu">zip</span> [<span class="dv">0</span><span class="fu">..</span>] <span class="fu">$</span> <span class="fu">map</span> (BI.c2w) <span class="fu">$</span> </a>
+<a class="sourceLine" id="cb1-15" title="15">        [<span class="ch">&#39;A&#39;</span><span class="fu">..</span><span class="ch">&#39;Z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;a&#39;</span><span class="fu">..</span><span class="ch">&#39;z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;0&#39;</span><span class="fu">..</span><span class="ch">&#39;9&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;+&#39;</span>,<span class="ch">&#39;/&#39;</span>]</a>
+<a class="sourceLine" id="cb1-16" title="16"></a>
+<a class="sourceLine" id="cb1-17" title="17"><span class="co">-- |Encodes 3 octets into 4 sextets</span></a>
+<a class="sourceLine" id="cb1-18" title="18"><span class="ot">enc64 ::</span> (<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)<span class="ot">-&gt;</span>(<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)</a>
+<a class="sourceLine" id="cb1-19" title="19">enc64 (b1,b2,b3) <span class="fu">=</span> (t <span class="dv">3</span>,t <span class="dv">2</span>,t <span class="dv">1</span>,t <span class="dv">0</span>)</a>
+<a class="sourceLine" id="cb1-20" title="20">    <span class="kw">where</span> t x   <span class="fu">=</span> tab64 <span class="ot">`unsafeAt`</span> (n <span class="ot">`shiftR`</span> (x<span class="fu">*</span><span class="dv">6</span>) <span class="fu">.&amp;.</span> <span class="dv">63</span>)</a>
+<a class="sourceLine" id="cb1-21" title="21">          f b n <span class="fu">=</span> <span class="fu">fromIntegral</span> b <span class="ot">`shiftL`</span> n</a>
+<a class="sourceLine" id="cb1-22" title="22">          n     <span class="fu">=</span> f b1 <span class="dv">16</span> <span class="fu">+</span> f b2 <span class="dv">8</span> <span class="fu">+</span> f b3 <span class="dv">0</span></a>
+<a class="sourceLine" id="cb1-23" title="23"></a>
+<a class="sourceLine" id="cb1-24" title="24"><span class="co">-- |Transforms list of ByteStrings to a new list of ByteStrings with </span></a>
+<a class="sourceLine" id="cb1-25" title="25"><span class="co">-- lengths guaranteed to be multiples of 3 (excepting the last one)</span></a>
+<a class="sourceLine" id="cb1-26" title="26"><span class="co">-- Assumes that all input ByteStrings (excepting the last one) have </span></a>
+<a class="sourceLine" id="cb1-27" title="27"><span class="co">-- at least a length of 3.</span></a>
+<a class="sourceLine" id="cb1-28" title="28"><span class="ot">reChunk ::</span> [<span class="dt">BS.ByteString</span>] <span class="ot">-&gt;</span> [<span class="dt">BS.ByteString</span>]</a>
+<a class="sourceLine" id="cb1-29" title="29">reChunk (y<span class="fu">:</span>[]) <span class="fu">=</span> [y]</a>
+<a class="sourceLine" id="cb1-30" title="30">reChunk (y<span class="fu">:</span>z<span class="fu">:</span>zs) <span class="fu">=</span> <span class="kw">let</span> c <span class="fu">=</span> BS.length y <span class="ot">`mod`</span> <span class="dv">3</span> </a>
+<a class="sourceLine" id="cb1-31" title="31">                    <span class="kw">in</span> BS.append y (BS.take <span class="dv">3</span> z)<span class="fu">:</span>(reChunk <span class="fu">$</span> (BS.drop <span class="dv">3</span> z)<span class="fu">:</span>zs)</a></code></pre></div>
+</body>
+</html>
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_tango.html b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_tango.html
new file mode 100644
index 0000000..f76564b
--- /dev/null
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_tango.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>index</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <style type="text/css">
+a.sourceLine { display: inline-block; line-height: 1.25; }
+a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
+a.sourceLine:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode { white-space: pre; position: relative; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+code.sourceCode { white-space: pre-wrap; }
+a.sourceLine { text-indent: -1em; padding-left: 1em; }
+}
+pre.numberSource a.sourceLine
+  { position: relative; left: -4em; }
+pre.numberSource a.sourceLine::before
+  { content: attr(title);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; pointer-events: all; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+    color: #aaaaaa;
+  }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
+div.sourceCode
+  { background-color: #f8f8f8; }
+@media screen {
+a.sourceLine::before { text-decoration: underline; }
+}
+code span.al { color: #ef2929; } /* Alert */
+code span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
+code span.at { color: #c4a000; } /* Attribute */
+code span.bn { color: #0000cf; } /* BaseN */
+code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
+code span.ch { color: #4e9a06; } /* Char */
+code span.cn { color: #000000; } /* Constant */
+code span.co { color: #8f5902; font-style: italic; } /* Comment */
+code span.cv { color: #8f5902; font-weight: bold; font-style: italic; } /* CommentVar */
+code span.do { color: #8f5902; font-weight: bold; font-style: italic; } /* Documentation */
+code span.dt { color: #204a87; } /* DataType */
+code span.dv { color: #0000cf; } /* DecVal */
+code span.er { color: #a40000; font-weight: bold; } /* Error */
+code span.ex { } /* Extension */
+code span.fl { color: #0000cf; } /* Float */
+code span.fu { color: #000000; } /* Function */
+code span.im { } /* Import */
+code span.in { color: #8f5902; font-weight: bold; font-style: italic; } /* Information */
+code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
+code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
+code span.ot { color: #8f5902; } /* Other */
+code span.pp { color: #8f5902; font-style: italic; } /* Preprocessor */
+code span.sc { color: #000000; } /* SpecialChar */
+code span.ss { color: #4e9a06; } /* SpecialString */
+code span.st { color: #4e9a06; } /* String */
+code span.va { color: #000000; } /* Variable */
+code span.vs { color: #4e9a06; } /* VerbatimString */
+code span.wa { color: #8f5902; font-weight: bold; font-style: italic; } /* Warning */
+  </style>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<div class="sourceCode" id="cb1"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">import</span> <span class="dt">Data.Array.Base</span>(unsafeAt)</a>
+<a class="sourceLine" id="cb1-2" title="2"><span class="kw">import</span> <span class="dt">Data.Bits</span>(shiftL,shiftR,(.&amp;.))</a>
+<a class="sourceLine" id="cb1-3" title="3"><span class="kw">import</span> <span class="dt">Foreign.Ptr</span> (plusPtr)</a>
+<a class="sourceLine" id="cb1-4" title="4"><span class="kw">import</span> <span class="dt">Foreign.Storable</span> (peek, poke)</a>
+<a class="sourceLine" id="cb1-5" title="5"><span class="kw">import</span> <span class="dt">Foreign.ForeignPtr</span> (withForeignPtr)</a>
+<a class="sourceLine" id="cb1-6" title="6"><span class="kw">import</span> <span class="dt">System.IO.Unsafe</span> (unsafePerformIO)</a>
+<a class="sourceLine" id="cb1-7" title="7"></a>
+<a class="sourceLine" id="cb1-8" title="8"><span class="co">-- |Perform base64 encoding of data from standard input</span></a>
+<a class="sourceLine" id="cb1-9" title="9"><span class="ot">main ::</span> <span class="dt">IO</span>()</a>
+<a class="sourceLine" id="cb1-10" title="10">main <span class="fu">=</span> BL.getContents<span class="fu">&gt;&gt;=</span>BL.putStr<span class="fu">.</span>BL.fromChunks<span class="fu">.map</span> encode64<span class="fu">.</span>reChunk<span class="fu">.</span>BL.toChunks</a>
+<a class="sourceLine" id="cb1-11" title="11"></a>
+<a class="sourceLine" id="cb1-12" title="12"><span class="co">-- |Base64 index table </span></a>
+<a class="sourceLine" id="cb1-13" title="13"><span class="ot">tab64 ::</span> <span class="dt">UArray</span> <span class="dt">Word32</span> <span class="dt">Word8</span></a>
+<a class="sourceLine" id="cb1-14" title="14">tab64 <span class="fu">=</span> array (<span class="dv">0</span>,<span class="dv">63</span>) <span class="fu">$</span> <span class="fu">zip</span> [<span class="dv">0</span><span class="fu">..</span>] <span class="fu">$</span> <span class="fu">map</span> (BI.c2w) <span class="fu">$</span> </a>
+<a class="sourceLine" id="cb1-15" title="15">        [<span class="ch">&#39;A&#39;</span><span class="fu">..</span><span class="ch">&#39;Z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;a&#39;</span><span class="fu">..</span><span class="ch">&#39;z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;0&#39;</span><span class="fu">..</span><span class="ch">&#39;9&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;+&#39;</span>,<span class="ch">&#39;/&#39;</span>]</a>
+<a class="sourceLine" id="cb1-16" title="16"></a>
+<a class="sourceLine" id="cb1-17" title="17"><span class="co">-- |Encodes 3 octets into 4 sextets</span></a>
+<a class="sourceLine" id="cb1-18" title="18"><span class="ot">enc64 ::</span> (<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)<span class="ot">-&gt;</span>(<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)</a>
+<a class="sourceLine" id="cb1-19" title="19">enc64 (b1,b2,b3) <span class="fu">=</span> (t <span class="dv">3</span>,t <span class="dv">2</span>,t <span class="dv">1</span>,t <span class="dv">0</span>)</a>
+<a class="sourceLine" id="cb1-20" title="20">    <span class="kw">where</span> t x   <span class="fu">=</span> tab64 <span class="ot">`unsafeAt`</span> (n <span class="ot">`shiftR`</span> (x<span class="fu">*</span><span class="dv">6</span>) <span class="fu">.&amp;.</span> <span class="dv">63</span>)</a>
+<a class="sourceLine" id="cb1-21" title="21">          f b n <span class="fu">=</span> <span class="fu">fromIntegral</span> b <span class="ot">`shiftL`</span> n</a>
+<a class="sourceLine" id="cb1-22" title="22">          n     <span class="fu">=</span> f b1 <span class="dv">16</span> <span class="fu">+</span> f b2 <span class="dv">8</span> <span class="fu">+</span> f b3 <span class="dv">0</span></a>
+<a class="sourceLine" id="cb1-23" title="23"></a>
+<a class="sourceLine" id="cb1-24" title="24"><span class="co">-- |Transforms list of ByteStrings to a new list of ByteStrings with </span></a>
+<a class="sourceLine" id="cb1-25" title="25"><span class="co">-- lengths guaranteed to be multiples of 3 (excepting the last one)</span></a>
+<a class="sourceLine" id="cb1-26" title="26"><span class="co">-- Assumes that all input ByteStrings (excepting the last one) have </span></a>
+<a class="sourceLine" id="cb1-27" title="27"><span class="co">-- at least a length of 3.</span></a>
+<a class="sourceLine" id="cb1-28" title="28"><span class="ot">reChunk ::</span> [<span class="dt">BS.ByteString</span>] <span class="ot">-&gt;</span> [<span class="dt">BS.ByteString</span>]</a>
+<a class="sourceLine" id="cb1-29" title="29">reChunk (y<span class="fu">:</span>[]) <span class="fu">=</span> [y]</a>
+<a class="sourceLine" id="cb1-30" title="30">reChunk (y<span class="fu">:</span>z<span class="fu">:</span>zs) <span class="fu">=</span> <span class="kw">let</span> c <span class="fu">=</span> BS.length y <span class="ot">`mod`</span> <span class="dv">3</span> </a>
+<a class="sourceLine" id="cb1-31" title="31">                    <span class="kw">in</span> BS.append y (BS.take <span class="dv">3</span> z)<span class="fu">:</span>(reChunk <span class="fu">$</span> (BS.drop <span class="dv">3</span> z)<span class="fu">:</span>zs)</a></code></pre></div>
+</body>
+</html>
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_zenburn.html b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_zenburn.html
new file mode 100644
index 0000000..f186f69
--- /dev/null
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/00_pandoc_colors/index_zenburn.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>index</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <style type="text/css">
+a.sourceLine { display: inline-block; line-height: 1.25; }
+a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
+a.sourceLine:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode { white-space: pre; position: relative; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+code.sourceCode { white-space: pre-wrap; }
+a.sourceLine { text-indent: -1em; padding-left: 1em; }
+}
+pre.numberSource a.sourceLine
+  { position: relative; left: -4em; }
+pre.numberSource a.sourceLine::before
+  { content: attr(title);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; pointer-events: all; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+  }
+pre.numberSource { margin-left: 3em;  padding-left: 4px; }
+div.sourceCode
+  { color: #cccccc; background-color: #303030; }
+@media screen {
+a.sourceLine::before { text-decoration: underline; }
+}
+code span.al { color: #ffcfaf; } /* Alert */
+code span.an { color: #7f9f7f; font-weight: bold; } /* Annotation */
+code span.at { } /* Attribute */
+code span.bn { color: #dca3a3; } /* BaseN */
+code span.bu { } /* BuiltIn */
+code span.cf { color: #f0dfaf; } /* ControlFlow */
+code span.ch { color: #dca3a3; } /* Char */
+code span.cn { color: #dca3a3; font-weight: bold; } /* Constant */
+code span.co { color: #7f9f7f; } /* Comment */
+code span.cv { color: #7f9f7f; font-weight: bold; } /* CommentVar */
+code span.do { color: #7f9f7f; } /* Documentation */
+code span.dt { color: #dfdfbf; } /* DataType */
+code span.dv { color: #dcdccc; } /* DecVal */
+code span.er { color: #c3bf9f; } /* Error */
+code span.ex { } /* Extension */
+code span.fl { color: #c0bed1; } /* Float */
+code span.fu { color: #efef8f; } /* Function */
+code span.im { } /* Import */
+code span.in { color: #7f9f7f; font-weight: bold; } /* Information */
+code span.kw { color: #f0dfaf; } /* Keyword */
+code span.op { color: #f0efd0; } /* Operator */
+code span.ot { color: #efef8f; } /* Other */
+code span.pp { color: #ffcfaf; font-weight: bold; } /* Preprocessor */
+code span.sc { color: #dca3a3; } /* SpecialChar */
+code span.ss { color: #cc9393; } /* SpecialString */
+code span.st { color: #cc9393; } /* String */
+code span.va { } /* Variable */
+code span.vs { color: #cc9393; } /* VerbatimString */
+code span.wa { color: #7f9f7f; font-weight: bold; } /* Warning */
+  </style>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<div class="sourceCode" id="cb1"><pre class="sourceCode numberSource haskell numberLines"><code class="sourceCode haskell"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">import</span> <span class="dt">Data.Array.Base</span>(unsafeAt)</a>
+<a class="sourceLine" id="cb1-2" title="2"><span class="kw">import</span> <span class="dt">Data.Bits</span>(shiftL,shiftR,(.&amp;.))</a>
+<a class="sourceLine" id="cb1-3" title="3"><span class="kw">import</span> <span class="dt">Foreign.Ptr</span> (plusPtr)</a>
+<a class="sourceLine" id="cb1-4" title="4"><span class="kw">import</span> <span class="dt">Foreign.Storable</span> (peek, poke)</a>
+<a class="sourceLine" id="cb1-5" title="5"><span class="kw">import</span> <span class="dt">Foreign.ForeignPtr</span> (withForeignPtr)</a>
+<a class="sourceLine" id="cb1-6" title="6"><span class="kw">import</span> <span class="dt">System.IO.Unsafe</span> (unsafePerformIO)</a>
+<a class="sourceLine" id="cb1-7" title="7"></a>
+<a class="sourceLine" id="cb1-8" title="8"><span class="co">-- |Perform base64 encoding of data from standard input</span></a>
+<a class="sourceLine" id="cb1-9" title="9"><span class="ot">main ::</span> <span class="dt">IO</span>()</a>
+<a class="sourceLine" id="cb1-10" title="10">main <span class="fu">=</span> BL.getContents<span class="fu">&gt;&gt;=</span>BL.putStr<span class="fu">.</span>BL.fromChunks<span class="fu">.map</span> encode64<span class="fu">.</span>reChunk<span class="fu">.</span>BL.toChunks</a>
+<a class="sourceLine" id="cb1-11" title="11"></a>
+<a class="sourceLine" id="cb1-12" title="12"><span class="co">-- |Base64 index table </span></a>
+<a class="sourceLine" id="cb1-13" title="13"><span class="ot">tab64 ::</span> <span class="dt">UArray</span> <span class="dt">Word32</span> <span class="dt">Word8</span></a>
+<a class="sourceLine" id="cb1-14" title="14">tab64 <span class="fu">=</span> array (<span class="dv">0</span>,<span class="dv">63</span>) <span class="fu">$</span> <span class="fu">zip</span> [<span class="dv">0</span><span class="fu">..</span>] <span class="fu">$</span> <span class="fu">map</span> (BI.c2w) <span class="fu">$</span> </a>
+<a class="sourceLine" id="cb1-15" title="15">        [<span class="ch">&#39;A&#39;</span><span class="fu">..</span><span class="ch">&#39;Z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;a&#39;</span><span class="fu">..</span><span class="ch">&#39;z&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;0&#39;</span><span class="fu">..</span><span class="ch">&#39;9&#39;</span>]<span class="fu">++</span>[<span class="ch">&#39;+&#39;</span>,<span class="ch">&#39;/&#39;</span>]</a>
+<a class="sourceLine" id="cb1-16" title="16"></a>
+<a class="sourceLine" id="cb1-17" title="17"><span class="co">-- |Encodes 3 octets into 4 sextets</span></a>
+<a class="sourceLine" id="cb1-18" title="18"><span class="ot">enc64 ::</span> (<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)<span class="ot">-&gt;</span>(<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>,<span class="dt">Word8</span>)</a>
+<a class="sourceLine" id="cb1-19" title="19">enc64 (b1,b2,b3) <span class="fu">=</span> (t <span class="dv">3</span>,t <span class="dv">2</span>,t <span class="dv">1</span>,t <span class="dv">0</span>)</a>
+<a class="sourceLine" id="cb1-20" title="20">    <span class="kw">where</span> t x   <span class="fu">=</span> tab64 <span class="ot">`unsafeAt`</span> (n <span class="ot">`shiftR`</span> (x<span class="fu">*</span><span class="dv">6</span>) <span class="fu">.&amp;.</span> <span class="dv">63</span>)</a>
+<a class="sourceLine" id="cb1-21" title="21">          f b n <span class="fu">=</span> <span class="fu">fromIntegral</span> b <span class="ot">`shiftL`</span> n</a>
+<a class="sourceLine" id="cb1-22" title="22">          n     <span class="fu">=</span> f b1 <span class="dv">16</span> <span class="fu">+</span> f b2 <span class="dv">8</span> <span class="fu">+</span> f b3 <span class="dv">0</span></a>
+<a class="sourceLine" id="cb1-23" title="23"></a>
+<a class="sourceLine" id="cb1-24" title="24"><span class="co">-- |Transforms list of ByteStrings to a new list of ByteStrings with </span></a>
+<a class="sourceLine" id="cb1-25" title="25"><span class="co">-- lengths guaranteed to be multiples of 3 (excepting the last one)</span></a>
+<a class="sourceLine" id="cb1-26" title="26"><span class="co">-- Assumes that all input ByteStrings (excepting the last one) have </span></a>
+<a class="sourceLine" id="cb1-27" title="27"><span class="co">-- at least a length of 3.</span></a>
+<a class="sourceLine" id="cb1-28" title="28"><span class="ot">reChunk ::</span> [<span class="dt">BS.ByteString</span>] <span class="ot">-&gt;</span> [<span class="dt">BS.ByteString</span>]</a>
+<a class="sourceLine" id="cb1-29" title="29">reChunk (y<span class="fu">:</span>[]) <span class="fu">=</span> [y]</a>
+<a class="sourceLine" id="cb1-30" title="30">reChunk (y<span class="fu">:</span>z<span class="fu">:</span>zs) <span class="fu">=</span> <span class="kw">let</span> c <span class="fu">=</span> BS.length y <span class="ot">`mod`</span> <span class="dv">3</span> </a>
+<a class="sourceLine" id="cb1-31" title="31">                    <span class="kw">in</span> BS.append y (BS.take <span class="dv">3</span> z)<span class="fu">:</span>(reChunk <span class="fu">$</span> (BS.drop <span class="dv">3</span> z)<span class="fu">:</span>zs)</a></code></pre></div>
+</body>
+</html>
diff --git a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/index.md b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/index.md
index 279c721..fe78da5 100644
--- a/080_blog/00040_Haskell/00200_Estatico-Page-Maker/index.md
+++ b/080_blog/00040_Haskell/00200_Estatico-Page-Maker/index.md
@@ -1,13 +1,12 @@
+    April 2018
 # estático - static website generator
 
-    April 12, 2018
-
-Two weeks ago I decided to switch my website from a well known PHP 
+A few weeks ago I decided to switch my website from a well known PHP 
 driven CMS solution, to a light and static set of HTML pages. 
 
-And so I wrote a simple static website generator in 
-**Haskell**. Of course I know that there are already hundreds out there, 
-but I wanted my own masturbatory solution. 
+And so I wrote ... a simple static website generator in **Haskell**. 
+Of course I know that there is already plenty out there, but I wanted my 
+own masturbatory solution. 
 
 I use **pandoc** et al. for most of the work anyway.
 
@@ -30,7 +29,13 @@ Build it with _stack_ or use the docker images.
 * <https://github.com/miguelclean/estatico>
 * <https://hub.docker.com/r/migueldirty/estatico/builds>
 
-## Example Usage
+## Pandoc Themes
+
+Here I put together the themes available for syntax-highlighting, extracted 
+from **pandoc**: [./pandoc\_colors](./pandoc_colors)
+
+## Example Usage (Docker)
+
 __NOTE: make sure DIR\_OUT exists and is a free directory__
 
 You can use the example websites inside the examples/ directory for a start.
@@ -49,7 +54,7 @@ Or if you want to test it locally use some local DIR\_OUT and HTML\_ROOT instead
     DIR_OUT=/home/miguel/testpage
     HTML_ROOT=/home/miguel/testpage
 
-The only real life example I know of, is this very page: _idziorek.net_ 
-You can find it's sources here:
+This very page: _idziorek.net_ is a real-world example and you can find 
+it's sources here:
 
 * <https://gitweb.softwarefools.com/?p=miguel/idziorek_net.git>
diff --git a/080_blog/00040_Haskell/00_00150_Applicative-vs-Monadic-Parsing/index.md b/080_blog/00040_Haskell/00_00150_Applicative-vs-Monadic-Parsing/index.md
new file mode 100644
index 0000000..f9b3a4e
--- /dev/null
+++ b/080_blog/00040_Haskell/00_00150_Applicative-vs-Monadic-Parsing/index.md
@@ -0,0 +1 @@
+Coming sooner... or later.
diff --git a/080_blog/00040_Hex-Converter/hexman.html b/080_blog/00040_Hex-Converter/hexman.html
new file mode 100644
index 0000000..86af3ef
--- /dev/null
+++ b/080_blog/00040_Hex-Converter/hexman.html
@@ -0,0 +1,170 @@
+<body>
+    <head>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <script>
+    var radix_str="26";
+
+    var str_map = {};
+    str_map[777] = "Jackpot! You are Lucky Today!";
+    str_map[13] = "Bad Bad Bad";
+    str_map[666] = "The Number of the Beast.";
+
+    function toggle_bin() {
+    var x = document.getElementById("details_bin");
+    if (x.style.display === "none") {
+        x.style.display = "flex";
+    } else {
+        x.style.display = "none";
+    }
+}
+
+    function convert(val,rad)
+    {
+	if(val=="")return;
+
+	/* guard radix */
+	var oldradix=radix_str;
+
+	radix_str=document.getElementById("custom_radix").value;
+	var radix=parseInt(radix_str,10);
+
+	if(!radix || radix <2 || radix > 36)radix_str=oldradix
+	document.getElementById("custom_radix").value=radix_str;
+	var radix=parseInt(radix_str,10);
+	//
+
+	var i=parseInt(val,rad);
+	if(i)
+	{
+	    document.getElementById("custom").value = i.toString(radix);
+	    document.getElementById("dec").value = i.toString(10);
+	    document.getElementById("oct").value = i.toString(8);
+	    document.getElementById("bin").value = i.toString(2);
+	    document.getElementById("hex").value = i.toString(16);
+
+
+	    var bytes="<p>";
+
+	    for(var j=0;j<32;j++)
+	    {
+		bytes+="byte "+j.toString(10)+" : "+(((i&(2**j))>0)?"1":"_")+"<br />";
+	    }
+	    bytes+="</p>";
+	    document.getElementById("bytes").innerHTML=bytes;
+	}
+
+	var info=str_map[i];
+
+	if(info)
+	{
+	    document.getElementById("info").innerHTML = i.toString(10) + " - " + info; //"Page location is " + window.location.href;
+	}
+	else
+	{
+	    document.getElementById("info").innerHTML = "";
+	}
+
+    }
+    </script>
+    <style>
+    </style>
+    </head>
+    <html>
+
+	<div class="container">
+
+	<div class="row">
+	    <div class="col-4"></div>
+	    <div class="col-4">
+		<h1 class="text-primary">Miguel's Converter</h1>
+                <p>Convert numbers between different bases. Supports decimal, octal, binary and hex. You can use a custom base as well.</p>
+	    </div>
+	    <div class="col-4"></div>
+	</div>
+
+	<div class="row">
+	    <div class="col-4"></div>
+	    <div class="col-4">
+	    <input id='dec' class="w-100 mb-3" type=text placeholder="decimal" name="dec" onkeyup="convert(this.value,10)" />
+	    </div>
+	    <div class="col-1">
+		10
+	    </div>
+	    <div class="col-3"></div>
+	</div>
+
+	<div class="row">
+	    <div class="col-4"></div>
+	    <div class="col-4">
+	    <input id='oct' class="w-100 mb-3" type=text placeholder="octal" name="oct" onkeyup="convert(this.value,8)" />
+	    </div>
+	    <div class="col-1">
+		8
+	    </div>
+	    <div class="col-3"></div>
+	</div>
+
+	<div class="row">
+	    <div class="col-4"></div>
+	    <div class="col-4">
+	    <input id='bin' class="w-100 mb-3" type=text placeholder="binary" name="binary" onkeyup="convert(this.value,2)" />
+	    </div>
+	    <div class="col-1">
+		2
+	    </div>
+	    <div class="col-1">
+		<button onclick="toggle_bin()">
+		toggle
+		</button>
+	    </div>
+	    <div class="col-2"></div>
+	</div>
+
+	<div id="details_bin" class="row" style="display:none">
+	    <div class="col-4"></div>
+	    <div class="col-4" id='bytes'>
+		Need value first.
+	    </div>
+	    <div class="col-4"></div>
+	</div>
+
+	<div class="row">
+	    <div class="col-4"></div>
+	    <div class="col-4">
+	    <input id='hex' class="w-100 mb-3" type=text placeholder="hex" name="hex" onkeyup="convert(this.value,16)" />
+	    </div>
+	    <div class="col-1">
+		16
+	    </div>
+	    <div class="col-3"></div>
+	</div>
+
+	<div class="row">
+	    <div class="col-4"></div>
+	    <div class="col-4">
+	    <input id='custom' class="w-100 mb-3" type=text placeholder="custom"  onkeyup="convert(this.value,document.getElementById('custom_radix').value)" />
+	    </div>
+	    <div class="col-1">
+	    <input id='custom_radix' class="w-100 mb-3" type=text placeholder="radix"  onkeyup="convert(document.getElementById('custom').value,this.value)" value="26" />
+	    </div>
+	    <div class="col-3"></div>
+	</div>
+	<div class="row">
+	    <div class="col-4"></div>
+	    <div class="col-4" id="info">
+	    </div>
+	    <div class="col-4"></div>
+	</div>
+	<div class="row">
+	    <div class="col-4"></div>
+	    <div class="col-4">
+                <p>Hacked together by <a href=https://www.idziorek.net>miguel</a></p>
+                <p>powered by JavaScript and Bootstrap.</p>
+	    </div>
+	    <div class="col-4"></div>
+	</div>
+	
+	
+
+    </html>
+</body>
diff --git a/080_blog/00040_Hex-Converter/index.md b/080_blog/00040_Hex-Converter/index.md
new file mode 100644
index 0000000..1f837db
--- /dev/null
+++ b/080_blog/00040_Hex-Converter/index.md
@@ -0,0 +1,5 @@
+# Hex Converter
+
+My little online converter between different bases: 
+[link](hexman.html)
+
diff --git a/080_blog/00100_Webkit-Keyboardless-Navigation/index.md b/080_blog/00100_Webkit-Keyboardless-Navigation/index.md
index 5299563..224c9bb 100644
--- a/080_blog/00100_Webkit-Keyboardless-Navigation/index.md
+++ b/080_blog/00100_Webkit-Keyboardless-Navigation/index.md
@@ -1,8 +1,7 @@
+    April 2018
 Miguel's Surfing Quick Links
 ============================
 
-    April 12, 2018
-
 Since I do not want to depend on JavaScript all of the time,  I tried to 
 integrate simple keyboard-only navigation directly into the webkit2gtk+,
 as a web extension. 
@@ -18,7 +17,7 @@ The DOM is manipulated on the fly by the browser without any JavaScript involved
 
 A little video demonstrating what was achieved so far (inside the glorious, webkit2gtk+ based, suckless surf browser):
 
-<video style="width:60%;min-width:100pt;" controls>
+<video controls>
   <source src="v1.mp4" type="video/mp4">
   <source src="v1.ogv" type="video/ogg">
 Your browser does not support the video tag.
diff --git a/080_blog/00110_Fool-Operating-System/index.md b/080_blog/00110_Fool-Operating-System/index.md
index a8fac68..2e25144 100644
--- a/080_blog/00110_Fool-Operating-System/index.md
+++ b/080_blog/00110_Fool-Operating-System/index.md
@@ -50,13 +50,13 @@ Be warned that most features are unstable and in development.
 
 ## Screenshots
 
-![](scale_foolos0.png){.img-fluid}\
+![](scale_foolos0.png){}\
 **Booting** the Kernel in frame-buffer mode
 
-![](scale_foolos1.png){.img-fluid}\
+![](scale_foolos1.png){}\
 **Shell** in text mode. 
 
-![](scale_foolos2.png){.img-fluid}\
+![](scale_foolos2.png){}\
 [click here for full-resolution version of pic above.](foolos2.png)\
 My **Compositing** Window Manager in action. As you see **Fool-OS** ships 
 with **vim** and some little **ncurses-examples** as well as a 
@@ -64,7 +64,7 @@ with **vim** and some little **ncurses-examples** as well as a
 
 ## Videos
 
-<video style="width:60%;min-width:100pt;" controls>
+<video controls>
   <source src="pipes.mp4" type="video/mp4">
   <source src="pipes.ogv" type="video/ogg">
 Your browser does not support the video tag.
@@ -72,7 +72,7 @@ Your browser does not support the video tag.
 </video>
 Demonstrating the Kernel's **piping** functionality, inside the shell.
 
-<video style="width:60%;min-width:100pt;" controls>
+<video controls>
   <source src="compositing.mp4" type="video/mp4">
   <source src="compositing.ogv" type="video/ogg">
 Your browser does not support the video tag.
diff --git a/favicon.ico b/favicon.ico
index 01a4632..8d16a53 100644
--- a/favicon.ico
+++ b/favicon.ico
diff --git a/index.md b/index.md
index 43b05fc..4f8c87e 100644
--- a/index.md
+++ b/index.md
@@ -3,7 +3,7 @@
 ###>>>TITLE Michal Idziorek
 Highlights
 ==========
-Some currently featured content.
+Browse my [blog](/blog) or jump directly to some currently featured content.
 
 * [Fool OS](/blog/Fool-Operating-System)
 * [Haskelling](/blog/Haskell)
@@ -23,6 +23,13 @@ Over the years Michal professionally engaged in multidisciplinary
 academic, corporate and freelance activities, acquiring a broad toolkit of 
 skills, he is continuously and passionately extending.
 
+Michal seeks satisfaction in challenges with a steep learning curve and is 
+versatile and experienced in multidisciplinary, academic and
+corporate settings. He is motivated towards working environments based on 
+modern open-source solutions, adhering in a broad sense to the _unix philosophy_.
+
+Available for freelance as well as contracted project work.
+
 <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
 <figure>
 ![](Michal-Idziorek.jpg){itemprop="contentUrl" .img-fluid alt="Michal Idziorek smiling in front of green grass" title="~~ But youth smiles without any reason. It is one of its chiefest charms. ~~"}
@@ -51,6 +58,7 @@ Contact me in English, German, Polish or Klingon via any of the following channe
 
 Feel free to send questions or suggestions or just say "hello".
 
+<!--
 CV
 ==
 
@@ -59,3 +67,4 @@ Download a PDF version of my Curriculum Vitae:
 [Michal\_Idziorek\_CV.pdf](Michal_Idziorek_CV.pdf)
 
 It is likely out of date, sorry mate!
+-->
diff --git a/pandoc.css b/pandoc.css
index c377f3e..0953d80 100644
--- a/pandoc.css
+++ b/pandoc.css
@@ -4,4 +4,4 @@
     stack exec pandoc -- -s file.md --highlight-style pygments
 */
 
-@import "pandoc_haddock.css"
+@import "css/pandoc_breezedark.css"
diff --git a/template.html b/template.html
index f91ba1e..af07640 100644
--- a/template.html
+++ b/template.html
@@ -1,77 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
-
     <head>
-	<link rel="shortcut icon" type="image/png" href="###ROOT###/favicon.ico?v=3"/>
-	<title>###TITLE###</title>
+        <!-- basics -->
 	<meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>###TITLE###</title>
 	<meta name="description" content="###DESCRIPTION###"/>
-	<meta name="keywords" content="###KEYWORDS###" />
 	<meta name="author" content="Michal Idziorek" />
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-	<link rel="stylesheet" href="###ROOT###/pandoc.css" />
-        <link rel="stylesheet" href="###ROOT###/asciinema-player.css" />
-        <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
-    </head>
-
-    <body>
+	<meta name="keywords" content="###KEYWORDS###" />
 
-	<div class="container" id="top">
+        <!-- mobile -->
+        <meta name="viewport" content="width=device-width, initial-scale=1">
 
-	    <div class="row">
+        <!-- font -->
+        <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
 
-		<div class="col-12 p-0">
-    
-		    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
+        <!-- css -->
+        <link rel="stylesheet" href="###ROOT###/css/normalize.css">
+        <link rel="stylesheet" href="###ROOT###/css/skeleton.css">
+        <link rel="stylesheet" href="###ROOT###/css/custom.css">
 
-			<a class="navbar-brand" href="###ROOT###/index.html">
-                           idziorek.net
-		        </a>
+        <link rel="stylesheet" href="./00_css/normalize.css">
+        <link rel="stylesheet" href="./00_css/skeleton.css">
+        <link rel="stylesheet" href="./00_css/custom.css">
 
-			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                            <span class="navbar-toggler-icon"></span>
-			</button>
+	<link rel="stylesheet" href="###ROOT###/pandoc.css" />
+        <link rel="stylesheet" href="###ROOT###/asciinema-player.css" />
 
-			<div class="collapse navbar-collapse" id="navbarSupportedContent">
-			    <ul class="navbar-nav mr-auto">
-				###MENU###
-			    </ul>
-			</div>
+        <!-- scripts -->
+        <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
 
-		    </nav>
+        <!-- favicon -->
+	<link rel="shortcut icon" type="image/png" href="###ROOT###/favicon.ico"/>
+    </head>
 
-		    <nav aria-label="breadcrumb">
-			<ol class="breadcrumb">
-			   ###BREADCRUMBS###
-			</ol>
-		    </nav>
+    <body>
 
-		    <div class="px-3">
+	<div class="container" id="top">
+                        <header>
+                            <a href="###ROOT###/index.html">www.idziorek.net</a> |
+                            <a href="###ROOT###/blog">blog</a> |
+                            <a href="###ROOT###/index.html#contact">contact</a>
+                        
+                        </header>
+                        <nav id="breadcrumbs">
+                            <ul>
+			###BREADCRUMBS###
+                            </ul>
+                        </nav>
+                        <div class="clear"> </div>
+                        <section>
 			###CONTENT###
-			<ul class="nav flex-column">
-			    ###SUBMENU###
-			</ul>
-		    </div>
-                    
-                    <a href="#top">
-                    <div id="myBtn" style="position:fixed;right:20px;bottom:20px;background-color:#003baf;padding:10px;border-radius:30%;color:white;font-size:1.5em;">
-                        &#9650;
-                    </div>
-                    </a>
-
-		    <div id="footer" class="p-3 bg-primary text-light text-center">
-                        &copy; 1994-2019 | powered by <a class="text-white" href="https://www.idziorek.net/blog/Haskell/Estatico-Page-Maker/">estático</a>
-		    </div>
-		</div>
-	    </div>
+                        </section>
+                        <nav id="submenu">
+                            <ul>
+			###SUBMENU###
+                            </ul>
+                        </nav>
+                        <footer>
+                        &copy; 1994-2019 | powered by <a href="https://www.idziorek.net/blog/Haskell/Estatico-Page-Maker/">estático</a>
+                        </footer>
 	</div>
 
-        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
-        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
         <script src="###ROOT###/asciinema-player.js"></script>
-        <script src="###ROOT###/backtop.js"></script>
+
     </body>
 
 </html>
author	Miguel <m.i@gmx.at>	2019-03-17 13:34:44 +0100
committer	Miguel <m.i@gmx.at>	2019-03-17 13:34:44 +0100
commit	331195b0d690d89d43e7eca9565ea2b013e87f25 (patch)
tree	cda936e57d6378183d535800d9c3dec0a0267350
parent	3b32429a0064159842a4147eb4accc7bdba63553 (diff)