Added styling

.gitignore

@@ -1 +1,4 @@
 /.idea/
+/dist/
+/src/.tmp/
+/src/node_modules/

README.md

@@ -4,6 +4,31 @@ slim-wiki
 A slim wiki based on PHP and markdown
 
 
+
+Build instructions
+------------------
+
+Install grunt globally:
+
+    sudo npm install -g grunt-cli
+
+Install grunt dependency in project:
+
+    cd src
+    npm install
+
+Build client:
+
+    cd src
+    grunt
+
+Build automatically on source changes (watch mode):
+
+    cd src
+    grunt watch
+
+
+
 Used libraries
 --------------
 

src/Gruntfile.js

@@ -0,0 +1,78 @@
+module.exports = function (grunt) {
+  'use strict';
+
+  require('load-grunt-tasks')(grunt);
+
+  var dist = __dirname + '/../dist';
+
+  grunt.registerTask('build', [
+    'copy',
+    'less',
+    'useminPrepare',
+    'concat',
+    //'uglify',  // TODO: uncomment if there is JavaScript
+    'cssmin',
+    'usemin'
+  ]);
+
+  grunt.registerTask('default', [
+    'clean',
+    'build'
+  ]);
+
+  grunt.initConfig({
+
+    clean: {
+      options: { force: true }, // Allow cleaning '../dist' (which is outside the working directory)
+      stuff: [ '.tmp', dist ]
+    },
+
+    copy: {
+      dist: {
+        files: [
+          { src: '.htaccess', dest: dist + '/' },
+          { expand: true, src: '*.php', dest: dist + '/' },
+          { expand: true, src: 'articles/**', dest: dist + '/' },
+          { expand: true, src: 'client/img/**', dest: dist + '/' },
+          { expand: true, src: 'server/**', dest: dist + '/' }
+        ]
+      }
+    },
+
+    less: {
+      dist: {
+        files: (function () {
+          var files = {};
+          files[dist + '/client/css/style.css'] = 'client/less/style.less';
+          return files;
+        })()
+      }
+    },
+
+    useminPrepare: {
+      html: 'server/layout/page.php',
+
+      options: {
+        root: '.',
+        dest: dist
+      }
+    },
+
+    usemin: {
+      html: dist + '/server/layout/page.php'
+    },
+
+    watch: {
+      less: {
+        files: 'client/less/*.less',
+        tasks: 'less'
+      },
+      copy: {
+        files: 'client/images/**',
+        tasks: 'copy'
+      }
+    }
+
+  });
+
+};

src/articles/cheat-sheets/Markdown_cheat_sheet.md

@@ -0,0 +1,79 @@
+# Header 1 #
+## Header 2 ##
+### Header 3        (Hashes on right are optional)
+#### Header 4
+##### Header 5
+###### Header 6
+
+
+Alternative Header 1
+====================
+
+
+Alternative Header 2
+--------------------
+
+A simple Link: http://google.de
+
+This is a paragraph, which is text surrounded by whitespace. Paragraphs can be on one
+line (or many), and can drone on for hours.
+
+Here is a Markdown link to [a named link](http://google.de).
+
+Now some inline markup like _italics_,  **bold**, ~~strike through~~ and `code()`. Note that underscores_in_words are ignored in [GitHub flavored](https://help.github.com/articles/github-flavored-markdown) Markdown.
+
+![picture alt](http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png "Title is optional")
+
+> Blockquotes are like quoted text in email replies
+>> And, they can be nested
+
+Bullet lists:
+
+* Bullet lists are easy too
+- Another one
++ Another one
+
+Numbered lists:
+
+1. A numbered list
+2. Which is numbered
+3. With periods and a space
+
+And now some code:
+
+    // Code is just text indented a bit
+    which(is_easy) to_remember();
+
+~~~
+// Un-indented code blocks work too
+
+if (this_is_more_code == true && !indented) {
+    // tild wrapped code blocks, also not indented
+}
+~~~
+
+Text with  
+two trailing spaces  
+(on the right)  
+can be used  
+for things like poems  
+
+### Horizontal rules
+
+* * * *
+****
+--------------------------
+
+<div style="font-size: 20px; color:green; text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3);">
+This is <b>embedded HTML</b>
+</div>
+
+## Tables ##
+
+| Header | Header | Right  |
+| ------ | ------ | -----: |
+|  Cell  |  Cell  |   $10  |
+|  Cell  |  Cell  |   $20  |
+
+* Outer pipes on tables are optional
+* Colon used for alignment (right versus left)

src/client/less/layout.less

@@ -0,0 +1,35 @@
+
+// Reset browser styles
+
+//ol, ul, li,
+html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, b, u, i, form, label, table, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+body {
+  line-height: 1;
+}
+:focus {
+ outline: 0;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+// Basic styling
+
+body {
+  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
+  font-size: 16px;
+  color: #333;
+}
+
+article {
+  margin: 0 50px 100px;
+}

src/client/less/markdown.less

@@ -0,0 +1,89 @@
+.markdown-body {
+  font-size: 16px;
+  color: #666;
+
+  p, blockquote, ul, ol, dl, li, table, pre, h5, h6 {
+    margin: 15px 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1.2;
+    color: #0d0d0d;
+  }
+  h1, h2 {
+    font-weight: normal;
+  }
+  h1 {
+    margin: 80px 0 50px;
+    font-size: 52px;
+  }
+  h2 {
+    margin: 60px 0 40px;
+    font-size: 42px;
+  }
+  h3 {
+    margin: 40px 0;
+    font-size: 28px;
+  }
+  h4 {
+    margin: 20px 0;
+    font-size: 20px;
+  }
+  h5 {
+    font-size: 18px;
+  }
+  h6 {
+    font-size: 16px;
+  }
+
+  ul, ol {
+    margin: 0 0 45px;
+    color: #666;
+  }
+
+  blockquote {
+    margin: 20px 0 20px 10px;
+    padding-left: 10px;
+    border-left: 5px solid #ccc;
+    font-style: italic;
+    color: #888;
+  }
+
+  code, pre {
+    border-radius: 3px;
+    background-color: #F8F8F8;
+    font: 14px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    color: inherit;
+  }
+
+  code {
+    border: 1px solid #EAEAEA;
+    margin: 0 2px;
+    padding: 0 5px;
+  }
+
+  pre {
+    border: 1px solid #CCCCCC;
+    line-height: 1.2;
+    overflow: auto;
+    padding: 6px 10px;
+  }
+
+  pre > code {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  table {
+    margin: 0 0 45px;
+  }
+  td, th {
+    border: 1px solid #CCCCCC;
+    padding: 8px 16px;
+  }
+  th {
+    background-color: #F8F8F8;
+  }
+
+}

src/client/less/style.less

@@ -0,0 +1,2 @@
+@import "layout.less";
+@import "markdown.less";

src/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "slim-wiki",
+  "version": "0.0.0",
+
+  "devDependencies": {
+    "grunt": "0.4.x",
+    "grunt-contrib-clean": "0.6.x",
+    "grunt-contrib-concat": "0.5.x",
+    "grunt-contrib-copy": "0.8.x",
+    "grunt-contrib-cssmin": "0.12.x",
+    "grunt-contrib-less": "1.0.x",
+    "grunt-contrib-uglify": "0.9.x",
+    "grunt-contrib-watch": "0.6.x",
+    "grunt-usemin": "3.0.0",
+    "load-grunt-tasks": "3.2.x"
+  }
+}

src/server/layout/page.php

@@ -6,8 +6,15 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
 
   <title>Slim Wiki</title>
+
+  <base href="<?php echo $baseUrl; ?>/">
+
+  <!-- build:css client/css/style.css -->
+  <link rel="stylesheet" href="../dist/client/css/style.css">
+  <!-- endbuild -->
+
 </head>
 <body>
-  <article><?php echo $articleMarkup ?></article>
+  <article class="markdown-body"><?php echo $articleMarkup; ?></article>
 </body>
 </html>