Looking a little more like a real site
This commit is contained in:
Godwin
parent
5681ff1dc5
commit
693dcc31aa
BIN
app/assets/images/nola.jpg
Normal file
BIN
app/assets/images/nola.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
@ -8,11 +8,17 @@
|
|||||||
* You're free to add application-wide styles to this file and they'll appear at the top of the
|
* 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.
|
* 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 "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";
|
||||||
|
|||||||
@ -65,7 +65,7 @@ $default-float: left;
|
|||||||
|
|
||||||
// $body-bg: #fff;
|
// $body-bg: #fff;
|
||||||
// $body-font-color: #222;
|
// $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-weight: normal;
|
||||||
// $body-font-style: normal;
|
// $body-font-style: normal;
|
||||||
|
|
||||||
@ -172,7 +172,7 @@ $default-float: left;
|
|||||||
|
|
||||||
// Control header font styles
|
// 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-weight: bold;
|
||||||
// $header-font-style: normal;
|
// $header-font-style: normal;
|
||||||
// $header-font-color: #222;
|
// $header-font-color: #222;
|
||||||
@ -1260,7 +1260,7 @@ $default-float: left;
|
|||||||
|
|
||||||
// Height and margin
|
// Height and margin
|
||||||
|
|
||||||
// $topbar-height: 45px;
|
$topbar-height: 64px;
|
||||||
// $topbar-margin-bottom: 0;
|
// $topbar-margin-bottom: 0;
|
||||||
|
|
||||||
// Control Input height for top bar
|
// Control Input height for top bar
|
||||||
@ -1269,8 +1269,8 @@ $default-float: left;
|
|||||||
|
|
||||||
// Controlling the styles for the title in the top bar
|
// 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
|
// Style the top bar dropdown elements
|
||||||
|
|
||||||
@ -1286,8 +1286,8 @@ $default-float: left;
|
|||||||
// $topbar-link-color: #fff;
|
// $topbar-link-color: #fff;
|
||||||
// $topbar-link-color-hover: #fff;
|
// $topbar-link-color-hover: #fff;
|
||||||
// $topbar-link-color-active: #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-hover-lightness: -30%; // Darken by 30%
|
||||||
// $topbar-link-bg-hover: darken($topbar-bg-color, 3%);
|
// $topbar-link-bg-hover: darken($topbar-bg-color, 3%);
|
||||||
// $topbar-link-bg-active: darken($topbar-bg-color, 3%);
|
// $topbar-link-bg-active: darken($topbar-bg-color, 3%);
|
||||||
|
|||||||
41
app/assets/stylesheets/sass/_layout.scss
Normal file
41
app/assets/stylesheets/sass/_layout.scss
Normal 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
6
app/assets/stylesheets/sass/_typography.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/**
|
||||||
|
|
||||||
|
Basic theme rules, html native elements only
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
@ -1,5 +1,6 @@
|
|||||||
class PagesController < ApplicationController
|
class PagesController < ApplicationController
|
||||||
|
|
||||||
def home
|
def home
|
||||||
end
|
@title_img = '/assets/nola.jpg'
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|||||||
@ -1,37 +1,44 @@
|
|||||||
!!!
|
!!!
|
||||||
%html{ lang: I18n.locale.to_s }
|
%html{ lang: I18n.locale.to_s }
|
||||||
%head
|
%head
|
||||||
%meta{ charset: 'utf-8' }
|
%meta{ charset: 'utf-8' }
|
||||||
%meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' }
|
%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
|
%title= yield_or_default :title, controller.action_name.titlecase
|
||||||
= csrf_meta_tags
|
= csrf_meta_tags
|
||||||
= yield :head
|
= yield :head
|
||||||
/ Le HTML5 shim, for IE6-8 support of HTML elements
|
/ Le HTML5 shim, for IE6-8 support of HTML elements
|
||||||
/[if lt IE 9]
|
/[if lt IE 9]
|
||||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
|
||||||
|
|
||||||
/ Le styles
|
/ Le styles
|
||||||
= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Ubuntu:400,500,700',
|
= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Ubuntu:400,500,700',
|
||||||
'application',
|
'application',
|
||||||
media: 'all'
|
media: 'all'
|
||||||
|
|
||||||
/ Touch icons
|
/ Touch icons
|
||||||
%link{ href: asset_path('apple-touch-icon.png'), rel: 'apple-touch-icon' }
|
%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-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-114x114.png'), rel: 'apple-touch-icon', sizes: '114x114' }
|
||||||
%link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' }
|
%link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' }
|
||||||
|
|
||||||
/
|
/
|
||||||
Le javascript
|
Le javascript
|
||||||
\==================================================
|
\==================================================
|
||||||
/ Placed at the top of the document 'cause of turbolinks
|
/ Placed at the top of the document 'cause of turbolinks
|
||||||
= javascript_include_tag 'application'
|
= javascript_include_tag 'application'
|
||||||
|
= javascript_include_tag '//use.edgefonts.net/abel;amatic-sc.js'
|
||||||
|
|
||||||
%body
|
%body
|
||||||
= render 'shared/navbar'
|
= 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.
|
||||||
#footer
|
%section#main.columns.large-8.pull-4
|
||||||
.container= render 'shared/footer'
|
%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'
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
- title t('hello')
|
- title 'Bike!Bike!'
|
||||||
|
|
||||||
%h1
|
%h1
|
||||||
Ticket to Ride
|
Bike!Bike!
|
||||||
%p.lead.muted
|
%p.lead.muted
|
||||||
Ruby 2 + Rails 4.0.0 + Foundation
|
Ruby 2 + Rails 4.0.0 + Foundation
|
||||||
|
|||||||
@ -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.top-bar
|
||||||
%ul.title-area
|
#nav-inner
|
||||||
/ Title Area
|
%ul.title-area
|
||||||
%li.name
|
/ Title Area
|
||||||
%h1
|
%li.name
|
||||||
%a{href: "#"} Top Bar Title
|
%h1
|
||||||
/ Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone
|
%a{href: "/"} Bike!Bike!
|
||||||
%li.toggle-topbar.menu-icon
|
/ Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone
|
||||||
%a{href: "#"}
|
%li.toggle-topbar.menu-icon
|
||||||
%span Menu
|
%a{href: "#"}
|
||||||
%section.top-bar-section
|
%span Menu
|
||||||
/ Left Nav Section
|
.top-bar-section
|
||||||
%ul.left
|
/ Left Nav Section
|
||||||
%li.divider
|
%ul.left
|
||||||
%li.active
|
%li.divider
|
||||||
%a{href: "#"} Main Item 1
|
%li.active
|
||||||
%li.divider
|
%a{href: "#"} Conferences
|
||||||
%li
|
%li.divider
|
||||||
%a{href: "#"} Main Item 2
|
%li
|
||||||
%li.divider
|
%a{href: "#"} Organizations
|
||||||
%li.has-dropdown
|
%li.divider
|
||||||
%a{href: "#"} Main Item 3
|
%li
|
||||||
%ul.dropdown
|
%a{href: "#"} Resources
|
||||||
%li.has-dropdown
|
%li.divider
|
||||||
%a{href: "#"} Dropdown Level 1a
|
/ Right Nav Section
|
||||||
%ul.dropdown
|
%ul.right
|
||||||
%li
|
%li.divider.hide-for-small
|
||||||
%label Dropdown Level 2 Label
|
%li.has-form
|
||||||
%li
|
%a.button{href: "#"} Sign In!
|
||||||
%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!
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user