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-smusher"
|
||||
|
||||
gem 'compass-960-plugin'
|
||||
gem "compass-holmes"
|
||||
gem 'oily_png'
|
||||
gem "sass"
|
||||
gem "slim"
|
||||
gem "rake"
|
||||
gem "susy"
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@ GEM
|
|||
chunky_png (~> 1.2)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.2.0.alpha.93)
|
||||
compass-960-plugin (0.10.4)
|
||||
compass (>= 0.10.0)
|
||||
compass-holmes (0.1.1)
|
||||
compass (>= 0.11)
|
||||
execjs (1.4.0)
|
||||
|
|
@ -108,6 +106,9 @@ GEM
|
|||
sprockets-sass (0.8.0)
|
||||
sprockets (~> 2.0)
|
||||
tilt (~> 1.1)
|
||||
susy (1.0.rc.1)
|
||||
compass (>= 0.12.2.rc.0)
|
||||
sass (>= 3.2.0.alpha.237)
|
||||
syntax (1.0.0)
|
||||
temple (0.4.0)
|
||||
thor (0.15.4)
|
||||
|
|
@ -123,7 +124,6 @@ PLATFORMS
|
|||
|
||||
DEPENDENCIES
|
||||
compass (>= 0.13.alpha.0)
|
||||
compass-960-plugin
|
||||
compass-holmes
|
||||
middleman (>= 3.0.0rc4)
|
||||
middleman-smusher
|
||||
|
|
@ -131,3 +131,4 @@ DEPENDENCIES
|
|||
rake
|
||||
sass
|
||||
slim
|
||||
susy
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ page "/albert/", :layout => false
|
|||
|
||||
# Change Compass configuration
|
||||
compass_config do |config|
|
||||
require 'ninesixty'
|
||||
config.output_style = :compact
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ html.no-js.light lang="en"
|
|||
/ for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/
|
||||
script src="js/libs/modernizr.custom.01860.min.js"
|
||||
body
|
||||
header
|
||||
== partial "navbar"
|
||||
.container
|
||||
header
|
||||
== partial "navbar"
|
||||
#main
|
||||
== yield
|
||||
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 "960/grid";
|
||||
@import "solarized";
|
||||
@import "normalize";
|
||||
@import "960";
|
||||
@import "font-awesome";
|
||||
//@import "compass-holmes"; // css-based debugging
|
||||
|
||||
$ninesixty_columns: 12;
|
||||
@import "susy";
|
||||
|
||||
h1 {
|
||||
font-family: 'Lobster', Georgia, Times, serif;
|
||||
|
|
@ -18,9 +15,7 @@ body {
|
|||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
}
|
||||
a { text-decoration:none; }
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
|
|
@ -46,22 +41,17 @@ header {
|
|||
}
|
||||
|
||||
footer {
|
||||
@include grid(12);
|
||||
padding-left: 15px;
|
||||
box-shadow: 0 2px 3px #b8b8b8;
|
||||
}
|
||||
|
||||
.container {
|
||||
@include grid_container;
|
||||
@include clearfix;
|
||||
@include accentize($yellow);
|
||||
|
||||
@include container;
|
||||
|
||||
/* Grid layout */
|
||||
#main {
|
||||
margin-top: 50px;
|
||||
@include grid(12);
|
||||
@include clearfix;
|
||||
}
|
||||
a:hover {
|
||||
color: darken($yellow, 10%);
|
||||
|
|
@ -98,4 +88,3 @@ footer {
|
|||
line-height: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue