From 5cafe3670b81eb5db9f562969aa2ccb0c45cce4d Mon Sep 17 00:00:00 2001
From: simongehrig <mail@simongehrig.de>
Date: Wed, 22 Feb 2017 01:21:17 +0100
Subject: [PATCH] Added Menu Mixins: Desktop vertical Desktop vertical
 Tablet/Phone Fullscreen Toggle Button

---
 .idea/deployment.xml                          |  11 +-
 .idea/scopes/Unnamed.xml                      |   3 +
 .idea/watcherTasks.xml                        |   2 +-
 _framework.scss                               |  15 +-
 examples/fx/camera/camera.html                |   8 +-
 examples/fx/camera/camera.scss                |  10 +-
 .../layout/menus/horizontal/horizontal.html   | 180 ++++++++++++++++++
 .../layout/menus/horizontal/horizontal.scss   |  21 ++
 examples/layout/menus/vertical/vertical.html  | 180 ++++++++++++++++++
 examples/layout/menus/vertical/vertical.scss  |  26 +++
 mixins/_mixins.scss                           |  10 +
 mixins/css/_css.scss                          |  10 +
 mixins/css/_filters.scss                      |   3 -
 mixins/css/fx/_filters.scss                   |   0
 mixins/css/fx/_transform.scss                 |   0
 mixins/fx/_camera.scss                        |   4 +-
 mixins/layout/_layout.scss                    |   6 +-
 mixins/layout/_position.scss                  |   8 +
 mixins/layout/menus/_00-menus.scss            |   4 +
 mixins/layout/menus/_fullscreen-phone.scss    | 148 ++++++++++++++
 mixins/layout/menus/_horizontal-desktop.scss  | 136 +++++++++++++
 mixins/layout/menus/_toggle.scss              |  54 ++++++
 mixins/layout/menus/_vertical-desktop.scss    | 133 +++++++++++++
 mixins/queries/_media-queries.scss            |  28 +--
 24 files changed, 946 insertions(+), 54 deletions(-)
 create mode 100644 .idea/scopes/Unnamed.xml
 create mode 100644 examples/layout/menus/horizontal/horizontal.html
 create mode 100644 examples/layout/menus/horizontal/horizontal.scss
 create mode 100644 examples/layout/menus/vertical/vertical.html
 create mode 100644 examples/layout/menus/vertical/vertical.scss
 create mode 100644 mixins/_mixins.scss
 create mode 100644 mixins/css/_css.scss
 delete mode 100644 mixins/css/_filters.scss
 create mode 100644 mixins/css/fx/_filters.scss
 create mode 100644 mixins/css/fx/_transform.scss
 create mode 100644 mixins/layout/_position.scss
 create mode 100644 mixins/layout/menus/_00-menus.scss
 create mode 100644 mixins/layout/menus/_fullscreen-phone.scss
 create mode 100644 mixins/layout/menus/_horizontal-desktop.scss
 create mode 100644 mixins/layout/menus/_toggle.scss
 create mode 100644 mixins/layout/menus/_vertical-desktop.scss

diff --git a/.idea/deployment.xml b/.idea/deployment.xml
index 464905a..aca1264 100644
--- a/.idea/deployment.xml
+++ b/.idea/deployment.xml
@@ -2,21 +2,14 @@
 <project version="4">
   <component name="PublishConfigData">
     <serverData>
-      <paths name="SELFOMAT Server">
+      <paths name="lisanahartl.de">
         <serverdata>
           <mappings>
             <mapping local="$PROJECT_DIR$" web="/" />
           </mappings>
         </serverdata>
       </paths>
-      <paths name="selfom.at (production)">
-        <serverdata>
-          <mappings>
-            <mapping local="$PROJECT_DIR$" web="/" />
-          </mappings>
-        </serverdata>
-      </paths>
-      <paths name="selfom.at (website)">
+      <paths name="simongehrig.support">
         <serverdata>
           <mappings>
             <mapping local="$PROJECT_DIR$" web="/" />
diff --git a/.idea/scopes/Unnamed.xml b/.idea/scopes/Unnamed.xml
new file mode 100644
index 0000000..7dd07e9
--- /dev/null
+++ b/.idea/scopes/Unnamed.xml
@@ -0,0 +1,3 @@
+<component name="DependencyValidationManager">
+  <scope name="Unnamed" pattern="file[00 SCSS Framework]:*/" />
+</component>
\ No newline at end of file
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
index bc4c548..ef75274 100644
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@@ -16,7 +16,7 @@
       <option name="outputFromStdout" value="false" />
       <option name="program" value="C:/Ruby23-x64/bin/scss.bat" />
       <option name="scopeName" value="Project Files" />
-      <option name="trackOnlyRoot" value="false" />
+      <option name="trackOnlyRoot" value="true" />
       <option name="workingDir" value="$FileDir$" />
       <envs />
     </TaskOptions>
diff --git a/_framework.scss b/_framework.scss
index 90ce5ef..3df2412 100644
--- a/_framework.scss
+++ b/_framework.scss
@@ -1,15 +1,8 @@
 
 /* Simons SCSS Framework */
 
-/* Basic CSS Functions */
-@import "mixins/css/reset";
-@import "mixins/css/filters";
+// Basic CSS Functions
+@import "mixins/css/css";
 
-/* Layout */
-@import "mixins/layout/layout";
-
-/* Queries */
-@import "mixins/queries/media-queries";
-
-/* FX / Effects */
-@import "mixins/fx/camera";
\ No newline at end of file
+// Mixins
+@import "mixins/mixins";
\ No newline at end of file
diff --git a/examples/fx/camera/camera.html b/examples/fx/camera/camera.html
index 089c127..fb025a8 100644
--- a/examples/fx/camera/camera.html
+++ b/examples/fx/camera/camera.html
@@ -11,29 +11,29 @@
 
         <div class="wrap focus">
             <div class="inner">
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/1"></div>
                 <p class="head">Off-Focus</p>
-                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
             </div>
         </div>
 
         <div class="wrap zoom">
             <div class="inner">
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/2"></div>
                 <p class="head">Zoom</p>
-                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
             </div>
         </div>
 
         <div class="wrap shake">
             <div class="inner">
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/3"></div>
                 <p class="head">Shake</p>
-                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
             </div>
         </div>
 
         <div class="wrap all">
             <div class="inner">
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/4"></div>
                 <p class="head">None</p>
-                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
             </div>
         </div>
 
diff --git a/examples/fx/camera/camera.scss b/examples/fx/camera/camera.scss
index 05bc575..e6909e2 100644
--- a/examples/fx/camera/camera.scss
+++ b/examples/fx/camera/camera.scss
@@ -5,11 +5,16 @@
   background-color: #6ac88e;
   border-bottom: solid 40px #c86350;
 
+  @include absolute-span(0, 0, 0, 0);
+
   .wrap {
     /*BASIC LAYOUT*/
     @include cols(4, 20);
 
     .inner {
+      background-color: #ffffff;
+      padding: 20px 20px 40px 20px !important;
+      box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
 
       .head {
         font-family: sans-serif;
@@ -24,10 +29,9 @@
         position: relative;
         box-sizing: border-box;
         overflow: hidden;
-        border: solid thick #c86350;
 
         img {
-          width:100%; // make sure thins dont get wider than the parent cols element
+          width: 100%; // make sure thins dont get wider than the parent cols element
         }
       }
     }
@@ -68,7 +72,7 @@
     &.all {
       /*ALL EFFECTS*/
       .head {
-        @include camera-focus($FOCUS-OUT, 0.5, 10, $EASE);
+        @include camera-focus($FOCUS-OUT, 0.4, 10, $EASE);
       }
 
       img {
diff --git a/examples/layout/menus/horizontal/horizontal.html b/examples/layout/menus/horizontal/horizontal.html
new file mode 100644
index 0000000..51e272e
--- /dev/null
+++ b/examples/layout/menus/horizontal/horizontal.html
@@ -0,0 +1,180 @@
+<head>
+    <link rel="stylesheet" type="text/css" href="horizontal.css">
+</head>
+<body>
+<div class="header">
+
+    <input id="navcheck" type="checkbox" name="menu">
+
+    <label class="navbar" for="navcheck">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+    </label>
+
+    <ul class="nav">
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+</div>
+<div class="content"></div>
+</body>
\ No newline at end of file
diff --git a/examples/layout/menus/horizontal/horizontal.scss b/examples/layout/menus/horizontal/horizontal.scss
new file mode 100644
index 0000000..ef7fd3f
--- /dev/null
+++ b/examples/layout/menus/horizontal/horizontal.scss
@@ -0,0 +1,21 @@
+@import "../../../../_framework";
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif;
+  .header {
+    //transform: rotate(-1deg);
+    #navcheck {
+      @include toggle-tablet(100px, #ffd9d9, #806c80) {
+        @include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
+      }
+    }
+    .nav {
+      font-weight: 700;
+      letter-spacing: 1px;
+      font-size: 20px;
+
+      @include menu-horizontal-desktop(20px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/layout/menus/vertical/vertical.html b/examples/layout/menus/vertical/vertical.html
new file mode 100644
index 0000000..742df2e
--- /dev/null
+++ b/examples/layout/menus/vertical/vertical.html
@@ -0,0 +1,180 @@
+<head>
+    <link rel="stylesheet" type="text/css" href="vertical.css">
+</head>
+<body>
+<div class="header">
+
+    <input id="navcheck" type="checkbox" name="menu">
+
+    <label class="navbar" for="navcheck">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+    </label>
+
+    <ul class="nav">
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+</div>
+<div class="content"></div>
+</body>
\ No newline at end of file
diff --git a/examples/layout/menus/vertical/vertical.scss b/examples/layout/menus/vertical/vertical.scss
new file mode 100644
index 0000000..b0fb8a0
--- /dev/null
+++ b/examples/layout/menus/vertical/vertical.scss
@@ -0,0 +1,26 @@
+@import "../../../../framework";
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif;
+
+  .header {
+    //transform: rotate(-1deg);
+
+    #navcheck {
+      @include toggle-tablet(100px, #ffd9d9, #806c80) {
+        @include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
+      }
+    }
+
+    .nav {
+      font-weight: 700;
+      letter-spacing: 1px;
+      font-size: 20px;
+      @include menu-vertical-desktop(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
+      position: fixed;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/mixins/_mixins.scss b/mixins/_mixins.scss
new file mode 100644
index 0000000..e8bb5ae
--- /dev/null
+++ b/mixins/_mixins.scss
@@ -0,0 +1,10 @@
+// Layout
+@import "layout/layout";
+@import "layout/position";
+@import "layout/menus/_00-menus";
+
+// Queries
+@import "queries/media-queries";
+
+// FX / Effects
+@import "fx/camera";
\ No newline at end of file
diff --git a/mixins/css/_css.scss b/mixins/css/_css.scss
new file mode 100644
index 0000000..1331818
--- /dev/null
+++ b/mixins/css/_css.scss
@@ -0,0 +1,10 @@
+// CSS Properties
+
+// Reset
+@import "reset";
+
+// Layout
+
+// FX
+@import "fx/transform";
+@import "fx/filters";
diff --git a/mixins/css/_filters.scss b/mixins/css/_filters.scss
deleted file mode 100644
index 83f8f43..0000000
--- a/mixins/css/_filters.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@mixin blur($pixel){
-  filter: blur($pixel);
-}
\ No newline at end of file
diff --git a/mixins/css/fx/_filters.scss b/mixins/css/fx/_filters.scss
new file mode 100644
index 0000000..e69de29
diff --git a/mixins/css/fx/_transform.scss b/mixins/css/fx/_transform.scss
new file mode 100644
index 0000000..e69de29
diff --git a/mixins/fx/_camera.scss b/mixins/fx/_camera.scss
index 11925ce..ea2ab7a 100644
--- a/mixins/fx/_camera.scss
+++ b/mixins/fx/_camera.scss
@@ -1,4 +1,4 @@
-/* CONSTANTS */
+// CONSTANTS
 
 $ZOOM-IN: 0;
 $ZOOM-OUT: 1;
@@ -11,7 +11,7 @@ $EASE: 1;
 $EASEINOUT: 2;
 $BACKWARD: 3;
 
-/* MIXINS */
+// MIXINS
 
 /// Gives the Element a focusing Effect
 /// @param {int} $direction
diff --git a/mixins/layout/_layout.scss b/mixins/layout/_layout.scss
index e55249d..ac34ea7 100644
--- a/mixins/layout/_layout.scss
+++ b/mixins/layout/_layout.scss
@@ -1,6 +1,4 @@
 @mixin cols($columns, $gutter) {
-  /* Wrapper inside Element needed
-     because of gutter >* */
 
   /* Positioning */
   position: relative;
@@ -24,7 +22,9 @@
   }
 
   > * {
-    width: 100%;
+    /* Wrapper inside Element needed
+       because of gutter >* */
+    max-width: 100%;
     box-sizing: border-box;
   }
 }
\ No newline at end of file
diff --git a/mixins/layout/_position.scss b/mixins/layout/_position.scss
new file mode 100644
index 0000000..ce0d0a2
--- /dev/null
+++ b/mixins/layout/_position.scss
@@ -0,0 +1,8 @@
+@mixin absolute-span($top:0,$right:0,$bottom:0,$left:0) {
+  /* Absolute Positioning */
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
\ No newline at end of file
diff --git a/mixins/layout/menus/_00-menus.scss b/mixins/layout/menus/_00-menus.scss
new file mode 100644
index 0000000..d3d9d20
--- /dev/null
+++ b/mixins/layout/menus/_00-menus.scss
@@ -0,0 +1,4 @@
+@import "fullscreen-phone";
+@import "horizontal-desktop";
+@import "vertical-desktop";
+@import "toggle";
\ No newline at end of file
diff --git a/mixins/layout/menus/_fullscreen-phone.scss b/mixins/layout/menus/_fullscreen-phone.scss
new file mode 100644
index 0000000..09e0071
--- /dev/null
+++ b/mixins/layout/menus/_fullscreen-phone.scss
@@ -0,0 +1,148 @@
+@mixin menu-fullscreen-phone(
+  $toggle-size:100px,
+  $padding:20px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+
+  @include absolute-span();
+
+  padding-top: $toggle-size;
+  list-style: none;
+  display: block;
+  table-layout: fixed;
+  width: 100%;
+  overflow: scroll;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: block;
+    background-color: $bg-color;
+    color: $font-color;
+    width: 100%;
+    text-transform: uppercase;
+    //border-left: solid $padding $font-color;
+
+    a {
+      display: block;
+      padding: $padding;
+      width: 100%;
+      text-decoration: none;
+      color: $font-color;
+      box-sizing: border-box;
+    }
+
+    // Second
+    ul {
+      display: block;
+      position: relative;
+      width: 100%;
+
+      // Second
+      li {
+        color: $font-color;
+        text-transform: none;
+        a {
+          padding-left: 2*$padding;
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          position: relative;
+          display: block;
+          left: auto;
+          top: auto;
+
+          // Third
+          li {
+            position: relative;
+            color: $font-color;
+            font-weight: 300;
+
+            a {
+              padding-left: 3*$padding;
+              color: $font-color;
+            }
+          }
+        }
+      }
+    }
+
+    // First
+    &:hover {
+      background-color: $bg-color-hover;
+      color: $font-color-hover;
+      //border-left: solid $padding $font-color-hover;
+
+      a {
+        color: $font-color-hover;
+      }
+
+      // Second
+      ul {
+        display: block;
+
+        // Second
+        li {
+          display: block;
+          color: $font-color;
+
+          a {
+            color: $font-color;
+          }
+          // Third
+          ul {
+            display: block;
+
+            // Third
+            li {
+
+            }
+          }
+
+          // Second
+          &:hover {
+            color: $font-color-hover;
+
+            a {
+              color: $font-color-hover;
+            }
+
+            // Third
+            ul {
+              display: block;
+
+              // Third
+              li {
+                color: $font-color;
+
+                a {
+                  color: $font-color;
+                }
+
+                &:hover {
+                  color: $font-color-hover;
+
+                  a {
+                    color: $font-color-hover;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &:last-of-type {
+      ul li ul {
+        right: auto;
+        left: auto;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/mixins/layout/menus/_horizontal-desktop.scss b/mixins/layout/menus/_horizontal-desktop.scss
new file mode 100644
index 0000000..f1731f4
--- /dev/null
+++ b/mixins/layout/menus/_horizontal-desktop.scss
@@ -0,0 +1,136 @@
+@mixin menu-horizontal-desktop(
+  $padding:15px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+  position: relative;
+  list-style: none;
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: table-cell;
+    background-color: $bg-color;
+    color: $font-color;
+    width: 100%;
+
+    a {
+      display: block;
+      padding: $padding;
+      width: 100%;
+      text-decoration: none;
+      color: $font-color;
+      box-sizing: border-box;
+    }
+
+    // Second
+    ul {
+      display: none;
+      position: absolute;
+      width: 100%;
+
+      // Second
+      li {
+        color: $font-color;
+        a {
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          position: absolute;
+          display: none;
+          left: 100%;
+          top: 0;
+
+          // Third
+          li {
+            position: relative;
+            color: $font-color;
+
+            a {
+              color: $font-color;
+            }
+          }
+        }
+      }
+    }
+
+    // First
+    &:hover {
+      background-color: $bg-color-hover;
+      color: $font-color-hover;
+
+      a {
+        color: $font-color-hover;
+      }
+
+      // Second
+      ul {
+        display: block;
+
+        // Second
+        li {
+          display: block;
+          color: $font-color;
+
+          a {
+            color: $font-color;
+          }
+          // Third
+          ul {
+            display: none;
+
+            // Third
+            li {
+
+            }
+          }
+
+          // Second
+          &:hover {
+            color: $font-color-hover;
+
+            a {
+              color: $font-color-hover;
+            }
+
+            // Third
+            ul {
+              display: block;
+
+              // Third
+              li {
+                color: $font-color;
+
+                a {
+                  color: $font-color;
+                }
+
+                &:hover {
+                  color: $font-color-hover;
+
+                  a {
+                    color: $font-color-hover;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &:last-of-type {
+      ul li ul {
+        right: 100%;
+        left: auto;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/mixins/layout/menus/_toggle.scss b/mixins/layout/menus/_toggle.scss
new file mode 100644
index 0000000..bb9a9ae
--- /dev/null
+++ b/mixins/layout/menus/_toggle.scss
@@ -0,0 +1,54 @@
+@mixin toggle-tablet(
+  //$navclass:nav,
+  $size:100px,
+  $background-color:#cccccc,
+  $bar-color:#999999
+) {
+  display: none;
+
+  + .navbar {
+    display: none;
+  }
+
+  @include tablet($DOWNWARDS-OPEN) {
+    // Tablet Mode
+    + .navbar {
+      position: fixed;
+      z-index: 10000;
+      display: block;
+      padding: $size/7;
+      background-color: $background-color;
+      box-sizing: border-box;
+
+      span {
+        display: block;
+        margin-bottom: $size/7;
+        width: ($size/7)*5;
+        height: $size/7;
+        background-color: $bar-color;
+        box-sizing: border-box;
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+
+      // Navigation List
+      // TODO Add Selector Support
+      + ul {
+        display: none;
+      }
+    }
+
+    // Enabled Menu
+    &:checked {
+
+      + .navbar {
+
+        + ul {
+          @content
+        }
+      }
+    }
+  }
+}
+
diff --git a/mixins/layout/menus/_vertical-desktop.scss b/mixins/layout/menus/_vertical-desktop.scss
new file mode 100644
index 0000000..b9ad7b7
--- /dev/null
+++ b/mixins/layout/menus/_vertical-desktop.scss
@@ -0,0 +1,133 @@
+@mixin menu-vertical-desktop(
+  $padding:15px,
+  $width:200px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+  // First
+  position: relative;
+  list-style: none;
+  display: block;
+  width: $width;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: block;
+    background-color: $bg-color;
+    color: $font-color;
+    width: auto;
+
+    a {
+      display: block;
+      padding: $padding;
+      width: 100%;
+      text-decoration: none;
+      color: $font-color;
+      box-sizing: border-box;
+    }
+
+    // Second
+    ul {
+      display: none;
+      position: absolute;
+      width: 100%;
+      left: 100%;
+      top: 0;
+
+      // Second
+      li {
+        color: $font-color;
+        a {
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          position: absolute;
+          display: none;
+          left: 100%;
+          top: 0;
+
+          // Third
+          li {
+            position: relative;
+            color: $font-color;
+
+            a {
+              color: $font-color;
+            }
+          }
+        }
+      }
+    }
+
+    // First
+    &:hover {
+      background-color: $bg-color-hover;
+      color: $font-color-hover;
+
+      a {
+        color: $font-color-hover;
+      }
+
+      // Second
+      ul {
+        display: block;
+
+        // Second
+        li {
+          display: block;
+          color: $font-color;
+
+          a {
+            color: $font-color;
+          }
+          // Third
+          ul {
+            display: none;
+
+            // Third
+            li {
+
+            }
+          }
+
+          // Second
+          &:hover {
+            color: $font-color-hover;
+
+            a {
+              color: $font-color-hover;
+            }
+
+            // Third
+            ul {
+              display: block;
+
+              // Third
+              li {
+                color: $font-color;
+
+                a {
+                  color: $font-color;
+                }
+
+                &:hover {
+                  color: $font-color-hover;
+
+                  a {
+                    color: $font-color-hover;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/mixins/queries/_media-queries.scss b/mixins/queries/_media-queries.scss
index a56f28e..94bd880 100644
--- a/mixins/queries/_media-queries.scss
+++ b/mixins/queries/_media-queries.scss
@@ -1,55 +1,50 @@
-/*
+// CONSTANTS
 
-CONSTANTS
-
-*/
+// Directions
 
 $UPWARDS-OPEN: 2;
 $DOWNWARDS-OPEN: 1;
 $LIMITED: 0;
 
-/*
-
-Widths
-
-*/
+// Widths
 
 $phone-width: 480px;
 $tablet-width: 768px;
 $notebook-width: 980px;
 $desktop-width: 1280px;
 
-/*
-
-Queries
-
-*/
+// Queries
 
 @mixin small-phone($direction:0) {
+  /* small phone */
   @include querybuilder(0, $phone-width, $direction) {
     @content
   }
 }
 
 @mixin phone($direction:0) {
+  /* phone */
   @include querybuilder($phone-width, $tablet-width, $direction) {
     @content
   }
 }
 
 @mixin tablet($direction:0) {
+  /* tablet */
   @include querybuilder($tablet-width, $notebook-width, $direction) {
     @content
   }
 }
 
 @mixin notebook($direction:0) {
+  /* notebook */
   @include querybuilder($notebook-width, $desktop-width, $direction) {
     @content
   }
 }
 
 @mixin desktop($direction:0) {
+  /* desktop */
   @include querybuilder($desktop-width, 99999, $direction) {
     @content
   }
@@ -61,11 +56,8 @@ Queries
   }
 }
 
-/*
 
-QUERY-BUILDER
-
-*/
+//QUERY-BUILDER
 
 @mixin querybuilder($low-px, $high-px, $direction) {
   @if $direction == $LIMITED {