New top navigation + further removed foundation (see commits)

.gitignore

@@ -7,3 +7,4 @@ public/.sass-cache
 tags
 app/tests/_log/*
 app/tests/_data/*
+stylesheets

app/views/layouts/_top_nav.blade.php

@@ -1,36 +1,34 @@
-<nav class="top-bar">
-    <ul class="title-area">
-        <!-- Title Area -->
-        <li class="name">
-            <h1><a href="{{ action('Controllers\HomeController@getIndex') }}"><img class="logo" src="/images/laravel-io-logo-small.png"></a></h1>
-        </li>
-        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
-        <li class="toggle-topbar menu-icon">
-            <a href="#"><span><!-- Menu --></span></a>
-        </li>
-    </ul><!-- Left Nav Section -->
-
-    <section class="top-bar-section">
-        <ul class="left main-nav">
+<header class="top-navigation">
+    <nav>
+        <ul class="top-navigation-signin-mobile">
+            @if(Auth::check())
+                <li><a href="{{ action('Controllers\DashboardController@getIndex') }}">{{ Auth::user()->name }}'s Dashboard</a></li>
+            @else
+                <li><a href="{{ action('Controllers\AuthController@getLogin') }}">Login with GitHub</a></li>
+            @endif  
+        </ul>
+        <div class="top-navigation-logo">
+            <a href="{{ action('Controllers\HomeController@getIndex') }}">
+                <img class="logo" src="/images/laravel-io-logo-small.png">
+            </a>
+        </div>
+        <ul class="top-navigation-items">
             <li>
                 <a href="{{ action('Controllers\ArticlesController@getIndex') }}">Articles</a>
             </li>
-
             <li>
                 <a href="{{ action('Controllers\ForumController@getIndex') }}">Forum</a>
             </li>
-
             <li>
                 <a href="{{ action('Controllers\ChatController@getIndex') }}">Chat</a>
-            </li>
+            </li>    
         </ul>
-
-        <ul class="right login">
+        <ul class="top-navigation-signin-desktop">
             @if(Auth::check())
-                <li><a href="{{ action('Controllers\DashboardController@getIndex') }}">{{ Auth::user()->name }}'s Dashboard</a></li>
+                <li><a href="{{ action('Controllers\DashboardController@getIndex') }}">{{ Auth::user()->name }}'s <span class="dashboard-word">Dashboard</span></a></li>
             @else
                 <li><a href="{{ action('Controllers\AuthController@getLogin') }}">Login with GitHub</a></li>
-            @endif
-        </ul>
-    </section>
-</nav>
+            @endif  
+        </ul>            
+    </nav>
+</header>

public/scss/_settings.scss

@@ -5,13 +5,14 @@
 $column: 70px;
 $gutter: 30px;
 $grid-columns: 12;
-$max-width: 1200px;
+$max-width: 100%;
 
 /* ==========================================================================
    Visual grid settings
    ========================================================================== */
-$visual-grid: true;
+$visual-grid: false;
 $visual-grid-color: gray;
+
 /* ==========================================================================
    Custom settings
    ========================================================================== */

public/scss/app.scss

@@ -12,15 +12,14 @@
    Vendor
    ========================================================================== */
 @import "vendor/normalize/normalize";
-@import "vendor/foundation/foundation";
 @import "vendor/bourbon/bourbon";
 @import "vendor/neat/neat";
 
-
 /* ==========================================================================
-   Components from other frameworks
+   Components from other frameworks (to be removed)
    ========================================================================== */
-// @import "vendor/component/component";
+@import "vendor/foundation/global";
+@import "vendor/foundation/grid";
 
 /* ==========================================================================
    Modules

public/scss/modules/_header.scss

@@ -1,15 +1,120 @@
 /* ==========================================================================
-   HEADER
+   HEADER NAVIGATION
    ========================================================================== */
 
-header {
+// MOBILE STYLES ////////////////////////////////////////////////////////////
+
+.top-navigation {
+    @include outer-container;
+    font-family: $helvetica;
     background-color: $lioGrey;
-    // padding: 100px 0;
-    // border-bottom: 2px solid lighten($lioGrey, 20%);
-    padding: 0 2em;
     position: relative;
 }
 
+.top-navigation-logo {
+    float:left;
+    text-align: center;
+    padding: 0.5rem 0 0.5rem 0.5rem;
+}
+
+.top-navigation-items {
+    float:left;
+    margin: 2.25rem 0 0 0.25rem;
+    list-style: none;
+    text-transform: uppercase;
+    letter-spacing: 0.09em;
+    font-size:0.8rem;    
+    padding:0;
+    li {
+        display: inline-block;
+        margin:0 0.5rem;
+        a {
+            color:#eee;
+            text-decoration: none;
+            &:hover {
+                color: $lioRed;
+            }            
+        }
+    }
+}
+
+.top-navigation-signin-desktop {
+    display: none;
+}    
+
+.top-navigation-signin-mobile {
+    text-align: center;
+    list-style: none;
+    margin:0;
+    padding:0;
+    background: darken($lioGrey, 10%);
+    li {
+        padding: 0.5rem 0;
+        font-size:0.9rem;
+        a {
+            color:#bbb;
+            text-decoration: none;
+            &:hover {
+                color: $lioRed;
+            }    
+        }
+    }
+}
+
+
+
+// BREAKPOINT 1 (480) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 480px) {
+
+    .top-navigation-signin-mobile {
+        display: none;
+    }
+    .top-navigation-signin-desktop {
+        display: inline-block;
+        text-align: right;
+        list-style: none;
+        float:right;
+        padding:0;
+        margin: 1.75rem 1rem 0 0;
+        font-size:0.8rem; 
+        li {
+            padding: 0.5rem 0;
+            font-size:0.9rem;
+            a {
+                color:#fff;
+                text-decoration: none;
+                &:hover {
+                    color: $lioRed;
+                }    
+            }
+        }    
+    }    
+}
+.dashboard-word {
+    display: none;
+}
+
+// BREAKPOINT 2 (768) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 768px) {
+    .dashboard-word {
+        display: inline-block;
+    }    
+}
+
+// BREAKPOINT 3 (1280) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 1280px) {
+
+}
+
+
+
+/*
+
+
+
 .top-bar {
     padding-right: 30px;
     margin-bottom: 0;
@@ -36,4 +141,5 @@ header {
     a {
         color: #eee !important;
     }
-}
+}
+*/