macgitver · antis81 · Mar 21, 2015 · Mar 21, 2015 · Mar 21, 2015 · Mar 21, 2015
diff --git a/_config.yml b/_config.yml
@@ -1,3 +1,3 @@
-name: "MacGitver Website"
-title: "MacGitver by Sascha Cunz and Nils Fenner"
-markdown: rdiscount
+name: "macgitver.org"
+title: "Home of MacGitver and Friends"
+markdown: rdiscount
diff --git a/_includes/menu.html b/_includes/menu.html
@@ -0,0 +1,22 @@
+      <div id="cssmenu" class="sticky">
+        <span class="menu-head">Menu</span>
+        <ul class="menu">
+
+          <li><a href="{{ site.baseurl }}/">Home</a></li>
+          <li><a href="#">Projects</a>
+            <ul class="submenu">
+              {% assign pages_list = site.pages %}
+              {% assign group = 'main-projects' %}
+              {% include pages_list %}
+
+              <hr/>
+
+              {% assign pages_list = site.pages %}
+              {% assign group = 'projects' %}
+              {% include pages_list %}
+            </ul>
+          </li>
+
+        </ul>
+      </div>
+
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -7,43 +7,53 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
-    <link href="/css/stylesheet.css" rel="stylesheet" />
+    <link href="/css/stylesheet.css" rel='stylesheet' type='text/css' />
+    <link href="/css/menu.css" rel='stylesheet' type='text/css' />
+    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
+    <script src="/scripts/script.js"></script>
+    <script src="/scripts/jquery.sticky-kit.js"></script>
+
+    <script>
+      $(document).ready(function() {
+        $('.sticky').stick_in_parent();
+      })(jquery);
+    </script>
 
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
   <head/>
-  
+
   <body>
     <header>
       <div class="inner">
-        <h1>{{ site.name }}</h1>
-        <a href="https://github.com/macgitver" class="button"><small>View project on</small>GitHub</a>
-      </div>
-      <div id="navigation">
-        <ul id="nav-list">
-          {% assign pages_list = site.pages %}
-          {% assign group = 'navigation' %}
-          {% include pages_list %}
-        </ul>
+        <h1>{{ page.title }}</h1>
       </div>
     </header>
 
-    <div id="content-wrapper">
-      <div class="inner clearfix">
-        <section id="main-content">
-
-          {{ content }}
-
-        </section>
-
-        <aside id="sidebar">
-          <a href="https://download.macgitver.org" class="button">Download</a>
-          <p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the Architect theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.</p>
-        </aside>
-
+    <div id="content-wrapper" class="clearfix">
+      <div id="main-content">{{ content }}</div>
+
+      <div id="sidebar" class="sticky">
+        <div class="button">
+          <img src="/images/download.svg"/>
+          <a href="https://download.macgitver.org" class="download">Download</a>
+        </div>
+
+        <div class="button">
+          <img src="/images/project-source.svg"/>
+          <a href="https://github.com/macgitver/{{ page.project }}" class="download">The Code</a>
+        </div>
+
+        <div class="text-box">
+          <p>The "{{ page.project }}" project is licensed under the GPLv2 open source license.</p>
+          <p>© {{ 'now' | date: "%Y" }} Cunz RAD Ltd.</p>
+        </div>
       </div>
+
     </div>
-
+
+    {% include menu.html %}
+
   </body>
 </html>
diff --git a/_layouts/welcome.html b/_layouts/welcome.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>{{ site.title }}</title>
+    <meta name="description" content="{{ site.description }}">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
+    <link href="/css/welcome.css" rel='stylesheet' type='text/css' />
+    <link href="/css/menu.css" rel='stylesheet' type='text/css' />
+    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
+    <script src="{{ site.baseurl }}/scripts/script.js"></script>
+
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+  <head/>
+
+  <body>
+    <header>
+      <div class="inner">
+        <h1>{{ page.title }}</h1>
+      </div>
+    </header>
+
+    <div id="content-wrapper">
+      <div class="inner clearfix">
+        <section id="main-content">{{ content }}</section>
+      </div>
+    </div>
+
+    {% include menu.html %}
+
+  </body>
+</html>
diff --git a/about/index.md b/about/index.md
diff --git a/css/menu.css b/css/menu.css
@@ -0,0 +1,213 @@
+@import url(http://fonts.googleapis.com/css?family=Oswald);
+
+#cssmenu,
+#cssmenu > .menu li,
+#cssmenu > .menu li a {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: block;
+  line-height: 1;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+#cssmenu > .menu li,
+#cssmenu > .menu li a {
+  display: none;
+}
+
+#cssmenu {
+  display: inline-block;
+  position: absolute;
+  top: 48px;
+  left: 0;
+  right: 0;
+  width: 150px;
+  cursor: pointer;
+  font-family: 'Oswald', sans-serif;
+  text-align: left;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+#cssmenu:after,
+#cssmenu > .menu:after,
+#cssmenu > .menu .submenu:after {
+  content: "";
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+
+#cssmenu #menu-indicator {
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  height: 0;
+  width: 0;
+  border: 25px solid transparent;
+  border-left-color: #333;
+  opacity: .7;
+  -webkit-transition: all 0.25s ease-out;
+  -moz-transition: all 0.25s ease-out;
+  -ms-transition: all 0.25s ease-out;
+  -o-transition: all 0.25s ease-out;
+  transition: all 0.25s ease-out;
+}
+
+#cssmenu > .menu-head {
+  font-size: 24pt;
+  margin: 0;
+  padding: 0 32px 0px 32px;
+  line-height: 48px;
+  background: rgba(55, 55, 165,.3);
+  border: 1px solid #555;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  color: #fb1;
+  -webkit-transition:   color .8s;
+  -moz-transition:      color .8s;
+  -ms-transition:       color .8s;
+  -o-transition:        color .8s;
+  transition:           color .8s;
+}
+
+#cssmenu > .menu {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  top: 0; left: 0;
+  height: 0; width: 0;
+  opacity: 0;
+  -webkit-transition:   top .25s ease, opacity .5s;
+  -moz-transition:      top .25s ease, opacity .5s;
+  -ms-transition:       top .25s ease, opacity .5s;
+  -o-transition:        top .25s ease, opacity .5s;
+  transition:           top .25s ease, opacity .5s;
+}
+#cssmenu > .menu > li > a {
+  width: 100px;
+  line-height: 100px;
+  background: url(/images/menu/blob.svg);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  text-align: center;
+  opacity: .8;
+}
+#cssmenu > .menu > li:first-child > a {
+  background: url(/images/menu/blob-first.svg);
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+#cssmenu > .menu > li:last-child > a {
+  background: url(/images/menu/blob-last.svg);
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+#cssmenu > .menu > li a {
+  text-transform: uppercase;
+  color: #999;
+  font-size: 18px;
+  outline: 0;
+  -webkit-transition: all .8s ease;
+  -moz-transition: all .8s ease;
+  -ms-transition: all .8s ease;
+  -o-transition: all .8s ease;
+  transition: all .8s ease;
+}
+
+#cssmenu > .menu .submenu {
+  position: absolute;
+  left: 0;
+  min-width: 150px;
+  top: 35%;
+  padding: 10px 10px 10px 10px;
+  background: rgba(31, 68, 31, .75);
+  border-radius: 10px;
+  border: solid 1px #555;
+  opacity: 0;
+  -webkit-transition: left .3s ease, opacity .3s ease;
+  -moz-transition:    left .3s ease, opacity .3s ease;
+  -ms-transition:     left .3s ease, opacity .3s ease;
+  -o-transition:      left .3s ease, opacity .3s ease;
+  transition:         left .3s ease, opacity .3s ease;
+}
+#cssmenu > .menu .submenu hr {
+  margin: 2px 0 15px 0;
+  padding: 0;
+  border: 1px solid #585;
+}
+#cssmenu > .menu .submenu li a {
+  padding: 0 0 3px 0;
+  font-size: 16px;
+}
+
+#cssmenu:hover > .menu-head {
+  color: #444444;
+  -webkit-transition:   color .8s;
+  -moz-transition:      color .8s;
+  -ms-transition:       color .8s;
+  -o-transition:        color .8s;
+  transition:           color .8s;
+}
+#cssmenu:hover > .menu {
+  left: 30px; top: 100%;
+  height: auto; width: auto;
+  opacity: 1;
+}
+#cssmenu:hover > .menu li,
+#cssmenu:hover > .menu > li a {
+  display: block;
+}
+
+#cssmenu > .menu li > a:hover,
+#cssmenu > .menu li:hover > a,
+#cssmenu > .menu li.active > a {
+  color: #fd5;
+  text-shadow: 0 0 0.8em #a7c0f1, 0 0 0.8em #a7c0f1, 0 0 0.8em #a7c0f1;
+}
+
+#cssmenu > .menu li:hover > .submenu {
+  left: 100% !Important;
+  opacity: 1;
+}
+
+/* All Mobile Sizes (devices and browser) */
+@media only screen and (max-width: 767px) {
+  #cssmenu {
+    top: 0;
+    left: 0;
+    width: 75px;
+    padding: 0;
+    margin: 0;
+  }
+  #cssmenu > .menu-head {
+    margin: 0;
+    padding: 1px 5px 1px 5px;
+    font-size: 14pt;
+    line-height: 30px;
+    border: 0;
+    border-right: 1px dotted #333;
+    border-radius: 0;
+  }
+  #cssmenu #menu-indicator {
+    display: none;
+    visibility: hidden;
+    height: 0;
+    width: 0;
+  }
+  #cssmenu > .menu > li a,
+  #cssmenu > .menu .submenu > li a {
+    font-size: 13px;
+  }
+  #cssmenu > .menu > li > a {
+    width: 75px;
+    line-height: 75px;
+  }
+
+  #cssmenu:hover > .menu {
+    left: 0;
+  }
+}