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!