Merge pull request #1 from gryf/newlook

Changing the apperance of the main wmaker site
2025-12-17 11:10:18 +01:00 · 2019-02-14 21:31:21 +00:00
parent 2a987fa536 37b2256810
commit ac8f421a41
36 changed files with 825 additions and 205 deletions
--- a/5
+++ b/5
@@ -1,5 +0,0 @@
-To keep the same formatting please consider using
-
-tidy -i -m 130 -m *.php
-
-after modifying the sources.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,27 @@
+Window Maker webpage source
+===========================
+
+This is a web page source files. All of the files should be proper markdown
+files accepted by [Jekyll](https://jekyllrb.com) static site generator.
+
+Build/serve
+-----------
+
+In order to build the site, you'll need Jekyll framework installed. Easiest way
+to achieve it, is to install it from system repositories.
+
+If your distribution doesn't contain it (even in external ones, like PPA for
+Ubuntu, AUR for Arch or some portage overlay from Gentoo), that it might be
+installed locally using [Bundler](https://github.com/bundler/bundler), which
+typical usage would be as follows:
+
+```
+$ cd window-maker.github.io && bundler init
+$ bundler add jekyll
+$ bundler exec jekyll serve
+```
+
+which will initialize gemfile, add jekyll to it, and then perform `jekyll serve`
+which underneath will build the site and than run simple http server on
+`http://localhost:4000` in development mode. More about jekyll you can find [on
+it's page](https://jekyllrb.com/docs)
--- a/_includes/dock.html
+++ b/_includes/dock.html
@@ -1,37 +0,0 @@
-  <div id="dock">
-    <table width="64" height="500" border="0" cellpadding="0" cellspacing="0">
-      <tr>
-        <td><a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/img/homewmaker.png" alt="Home" width="60" height="81"></a></td>
-      </tr>
-
-      <tr>
-        <td><a href="{{ site.baseurl }}/news"><img src=
-        "{{ site.baseurl }}/img/news.png" alt="News" width="60" height="81"></a></td>
-      </tr>
-
-      <tr>
-        <td><a href="{{ site.baseurl }}/docs"><img src=
-        "{{ site.baseurl }}/img/docs.png" alt="Documentation" width="60" height="81"></a></td>
-      </tr>
-
-      <tr>
-        <td><a href="{{ site.baseurl }}/lists"><img src="{{ site.baseurl }}/img/mailing_list.png" alt="Mailing Lists" width="60" height=
-        "81"></a></td>
-      </tr>
-
-      <tr>
-        <td><a href="{{ site.baseurl }}/dev"><img src="{{ site.baseurl }}/img/development.png" alt="Development" width="60" height=
-        "81"></a></td>
-      </tr>
-
-      <tr>
-        <td><a href="{{ site.baseurl }}/themes"><img src="{{ site.baseurl }}/img/themes.png" alt="Themes" width="60" height=
-        "81"></a></td>
-      </tr>
-
-      <tr>
-        <td><a href="{{ site.baseurl }}/links"><img src="{{ site.baseurl }}/img/links.png" alt="Links" width="60" height=
-        "81"></a></td>
-      </tr>
-    </table>
-  </div>
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,5 +0,0 @@
-          </div>
-        </td>
-      </tr>
-    </table>
-  </div>
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,10 +0,0 @@
-  <div id="inhalt">
-    <table width="100%">
-      <tr>
-        <td width="100%">
-          <a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/img/header.png" style="min-width:700px" width="95%" alt="title bar"></a>
-      </tr>
-      <tr>
-        <td width="100%">
-          <div>
-
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,25 +1,64 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-  <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
-
+<!DOCTYPE html>
+<html>
+  <head>
    <title>Window Maker: {{ page.title }}</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
-  <link href="{{ site.baseurl }}/title.css" rel="stylesheet" type="text/css" />
-</head>
-
-<body>
-  {% include dock.html %}{% include header.html %}
-
-  <div>
-    <table class="inner" border="0" cellpadding="1" cellspacing="1">
-      <tr>
-        <td content="content" colspan="2" valign="top">
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ site.baseurl }}/style.css" media="screen">
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
+    <meta name="viewport"
+      content="width=device-width, minimumscale=1.0, maximum-scale=1.0">
+  </head>
+  <body>
+    <div id="wrapper">
+      <header>
+        <h1>
+          <a href="{{ site.baseurl }}/">
+            <span class="first">Window</span><span class="second">Maker</span>
+          </a>
+        </h1>
+      </header>
+      <aside>
+        <nav class="menu">
+          <ul>
+            <li id="home" title="Home">
+              <a href="{{ site.baseurl }}/">Home</a>
+            </li>
+            <li id="news" title="News">
+              <a href="{{ site.baseurl }}/news">News</a>
+            </li>
+            <li id="docs" title="Documentation">
+              <a href="{{ site.baseurl }}/docs">Documentation</a>
+            </li>
+            <li id="mail" title="Mailing lists">
+              <a href="{{ site.baseurl }}/lists">Mailing</a>
+            </li>
+            <li id="devel" title="Development">
+              <a href="{{ site.baseurl }}/dev">Development</a>
+            </li>
+            <li id="themes" title="Themes">
+              <a href="{{ site.baseurl }}/themes">Themes</a>
+            </li>
+            <li id="links" title="Links">
+              <a href="{{ site.baseurl }}/links">Links</a>
+            </li>
+          </ul>
+        </nav>
+      </aside>
+      <article>
        {{ content }}
-        </td>
-      </tr>
-    </table>
-
-  {% include footer.html %}
-
-</body>
+      </article>
+      <div id="titlebar">
+        <div id="minimize"></div>
+        <div id="titlebar-inner">Window Maker: {{ page.title }}</div>
+        <div id="close"></div>
+      </div>
+      <div id="resizebar">
+        <div id="resizel"></div>
+        <div id="resizebar-inner">
+        </div>
+        <div id="resizer"></div>
+      </div>
+    </div>
+  </body>
 </html>
--- a/img/close.png
+++ b/img/close.png
--- a/img/development.png
+++ b/img/development.png
--- a/img/dock_devel.png
+++ b/img/dock_devel.png
--- a/img/dock_docs.png
+++ b/img/dock_docs.png
--- a/img/dock_home.png
+++ b/img/dock_home.png
--- a/img/dock_links.png
+++ b/img/dock_links.png
--- a/img/dock_mail.png
+++ b/img/dock_mail.png
--- a/img/dock_news.png
+++ b/img/dock_news.png
--- a/img/dock_themes.png
+++ b/img/dock_themes.png
--- a/img/docs.png
+++ b/img/docs.png
--- a/img/gnustep.svg
+++ b/img/gnustep.svg
@@ -0,0 +1,261 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   id="svg3178"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="gnustep.svg">
+  <title
+     id="title4314">GNUstep logo</title>
+  <defs
+     id="defs3180">
+    <linearGradient
+       id="linearGradient4306">
+      <stop
+         id="stop4308"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:0;" />
+      <stop
+         style="stop-color:#878987;stop-opacity:0.23502304"
+         offset="0.84210527"
+         id="stop4310" />
+      <stop
+         id="stop4312"
+         offset="1"
+         style="stop-color:#000000;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4275">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="0"
+         id="stop4277" />
+      <stop
+         id="stop4279"
+         offset="0.84210527"
+         style="stop-color:#878987;stop-opacity:0.5299539" />
+      <stop
+         style="stop-color:#000000;stop-opacity:1"
+         offset="1"
+         id="stop4281" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4255">
+      <stop
+         id="stop4257"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:0;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="0.84210527"
+         id="stop4261" />
+      <stop
+         id="stop4259"
+         offset="1"
+         style="stop-color:#646564;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4225">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop4227" />
+      <stop
+         style="stop-color:#808080;stop-opacity:1"
+         offset="1"
+         id="stop4229" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4169">
+      <stop
+         style="stop-color:#000000;stop-opacity:1"
+         offset="0"
+         id="stop4171" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="1"
+         id="stop4173" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4114">
+      <stop
+         style="stop-color:#91959c;stop-opacity:1;"
+         offset="0"
+         id="stop4116" />
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="1"
+         id="stop4118" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4225"
+       id="linearGradient4231"
+       x1="145"
+       y1="1017.3622"
+       x2="195"
+       y2="977.36218"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-90,-5.00002)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4169"
+       id="linearGradient4241"
+       gradientUnits="userSpaceOnUse"
+       x1="45"
+       y1="992.36218"
+       x2="45"
+       y2="959.36218"
+       gradientTransform="translate(5,-5.00002)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4255"
+       id="radialGradient4283"
+       gradientUnits="userSpaceOnUse"
+       cx="145"
+       cy="45"
+       fx="145"
+       fy="45"
+       r="45"
+       gradientTransform="translate(-94.99975,957.36216)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4306"
+       id="radialGradient4285"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-95,957.36216)"
+       cx="145"
+       cy="45"
+       fx="145"
+       fy="45"
+       r="45" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4"
+     inkscape:cx="49.100202"
+     inkscape:cy="15.372898"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:snap-bbox="false"
+     inkscape:window-width="1614"
+     inkscape:window-height="955"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:snap-grids="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3186"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata3183">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>GNUstep logo</dc:title>
+        <dc:date>21-06-2014</dc:date>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Roman &quot;gryf&quot; Dobosz</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:rights>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:rights>
+        <dc:subject>
+          <rdf:Bag>
+            <rdf:li>Window Maker</rdf:li>
+            <rdf:li>wmaker</rdf:li>
+            <rdf:li>GNUstep</rdf:li>
+          </rdf:Bag>
+        </dc:subject>
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/by-nc/3.0/" />
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/by-nc/3.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Notice" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Attribution" />
+        <cc:prohibits
+           rdf:resource="http://creativecommons.org/ns#CommercialUse" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-952.36218)">
+    <path
+       id="path3188"
+       style="fill:#000000;fill-opacity:1;stroke:none"
+       d="m 50,957.36216 c -24.852814,0 -45,20.14719 -45,45.00004 0,11.5297 4.3383125,22.0375 11.46875,30 l 18.53125,0 0,-30 30,0 0,-30.00004 18.53125,0 c -8.239553,-9.20096 -20.20814,-15 -33.53125,-15 z m 33.53125,15 C 90.661688,980.32459 95,990.83246 95,1002.3622 l 0,-30.00004 -11.46875,0 z M 95,1002.3622 c 0,24.8528 -20.147186,45 -45,45 l 45,0 0,-45 z m -45,45 c -13.32311,0 -25.291697,-5.7991 -33.53125,-15 l -11.46875,0 0,15 45,0 z"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:none"
+       d="m 14.9834,1030.3415 c -5.3064251,-6.6368 -8.4303119,-13.9941 -9.5316699,-22.4488 -0.502301,-3.8559 -0.3466755,-9.56902 0.3674348,-13.48869 2.2004786,-12.07816 9.2796621,-22.77172 19.5805701,-29.57769 5.560386,-3.67384 11.987597,-6.0428 19.156293,-7.06069 2.693154,-0.3824 9.173995,-0.28472 12.053571,0.18167 9.570754,1.55015 17.807726,5.6436 24.530097,12.19048 l 2.166332,2.10978 -9.151786,0.007 -9.151785,0.007 0,15 0,15.00004 -15,0 -15,0 0,15 0,15 -9.242106,0 -9.242106,0 -1.534845,-1.9197 0,0 z"
+       id="path4122"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:url(#linearGradient4241);fill-opacity:1;stroke:none"
+       d="m 50.000149,958.71479 c -24.10723,0 -36.994945,20.42387 -40.000149,43.64741 5,0 50,0 55,0 0,-5.00002 1.49e-4,-19.99115 1.49e-4,-29.99116 5.5625,0 9.437351,-0.009 14.999851,-0.009 -7.95557,-8.39907 -17.517941,-13.64737 -29.999851,-13.64737 z"
+       id="path4166"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccsc" />
+    <path
+       id="path4210"
+       d="m 65.00025,972.36216 0,30.00004 -30,0 0,30 -18.53125,0 c 8.23955,9.2009 20.20814,15 33.53125,15 24.85281,0 45,-20.1472 45,-45 0,-11.52974 -4.33831,-22.03761 -11.46875,-30.00004 l -18.53125,0 z"
+       style="fill:url(#linearGradient4231);fill-opacity:1;stroke:none"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:url(#radialGradient4283);fill-opacity:1;stroke:none"
+       d="m 65.00025,972.36216 0,30.00004 -30,0 0,30 -18.53125,0 c 8.23955,9.2009 20.20814,15 33.53125,15 24.85281,0 45,-20.1472 45,-45 0,-11.52974 -4.33831,-22.03761 -11.46875,-30.00004 l -18.53125,0 z"
+       id="path4237"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:url(#radialGradient4285);fill-opacity:1;stroke:none"
+       d="m 50,957.36216 c -24.85281,0 -45,20.14719 -45,45.00004 0,11.5297 4.33831,22.0375 11.46875,30 l 18.53125,0 0,-30 30,0 0,-30.00004 18.53125,0 c -8.23955,-9.20096 -20.20814,-15 -33.53125,-15 z"
+       id="path4263"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
--- a/img/header.png
+++ b/img/header.png
--- a/img/homewmaker.png
+++ b/img/homewmaker.png
--- a/img/links.png
+++ b/img/links.png
--- a/img/mailing_list.png
+++ b/img/mailing_list.png
--- a/img/minimize.png
+++ b/img/minimize.png
--- a/img/news.png
+++ b/img/news.png
--- a/img/prefs_devel.png
+++ b/img/prefs_devel.png
--- a/img/prefs_docs.png
+++ b/img/prefs_docs.png
--- a/img/prefs_home.png
+++ b/img/prefs_home.png
--- a/img/prefs_links.png
+++ b/img/prefs_links.png
--- a/img/prefs_mail.png
+++ b/img/prefs_mail.png
--- a/img/prefs_news.png
+++ b/img/prefs_news.png
--- a/img/prefs_themes.png
+++ b/img/prefs_themes.png
--- a/img/themes.png
+++ b/img/themes.png
--- a/img/wmaker.png
+++ b/img/wmaker.png
--- a/img/wmaker_thumb.png
+++ b/img/wmaker_thumb.png
--- a/index.md
+++ b/index.md
@@ -7,25 +7,39 @@ Introduction
 ============

 **Window Maker** is an X11 window manager originally designed to provide
-integration support for the [GNUstep](http://gnustep.org) Desktop Environment.
-In every way possible, it reproduces the elegant look and feel of the
-[NEXTSTEP](http://en.wikipedia.org/wiki/NEXTSTEP) user interface. It is fast,
-feature rich, easy to configure, and easy to use. It is also free software,
-with contributions being made by programmers from around the world.
+integration support for the [GNUstep](http://gnustep.org) Desktop Environment,
+although it can run stand alone. In every way possible, it reproduces the
+elegant look and feel of the [NEXTSTEP](http://en.wikipedia.org/wiki/NEXTSTEP)
+user interface.

-Window Maker has a stable user interface since many years and comes with a
-powerful GUI configuration editor called WPrefs, which removes the need to edit
-text-based config files by hand. It supports running
-[dockapps](https://www.dockapps.net) which make everyday tasks such as
-monitoring system performance and battery usage, mounting devices or connecting
-to the internet very easy. Please see the [features](features.html) section for
-more specifics on what Window Maker can do, and how it compares with other
-popular window managers.
+[![Default Window Maker config](img/wmaker_thumb.png)](img/wmaker.png)
+{:.screenshot .center}
+
+Window Maker on first run
+{:.caption .center}
+
+The key features of Window Maker are:
+
+- Stacking window manager with ability for semi-automatic tiling management
+- Lightweight and blazing fast
+- Easy to use
+- Highly configurable
+- Small, dockable apps ([dockapps](https://www.dockapps.net))
+- Human readable config files and GUI prefs application
+- Free and open source
+- Active community from all of the world
+
+See [features](features.html) section for more.

 Download
-========
+--------

-The latest
-[stable](http://repo.or.cz/w/wmaker-crm.git/shortlog/refs/heads/master) version
-is [0.95.8](pub/source/release/WindowMaker-0.95.8.tar.gz)
-released on 11.03.2017. See the [NEWS](news) section for more information.
+Many distributions already have Window Maker included in their software
+repositories, so it could be installed directly from there. Other sources are
+listed below:
+
+- Latest source of stable version is 
+  [0.95.8](pub/source/release/WindowMaker-0.95.8.tar.gz), released on
+  11.03.2017. See the [NEWS](news) section for more information.
+- Source code is also available through the
+  [git repository](http://repo.or.cz/w/wmaker-crm.git)
--- a/style.css
+++ b/style.css
@@ -0,0 +1,442 @@
+/* common */
+html {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #515171;
+    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+}
+
+header {
+    padding: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+h1 {font-size: 1.7em;}
+a:link {color: #1e527e;}
+a:hover {color: #2c7abc;}
+a:visited {color: #371e7e;}
+a:visited {color: #574882;}
+img {max-width: 100%;}
+
+pre {
+    color: #dddddd;
+    overflow-x: auto;
+    padding: 0.3em;
+}
+
+.caption {
+    font-style: italic;
+    font-size: 0.8em;
+    line-height: 5px;
+    margin-bottom: 3em;
+}
+
+p.center {text-align: center;}
+
+p.screenshot a img {
+    border: 1px solid black;
+    box-shadow: 3px 7px 7px #606060;
+    top: 0;
+    bottom:0;
+    left: 0;
+    right:0;
+    margin: auto;
+}
+
+/* logo */
+header h1 a {
+    font-family: "DejaVu Sans", sans-serif;
+    text-shadow: 0 4px 4px #666;
+    display: block;
+    padding-left: 1.4em;
+    background-image: url(/img/gnustep.svg);
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    text-decoration: none;
+    color: black;
+    font-size: 1.8em;
+}
+
+header h1 a:link {text-decoration: none;}
+header h1 a span.second {color: white;}
+header h1 a span.first {color: black;}
+
+/* wrapper decorations */
+#minimize, #close {
+    margin: 0;
+    padding: 0;
+    height: 19px;
+    width: 19px;
+    border-left: 1px solid #b6b6b6;
+    border-top: 1px solid #b6b6b6;
+    border-right: 1px solid #616161;
+    border-bottom: 1px solid #616161;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+#minimize {
+    margin-right: 1px;
+    background-image: url(/img/minimize.png);
+}
+
+#close {
+    margin-left: 1px;
+    background-image: url(/img/close.png);
+}
+
+#titlebar {
+    position: absolute;
+    top: 0px;
+    display: inline-flex;
+    width: 100%;
+    margin: 0;
+    margin-top: 0px;
+    padding: 0;
+    background: black;
+    height: 22px;
+}
+
+#titlebar-inner {
+    margin: 0;
+    padding: 0;
+    margin-top: 0px;
+    background: black;
+    height: 19px;
+    width: 100%;
+    border-left: 1px solid #b6b6b6;
+    border-top: 1px solid #b6b6b6;
+    border-right: 1px solid #616161;
+    border-bottom: 1px solid #616161;
+    font-size: 0.8em;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    vertical-align: middle;
+}
+
+#wrapper {
+    position: relative;
+    width: 800px;
+    margin: 0 auto;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    box-shadow: 0 0 15px #000000;
+    background-color: #aeaaae;
+    border: 1px solid black;
+}
+
+#resizel, #resizer {
+    margin: 0;
+    padding: 0;
+    height: 6px;
+    width: 28px;
+    border-left: 1px solid white;
+    border-top: 1px solid white;
+    border-right: 1px solid #555555;
+}
+
+#resizebar {
+    position: absolute;
+    bottom: 2px;
+    display: inline-flex;
+    width: 100%;
+    margin: 0;
+    margin-top: 0px;
+    padding: 0;
+    background: #aaaaaa;
+    height: 5px;
+    border-top: 1px solid #555555;
+}
+
+#resizebar-inner {
+    margin: 0;
+    padding: 0;
+    margin-top: 0px;
+    height: 6px;
+    width: 100%;
+    border-left: 1px solid white;
+    border-top: 1px solid white;
+    border-right: 1px solid #555555;
+}
+
+/* pre/code highlighted theme - taken from wombat256grf vim colorscheme */
+.highlight { background-color: #242424; }
+.highlight .c { color: #99968b; font-style: italic} /* Comment */
+.highlight .err { color: #dddddd} /* Error */
+.highlight .g { color: #dddddd } /* Generic */
+.highlight .k { color: #87afff } /* Keyword */
+.highlight .l { color: #dddddd } /* Literal */
+.highlight .n { color: #dddddd } /* Name */
+.highlight .o { color: #dddddd } /* Operator */
+.highlight .x { color: #dddddd } /* Other */
+.highlight .p { color: #dddddd } /* Punctuation */
+.highlight .cm { color: #99968b; font-style: italic} /* Comment.Multiline */
+.highlight .cp { color: #e5786d } /* Comment.Preproc */
+.highlight .c1 { color: #99968b; font-style: italic} /* Comment.Single */
+.highlight .cs { color: #99968b; font-style: italic} /* Comment.Special */
+.highlight .gd { color: #dddddd } /* Generic.Deleted */
+.highlight .ge { color: #dddddd } /* Generic.Emph */
+.highlight .gr { color: #dddddd } /* Generic.Error */
+.highlight .gh { color: #f6f3e8; font-weight: bold} /* Generic.Heading */
+.highlight .gi { color: #dddddd } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #dddddd } /* Generic.Prompt */
+.highlight .gs { color: #dddddd } /* Generic.Strong */
+.highlight .gu { color: #f6f3e8; font-weight: bold} /* Generic.Subheading */
+.highlight .gt { color: #dddddd } /* Generic.Traceback */
+.highlight .kc { color: #87afff } /* Keyword.Constant */
+.highlight .kd { color: #87afff } /* Keyword.Declaration */
+.highlight .kn { color: #87afff } /* Keyword.Namespace */
+.highlight .kp { color: #87afff } /* Keyword.Pseudo */
+.highlight .kr { color: #87afff } /* Keyword.Reserved */
+.highlight .kt { color: #caeb82 } /* Keyword.Type */
+.highlight .ld { color: #dddddd } /* Literal.Date */
+.highlight .m { color: #e5786d } /* Literal.Number */
+.highlight .s { color: #95e454; font-style: italic} /* Literal.String */
+.highlight .na { color: #caeb82 } /* Name.Attribute */
+.highlight .nb { color: #dddddd } /* Name.Builtin */
+.highlight .nc { color: #dddddd } /* Name.Class */
+.highlight .no { color: #e5786d } /* Name.Constant */
+.highlight .nd { color: #dddddd } /* Name.Decorator */
+.highlight .ni { color: #ffdead } /* Name.Entity */
+.highlight .ne { color: #dddddd } /* Name.Exception */
+.highlight .nf { color: #caeb82 } /* Name.Function */
+.highlight .nl { color: #dddddd } /* Name.Label */
+.highlight .nn { color: #dddddd } /* Name.Namespace */
+.highlight .nx { color: #dddddd } /* Name.Other */
+.highlight .py { color: #dddddd } /* Name.Property */
+.highlight .nt { color: #87afff } /* Name.Tag */
+.highlight .nv { color: #caeb82 } /* Name.Variable */
+.highlight .ow { color: #dddddd } /* Operator.Word */
+.highlight .w { color: #dddddd } /* Text.Whitespace */
+.highlight .mf { color: #e5786d } /* Literal.Number.Float */
+.highlight .mh { color: #e5786d } /* Literal.Number.Hex */
+.highlight .mi { color: #e5786d } /* Literal.Number.Integer */
+.highlight .mo { color: #e5786d } /* Literal.Number.Oct */
+.highlight .sb { color: #95e454; font-style: italic } /* Literal.String.Backtick */
+.highlight .sc { color: #95e454; font-style: italic } /* Literal.String.Char */
+.highlight .sd { color: #95e454; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #95e454; font-style: italic } /* Literal.String.Double */
+.highlight .se { color: #95e454; font-style: italic } /* Literal.String.Escape */
+.highlight .sh { color: #95e454; font-style: italic } /* Literal.String.Heredoc */
+.highlight .si { color: #95e454; font-style: italic } /* Literal.String.Interpol */
+.highlight .sx { color: #95e454; font-style: italic } /* Literal.String.Other */
+.highlight .sr { color: #95e454; font-style: italic } /* Literal.String.Regex */
+.highlight .s1 { color: #95e454; font-style: italic } /* Literal.String.Single */
+.highlight .ss { color: #95e454; font-style: italic } /* Literal.String.Symbol */
+.highlight .bp { color: #dddddd } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #caeb82 } /* Name.Variable.Class */
+.highlight .vg { color: #caeb82 } /* Name.Variable.Global */
+.highlight .vi { color: #caeb82 } /* Name.Variable.Instance */
+.highlight .il { color: #e5786d } /* Literal.Number.Integer.Long */
+
+.gutter{
+    background-color: black;
+    color: #857b6f;
+}
+
+.post > .highlight .lineno {
+    display:inline-block;
+    padding: 0 5px;
+    border-right:1px solid #ccc;
+}
+
+.post > .highlight pre code {
+    display: block;
+    white-space: pre;
+    overflow-x: auto;
+    word-wrap: normal;
+}
+
+/* main content */
+article {
+    padding: 1em;
+}
+
+/*
+ * size specific styles
+ */
+
+/* large screens. size: 64 * 2 + width of the wrapper (800) == 928 + margin */
+@media screen and (min-width: 940px) {
+
+    /* menu as a vertical dock */
+    aside {
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: 64px;
+    }
+
+    nav.menu li#home {background-image: url(/img/dock_home.png);}
+    nav.menu li#news {background-image: url(/img/dock_news.png);}
+    nav.menu li#docs {background-image: url(/img/dock_docs.png);}
+    nav.menu li#devel {background-image: url(/img/dock_devel.png);}
+    nav.menu li#themes {background-image: url(/img/dock_themes.png);}
+    nav.menu li#links {background-image: url(/img/dock_links.png);}
+    nav.menu li#mail {background-image: url(/img/dock_mail.png);}
+
+    nav.menu {
+        padding: 0;
+    }
+
+    nav.menu ul {
+        padding: 0;
+        margin: 0;
+        list-style:none;
+    }
+
+    nav.menu li {
+        float: left;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: inline;
+    }
+
+    nav.menu a {
+        padding: 3px 12px;
+        text-decoration: none;
+        color: #999;
+        line-height: 100%;
+    }
+
+    nav.menu a:hover {
+        color: #BBB;
+    }
+
+    nav.menu form {
+        display: inline;
+    }
+
+    nav.menu .current a {
+        color: #fff;
+    }
+
+    nav.menu li {
+        display: block;
+        width: 64px;
+        height: 64px;
+        border: 0;
+        padding:0;
+    }
+
+    nav.menu li a {
+        display: block;
+        width: 64px;
+        height: 64px;
+        border: 0;
+        padding:0;
+        line-height: 0;
+        font-size: 0;
+        color: transparent;
+    }
+
+}
+
+/* small screens */
+@media screen and (max-width: 939px) {
+
+    #wrapper {
+        width: 100%;
+        margin: 0;
+        border: 0;
+    }
+
+    /* menu as a horizontal, scrollable icon list */
+    article {
+        width: auto;
+    }
+
+    nav.menu {
+        padding: 0 1em 0 1em;
+    }
+
+    nav.menu ul {
+        border: 3px groove black;
+        padding: 0;
+        margin: 0;
+        list-style:none;
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+    }
+
+    nav.menu li {
+        float: left;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: inline;
+    }
+
+    nav.menu a {
+        padding: 3px 12px;
+        text-decoration: none;
+        color: #999;
+        line-height: 100%;
+    }
+
+    nav.menu a:hover {
+        color: #BBB;
+    }
+
+    nav.menu form {
+        display: inline;
+    }
+
+    nav.menu .current a {
+        color: #fff;
+    }
+
+    nav.menu li {
+        display: block;
+        width: 64px;
+        height: 64px;
+        border: 0;
+        padding:0;
+    }
+
+    nav.menu li a {
+        display: block;
+        width: 64px;
+        height: 64px;
+        border: 0;
+        padding:0;
+        line-height: 0;
+        font-size: 0;
+        color: transparent;
+    }
+
+    nav.menu li#home {background-image: url(/img/prefs_home.png);}
+    nav.menu li#news {background-image: url(/img/prefs_news.png);}
+    nav.menu li#docs {background-image: url(/img/prefs_docs.png);}
+    nav.menu li#devel {background-image: url(/img/prefs_devel.png);}
+    nav.menu li#themes {background-image: url(/img/prefs_themes.png);}
+    nav.menu li#links {background-image: url(/img/prefs_links.png);}
+    nav.menu li#mail {background-image: url(/img/prefs_mail.png);}
+
+    .highlight {
+        padding: 0;
+        margin: 0;
+    }
+
+}
+
+/* very small - usually mobile phone screens */
+@media screen and (max-width: 600px) {
+
+    header h1 a {
+        font-size: 1.5em;
+    }
+
+}
--- a/title.css
+++ b/title.css
@@ -1,106 +0,0 @@
-body  {
-	color: #FFF;
-	font-size: 1.0em;
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	background-color: #505075;
-	border-size: 0px;
-	margin-top: 0px;
-	margin-right: 0px;
-	margin-bottom: 0px;
-	margin-left: 0px;
-}
-
-.hpadding   {
-	color: #483d8b;
-	font-weight: normal;
-	font-size: 14px;
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	padding: 0px 10px
-}
-
-.textpadding    {
-	color: white;
-	font-size: 12px;
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	line-height: normal;
-	margin: 0;
-	padding: 0 10px
-}
-
-a        {
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-}
-
-table .inner {
-	margin-left: 1em;
-	width: 90%;
-}
-
-h1       {
-	color: #ebdeff;
-	font-size: 20pt;
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	font-style: italic;
-	font-weight: bold;
-	line-height: 22pt
-}
-
-h2       {
-	color: #ebdeff;
-	font-size: 18pt;
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	font-style: italic;
-	line-height: 20pt
-}
-
-h3        {
-	color: #e8fd00;
-	font-size: 14pt;
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	font-style: normal;
-	line-height: 16pt
-}
-
-h4       {
-	color: #FFF;
-	font-size: 12pt;
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	font-style: normal;
-	font-weight: bolder;
-	line-height: 12pt
-}
-
-.caption {
-	font-size: 11pt;
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
-}
-
-a:hover, a:focus   {
-	text-decoration: underline;
-	font-style: italic;
-	color: #CCC;
-}
-
-a:link, a:visited, a:active {
-	text-decoration: underline;
-	color: #FFF;
-}
-
-img {
-	border: none;
-}
-
-#dock {
-	position: absolute; top: 100px; left: 5px;
-}
-
-#inhalt {
-        position: absolute; top: 40px; left: 100px;
-        min-width: 800px;
-}
-div.screenshot {
-      height: 250px;
-      border: none;
-      float: left;
-      margin: 5px;
-   }