use susy instead of 960gs
This commit is contained in:
parent
3c57ccbd28
commit
b743a676a8
2
Gemfile
2
Gemfile
@ -4,9 +4,9 @@ gem "compass", ">= 0.13.alpha.0"
|
|||||||
gem "middleman", ">= 3.0.0rc4"
|
gem "middleman", ">= 3.0.0rc4"
|
||||||
gem "middleman-smusher"
|
gem "middleman-smusher"
|
||||||
|
|
||||||
gem 'compass-960-plugin'
|
|
||||||
gem "compass-holmes"
|
gem "compass-holmes"
|
||||||
gem 'oily_png'
|
gem 'oily_png'
|
||||||
gem "sass"
|
gem "sass"
|
||||||
gem "slim"
|
gem "slim"
|
||||||
gem "rake"
|
gem "rake"
|
||||||
|
gem "susy"
|
||||||
|
|||||||
@ -13,8 +13,6 @@ GEM
|
|||||||
chunky_png (~> 1.2)
|
chunky_png (~> 1.2)
|
||||||
fssm (>= 0.2.7)
|
fssm (>= 0.2.7)
|
||||||
sass (~> 3.2.0.alpha.93)
|
sass (~> 3.2.0.alpha.93)
|
||||||
compass-960-plugin (0.10.4)
|
|
||||||
compass (>= 0.10.0)
|
|
||||||
compass-holmes (0.1.1)
|
compass-holmes (0.1.1)
|
||||||
compass (>= 0.11)
|
compass (>= 0.11)
|
||||||
execjs (1.4.0)
|
execjs (1.4.0)
|
||||||
@ -108,6 +106,9 @@ GEM
|
|||||||
sprockets-sass (0.8.0)
|
sprockets-sass (0.8.0)
|
||||||
sprockets (~> 2.0)
|
sprockets (~> 2.0)
|
||||||
tilt (~> 1.1)
|
tilt (~> 1.1)
|
||||||
|
susy (1.0.rc.1)
|
||||||
|
compass (>= 0.12.2.rc.0)
|
||||||
|
sass (>= 3.2.0.alpha.237)
|
||||||
syntax (1.0.0)
|
syntax (1.0.0)
|
||||||
temple (0.4.0)
|
temple (0.4.0)
|
||||||
thor (0.15.4)
|
thor (0.15.4)
|
||||||
@ -123,7 +124,6 @@ PLATFORMS
|
|||||||
|
|
||||||
DEPENDENCIES
|
DEPENDENCIES
|
||||||
compass (>= 0.13.alpha.0)
|
compass (>= 0.13.alpha.0)
|
||||||
compass-960-plugin
|
|
||||||
compass-holmes
|
compass-holmes
|
||||||
middleman (>= 3.0.0rc4)
|
middleman (>= 3.0.0rc4)
|
||||||
middleman-smusher
|
middleman-smusher
|
||||||
@ -131,3 +131,4 @@ DEPENDENCIES
|
|||||||
rake
|
rake
|
||||||
sass
|
sass
|
||||||
slim
|
slim
|
||||||
|
susy
|
||||||
|
|||||||
@ -7,7 +7,6 @@ page "/albert/", :layout => false
|
|||||||
|
|
||||||
# Change Compass configuration
|
# Change Compass configuration
|
||||||
compass_config do |config|
|
compass_config do |config|
|
||||||
require 'ninesixty'
|
|
||||||
config.output_style = :compact
|
config.output_style = :compact
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|||||||
@ -31,9 +31,9 @@ html.no-js.light lang="en"
|
|||||||
/ for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/
|
/ for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/
|
||||||
script src="js/libs/modernizr.custom.01860.min.js"
|
script src="js/libs/modernizr.custom.01860.min.js"
|
||||||
body
|
body
|
||||||
header
|
|
||||||
== partial "navbar"
|
|
||||||
.container
|
.container
|
||||||
|
header
|
||||||
|
== partial "navbar"
|
||||||
#main
|
#main
|
||||||
== yield
|
== yield
|
||||||
footer
|
footer
|
||||||
|
|||||||
@ -1,374 +0,0 @@
|
|||||||
/*
|
|
||||||
Variable Grid System.
|
|
||||||
Learn more ~ http://www.spry-soft.com/grids/
|
|
||||||
Based on 960 Grid System - http://960.gs/
|
|
||||||
|
|
||||||
Licensed under GPL and MIT.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Forces backgrounds to span full width,
|
|
||||||
even if there is horizontal scrolling.
|
|
||||||
Increase this if your layout is wider.
|
|
||||||
|
|
||||||
Note: IE6 works fine without this fix.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
min-width: 960px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Containers
|
|
||||||
----------------------------------------------------------------------------------------------------*/
|
|
||||||
.container_12 {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
width: 960px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid >> Global
|
|
||||||
----------------------------------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
.grid_1,
|
|
||||||
.grid_2,
|
|
||||||
.grid_3,
|
|
||||||
.grid_4,
|
|
||||||
.grid_5,
|
|
||||||
.grid_6,
|
|
||||||
.grid_7,
|
|
||||||
.grid_8,
|
|
||||||
.grid_9,
|
|
||||||
.grid_10,
|
|
||||||
.grid_11,
|
|
||||||
.grid_12 {
|
|
||||||
display:inline;
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.push_1, .pull_1,
|
|
||||||
.push_2, .pull_2,
|
|
||||||
.push_3, .pull_3,
|
|
||||||
.push_4, .pull_4,
|
|
||||||
.push_5, .pull_5,
|
|
||||||
.push_6, .pull_6,
|
|
||||||
.push_7, .pull_7,
|
|
||||||
.push_8, .pull_8,
|
|
||||||
.push_9, .pull_9,
|
|
||||||
.push_10, .pull_10,
|
|
||||||
.push_11, .pull_11,
|
|
||||||
.push_12, .pull_12 {
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
|
|
||||||
----------------------------------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
.alpha {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.omega {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid >> 12 Columns
|
|
||||||
----------------------------------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
.container_12 .grid_1 {
|
|
||||||
width:60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_2 {
|
|
||||||
width:140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_3 {
|
|
||||||
width:220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_4 {
|
|
||||||
width:300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_5 {
|
|
||||||
width:380px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_6 {
|
|
||||||
width:460px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_7 {
|
|
||||||
width:540px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_8 {
|
|
||||||
width:620px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_9 {
|
|
||||||
width:700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_10 {
|
|
||||||
width:780px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_11 {
|
|
||||||
width:860px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .grid_12 {
|
|
||||||
width:940px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Prefix Extra Space >> 12 Columns
|
|
||||||
----------------------------------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
.container_12 .prefix_1 {
|
|
||||||
padding-left:80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_2 {
|
|
||||||
padding-left:160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_3 {
|
|
||||||
padding-left:240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_4 {
|
|
||||||
padding-left:320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_5 {
|
|
||||||
padding-left:400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_6 {
|
|
||||||
padding-left:480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_7 {
|
|
||||||
padding-left:560px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_8 {
|
|
||||||
padding-left:640px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_9 {
|
|
||||||
padding-left:720px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_10 {
|
|
||||||
padding-left:800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .prefix_11 {
|
|
||||||
padding-left:880px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Suffix Extra Space >> 12 Columns
|
|
||||||
----------------------------------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
.container_12 .suffix_1 {
|
|
||||||
padding-right:80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_2 {
|
|
||||||
padding-right:160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_3 {
|
|
||||||
padding-right:240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_4 {
|
|
||||||
padding-right:320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_5 {
|
|
||||||
padding-right:400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_6 {
|
|
||||||
padding-right:480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_7 {
|
|
||||||
padding-right:560px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_8 {
|
|
||||||
padding-right:640px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_9 {
|
|
||||||
padding-right:720px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_10 {
|
|
||||||
padding-right:800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .suffix_11 {
|
|
||||||
padding-right:880px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Push Space >> 12 Columns
|
|
||||||
----------------------------------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
.container_12 .push_1 {
|
|
||||||
left:80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_2 {
|
|
||||||
left:160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_3 {
|
|
||||||
left:240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_4 {
|
|
||||||
left:320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_5 {
|
|
||||||
left:400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_6 {
|
|
||||||
left:480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_7 {
|
|
||||||
left:560px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_8 {
|
|
||||||
left:640px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_9 {
|
|
||||||
left:720px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_10 {
|
|
||||||
left:800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .push_11 {
|
|
||||||
left:880px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Pull Space >> 12 Columns
|
|
||||||
----------------------------------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
.container_12 .pull_1 {
|
|
||||||
left:-80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_2 {
|
|
||||||
left:-160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_3 {
|
|
||||||
left:-240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_4 {
|
|
||||||
left:-320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_5 {
|
|
||||||
left:-400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_6 {
|
|
||||||
left:-480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_7 {
|
|
||||||
left:-560px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_8 {
|
|
||||||
left:-640px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_9 {
|
|
||||||
left:-720px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_10 {
|
|
||||||
left:-800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container_12 .pull_11 {
|
|
||||||
left:-880px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* `Clear Floated Elements
|
|
||||||
----------------------------------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/* http://sonspring.com/journal/clearing-floats */
|
|
||||||
|
|
||||||
.clear {
|
|
||||||
clear: both;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
|
|
||||||
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
content: '\0020';
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
The following zoom:1 rule is specifically for IE6 + IE7.
|
|
||||||
Move to separate stylesheet if invalid CSS is a problem.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.clearfix {
|
|
||||||
zoom: 1;
|
|
||||||
}
|
|
||||||
@ -1,12 +1,9 @@
|
|||||||
@import "compass";
|
@import "compass";
|
||||||
@import "960/grid";
|
|
||||||
@import "solarized";
|
@import "solarized";
|
||||||
@import "normalize";
|
@import "normalize";
|
||||||
@import "960";
|
|
||||||
@import "font-awesome";
|
@import "font-awesome";
|
||||||
//@import "compass-holmes"; // css-based debugging
|
//@import "compass-holmes"; // css-based debugging
|
||||||
|
@import "susy";
|
||||||
$ninesixty_columns: 12;
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Lobster', Georgia, Times, serif;
|
font-family: 'Lobster', Georgia, Times, serif;
|
||||||
@ -18,9 +15,7 @@ body {
|
|||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a { text-decoration:none; }
|
||||||
text-decoration:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -46,22 +41,17 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
@include grid(12);
|
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
box-shadow: 0 2px 3px #b8b8b8;
|
box-shadow: 0 2px 3px #b8b8b8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@include grid_container;
|
|
||||||
@include clearfix;
|
|
||||||
@include accentize($yellow);
|
@include accentize($yellow);
|
||||||
|
@include container;
|
||||||
|
|
||||||
/* Grid layout */
|
/* Grid layout */
|
||||||
#main {
|
#main {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
@include grid(12);
|
|
||||||
@include clearfix;
|
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
color: darken($yellow, 10%);
|
color: darken($yellow, 10%);
|
||||||
@ -98,4 +88,3 @@ footer {
|
|||||||
line-height: 0.8em;
|
line-height: 0.8em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user