make it flat!

Gemfile

@@ -8,6 +8,6 @@ gem 'rb-fsevent', require: false
 gem "compass-holmes"
 gem 'oily_png'
 gem "sass"
-gem "slim", "~> 1.3.7"
+gem "slim"
 gem "rake"
 gem "susy"

Gemfile.lock

@@ -1,14 +1,14 @@
 GEM
   remote: http://rubygems.org/
   specs:
-    activesupport (3.2.12)
+    activesupport (3.2.14)
-      i18n (~> 0.6)
+      i18n (~> 0.6, >= 0.6.4)
       multi_json (~> 1.0)
     chunky_png (1.2.8)
     coffee-script (2.2.0)
       coffee-script-source
       execjs
-    coffee-script-source (1.6.2)
+    coffee-script-source (1.6.3)
     compass (0.12.2)
       chunky_png (~> 1.2)
       fssm (>= 0.2.7)
@@ -27,24 +27,24 @@ GEM
       tilt
     hike (1.2.3)
     http_parser.rb (0.5.3)
-    i18n (0.6.4)
+    i18n (0.6.5)
-    kramdown (1.0.2)
+    kramdown (1.1.0)
-    listen (1.2.2)
+    listen (1.2.3)
       rb-fsevent (>= 0.9.3)
       rb-inotify (>= 0.9)
       rb-kqueue (>= 0.2)
-    middleman (3.1.2)
+    middleman (3.1.5)
       coffee-script (~> 2.2.0)
       compass (>= 0.12.2)
       execjs (~> 1.4.0)
       haml (>= 3.1.6)
-      kramdown (~> 1.0.0)
+      kramdown (~> 1.1.0)
-      middleman-core (= 3.1.2)
+      middleman-core (= 3.1.5)
-      middleman-more (= 3.1.2)
+      middleman-more (= 3.1.5)
       middleman-sprockets (>= 3.1.2)
       sass (>= 3.1.20)
       uglifier (~> 2.1.0)
-    middleman-core (3.1.2)
+    middleman-core (3.1.5)
       activesupport (~> 3.2.6)
       bundler (~> 1.1)
       i18n (~> 0.6.1)
@@ -58,14 +58,14 @@ GEM
       middleman-core (>= 3.0.2)
       multi_json (~> 1.0)
       rack-livereload
-    middleman-more (3.1.2)
+    middleman-more (3.1.5)
-    middleman-sprockets (3.1.2)
+    middleman-sprockets (3.1.4)
       middleman-core (>= 3.0.14)
       middleman-more (>= 3.0.14)
       sprockets (~> 2.1)
       sprockets-helpers (~> 1.0.0)
       sprockets-sass (~> 1.0.0)
-    multi_json (1.7.7)
+    multi_json (1.8.0)
     oily_png (1.1.0)
       chunky_png (~> 1.2.7)
     rack (1.5.2)
@@ -75,14 +75,14 @@ GEM
       rack (>= 1.0)
     rake (10.1.0)
     rb-fsevent (0.9.3)
-    rb-inotify (0.9.0)
+    rb-inotify (0.9.2)
       ffi (>= 0.5.0)
     rb-kqueue (0.2.0)
       ffi (>= 0.5.0)
-    sass (3.2.9)
+    sass (3.2.10)
-    slim (1.3.9)
+    slim (2.0.1)
-      temple (~> 0.6.3)
+      temple (~> 0.6.6)
-      tilt (~> 1.3, >= 1.3.3)
+      tilt (>= 1.3.3, < 2.1)
     sprockets (2.10.0)
       hike (~> 1.2)
       multi_json (~> 1.0)
@@ -96,10 +96,10 @@ GEM
     susy (1.0.9)
       compass (>= 0.12.2)
       sass (>= 3.2.0)
-    temple (0.6.5)
+    temple (0.6.6)
     thor (0.18.1)
     tilt (1.3.7)
-    uglifier (2.1.1)
+    uglifier (2.1.2)
       execjs (>= 0.3.0)
       multi_json (~> 1.0, >= 1.0.2)
 
@@ -116,5 +116,5 @@ DEPENDENCIES
   rb-fsevent
   rb-inotify
   sass
-  slim (~> 1.3.7)
+  slim
   susy

config.rb

@@ -63,6 +63,9 @@ set :slim, :pretty => true
 
 # Methods defined in the helpers block are available in templates
 helpers do
+  def active_nav(url)
+    " pure-menu-selected" if url == current_page.url
+  end
 end
 
 # Change the CSS directory

source/_footer.slim

@@ -1,3 +1,4 @@
+
 a name="about"
 p
   ' © Copyright 2013 |
@@ -5,7 +6,5 @@ p
   ' ,
   == link_to "Jörg Thalheim", "/joerg", title: "About Jörg"
 p
-  ' using
+  ' more infos
-  a href="http://ethanschoonover.com/solarized" title="color palette used on our website" target="_blank" solarized
-  ', more infos
   == link_to "here", "/humans.txt", :title => "About this website"

source/_navbar.slim

@@ -1,10 +1,11 @@
-nav
+nav.pure-menu.pure-menu-open.pure-menu-horizontal
-  #sitelink
+  a#sitelink.pure-menu-heading href="/" title="Homepage"
-    a href="/" title="Homepage"
     ' H
     span B
   ul
-    li
+    li class=active_nav("/")
-      ==link_to "Impressum", "/impressum.html", :class => "navlink", :title => "Impressum"
+      ==link_to "Home", "/", title: "Home"
-    li
+    li class=active_nav("/impressum.html")
-      ==link_to "About", "#about", :class => "navlink", :title => "About"
+      ==link_to "Impressum", "/impressum.html", title: "Impressum"
+    li class=active_nav("#about")
+      ==link_to "About", "#about", title: "About"

source/humans.txt

@@ -17,7 +17,7 @@
 /* SITE */
   Last update: 2012/08/10
   Standards: HTML5, CSS3
-  Colors: solarized (http://ethanschoonover.com/solarized)
+  Css Framework: pure (http://purecss.io)
   Fonts: Lobster, Cabin
   Software: middleman, sass, slim
   IDE: vim

source/impressum.html.slim

@@ -9,7 +9,7 @@
     | 01097 Dresden
     br/
   h2 Kontakt:
-  table summary="How to contact us"
+  table.pure-table summary="How to contact us"
     tr
       td
         p Telefon:

source/index.html.slim

@@ -1,5 +1,6 @@
-h1#pagetitle Higgs-Boson
+.hero
-h2#pagesubtitle
+  h1#pagetitle Higgs-Boson
+  h2#pagesubtitle
     ' by Albert
     span.amp & 
     ' Jörg

source/jabber/index.html.slim

@@ -2,7 +2,8 @@ h1 Our Jabber-Server
 
 h2 Connection information
 p Open for registration!
-table summary="Connection information"
+
+table.pure-table.pure-table-bordered summary="Connection information"
   tr
     td Server Address:
     td higgsboson.tk

source/joerg/index.slim

@@ -1,8 +1,9 @@
 ---
 head_profile: http://gmpg.org/xfn/11
 ---
-h1 Jörg Thalheim / Mic92
+h1.hero Jörg Thalheim / Mic92
-div.span3
+.pure-g-r
+  .pure-u-1-3
     h2 Contact
     dl.icons
       dt Email:
@@ -17,8 +18,7 @@ div.span3
       dt IRC:
       dd.icon-comment-alt
         a rel="me" href="irc://irc.freenode.net/" Mic92
-
+  .pure-u-1-3
-div.span3
     h2 Content
     dl.icons
       dt Microblogging:
@@ -32,8 +32,7 @@ div.span3
       dt Social:
       dd.icon-google-plus
         a rel="me" href="https://plus.google.com/107837103594826869647" jthalheim@gmail.com
-
+  .pure-u-1-3
-div.span3_omega
     h2 Rest
     dl.icons
       dt Github Achievements:

source/layout.slim

@@ -32,9 +32,9 @@ html.no-js.light lang="en"
     meta property="twitter:description" content="Website of Jörg Thalheim & Albert Schulz"
 
     meta name="twitter:image" content="http://higgsboson.tk/images/logo.png"
-    == stylesheet_link_tag "site.css"
+    == stylesheet_link_tag "pure-min.css"
-    link href='//fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'
+    == stylesheet_link_tag "site2.css"
-    link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'
+    link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'
     /![if IE 7]
       link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/fontawesome-ie7.css"
     == yield_content :head
@@ -43,14 +43,11 @@ html.no-js.light lang="en"
     // for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/
     == javascript_include_tag "modernizr.custom.54013.js"
   body
-      .container
+    .pure-g-r.content
-        header
+      header.pure-u
         == partial "navbar"
-        #main
+      #main.pure-u-1
           == yield
-        footer
+      footer.pure-u-1
         == partial "footer"
     == partial "piwik"
-  /![if lt IE 7 ]
-    <script defer src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
-    <script defer>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>

source/qr/index.html.slim

@@ -2,7 +2,7 @@
 == javascript_include_tag "html5-qrcode.js"
 h1
   | QRCode Generator Example
-form#QRform name="QRform"
+form#QRform.pure-form name="QRform"
   textarea cols="50" name="textField" onclick="this.focus();this.select();" onkeyup="updateQRCode(this.value)" rows="8" I love QR Codes. Type in here and watch the QR code below update.
 // This is where our QRCode will appear in.
 #qrcode

source/stylesheets/site2.css.scss

@@ -0,0 +1,72 @@
+$fontAwesomePath: "../fonts";
+@import "fontawesome";
+
+#sitelink {
+  font-size: 1em;
+  letter-spacing: -0.11em;
+  &:hover {
+    text-decoration: none;
+  }
+  line-height: 1em;
+  span {
+    vertical-align: -0.2em;
+    line-height: 1em;
+  }
+}
+
+body,
+.pure-g [class *= "pure-u"],
+.pure-g-r [class *= "pure-u"] {
+  /* Set you're content font stack here: */
+  font-family: "Maven Pro", sans-serif;
+}
+
+.icons {
+  dd {
+    display:block;clear:both;
+  }
+}
+
+.content {
+  margin: 0px auto 50px;
+  padding: 0px 2em;
+  max-width: 800px;
+}
+
+.overview {
+  margin: 0px auto 50px;
+  max-width: 250px;
+}
+
+.hero {
+  min-height: 80px;
+  margin: 0px;
+  color: rgb(51,  51,  51);
+  padding: 1em 2em;
+  text-align: center;
+  border-bottom: 1px solid rgb(238,  238,  238);
+  background: none repeat scroll 0% 0% rgb(255,  255,  255);
+}
+
+.hero h1 {
+  margin: 0.2em 0px;
+  font-size: 3em;
+  font-weight: 300;
+}
+
+.hero h2 {
+  font-weight: 300;
+  margin: 0px;
+  color: rgb(204, 204, 204);
+}
+
+a {color: rgb(59, 139, 186);text-decoration: none;}
+
+
+footer {
+  font-size: 87.5%;
+  border-top: 1px solid rgb(238, 238, 238);
+  padding: 0.5em 1.1429em;
+  background: none repeat scroll 0% 0% rgb(250, 250, 250);
+  line-height: 1.6em;
+}