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

Looking a little more like a real site

development
Godwin 11 years ago
parent
5681ff1dc5
commit
693dcc31aa
9 changed files with 137 additions and 172 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      app/assets/images/nola.jpg
  2. 16
      app/assets/stylesheets/application.css.scss
  3. 14
      app/assets/stylesheets/foundation_and_overrides.scss
  4. 41
      app/assets/stylesheets/sass/_layout.scss
  5. 6
      app/assets/stylesheets/sass/_typography.scss
  6. 5
      app/controllers/pages_controller.rb
  7. 67
      app/views/layouts/application.html.haml
  8. 7
      app/views/pages/home.html.haml
  9. 153
      app/views/shared/_navbar.html.haml

BIN
app/assets/images/nola.jpg
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
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
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!

Write Preview
Loading…
Cancel
Save