bike/BikeBikeBike
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

Looking a little more like a real site

Browse Source
This commit is contained in:
Godwin 2013-10-27 19:07:56 -06:00
parent 5681ff1dc5
commit 693dcc31aa
9 changed files with 137 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/nola.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

16
app/assets/stylesheets/application.css.scss
View File

@ -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";

14
app/assets/stylesheets/foundation_and_overrides.scss
View File

@ -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%);

41
app/assets/stylesheets/sass/_layout.scss Normal file
View File

@ -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;
}

6
app/assets/stylesheets/sass/_typography.scss Normal file
View File

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

5
app/controllers/pages_controller.rb
View File

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

67
app/views/layouts/application.html.haml
View File

@ -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]
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
%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]
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
/ 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'

7
app/views/pages/home.html.haml
View File

@ -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

153
app/views/shared/_navbar.html.haml
View File

@ -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!