monochromatic

monochromatic blog: http://blog.z3bra.org
git clone git://z3bra.org/monochromatic
Log | Files | Refs

commit cba3e08fed51fa7b0a3ef9259a17b1599433534f
Author: Willy Goiffon <w.goiffon@gmail.com>
Date:   Thu,  8 Aug 2013 16:56:06 +0200

first commit ! welcome online.

Diffstat:
2013/08/test-your-css.html | 101+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
about.html | 69+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
body.template | 15+++++++++++++++
buffer.html | 19+++++++++++++++++++
css/monochrome.css | 168+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
css/phone.css | 32++++++++++++++++++++++++++++++++
foot.template | 7+++++++
head.template | 12++++++++++++
index.html | 36++++++++++++++++++++++++++++++++++++
post.sh | 5+++++
update.sh | 8++++++++
11 files changed, 472 insertions(+), 0 deletions(-)

diff --git a/2013/08/test-your-css.html b/2013/08/test-your-css.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'/> + <link rel='stylesheet' href='/css/monochrome.css'/> + <link rel='stylesheet' href='/css/phone.css' media='screen and (max-width: 540px)'/> + <title>monochromatic</title> + </head> + <body> + <header> + <a href='/'><h1>Monochromatic</h1></a> <h2>&mdash; <a href='/about.html'>z3bra</a>, the stripes appart</h2> + </header> + <div id='wrapper'> + <section> + <h1> + <a href='#'>Test your CSS !</a> + </h1> + <h2> + &mdash; 8 August, 2013 + </h2> + + <article> + <h3>Text Formatting</h3> + <p> + Yay ! Here we are. Here is somethig <em>important</em>. There is also something <strong>strong</strong>.<br /> + We are, of course, in a paragraph. And it contains an inline quotation :<br /> + <cite>Richard M. Stallman</cite> said &quote;<q>La cuisine indienne favorise les plats curryeux.</q>&quote;<br /> + But... What about blockquotes ?! Let's test : + + <cite>Douglas Everett</cite> + <blockquote> + <p> + There are some people who live in a dream world, and there are some who face reality; + and then there are those who turn one into the other. + </p> + </blockquote> + That was a fine quote. Now, go on ! + </p> + + <h3>Long texts</h3> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </p> + + <h3>Tables and code</h3> + <p> + <table> + <thead> + <tr> + <th>column #0</th> + <th>column #1</th> + <th>column #2</th> + <th>column #3</th> + <th>column #4</th> + </tr> + </thead> + <tbody> + <tr> <td>cell #0-0</td> <td>cell #0-1</td> <td>cell #0-2</td> <td>cell #0-3</td> <td>cell #0-4</td> </tr> + <tr> <td>cell #1-0</td> <td>cell #1-1</td> <td>cell #1-2</td> <td>cell #1-3</td> <td>cell #1-4</td> </tr> + <tr> <td>cell #2-0</td> <td>cell #2-1</td> <td>cell #2-2</td> <td>cell #2-3</td> <td>cell #2-4</td> </tr> + <tr> <td>cell #3-0</td> <td>cell #3-1</td> <td>cell #3-2</td> <td>cell #3-3</td> <td>cell #3-4</td> </tr> + <tr> <td>cell #4-0</td> <td>cell #4-1</td> <td>cell #4-2</td> <td>cell #4-3</td> <td>cell #4-4</td> </tr> + </tbody> + </table> + Pretty nice isn't it ?<br /> + <br /> + Here is some code, using the &lt;pre&gt; tag (remember to escape special chars !)<br /> + <code> +<pre> +index.html +<hr/> +&lt;html&gt; + &lt;body&gt; + &lt;p&gt;Hello, World!&lt;/p&gt; + &lt;/body&gt; +&lt;/html&gt; +</pre> + </code> + <code> +<pre> +main.c +<hr/> +#include &lt;stdio.h&gt; +int +main (int argc, char **argv) +{ + puts("Hello, World!"); +} +</pre> + </code> + </p> + </article> + </section> + </div> + <footer> + &copy; 2013 &mdash; released under <a href='http://www.wtfpl.net/about/'>WTFPL</a> + &mdash; contact : &lt;<a href='mailto://willy@mailoo.org'>willy at mailoo dot org</a>&gt; + </footer> + </body> +</html> +<!-- vim: set sw=2 et ai: --> diff --git a/about.html b/about.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'/> + <link rel='stylesheet' href='/css/monochrome.css'/> + <link rel='stylesheet' href='/css/phone.css' media='screen and (max-width: 540px)'/> + <title>monochromatic</title> + </head> + <body> + <header> + <a href='/'><h1>Monochromatic</h1></a> <h2>&mdash; <a href='/about.html'>z3bra</a>, the stripes appart</h2> + </header> + <div id='wrapper'> + <section> + <article> + Hi everybody ! I am Willy Goiffon (aka 'z3bra').<br /> + I am a french student in computer science, born in the early 90's. + + <h3>Monochromatic</h3> + + <p> + This is my online blog.<br /> + Here, I'll shows you what's behind the stripes (yes, a white skin). + I created this to have a corner on the web to share anything that bother me, mostly about computing, + and particularly about linux (or GNU/Linux for that matters). + </p> + + <h3>Behind monochromatic</h3> + + <p> + The technology behind this blog is very simple : + + <ul> + <li>Home server &mdash; <strong>archlinux</strong></li> + <li>Web server &mdash; <strong>lighttpd</strong></li> + <li>Content &mdash; <strong>static html</strong></li> + <li>Site generator &mdash; <strong>/dev/null</strong></li> + </ul> + So yes, it is written entirely by hand in pure HTML. Why ?<br /> + Because I can. Because I have the time. Because I like to do stuff from scratch. Because it's.. cool ? + </p> + + <h3>Want more of me ?</h3> + + <p> + I am on a few other places online. You want me ? Here I am : + + <ul> + <li><a href='http://gotorious.org/~z3bra/'>gitorious.org</a> &mdash; a few project I own</li> + <li><a href='https://webchat.freenode.net/'>irc.freenode.com</a> &mdash; mostly on #vim-fr and #archlinux-fr</li> + <li><a href='http://quakelive.com'>quakelive.com</a> &mdash; Yeah, I play video games sometimes</li> + <li><a href='http://reddit.com/u/z-brah/'>reddit.com</a> &mdash; Well.. Does it count ?</li> + </ul> + </p> + + <p> + I wish you will enjoy browsing this blog as much as I like to write it.<br /> + So, ladies and gentlemen, have a nice day ! + </p> + </article> + </section> + </div> + <footer> + &copy; 2013 &mdash; released under <a href='http://www.wtfpl.net/about/'>WTFPL</a> + &mdash; contact : &lt;<a href='mailto://willy@mailoo.org'>willy at mailoo dot org</a>&gt; + </footer> + </body> +</html> +<!-- vim: set sw=2 et ai: --> diff --git a/body.template b/body.template @@ -0,0 +1,15 @@ + <div id='wrapper'> + <section> + <a href='#'><h1> + + </h1></a> + <h2> + &mdash; + </h2> + <article> + <p> + + </p> + </article> + </section> + </div> diff --git a/buffer.html b/buffer.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'/> + <link rel='stylesheet' href='/css/monochrome.css'/> + <link rel='stylesheet' href='/css/phone.css' media='screen and (max-width: 540px)'/> + <title>monochromatic</title> + </head> + <body> + <header> + <a href='/'><h1>Monochromatic</h1></a> <h2>&mdash; <a href='/about.html'>z3bra</a>, the stripes appart</h2> + </header> + <footer> + &copy; 2013 &mdash; released under <a href='http://http://www.wtfpl.net/about/'>WTFPL</a> + &mdash; contact : &lt;<a href='mailto://willy@mailoo.org'>willy at mailoo dot org</a>&gt; + </footer> + </body> +</html> +<!-- vim: set sw=2 et ai: --> diff --git a/css/monochrome.css b/css/monochrome.css @@ -0,0 +1,168 @@ +/* vim: set ai sw=4 ts=4 fdm=marker: */ + +/* + * COLORS DEFINITION: + * - background -- #222 + * - def. text -- #888 + * - link text -- #eea + * - link visit -- #ddd + * - main title -- #fff + * - sub titles -- #666 + * + */ + +/* Main blocks style {{{ */ +body { + background-color: #222; + color: #888; + padding: 0; + margin: 0; +} + +#wrapper { + width:800px; + padding: 10px; + margin-left: 128px; + margin-top: 28px; +} + +hr { + width: 40%; + margin-left: 0; + margin-top: 32px; + border: 1px solid #262626; + box-shadow: 0px 1px 1px #000; +} + +header, footer { + background-color: #111; + padding: 10px; +} + +footer { + text-align: center; +} + +article { + margin: none; + padding-left: 20px; +} +/* }}} */ + +/* Titles and headers {{{ */ +h1, h3 { + color: #fff; + text-shadow: 2px 2px 2px #000; + display: inline; +} + +h2 { + color: #666; + display: inline; + font-weight: normal; +} + +header h1 { + font-size: 2.0em; + font-style: italic; +} + +header h2 { + font-size: 1.2em; +} + +section h1 { + font-size: 1.5em; +} + +section h2 { + font-size: 1.0em; +} + +section h3 { + display: block; + font-size:1.5em; +} + +/* }}} */ + +/* Pretty links {{{ */ +a { + color: #eea; + text-shadow: 2px 2px 2px #000; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +a:visited { + text-decoration: line-through; + text-shadow: 0px 0px 0px #222; +} +/* }}} */ + +/* Tables {{{ */ +table { + border-collapse: collapse; + border: 2px solid #333; +} + +table td, table th { + padding:4px; +} + +td { + border: 1px solid #333; +} + +th { + background-color: #333; + color: #fff; + font-weight: bold; +} +/* }}} */ + +/* Coding style (<code>) {{{ */ +code { + font-family: monospace; +} + +pre { + color: #eec; + background-color: #111; + padding: 10px; + border-radius: 10px; + margin-top: 4px; +} + +pre hr { + width: 100%; + margin: 0; + margin-top: 4px; + border: 1px dashed #222; + box-shadow: none; +} +/* }}} */ + +/* Text Formatting {{{ */ +strong { + color: #fff; +} + +em { + font-style: italic; +} + +blockquote, q { + color: #666; + font-style: italic; +} + +blockquote { + border-left: 8px solid #333; + + padding-left: 8px; +} +/* }}} */ diff --git a/css/phone.css b/css/phone.css @@ -0,0 +1,32 @@ +/* vim: set ai sw=4 ts=4 fdm=marker: */ + +/* + * Optimization for mobile phones + * + * Every rule here will override rules of the main CSS + * + */ + +/* Overall style {{{ */ +body { + font-size: 70%; +} + +#wrapper { + width:95%; + margin: auto; +} + +section h2 { + display: block; +} +/* }}} */ + +/* Links {{{ */ +a:hover { + text-decoration: none; +} + +a:active { + text-decoration: none; +} diff --git a/foot.template b/foot.template @@ -0,0 +1,7 @@ + <footer> + &copy; 2013 &mdash; released under <a href='http://www.wtfpl.net/about/'>WTFPL</a> + &mdash; contact : &lt;<a href='mailto://willy@mailoo.org'>willy at mailoo dot org</a>&gt; + </footer> + </body> +</html> +<!-- vim: set sw=2 et ai: --> diff --git a/head.template b/head.template @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'/> + <link rel='stylesheet' href='/css/monochrome.css'/> + <link rel='stylesheet' href='/css/phone.css' media='screen and (max-width: 540px)'/> + <title>monochromatic</title> + </head> + <body> + <header> + <a href='/'><h1>Monochromatic</h1></a> <h2>&mdash; <a href='/about.html'>z3bra</a>, the stripes appart</h2> + </header> diff --git a/index.html b/index.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'/> + <link rel='stylesheet' href='/css/monochrome.css'/> + <link rel='stylesheet' href='/css/phone.css' media='screen and (max-width: 540px)'/> + <title>monochromatic</title> + </head> + <body> + <header> + <a href='/'><h1>Monochromatic</h1></a> <h2>&mdash; <a href='/about.html'>z3bra</a>, the stripes appart</h2> + </header> + <div id='wrapper'> + <section> + <h1> + <a href='/2013/08/test-your-css.html'>Test your CSS !</a> + </h1> + <h2> + &mdash; 8 August, 2013 + </h2> + <article> + <p> + Here a simple page with a few HTML tags.<br /> + It's pretty useful to test your CSS, even if there are no 'difficult' layouts.<br /> + Feel free to download and share ! + </p> + </article> + </section> + </div> + <footer> + &copy; 2013 &mdash; released under <a href='http://www.wtfpl.net/about/'>WTFPL</a> + &mdash; contact : &lt;<a href='mailto://willy@mailoo.org'>willy at mailoo dot org</a>&gt; + </footer> + </body> +</html> +<!-- vim: set sw=2 et ai: --> diff --git a/post.sh b/post.sh @@ -0,0 +1,5 @@ +#!/bin/bash + +[[ -z "$1" ]] && exit 1 + +cat head.template body.template foot.template >> $(date +%Y)/$(date +%m)/${1/ /-}.html diff --git a/update.sh b/update.sh @@ -0,0 +1,8 @@ +#!/bin/bash + +for file in $(find . -name '*.html'); do + if test $(grep -E '</header>&<footer>' $file); then + sed '1,/<\/header>/d;/<footer>/,$d' $file + cat head.template $file foot.template > buffer.html + fi +done