From 781c5b2e721b7e6d6d7013e1e120a03cd0b12da5 Mon Sep 17 00:00:00 2001 From: til-schneider Date: Sat, 19 Dec 2015 22:48:15 +0100 Subject: [PATCH] Added styling --- .gitignore | 3 + README.md | 25 ++++++ src/Gruntfile.js | 78 ++++++++++++++++ .../cheat-sheets/Markdown_cheat_sheet.md | 79 ++++++++++++++++ src/client/less/layout.less | 35 ++++++++ src/client/less/markdown.less | 89 +++++++++++++++++++ src/client/less/style.less | 2 + src/package.json | 17 ++++ src/server/layout/page.php | 9 +- 9 files changed, 336 insertions(+), 1 deletion(-) create mode 100644 src/Gruntfile.js create mode 100644 src/articles/cheat-sheets/Markdown_cheat_sheet.md create mode 100644 src/client/less/layout.less create mode 100644 src/client/less/markdown.less create mode 100644 src/client/less/style.less create mode 100644 src/package.json diff --git a/.gitignore b/.gitignore index 85e7c1d..b20c1da 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,4 @@ /.idea/ +/dist/ +/src/.tmp/ +/src/node_modules/ diff --git a/README.md b/README.md index 4600dc3..de06a7b 100644 --- a/README.md +++ b/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 -------------- diff --git a/src/Gruntfile.js b/src/Gruntfile.js new file mode 100644 index 0000000..5c79826 --- /dev/null +++ b/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' + } + } + + }); + +}; diff --git a/src/articles/cheat-sheets/Markdown_cheat_sheet.md b/src/articles/cheat-sheets/Markdown_cheat_sheet.md new file mode 100644 index 0000000..9c3253c --- /dev/null +++ b/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 + +* * * * +**** +-------------------------- + +
+This is embedded HTML +
+ +## Tables ## + +| Header | Header | Right | +| ------ | ------ | -----: | +| Cell | Cell | $10 | +| Cell | Cell | $20 | + +* Outer pipes on tables are optional +* Colon used for alignment (right versus left) diff --git a/src/client/less/layout.less b/src/client/less/layout.less new file mode 100644 index 0000000..86ae87c --- /dev/null +++ b/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; +} diff --git a/src/client/less/markdown.less b/src/client/less/markdown.less new file mode 100644 index 0000000..be157b4 --- /dev/null +++ b/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; + } + +} diff --git a/src/client/less/style.less b/src/client/less/style.less new file mode 100644 index 0000000..a0fc077 --- /dev/null +++ b/src/client/less/style.less @@ -0,0 +1,2 @@ +@import "layout.less"; +@import "markdown.less"; diff --git a/src/package.json b/src/package.json new file mode 100644 index 0000000..5602c99 --- /dev/null +++ b/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" + } +} diff --git a/src/server/layout/page.php b/src/server/layout/page.php index 7cb61c9..5c6b3f3 100644 --- a/src/server/layout/page.php +++ b/src/server/layout/page.php @@ -6,8 +6,15 @@ Slim Wiki + + + + + + + -
+