* Improved documentation

* Improved default theme

CHANGELOG.md

@@ -3,12 +3,16 @@ Change log
 
 For detailed information check [Blogophon's releases on Github](https://github.com/fboes/blogophon/releases).
 
+1.1.1
+-----
+
 * [x] Improving code highlighting by handling strings and comments separately from standard code
 * [x] Adding `h-entry` microformats and English template language
 * [x] Added `8<` symbol (for snippets)
 * [X] Codepen.io integration
 * [x] More sharing links (Pocket, Tumblr, Wordpress)
 * [x] JSON for Slack added
+* [x] Improved default theme
 
 1.1.0
 -----

docs/README.md

@@ -0,0 +1,8 @@
+![Blogophon -](blogophon.png) Documentation
+==============
+
+1. [Markdown](markdown.md): All Blogophon articles are written in Markdown. This document explains how to work with Markdown.
+1. [Special features](special-features.md): All features listed here can be activated during installation.
+1. [Manual operations](manual.md): You do not have to use `blogophon` to generate your blog. All operations can be done by a bunch of other tools.
+1. [Development](development.md): The Blogophon supports the building of custom themes and frontend functionality. You ware free to change the styling of the pages build by the Blogophon.
+1. [Advanced stuff](advanced-stuff.md): In this document you will find some stuff for hardcore CLI wizards and server gurus.

docs/advanced-stuff.md

@@ -81,3 +81,7 @@ In certain environments you may not be able to install the Blogophon globally. T
 
 * All commands relating to `blogophon` may now be called by executing `node node_modules/blogophon/index.js`
 * All commands relating to `blogophon-generate` may now be called by executing `node node_modules/blogophon/generate.js`
+
+---
+
+Return to [table of contents](README.md).

docs/development.md

@@ -32,3 +32,7 @@ To develop a new theme follow these steps:
 1. Call `blogophon` and choose your new theme `YOUR_THEME_NAME`.
 1. Run `gulp` to start the SASS- & JS-compiler. This will also reload your browser on theme changes if you have the [LiveReload plugin](http://livereload.com/extensions/) installed.
 1. Start making modifications to your copied theme files.
+
+---
+
+Return to [table of contents](README.md).

docs/manual.md

@@ -33,3 +33,7 @@ If you want to write an article without publishing it, you can append a `~` to y
 If you want to completely delete an article, you will have to delete all HTML files and Markdown files as well as any images associated with the selected article.
 
 After that you will have to generate all pages anew, as the index pages will still link to the deleted article.
+
+---
+
+Return to [table of contents](README.md).

docs/markdown.md

@@ -227,3 +227,7 @@ Checkboxes
 * [X] _Produces a checked checkbox_
 
 ```
+
+---
+
+Return to [table of contents](README.md).

docs/special-features.md

@@ -97,3 +97,7 @@ AJAX
 Exports all articles as `index.json`. These files may be used for AJAX loading of articles.
 
 Exports all indexes as `index.json`, containing references to the AJAX articles.
+
+---
+
+Return to [table of contents](README.md).

htdocs/themes/default/css/amp.css

@@ -5,15 +5,17 @@ body { font-family: Arial, sans-serif; line-height: 1.5; }
 li { margin-left: 1.5em; }
 body[dir="rtl"] li { margin-right: 1.5em; margin-left: 0; }
 a { color: #116bfc; }
-#container > * { padding-left: 0.5em; padding-right: 0.5em; }
-@media screen and (min-width: 640px) { #container > * { padding-left: calc(50vw - (320px) + 0.5em); padding-right: calc(50vw - (320px) + 0.5em); } }
+#container > header, #container > div > main, #container > div > aside, #container > footer { padding-left: 0.5em; padding-right: 0.5em; }
+@media screen and (min-width: 640px) { #container > header, #container > div > main, #container > div > aside, #container > footer { padding-left: calc(50vw - (320px) + 0.5em); padding-right: calc(50vw - (320px) + 0.5em); } }
 #container > header { background-color: #116bfc; }
 #container > header h1 { font-size: 1em; }
 #container > header a { color: white; text-decoration: none; }
 #container > aside { border-top: 1px dashed #666666; }
 #prevnext { text-align: center; padding: 2em 0; }
 #prevnext a { display: inline-block; padding: 0 1em; }
-#footer { color: #666666; border-top: 1px dashed; padding: 1em; font-size: 0.8em; margin-top: 1em; text-align: center; }
+#header, #sidebar, #footer { padding-top: 1em; padding-bottom: 1em; }
+#sidebar { background-color: #dddddd; border-top: 1px dashed #666666; }
+#footer { background-color: #dddddd; color: #666666; font-size: 0.7em; text-align: center; }
 article header .date { float: right; font-size: 0.8em; }
 body[dir="rtl"] article header .date { float: left; }
 article img, article amp-img { float: left; margin: 0 1em 1em 0; max-width: 100%; height: auto; }
@@ -35,12 +37,3 @@ article footer a { text-decoration: none; }
 article address img { width: 2em; }
 article iframe { width: 100%; overflow: hidden; border: none; }
 .teasers .modified { display: none; }
-pre.code, pre > code { font: 1em/1.3 "Courier New", monospace; color: white; margin-bottom: 1em; padding: 0.5em; background: rgba(0, 0, 0, 0.1); display: block; overflow: scroll; background: #272822; }
-pre.code b, pre.code i, pre.code var, pre.code tt, pre.code em, pre.code kbd, pre.code samp, pre.code u, pre > code b, pre > code i, pre > code var, pre > code tt, pre > code em, pre > code kbd, pre > code samp, pre > code u { text-decoration: none; font-style: normal; font-family: inherit; }
-pre.code .c1, pre.code b, pre > code .c1, pre > code b { color: #66D9EF; }
-pre.code .c2, pre.code i, pre > code .c2, pre > code i { color: #F92672; }
-pre.code .c3, pre.code var, pre > code .c3, pre > code var { color: #A6E22E; }
-pre.code .c4, pre.code tt, pre.code em, pre > code .c4, pre > code tt, pre > code em { color: #FD971F; }
-pre.code .c5, pre.code kbd, pre > code .c5, pre > code kbd { color: #E6DB74; }
-pre.code .c6, pre.code samp, pre > code .c6, pre > code samp { color: #AE81FF; }
-pre.code .comment, pre.code .comment *, pre.code u, pre.code u *, pre > code .comment, pre > code .comment *, pre > code u, pre > code u * { color: #75715E !important; }

htdocs/themes/default/sass/_blogophon-styles.scss → htdocs/themes/default/sass/_article.scss

@@ -183,38 +183,31 @@ article {
       }
     }
   }
-}
 
-pre.code,
-pre > code {
-  font: 1em/1.3 $fontfamily-monospace;
-  color: white;
-  margin-bottom: 1em;
-  padding: 0.5em;
-  background: rgba(0,0,0,0.1);
-  display: block;
-  overflow: scroll;
-  background:#272822;
-  b, i, var, tt, em, kbd, samp, u {
-    text-decoration: none;
-    font-style: normal;
-    font-family: inherit;
-  }
-  .c1, b    { color: #66D9EF; } // blue
-  .c2, i    { color: #F92672; } // red
-  .c3, var  { color: #A6E22E; } // green
-  .c4, tt, em { color: #FD971F; } // orange
-  .c5, kbd  { color: #E6DB74; } // yellow
-  .c6, samp { color: #AE81FF; } // purple
-  .comment, u {
-    &, * { color:#75715E !important; }
-  }
-}
 
-@include no-amp {
-  svg.icon {
-    height: 1em;
-    width: 1em;
-    fill: currentColor;
+  pre.code,
+  pre > code {
+    font: 1em/1.3 $fontfamily-monospace;
+    color: white;
+    margin-bottom: 1em;
+    padding: 0.5em;
+    background: rgba(0,0,0,0.1);
+    display: block;
+    overflow: scroll;
+    background:#272822;
+    b, i, var, tt, em, kbd, samp, u {
+      text-decoration: none;
+      font-style: normal;
+      font-family: inherit;
+    }
+    .c1, b    { color: #66D9EF; } // blue
+    .c2, i    { color: #F92672; } // red
+    .c3, var  { color: #A6E22E; } // green
+    .c4, tt, em { color: #FD971F; } // orange
+    .c5, kbd  { color: #E6DB74; } // yellow
+    .c6, samp { color: #AE81FF; } // purple
+    .comment, u {
+      &, * { color:#75715E !important; }
+    }
   }
 }

htdocs/themes/default/sass/_main.scss

@@ -45,7 +45,10 @@ a {
 }
 
 #container {
-  > * {
+  > header,
+  > div > main,
+  > div > aside,
+  > footer {
     padding-left: 0.5em;
     padding-right: 0.5em;
 
@@ -80,11 +83,21 @@ a {
   }
 }
 
+#header,
+#sidebar,
 #footer {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+#sidebar {
+  background-color: $color-grey;
+  border-top:1px dashed $color-grey-dark;
+}
+
+#footer {
+  background-color: $color-grey;
   color: $color-grey-dark;
-  border-top: 1px dashed;
-  padding: 1em;
-  font-size: 0.8em;
-  margin-top: 1em;
+  font-size: 0.7em;
   text-align: center;
 }

htdocs/themes/default/sass/styles.scss

@@ -1,4 +1,4 @@
 @import "base";
 @import "mixins";
 @import "main";
-@import "blogophon-styles";
+@import "article";