Looking a little more like a real site

app/assets/stylesheets/application.css.scss

@@ -8,11 +8,17 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
- * = stub stubs/variables_overrides.css.scss
- *= require_self
- *= require_tree .
  */
 
+
+// Fonts and other external imports
+@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
+@import url(http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic);
+
+// Libraries
 @import "compass";
-@import "foundation_and_overrides.scss";
+@import "foundation_and_overrides";
-@import "foundation";
+
+// Local settings (also edit foundation_and_overrides.scss to modify global variables)
+@import "sass/layout";
+@import "sass/typography";

app/assets/stylesheets/foundation_and_overrides.scss

@@ -65,7 +65,7 @@ $default-float: left;
 
 // $body-bg: #fff;
 // $body-font-color: #222;
-// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+ $body-font-family: 'Cantarell', sans-serif;
 // $body-font-weight: normal;
 // $body-font-style: normal;
 
@@ -172,7 +172,7 @@ $default-float: left;
 
 // Control header font styles
 
-// $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+ $header-font-family: 'Fjalla One', sans-serif;
 // $header-font-weight: bold;
 // $header-font-style: normal;
 // $header-font-color: #222;
@@ -1260,7 +1260,7 @@ $default-float: left;
 
 // Height and margin
 
-// $topbar-height: 45px;
+ $topbar-height: 64px;
 // $topbar-margin-bottom: 0;
 
 // Control Input height for top bar
@@ -1269,8 +1269,8 @@ $default-float: left;
 
 // Controlling the styles for the title in the top bar
 
-// $topbar-title-weight: bold;
+ $topbar-title-weight: normal;
-// $topbar-title-font-size: em-calc(17);
+ $topbar-title-font-size: 2em;
 
 // Style the top bar dropdown elements
 
@@ -1286,8 +1286,8 @@ $default-float: left;
 // $topbar-link-color: #fff;
 // $topbar-link-color-hover: #fff;
 // $topbar-link-color-active: #fff;
-// $topbar-link-weight: bold;
+ $topbar-link-weight: normal;
-// $topbar-link-font-size: em-calc(13);
+ $topbar-link-font-size: 1.2em;
 // $topbar-link-hover-lightness: -30%; // Darken by 30%
 // $topbar-link-bg-hover: darken($topbar-bg-color, 3%);
 // $topbar-link-bg-active: darken($topbar-bg-color, 3%);

app/assets/stylesheets/sass/_layout.scss

@@ -0,0 +1,41 @@
+/**
+
+	Layouts only
+
+*/
+
+#main-container, #footer, #nav-inner {
+	max-width: $large-screen;
+	margin: 0 auto;
+}
+
+$body-background-color: #EEE;
+$main-container-background-color: #F4F4F4;
+$content-background-color: #FFF;
+$layout-border-color: #DDD;
+
+body {
+	background-color: $body-background-color;
+}
+
+#main-container {
+	background-color: $main-container-background-color;
+	border: 1px solid $layout-border-color;
+	border-top: 0;
+}
+
+#main {
+	border-right: 1px solid $layout-border-color;
+	padding: 0;
+}
+
+article.content {
+	background-color: $content-background-color;
+	border-left: 1px solid $layout-border-color;
+}
+
+
+#article-header {
+	border-bottom: 1px solid $layout-border-color;
+	padding: 0;
+}

app/assets/stylesheets/sass/_typography.scss

@@ -0,0 +1,6 @@
+/**
+
+	Basic theme rules, html native elements only
+
+*/
+

app/controllers/pages_controller.rb

@@ -1,5 +1,6 @@
 class PagesController < ApplicationController
 
 	def home
+		@title_img = '/assets/nola.jpg'
 	end
 end

app/views/layouts/application.html.haml

@@ -26,12 +26,19 @@
 			\==================================================
 		/ Placed at the top of the document 'cause of turbolinks
 		= javascript_include_tag 'application'
+		= javascript_include_tag '//use.edgefonts.net/abel;amatic-sc.js'
 
 	%body
 		= render 'shared/navbar'
 
-    #main-container.container
+		#main-container.container.row
-      .content= yield
+			%aside.columns.large-4.push-8
-
+				Stuff that is not directly related to this page will go here, things like recommend or popular articles.
+			%section#main.columns.large-8.pull-4
+				%header#article-header.columns.large-12
+					%img{src: @title_img}
+				%nav.columns.large-2
+					Nav 2
+				%article.content.columns.large-10= yield
 		#footer
 			.container= render 'shared/footer'

app/views/pages/home.html.haml

@@ -1,5 +1,6 @@
-- title t('hello')
+- title 'Bike!Bike!'
+
 %h1
-  Ticket to Ride
+	Bike!Bike!
 %p.lead.muted
 	Ruby 2 + Rails 4.0.0 + Foundation

app/views/shared/_navbar.html.haml

@@ -1,127 +1,30 @@
-//.navbar.navbar-fixed-top
-//  .navbar-inner
-//    .container
-//      = link_to Rails.application.class.parent_name, root_path, class: 'brand'
 
 %nav.top-bar
+	#nav-inner
 		%ul.title-area
 			/ Title Area
 			%li.name
 				%h1
-        %a{href: "#"} Top Bar Title
+					%a{href: "/"} Bike!Bike!
 			/ Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone
 			%li.toggle-topbar.menu-icon
 				%a{href: "#"}
 					%span Menu
-  %section.top-bar-section
+		.top-bar-section
 			/ Left Nav Section
 			%ul.left
 				%li.divider
 				%li.active
-        %a{href: "#"} Main Item 1
+					%a{href: "#"} Conferences
 				%li.divider
 				%li
-        %a{href: "#"} Main Item 2
+					%a{href: "#"} Organizations
 				%li.divider
-      %li.has-dropdown
-        %a{href: "#"} Main Item 3
-        %ul.dropdown
-          %li.has-dropdown
-            %a{href: "#"} Dropdown Level 1a
-            %ul.dropdown
 				%li
-                %label Dropdown Level 2 Label
+					%a{href: "#"} Resources
-              %li
-                %a{href: "#"} Dropdown Level 2a
-              %li
-                %a{href: "#"} Dropdown Level 2b
-              %li.has-dropdown
-                %a{href: "#"} Dropdown Level 2c
-                %ul.dropdown
-                  %li
-                    %label Dropdown Level 3 Label
-                  %li
-                    %a{href: "#"} Dropdown Level 3a
-                  %li
-                    %a{href: "#"} Dropdown Level 3b
-                  %li.divider
-                  %li
-                    %a{href: "#"} Dropdown Level 3c
-              %li
-                %a{href: "#"} Dropdown Level 2d
-              %li
-                %a{href: "#"} Dropdown Level 2e
-              %li
-                %a{href: "#"} Dropdown Level 2f
-          %li
-            %a{href: "#"} Dropdown Level 1b
-          %li
-            %a{href: "#"} Dropdown Level 1c
-          %li.divider
-          %li
-            %a{href: "#"} Dropdown Level 1d
-          %li
-            %a{href: "#"} Dropdown Level 1e
-          %li
-            %a{href: "#"} Dropdown Level 1f
-          %li.divider
-          %li
-            %a{href: "#"} See all →
 				%li.divider
 			/ Right Nav Section
 			%ul.right
 				%li.divider.hide-for-small
-      %li.has-dropdown
-        %a{href: "#"} Main Item 4
-        %ul.dropdown
-          %li
-            %label Dropdown Level 1 Label
-          %li.has-dropdown
-            %a{href: "#"} Dropdown Level 1a
-            %ul.dropdown
-              %li
-                %a{href: "#"} Dropdown Level 2a
-              %li
-                %a{href: "#"} Dropdown Level 2b
-              %li.has-dropdown
-                %a{href: "#"} Dropdown Level 2c
-                %ul.dropdown
-                  %li
-                    %a{href: "#"} Dropdown Level 3a
-                  %li
-                    %a{href: "#"} Dropdown Level 3b
-                  %li
-                    %a{href: "#"} Dropdown Level 3c
-              %li
-                %a{href: "#"} Dropdown Level 2d
-              %li
-                %a{href: "#"} Dropdown Level 2e
-              %li
-                %a{href: "#"} Dropdown Level 2f
-          %li
-            %a{href: "#"} Dropdown Level 1b
-          %li
-            %a{href: "#"} Dropdown Level 1c
-          %li.divider
-          %li
-            %label Dropdown Level 1 Label
-          %li
-            %a{href: "#"} Dropdown Level 1d
-          %li
-            %a{href: "#"} Dropdown Level 1e
-          %li
-            %a{href: "#"} Dropdown Level 1f
-          %li.divider
-          %li
-            %a{href: "#"} See all →
-      %li.divider
-      %li.has-form
-        %form
-          .row.collapse
-            .small-8.columns
-              %input{type: "text"}/
-            .small-4.columns
-              %a.alert.button{href: "#"} Search
-      %li.divider.show-for-small
 				%li.has-form
-        %a.button{href: "#"} Button!
+					%a.button{href: "#"} Sign In!