seasons 0.9.3.beta1

data/lib/seasons.rb

@@ -0,0 +1,3 @@
+require 'compass'
+
+Compass::Frameworks.register("seasons", :path => "#{File.dirname(__FILE__)}/..")

data/seasons.gemspec

@@ -0,0 +1,41 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{seasons}
+  s.version = "0.9.3.beta1"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
+  s.authors = ["Scott Kellum"]
+  s.date = %q{2011-10-06}
+  s.description = %q{The Compass variant of the Seasons framework to style Treesaver.}
+  s.email = %w{scott@treesaver.net}
+  s.has_rdoc = false
+  s.files = [
+    "seasons.gemspec",
+    "lib/seasons.rb",
+    "stylesheets/seasons/_core.sass",
+    "stylesheets/seasons/_tools.sass",
+    "stylesheets/seasons/tools/_basic-functions.sass",
+    "stylesheets/seasons/tools/_css3.sass",
+    "stylesheets/seasons/tools/_grid-tools.sass",
+    "stylesheets/seasons/tools/_modular-scale.sass",
+    "stylesheets/seasons/tools/_reset.sass",
+    "templates/project/_chrome.scss",
+    "templates/project/_config.sass",
+    "templates/project/_skin.scss",
+    "templates/project/style.sass",
+    "templates/project/treesaver-0.9.3b.js",
+    "templates/project/toc.json",
+    "templates/project/resources.html",
+    "templates/project/index.html",
+    "templates/project/article.html",
+    "templates/project/img.jpg",
+    "templates/project/manifest.rb"
+  ]
+  s.homepage = %q{http://www.treesaver.net/}
+  s.require_paths = ["lib"]
+  s.rubyforge_project = %q{seasons}
+  s.rubygems_version = %q{0.9.3.beta1}
+  s.summary = %q{The Compass variant of the Seasons framework to style Treesaver.}
+  s.add_dependency(%q<compass>, ["~> 0.11"])
+end

data/stylesheets/seasons/_core.sass

@@ -0,0 +1,309 @@
+///////////////////////////
+//        METRICS        //
+///////////////////////////
+
+
+// DEFAULT GRID METRICS
+$base-size: 16px !default
+$size: 1em !default
+$line-height: 1.2em !default
+$module-w: 280px !default
+$module-h: 280px !default
+$gutter: 14px !default
+// grid margins:
+$margin: 20px !default
+$top: 20px !default
+$bottom: 20px !default
+$columns: 12 !default
+$text-column-span: 3 !default
+
+
+// IMAGE + PAGE RATIOS
+=ratio($width, $height, $cols: $columns)
+  @for $i from 1 through $cols
+    .r#{$width}x#{$height}.w#{$i}, .container.w#{$i} [ratio="#{$width}x#{$height}"] img // Grid ratio, figure ratio.
+      width: grid($i) // Width spans all columns
+      height: round(grid($i) * ( $height / $width )) // Height is the proportion of the width.
+
++ratios // Run the code above. Ratios are defined in _config.sass
+
+// GRID MEASURMENTS
+@for $i from 1 through $columns // loop defines columns. c1, c2, c3 . . .
+  .c#{$i}
+    margin-left: grid($i) - $module-w
+@for $i from 1 through $columns // loop defines widths. w1, w2, w3 . . .
+  .w#{$i}
+    width: grid($i)
+
+// Vertical grid
+$vertical-grid: false !default
+$rows: 10 !default
+@if $vertical-grid // Generate only if $vertical-grid is true. This code is usually not nessisary.
+  @for $i from 1 through $rows // loop defines rows. r1, r2, r3 . . .
+    .r#{$i}
+      position: absolute
+      top: (grid($i, $module-h) - $module-h) + $top
+  @for $i from 1 through $rows // loop defines heights. h1, h2, h3 . . .
+    .h#{$i}
+      height: grid($i, $module-h)
+
+// Lightbox sizes
+.lightbox .container
+  &[class*="single"]
+    width: grid($text-column-span)
+  &[class*="double"]
+    width: grid($text-column-span * 2)
+  &[class*="triple"]
+    width: grid($text-column-span * 3)
+  &[class*="quad"]
+    width: grid($text-column-span * 4)
+
+// COLUMN WIDTHS
+.column
+  width: grid($text-column-span)
+  @include type($size, $line-height)
+
+// GRID+FIGURE MEASUREMENTS
+.grid
+  position: absolute
+  overflow: hidden
+  z-index: 1
+  // Helps reduce flickr when paging
+  -webkit-backface-visibility: hidden
+  // Sometimes Safari forgets this one
+  -webkit-font-smoothing: subpixel-antialiased
+ 
+// CLEAR MIN-MAX FOR FIXED GRIDS
+.fixed.grid, .sizetocontainer.grid
+  max-width: none
+  max-height: none
+  min-width: none
+  min-height: none
+
+
+///////////////////////////
+// GENERAL FUNCTIONALITY //
+///////////////////////////
+
+
+// Hide things
+html.js, html.no-js // Using this to up the priority of .hidden down the cascade.
+  .hidden
+    display: none
+
+// Positioning of Chrome
+.chrome, .viewer
+  position: absolute
+  display: block
+
+.chrome
+  bottom: 0
+  top: 0
+  left: 0
+  right: 0
+
+
+// DESKTOP SCROLLING CONTAINER SUPPORT
+$scroll-support: true !default
+@if $scroll-support
+  .container.scroll
+    position: absolute
+    overflow: auto
+    overflow-x: hidden
+  .grid .scroll-fade:after // gradient to indicate overflow
+    content: "\0020"
+    position: absolute
+    bottom: 0
+    left: 0
+    right: 0
+    height: 40px
+    z-index: 3
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba($page, 0)), to(rgba($page, 1)))
+    background-image: -webkit-linear-gradient(top, rgba($page, 0), rgba($page, 1))
+    background-image: -moz-linear-gradient(top, rgba($page, 0), rgba($page, 1))
+    background-image: -ms-linear-gradient(top, rgba($page, 0), rgba($page, 1))
+    background-image: -o-linear-gradient(top, rgba($page, 0), rgba($page, 1))
+    background-image: linear-gradient(top, rgba($page, 0), rgba($page, 1))
+  .container .scroll // allow scrolling
+    overflow: auto
+    width: 100%
+    height: 100%
+    padding-bottom: 40px
+  // FORCE SCROLLBAR FOR SAFARI IN LION -- http://simurai.com/post/8083942390/force-lion-scrollbar
+  ::-webkit-scrollbar
+    -webkit-appearance: none
+    width: 6px
+  ::-webkit-scrollbar-thumb
+    border-radius: 3px
+    background-color: rgba(0,0,0,.5)
+  // Make The Scrollbars Smaller On Touch Devices
+  .touch ::-webkit-scrollbar
+    width: 3px
+
+// TYPOGRAPHY RESET
+html, body
+  +type($base-size, $line-height)
+  font-family: $font
+  color: $text
+  background-color: $body
+  overflow: hidden
+
+// Make sure headlines look good and always fit
+h1, h2, h3, h4, h5, h6
+  text-rendering: optimizeLegibility
+  word-wrap: break-word
+
+// Hyphenate paragraphs
+$hyphenate: true !default
+@if $hyphenate
+  p
+    +hyphens(auto)
+
+
+// COLUMNS
+.column, .container
+  position: absolute
+  overflow: hidden
+  top: $top
+  bottom: $bottom
+
+// Set min height so no one-line columns appear
+.column
+  min-height: $line-height * 3
+
+// Page Opacity
+$page-opacity: true !default
+@if $page-opacity
+  #previousPage, #nextPage
+    opacity: 0.5
+
+// TRIM LEFT OR RIGHT PAGE MARGINS
+.grid.trimleft
+  padding-left: 0
+.grid.trimright
+  padding-right: 0
+
+// FIGURE PLACEMENT
+figure
+  display: block
+
+.colapsed
+  position: absolute
+.topfix
+  top: 0
+.rightfix
+  right: 0
+.bottomfix
+  bottom: 0
+  top: auto
+.leftfix
+  left: 0
+
+.overflow
+  overflow: visible
+
+// RESOURCES
+.error, .loading
+  position: absolute
+  &#nextPage, &#previousPage
+    display: none
+
+.hidden, .microdata
+  display: none
+
+.group
+  position: absolute
+  top: 0
+  bottom: 0
+  padding: 0
+
+// CENTER CONTENT
+.center, .center *
+  text-align: center
+
+// DISABLES CAPTIONS FOR CONTAINER
+.nocap .caption
+  display: none
+
+// Caption placement
+$caption-placement: true !default
+@if $caption-placement
+  // Add padding to captions when in a fill grid
+  .fill .caption
+    padding-left: $margin
+    padding-right: $margin
+  // INSET CAPTION ADVANCED PLACEMENT
+  .caption
+    &.left
+      text-align: left
+    &.right
+      right: 0
+      text-align: right
+  .insetcap
+    .caption
+      position: absolute
+    &.ul .caption
+      top: 0
+      left: 0
+    &.ur .caption
+      top: 0
+      right: 0
+    &.ll .caption
+      bottom: 0
+      left: 0
+    &.lr .caption
+      bottom: 0
+      right: 0
+
+// SUPPORT FULL-BLEED FIGURES *ABITRARY CROPS BEWARE*
+// !IMPORTANT FLAGS NESSISARY TO OVERRIDE TREESAVER
+$fullbleed: true !default
+@if $fullbleed
+  .fullbleed
+    position: absolute
+    bottom: 0 !important
+    top: 0 !important
+    left: 0 !important
+    right: 0 !important
+    width: auto
+
+
+// MOBILE OPTIMIZATIONS
+// Tweaks to make things run more smoothly on mobile devices
+.os-ipad, .os-iphone
+  &, .grid
+    // iOS doesn't subpixel AA anyway, defining as normal AA speeds things up.
+    -webkit-font-smoothing: antialiased
+
+
+// Online/offline elements
+$offline-elements: true !default
+@if $offline-elements
+html.offline
+  .no-offline, [data-requires~="no-offline"]
+    display: none
+  [data-requires~="offline"]
+    display: block
+
+html.no-offline
+  [data-requires~="no-offline"]
+    display: block
+  [data-requires~="offline"]
+    display: none
+
+// Debug tools
+// used to highlihgt elements for placement.
+$debug: true !default
+@if $debug
+  .r
+    +r
+  .g
+    +g
+  .b
+    +b
+  .c
+    +c
+  .m
+    +m
+  .y
+    +y

data/stylesheets/seasons/_tools.sass

@@ -0,0 +1,5 @@
+@import tools/reset
+@import tools/css3
+@import tools/basic-functions
+@import tools/grid-tools
+@import tools/modular-scale

data/stylesheets/seasons/tools/_basic-functions.sass

@@ -0,0 +1,80 @@
+// TYPOGRAPHIC TOOLS
+=type($size, $line-height)
+  font-size: $size
+  line-height: $line-height
+
+=solid($lineheight)
+  font-size: $lineheight
+  line-height: 1em
+
+=caps($letterspace: 0.1em)
+  text-transform: uppercase
+  letter-spacing: $letterspace
+
+=letterpress($color)
+  text-shadow: 0 -1px 0 darken($color, 15%), 0 1px 0 lighten($color, 15%)
+
+
+// CENTER AND FILL BACKGROUND
+=background-fill
+  background-repeat: no-repeat
+  background-position: center center fixed
+  +prefix(background-size, cover)
+
+
+// @FONT-FACE (FONTSPRING SYNTAX)
+=font($name, $url, $weight: normal, $style: normal)
+  @font-face
+    font-family: '$name'
+    font-weight: $weight
+    font-style: $style
+    src: url('#{$url}.eot?') format('eot'), url('#{$url}.woff') format('woff'), url('#{$url}.ttf')  format('truetype')
+
+
+// CLEARFIX
+=clearfix
+  &:before, &:after
+    content: "\0020"
+    display: block
+    height: 0
+    overflow: hidden  
+  &:after
+    content: "\0020"
+    display: block
+    height: 0
+    overflow: hidden  
+    clear: both  
+  &
+    zoom: 1  
+
+// REMOVE GRID
+=remove
+  min-width: 99999px
+  width: 99999px
+
+
+// SOME BASIC SPRITE STYLING
+=sprite($width, $height, $offset-x, $offset-y, $url: $sprite-file)
+  display: block
+  overflow: hidden
+  text-indent: -999px
+  background-image: url('../img/sprites.png')
+  background-position: ($offset-x * -1) ($offset-y * -1)
+  background-repeat: no-repeat
+  width: $width
+  height: $height
+
+
+// DEBUG TOOLS
+=r
+  background: #ff9999 !important
+=g
+  background: #99ff99 !important
+=b
+  background: #9999ff !important
+=c
+  background: #99ffff !important
+=m
+  background: #ff99ff !important
+=y
+  background: #ffff99 !important