diff --git a/app/assets/images/nola.jpg b/app/assets/images/nola.jpg
new file mode 100644
index 0000000..88f580f
Binary files /dev/null and b/app/assets/images/nola.jpg differ
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 6e5b410..c613924 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/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";
+@import "foundation_and_overrides";
+
+// Local settings (also edit foundation_and_overrides.scss to modify global variables)
+@import "sass/layout";
+@import "sass/typography";
diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss
index 7c8d045..a266bd3 100644
--- a/app/assets/stylesheets/foundation_and_overrides.scss
+++ b/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-font-size: em-calc(17);
+ $topbar-title-weight: normal;
+ $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-font-size: em-calc(13);
+ $topbar-link-weight: normal;
+ $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%);
diff --git a/app/assets/stylesheets/sass/_layout.scss b/app/assets/stylesheets/sass/_layout.scss
new file mode 100644
index 0000000..f9623a6
--- /dev/null
+++ b/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;
+}
diff --git a/app/assets/stylesheets/sass/_typography.scss b/app/assets/stylesheets/sass/_typography.scss
new file mode 100644
index 0000000..4a3de0d
--- /dev/null
+++ b/app/assets/stylesheets/sass/_typography.scss
@@ -0,0 +1,6 @@
+/**
+
+ Basic theme rules, html native elements only
+
+*/
+
diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
index 19e1898..1087f56 100644
--- a/app/controllers/pages_controller.rb
+++ b/app/controllers/pages_controller.rb
@@ -1,5 +1,6 @@
class PagesController < ApplicationController
- def home
- end
+ def home
+ @title_img = '/assets/nola.jpg'
+ end
end
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index cf25541..22fab73 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,37 +1,44 @@
!!!
%html{ lang: I18n.locale.to_s }
- %head
- %meta{ charset: 'utf-8' }
- %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' }
- %title= yield_or_default :title, controller.action_name.titlecase
- = csrf_meta_tags
- = yield :head
- / Le HTML5 shim, for IE6-8 support of HTML elements
- /[if lt IE 9]
-
+ %head
+ %meta{ charset: 'utf-8' }
+ %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' }
+ %title= yield_or_default :title, controller.action_name.titlecase
+ = csrf_meta_tags
+ = yield :head
+ / Le HTML5 shim, for IE6-8 support of HTML elements
+ /[if lt IE 9]
+
- / Le styles
- = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Ubuntu:400,500,700',
- 'application',
- media: 'all'
+ / Le styles
+ = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Ubuntu:400,500,700',
+ 'application',
+ media: 'all'
- / Touch icons
- %link{ href: asset_path('apple-touch-icon.png'), rel: 'apple-touch-icon' }
- %link{ href: asset_path('apple-touch-icon-72x72.png'), rel: 'apple-touch-icon', sizes: '72x72' }
- %link{ href: asset_path('apple-touch-icon-114x114.png'), rel: 'apple-touch-icon', sizes: '114x114' }
- %link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' }
+ / Touch icons
+ %link{ href: asset_path('apple-touch-icon.png'), rel: 'apple-touch-icon' }
+ %link{ href: asset_path('apple-touch-icon-72x72.png'), rel: 'apple-touch-icon', sizes: '72x72' }
+ %link{ href: asset_path('apple-touch-icon-114x114.png'), rel: 'apple-touch-icon', sizes: '114x114' }
+ %link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' }
- /
- Le javascript
- \==================================================
- / Placed at the top of the document 'cause of turbolinks
- = javascript_include_tag 'application'
+ /
+ Le javascript
+ \==================================================
+ / 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'
+ %body
+ = render 'shared/navbar'
- #main-container.container
- .content= yield
-
- #footer
- .container= render 'shared/footer'
+ #main-container.container.row
+ %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'
diff --git a/app/views/pages/home.html.haml b/app/views/pages/home.html.haml
index a74aaed..97d95d6 100644
--- a/app/views/pages/home.html.haml
+++ b/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
+ Ruby 2 + Rails 4.0.0 + Foundation
diff --git a/app/views/shared/_navbar.html.haml b/app/views/shared/_navbar.html.haml
index b9451c8..92cec9b 100644
--- a/app/views/shared/_navbar.html.haml
+++ b/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
- %ul.title-area
- / Title Area
- %li.name
- %h1
- %a{href: "#"} Top Bar Title
- / 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
- / Left Nav Section
- %ul.left
- %li.divider
- %li.active
- %a{href: "#"} Main Item 1
- %li.divider
- %li
- %a{href: "#"} Main Item 2
- %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
- %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!
+ #nav-inner
+ %ul.title-area
+ / Title Area
+ %li.name
+ %h1
+ %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
+ .top-bar-section
+ / Left Nav Section
+ %ul.left
+ %li.divider
+ %li.active
+ %a{href: "#"} Conferences
+ %li.divider
+ %li
+ %a{href: "#"} Organizations
+ %li.divider
+ %li
+ %a{href: "#"} Resources
+ %li.divider
+ / Right Nav Section
+ %ul.right
+ %li.divider.hide-for-small
+ %li.has-form
+ %a.button{href: "#"} Sign In!