From 83c44eaafdbae2d814260e87bf4e19be25d9c651 Mon Sep 17 00:00:00 2001 From: Ariejan de Vroom Date: Wed, 24 Jul 2013 20:21:40 +0200 Subject: [PATCH] wip --- Gemfile | 2 + Gemfile.lock | 9 + Rules | 12 +- content/css/screen.sass | 28 ++ content/css/screen.scss | 348 ------------- content/css/zurb-foundation/foundation.scss | 46 -- .../foundation/_foundation-global.scss | 198 -------- .../foundation/components/_alert-boxes.scss | 106 ---- .../foundation/components/_block-grid.scss | 66 --- .../foundation/components/_breadcrumbs.scss | 117 ----- .../foundation/components/_button-groups.scss | 76 --- .../foundation/components/_buttons.scss | 219 --------- .../foundation/components/_clearing.scss | 211 -------- .../foundation/components/_custom-forms.scss | 240 --------- .../components/_dropdown-buttons.scss | 114 ----- .../foundation/components/_dropdown.scss | 145 ------ .../foundation/components/_flex-video.scss | 45 -- .../foundation/components/_forms.scss | 337 ------------- .../foundation/components/_global.scss | 70 --- .../foundation/components/_grid.scss | 168 ------- .../foundation/components/_inline-lists.scss | 52 -- .../foundation/components/_joyride.scss | 212 -------- .../foundation/components/_keystrokes.scss | 56 --- .../foundation/components/_labels.scss | 82 ---- .../foundation/components/_magellan.scss | 21 - .../foundation/components/_orbit.scss | 204 -------- .../foundation/components/_pagination.scss | 99 ---- .../foundation/components/_panels.scss | 76 --- .../components/_pricing-tables.scss | 130 ----- .../foundation/components/_progress-bars.scss | 70 --- .../foundation/components/_reveal.scss | 131 ----- .../foundation/components/_section.scss | 249 ---------- .../foundation/components/_side-nav.scss | 68 --- .../foundation/components/_split-buttons.scss | 159 ------ .../foundation/components/_sub-nav.scss | 67 --- .../foundation/components/_switch.scss | 249 ---------- .../foundation/components/_tables.scss | 80 --- .../foundation/components/_thumbs.scss | 45 -- .../foundation/components/_tooltips.scss | 113 ----- .../foundation/components/_top-bar.scss | 459 ------------------ .../foundation/components/_type.scss | 422 ---------------- .../foundation/components/_visibility.scss | 320 ------------ content/css/zurb-foundation/normalize.scss | 396 --------------- content/fonts/slkscr-webfont-eot.eot | Bin 4993 -> 0 bytes content/fonts/slkscr-webfont-svg.svg | 130 ----- content/fonts/slkscr-webfont-ttf.ttf | Bin 16648 -> 0 bytes content/fonts/slkscr-webfont-woff.woff | Bin 5824 -> 0 bytes content/index.haml | 20 +- layouts/default.haml | 159 +++--- layouts/post.haml | 40 +- 50 files changed, 155 insertions(+), 6511 deletions(-) create mode 100644 content/css/screen.sass delete mode 100644 content/css/screen.scss delete mode 100644 content/css/zurb-foundation/foundation.scss delete mode 100644 content/css/zurb-foundation/foundation/_foundation-global.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_alert-boxes.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_block-grid.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_breadcrumbs.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_button-groups.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_buttons.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_clearing.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_custom-forms.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_dropdown-buttons.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_dropdown.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_flex-video.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_forms.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_global.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_grid.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_inline-lists.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_joyride.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_keystrokes.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_labels.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_magellan.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_orbit.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_pagination.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_panels.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_pricing-tables.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_progress-bars.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_reveal.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_section.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_side-nav.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_split-buttons.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_sub-nav.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_switch.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_tables.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_thumbs.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_tooltips.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_top-bar.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_type.scss delete mode 100644 content/css/zurb-foundation/foundation/components/_visibility.scss delete mode 100644 content/css/zurb-foundation/normalize.scss delete mode 100755 content/fonts/slkscr-webfont-eot.eot delete mode 100755 content/fonts/slkscr-webfont-svg.svg delete mode 100755 content/fonts/slkscr-webfont-ttf.ttf delete mode 100755 content/fonts/slkscr-webfont-woff.woff diff --git a/Gemfile b/Gemfile index d162e73..1b092b4 100644 --- a/Gemfile +++ b/Gemfile @@ -11,6 +11,8 @@ gem 'builder' gem 'sass' gem 'compass' +gem 'bourbon' +gem 'neat' gem 'typogruby' gem 'nanoc-cachebuster' diff --git a/Gemfile.lock b/Gemfile.lock index d2c79fc..a9746d1 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -3,6 +3,9 @@ GEM specs: adsf (1.1.1) rack (>= 1.0.0) + bourbon (3.1.8) + sass (>= 3.2.0) + thor builder (3.2.2) chunky_png (1.2.8) coffee-script (2.2.0) @@ -32,6 +35,9 @@ GEM nanoc (>= 3.3.0) nanoc-javascript-concatenator (0.0.2) nanoc (>= 3.3.0) + neat (1.3.0) + bourbon (>= 2.1) + sass (>= 3.2) nokogiri (1.6.0) mini_portile (~> 0.5.0) posix-spawn (0.3.6) @@ -44,6 +50,7 @@ GEM rubypants (0.2.0) sass (3.2.9) systemu (2.5.2) + thor (0.18.1) tilt (1.4.1) typogruby (1.0.15) rubypants @@ -60,6 +67,7 @@ PLATFORMS DEPENDENCIES adsf + bourbon builder coffee-script compass @@ -70,6 +78,7 @@ DEPENDENCIES nanoc nanoc-cachebuster nanoc-javascript-concatenator + neat nokogiri pygments.rb rack diff --git a/Rules b/Rules index 6ef1a5e..074e7d0 100644 --- a/Rules +++ b/Rules @@ -1,12 +1,15 @@ #!/usr/bin/env ruby -puts "=" * 76 +SASS_LOAD_PATHS = [ + File.join(`bundle show bourbon`.chomp, *%w[app assets stylesheets]), + File.join(`bundle show neat`.chomp, *%w[app assets stylesheets]) +] + if ENV['NANOC_ENV'] == "production" puts " > Running in PRODUCTION mode" else puts " > Running in DEVELOPMENT mode" end -puts "=" * 76 preprocess do if ENV['NANOC_ENV'] == "production" @@ -37,9 +40,8 @@ compile '/sitemap/', :rep => 'gzip' do end # Use screen.scss as the single entry point for styles, ignore everything else in /assets/css - compile '/css/screen/' do - filter :sass, :syntax => :scss if @item[:extension] == 'scss' + filter :sass, load_paths: SASS_LOAD_PATHS end compile '/css/*' do @@ -129,7 +131,7 @@ end route %r{^/(assets/.*|sitemap|robots|atom)/$} do ext = item[:extension] ext = 'js' if ext == 'coffee' - ext = 'css' if ext == 'scss' + ext = 'css' if ext =~ /s[ca]ss/i if ENV['NANOC_ENV'] == "production" fp = cachebust?(item) ? fingerprint(item[:filename]) : '' diff --git a/content/css/screen.sass b/content/css/screen.sass new file mode 100644 index 0000000..4145fcb --- /dev/null +++ b/content/css/screen.sass @@ -0,0 +1,28 @@ +$turquoise: #1ABC9C +$greensea: #16A085 +$emerland: #2ECC71 +$nephritis: #27AE60 +$peterriver: #3498DB +$belizehole: #2980B9 +$amethyst: #9B59B6 +$wisteria: #8E44AD +$wetasphalt: #34495E +$midnightblue: #2C3E50 +$sunflower: #F1C40F +$orange: #F39C12 +$carrot: #E67E22 +$pumpkin: #D35400 +$alizarin: #E74C3C +$pomegranate: #C0392B +$clouds: #ECF0F1 +$silver: #BDC3C7 +$concrete: #95A5A6 +$asbestos: #7F8C8D + +$border-radius: 6px + +@import "pygments" + +@import "bourbon" +@import "neat" + diff --git a/content/css/screen.scss b/content/css/screen.scss deleted file mode 100644 index ff14a4d..0000000 --- a/content/css/screen.scss +++ /dev/null @@ -1,348 +0,0 @@ -$turquoise: #1ABC9C; -$greensea: #16A085; -$emerland: #2ECC71; -$nephritis: #27AE60; -$peterriver: #3498DB; -$belizehole: #2980B9; -$amethyst: #9B59B6; -$wisteria: #8E44AD; -$wetasphalt: #34495E; -$midnightblue: #2C3E50; -$sunflower: #F1C40F; -$orange: #F39C12; -$carrot: #E67E22; -$pumpkin: #D35400; -$alizarin: #E74C3C; -$pomegranate: #C0392B; -$clouds: #ECF0F1; -$silver: #BDC3C7; -$concrete: #95A5A6; -$asbestos: #7F8C8D; - -$border-radius: 6px; - -@import "zurb-foundation/normalize.scss"; -@import "zurb-foundation/foundation.scss"; -@import "pygments"; - -html > body { - padding: 0; - margin: 0; - - background-color: #ffffff; - - font-size: 14px; - font-family: "PT Sans", helvetica, arial; -} - -a, a:hover, a:visited, a:active { - color: $peterriver; - text-decoration: none; -} - -header#title { - background-color: $peterriver; - - border-bottom: 3px solid $belizehole; - - margin: 0; - padding: 12px 12px 0 12px; - - text-align: center; - - #header-wrapper { - @include grid-row; - padding-bottom: 0; - - h1 { - margin: 12px 0; - - font-family: "Lato", arial; - font-weight: 900; - font-size: 28px; - letter-spacing: 4px; - - display: inline-block; - color: $peterriver; - background-color: #fff; - padding: 4px 16px; - border-radius: $border-radius; - - text-transform: uppercase; - } - } -} - -nav#social { - text-align: center; - background-color: $peterriver; - - margin-top: 0; - padding-bottom: 16px; - - ol { - list-style-type: none; - - padding: 0; - margin: 0; - - li { - display: inline-block; - font-size: 18px; - - margin: 0 4px; - - a { - color: #ffffff; - text-decoration: none; - } - } - } -} - -nav#primary { - text-align: center; - background-color: $peterriver; - - padding-bottom: 24px; - - ol { - list-style-type: none; - - padding: 0; - margin: 0; - - li { - display: inline-block; - - font-size: 18px; - font-family: "Lato", arial; - - background-color: $belizehole; - padding: 4px 8px; - margin: 3px; - - border-radius: $border-radius; - - a { - color: #ffffff; - text-decoration: none; - } - } - } -} - -#wrapper { - @include grid-row; -} - -.avatar { - width: 128px; - height: 128px; - border-radius: 64px; - background: url(https://secure.gravatar.com/avatar/a9bfdd0cc75c857b669c37548b8bfdf9?s=256) no-repeat; - background-size: 128px 128px; - - margin: 32px auto 32px auto; -} - -#content { - margin: 12px; - - article.post, article.page { - h1, h2, h3, h4, h5, h6 { - font-family: 'Lato'; - } - - .meta { - margin-top: -18px; - font-style: italic; - } - - ol, ul { - margin-left: 20px; - } - } -} - -section#posts { - h2.year { - font-size: 24px; - text-align: center; - border-bottom: 3px solid $silver; - } - - .post-listing { - margin-bottom: 1.75em; - - h3.title { - margin-bottom: 12px; - } - .summary { - margin-top: -12px; - - p { - margin-bottom: 0.5em; - } - } - } -} - -section.post { - section#main { - @include grid-column(8, false, false, 2); - } - - section#sidebar { - @include grid-column(3); - } -} - -section.page { - @include grid-column(12); -} - -footer { - @include grid-row; - clear: both; - - .copyright { - @include grid-column(12); - - text-align: center; - font-size: 12px; - - color: $concrete; - - ul.tla { - color: $silver; - - list-style-type: none; - - li { - display: inline; - } - } - } -} - -pre, .plaincode{ - background: none; - border: none; - border-radius: none; - - font-size: 12px; - overflow: visible; - - padding: 6px 6px; - margin: 0; - - word-break: normal; - word-wrap: normal; - - white-space: pre; - display: block; -} - -.plaincode { - background-color: #f9f9f9; -} - -.code { - overflow: auto; - margin: 0 0 11px 0; - - table { - width: 100%; - background: inherit; - - td, th { - padding: 0; - } - - .linenodiv { - background-color: #f4f4f4; - color: #AAA; - padding: 0 0.5em; - border-right: 1px solid #DDD; - text-align: right; - } - - td.code { - width: 100%; - } - - .highlight { - background-color: #f9f9f9; - } - } -} - -form { - ul { - margin-left: 0 !important; - list-style-type: none; - } - - p.instruct { - - } -} - -.adpack { - float: right; - margin-left: 6px; - - .bsa_it_ad { - background: transparent; - border: none; - font-family: inherit; - padding: 10px 0; - margin: 0; - text-align: center; - max-width: 130px; - } - - .bsa_it_ad:hover img { - -moz-box-shadow: 0 0 3px #000; - -webkit-box-shadow: 0 0 3px #000; - box-shadow: 0 0 3px #000; - } - - .bsa_it_ad .bsa_it_i { - display: block; - padding: 0; - float: none; - margin: 0 0 5px; - } - - .bsa_it_ad .bsa_it_i img { - padding: 0; - border: none; - min-width: 130px; - } - - .bsa_it_ad .bsa_it_t { - padding: 3px 0; - display: block; - width: 130px; - } - - .bsa_it_ad .bsa_it_d { - padding: 0; - font-size: 11px; - color: #696969; - } - - .bsa_it_p { - display: none; - } - - #bsap_aplink, - #bsap_aplink:hover { - display: block; - font-size: 10px; - text-align: center; - } -} - diff --git a/content/css/zurb-foundation/foundation.scss b/content/css/zurb-foundation/foundation.scss deleted file mode 100644 index f4e0b2e..0000000 --- a/content/css/zurb-foundation/foundation.scss +++ /dev/null @@ -1,46 +0,0 @@ -// Make sure the charset is set appropriately -@charset "UTF-8"; - -// This includes all of the foundation global elements that are needed to work with any of the other files. -@import "foundation/foundation-global"; - -// Foundation Components -@import - "foundation/components/global", - "foundation/components/grid", - "foundation/components/visibility", - "foundation/components/block-grid", - "foundation/components/type", - "foundation/components/buttons", - "foundation/components/forms", - "foundation/components/custom-forms", - "foundation/components/button-groups", - "foundation/components/dropdown-buttons", - "foundation/components/split-buttons", - "foundation/components/flex-video", - "foundation/components/section", - "foundation/components/top-bar", - "foundation/components/orbit", - "foundation/components/reveal", - "foundation/components/joyride", - "foundation/components/clearing", - "foundation/components/alert-boxes", - "foundation/components/breadcrumbs", - "foundation/components/keystrokes", - "foundation/components/labels", - "foundation/components/inline-lists", - "foundation/components/pagination", - "foundation/components/panels", - "foundation/components/pricing-tables", - "foundation/components/progress-bars", - "foundation/components/side-nav", - "foundation/components/sub-nav", - "foundation/components/switch", - "foundation/components/magellan", - "foundation/components/tables", - "foundation/components/thumbs", - "foundation/components/tooltips", - "foundation/components/dropdown"; - - - diff --git a/content/css/zurb-foundation/foundation/_foundation-global.scss b/content/css/zurb-foundation/foundation/_foundation-global.scss deleted file mode 100644 index acef699..0000000 --- a/content/css/zurb-foundation/foundation/_foundation-global.scss +++ /dev/null @@ -1,198 +0,0 @@ -// Foundation Global Function, Variables and Mixins -// -// Variables -// - -// The default font-size is set to 100% of the browser style sheet (usually 16px) -// for compatibility with brower-based text zoom or user-set defaults. -$base-font-size: 100% !default; - -// Set your base font-size in pixels so emCalc can do its magic below -$em-base: 16px !default; - -// We use these to control various global styles -$body-bg: #fff !default; -$body-font-color: #222 !default; -$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default; -$body-font-weight: normal !default; -$body-font-style: normal !default; - -// We use these to control text direction settings -$text-direction: ltr !default; // Controls default global text direction, 'rtl' or 'ltr' -$default-float: left !default; -$opposite-direction: right !default; -// No need to change this conditional statement, $text-direction variable controls it all. -@if $text-direction == ltr { - $default-float: left; - $opposite-direction: right; -} @else { - $default-float: right; - $opposite-direction: left; -} - -// We use these as default colors throughout -$primary-color: #2ba6cb !default; -$secondary-color: #e9e9e9 !default; -$alert-color: #c60f13 !default; -$success-color: #5da423 !default; - -// We use these to make sure border radius matches unless we want it different. -$global-radius: 3px !default; -$global-rounded: 1000px !default; - -// We use these to control inset shadow shiny edges and depressions. -$shiny-edge-size: 0 1px 0 !default; -$shiny-edge-color: rgba(#fff, .5) !default; -$shiny-edge-active-color: rgba(#000, .2) !default; - -// We use this to control whether or not CSS classes come through in the gem files. -$include-html-classes: true !default; -$include-print-styles: true !default; - -$include-html-grid-classes: $include-html-classes !default; -$include-html-visibility-classes: $include-html-classes !default; -$include-html-button-classes: $include-html-classes !default; -$include-html-form-classes: $include-html-classes !default; -$include-html-media-classes: $include-html-classes !default; -$include-html-section-classes: $include-html-classes !default; -$include-html-reveal-classes: $include-html-classes !default; -$include-html-alert-classes: $include-html-classes !default; -$include-html-nav-classes: $include-html-classes !default; -$include-html-label-classes: $include-html-classes !default; -$include-html-panel-classes: $include-html-classes !default; -$include-html-pricing-classes: $include-html-classes !default; -$include-html-progress-classes: $include-html-classes !default; -$include-html-magellan-classes: $include-html-classes !default; - -// -// Functions -// - -// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) -@function emCalc($pxWidth) { - @return $pxWidth / $em-base * 1em; -} - -// Creating rems and pixels -@function remCalc($pxWidth) { - @return $pxWidth / $em-base * 1rem; -} - -// Grid Calculation for Percentages -@function gridCalc($colNumber, $totalColumns) { - @return percentage(($colNumber / $totalColumns)); -} - - -// -// Mixins -// - -// We use this to control border radius. -@mixin radius($radius:$global-radius) { - @if $radius { - -webkit-border-radius: $radius; - border-radius: $radius; - } -} - -// We use this to create equal side border radius on elements. -@mixin side-radius($side, $radius) { - @include radius(0); - @if $side == left { - -moz-border-radius-bottomleft: $radius; - -moz-border-radius-topleft: $radius; - -webkit-border-bottom-left-radius: $radius; - -webkit-border-top-left-radius: $radius; - border-bottom-left-radius: $radius; - border-top-left-radius: $radius; - } - @else if $side == right { - -moz-border-radius-topright: $radius; - -moz-border-radius-bottomright: $radius; - -webkit-border-top-right-radius: $radius; - -webkit-border-bottom-right-radius: $radius; - border-top-right-radius: $radius; - border-bottom-right-radius: $radius; - } - @else if $side == top { - -moz-border-radius-topright: $radius; - -moz-border-radius-topleft: $radius; - -webkit-border-top-right-radius: $radius; - -webkit-border-top-left-radius: $radius; - border-top-right-radius: $radius; - border-top-left-radius: $radius; - } - @else if $side == bottom { - -moz-border-radius-bottomright: $radius; - -moz-border-radius-bottomleft: $radius; - -webkit-border-bottom-right-radius: $radius; - -webkit-border-bottom-left-radius: $radius; - border-bottom-right-radius: $radius; - border-bottom-left-radius: $radius; - } -} - -// We can control whether or not we have inset shadows edges. -@mixin inset-shadow($active:true) { - -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset; - box-shadow: $shiny-edge-size $shiny-edge-color inset; - - @if $active { &:active { - -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset; - box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } } -} - -// We use this to add transitions to elements -@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) { - -webkit-transition: $property $speed $ease; - -moz-transition: $property $speed $ease; - transition: $property $speed $ease; -} - -// We use this to add box-sizing across browser prefixes -@mixin box-sizing($type:border-box) { - -moz-box-sizing: $type; - -webkit-box-sizing: $type; - box-sizing: $type; -} - -// We use this to create equalateral triangles -@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) { - content: ""; - display: block; - width: 0; - height: 0; - border: solid $triangle-size; - @if ($triangle-direction == top) { - border-color: $triangle-color transparent transparent transparent; - } - @if ($triangle-direction == bottom) { - border-color: transparent transparent $triangle-color transparent; - } - @if ($triangle-direction == left) { - border-color: transparent transparent transparent $triangle-color; - } - @if ($triangle-direction == right) { - border-color: transparent $triangle-color transparent transparent; - } -} - -// We use this to do clear floats -@mixin clearfix() { - *zoom:1; - &:before, &:after { content: " "; display: table; } - &:after { clear: both; } -} - -// Media Queries -$small-screen: emCalc(768px) !default; -$medium-screen: emCalc(1280px) !default; -$large-screen: emCalc(1440px) !default; - -$screen: "only screen" !default; -$small: "only screen and (min-width:"#{$small-screen}")" !default; -$medium: "only screen and (min-width:"#{$medium-screen}")" !default; -$large: "only screen and (min-width:"#{$large-screen}")" !default; -$landscape: "only screen and (orientation: landscape)" !default; -$portrait: "only screen and (orientation: portrait)" !default; diff --git a/content/css/zurb-foundation/foundation/components/_alert-boxes.scss b/content/css/zurb-foundation/foundation/components/_alert-boxes.scss deleted file mode 100644 index a14807a..0000000 --- a/content/css/zurb-foundation/foundation/components/_alert-boxes.scss +++ /dev/null @@ -1,106 +0,0 @@ -// -// Alert Variables -// - -// We use this to control alert padding. -$alert-padding-top: emCalc(11px) !default; -$alert-padding-default-float: $alert-padding-top !default; -$alert-padding-opposite-direction: $alert-padding-top + emCalc(10px) !default; -$alert-padding-bottom: $alert-padding-top + emCalc(1px) !default; - -// We use these to control text style. -$alert-font-weight: bold !default; -$alert-font-size: emCalc(14px) !default; -$alert-font-color: #fff !default; -$alert-font-color-alt: darken($secondary-color, 60%) !default; - -// We use this for close hover effect. -$alert-function-factor: 10% !default; - -// We use these to control border styles. -$alert-border-style: solid !default; -$alert-border-width: 1px !default; -$alert-border-color: darken($primary-color, $alert-function-factor) !default; -$alert-bottom-margin: emCalc(20px) !default; - -// We use these to style the close buttons -$alert-close-color: #333 !default; -$alert-close-position: emCalc(5px) !default; -$alert-close-font-size: emCalc(22px) !default; -$alert-close-opacity: 0.3 !default; -$alert-close-opacity-hover: 0.5 !default; -$alert-close-padding: 5px 4px 4px !default; - -// We use this to control border radius -$alert-radius: $global-radius !default; - -// -// Alert Mixins -// - -// We use this mixin to create a default alert base. -@mixin alert-base { - border-style: $alert-border-style; - border-width: $alert-border-width; - display: block; - font-weight: $alert-font-weight; - margin-bottom: $alert-bottom-margin; - position: relative; - padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float; - font-size: $alert-font-size; -} - -// We use this mixin to add alert styles -@mixin alert-style($bg:$primary-color) { - - // This find the lightness percentage of the background color. - $bg-lightness: lightness($bg); - - // We control which background color and border come through. - background-color: $bg; - border-color: darken($bg, $alert-function-factor); - - // We control the text color for you based on the background color. - @if $bg-lightness > 70% { color: $alert-font-color-alt; } - @else { color: $alert-font-color; } - -} - -// We use this to create the close button. -@mixin alert-close { - font-size: $alert-close-font-size; - padding: $alert-close-padding; - line-height: 0; - position: absolute; - top: $alert-close-position + emCalc(2px); - #{$opposite-direction}: $alert-close-position; - color: $alert-close-color; - opacity: $alert-close-opacity; - &:hover, - &:focus { opacity: $alert-close-opacity-hover; } -} - -// We use this to quickly create alerts with a single mixin. -@mixin alert($bg:$primary-color, $radius:false) { - @include alert-base; - @include alert-style($bg); - @include radius($radius); -} - -@if $include-html-alert-classes { - - /* Foundation Alerts */ - .alert-box { - @include alert; - - .close { @include alert-close; } - - &.radius { @include radius($alert-radius); } - &.round { @include radius($global-rounded); } - - &.success { @include alert-style($success-color); } - &.alert { @include alert-style($alert-color); } - &.secondary { @include alert-style($secondary-color); } - } - -} \ No newline at end of file diff --git a/content/css/zurb-foundation/foundation/components/_block-grid.scss b/content/css/zurb-foundation/foundation/components/_block-grid.scss deleted file mode 100644 index 9bd9d3d..0000000 --- a/content/css/zurb-foundation/foundation/components/_block-grid.scss +++ /dev/null @@ -1,66 +0,0 @@ -// -// Block Grid Variables -// - -// We use this to control the maximum number of block grid elements per row -$block-grid-elements: 12 !default; -$block-grid-default-spacing: 10px !default; - -// Enables media queries for block-grid classes. Set to false if writing semantic HTML. -$block-grid-media-queries: true !default; - -// -// Block Grid Mixins -// - -// We use this mixin to create different block-grids. You can apply per-row and spacing options. -// Setting $base-style to false will ommit default styles. -@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) { - - @if $base-style { - display: block; - padding: 0; - margin: 0 (-$spacing); - @include clearfix; - - &>li { - display: block; - height: auto; - float: $default-float; - padding: 0 $spacing $spacing; - } - } - - @if $per-row { - &>li { - width: 100%/$per-row; - padding: 0 $spacing $spacing; - - &:nth-of-type(#{$per-row}n+1) { clear: both; } - } - } - -} - -@if $block-grid-media-queries { - /* Foundation Block Grids for below small breakpoint */ - @media only screen { - [class*="block-grid-"] { @include block-grid; } - - @for $i from 1 through $block-grid-elements { - .small-block-grid-#{($i)} { - @include block-grid($i,$block-grid-default-spacing,false); - } - } - } - - /* Foundation Block Grids for above small breakpoint */ - @media #{$small} { - @for $i from 1 through $block-grid-elements { - .large-block-grid-#{($i)} { - @include block-grid($i,$block-grid-default-spacing,false); - } - } - [class*="small-block-grid-"] > li { clear: none !important; } - } -} diff --git a/content/css/zurb-foundation/foundation/components/_breadcrumbs.scss b/content/css/zurb-foundation/foundation/components/_breadcrumbs.scss deleted file mode 100644 index ec0dc21..0000000 --- a/content/css/zurb-foundation/foundation/components/_breadcrumbs.scss +++ /dev/null @@ -1,117 +0,0 @@ -// -// Breadcrumb Variables -// - -// We use this to set the background color for the breadcrumb container. -$crumb-bg: lighten($secondary-color, 5%) !default; - -// We use these to set the padding around the breadcrumbs. -$crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px) !default; -$crumb-side-padding: emCalc(12px) !default; - -// We use these to control border styles. -$crumb-function-factor: 10% !default; -$crumb-border-size: 1px !default; -$crumb-border-style: solid !default; -$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default; -$crumb-radius: $global-radius !default; - -// We use these to set various text styles for breadcrumbs. -$crumb-font-size: emCalc(11px) !default; -$crumb-font-color: $primary-color !default; -$crumb-font-color-current: #333 !default; -$crumb-font-color-unavailable: #999 !default; -$crumb-font-transform: uppercase !default; -$crumb-link-decor: underline !default; - -// We use these to control the slash between breadcrumbs -$crumb-slash-color: #aaa !default; -$crumb-slash: "/" !default; - -// -// Breakcrumb Mixins -// - -// We use this mixin to create a container around our breadcrumbs -@mixin crumb-container { - display: block; - padding: $crumb-padding; - overflow: hidden; - margin-#{$default-float}: 0; - list-style: none; - border-style: $crumb-border-style; - border-width: $crumb-border-size; - - // We control which background color and border come through. - background-color: $crumb-bg; - border-color: $crumb-border-color; -} - -// We use this mixin to create breadcrumb styles from list items. -@mixin crumbs { - - // A normal state will make the links look and act like clickable breadcrumbs. - margin: 0; - padding: 0 $crumb-side-padding 0 0; - float: $default-float; - - &:hover a, - &:focus a { text-decoration: $crumb-link-decor; } - - a, - span { - font-size: $crumb-font-size; - padding-#{$default-float}: $crumb-side-padding; - text-transform: $crumb-font-transform; - color: $crumb-font-color; - } - - // Current is for the link of the current page - &.current { - a { - cursor: default; - color: $crumb-font-color-current; - } - - &:hover a, - &:focus a { text-decoration: none; } - } - - // Unavailable removed color and link styles so it looks inactive. - &.unavailable { - a { color: $crumb-font-color-unavailable; } - - &:hover a, - a:focus { - text-decoration: none; - color: $crumb-font-color-unavailable; - cursor: default; - } - } - - &:before { - content: "#{$crumb-slash}"; - color: $crumb-slash-color; - position: relative; - top: 1px; - } - &:first-child a, - &:first-child span { padding-#{$default-float}: 0; } - &:first-child:before { content: " "; } - -} - - -@if $include-html-nav-classes { - - /* Breadcrumbs */ - .breadcrumbs { - @include crumb-container; - @include radius($crumb-radius); - - li { - @include crumbs; - } - } - -} diff --git a/content/css/zurb-foundation/foundation/components/_button-groups.scss b/content/css/zurb-foundation/foundation/components/_button-groups.scss deleted file mode 100644 index 85dd47c..0000000 --- a/content/css/zurb-foundation/foundation/components/_button-groups.scss +++ /dev/null @@ -1,76 +0,0 @@ -// -// Button Group Variables -// - -// Sets the margin for the right side by default, and the left margin if right-to-left direction is used -$button-bar-margin-opposite: emCalc(10px) !default; - -// -// Button Group Mixins -// - -// We use this to add styles for a button group container -@mixin button-group-container($styles:true, $float:false) { - @if $styles { - list-style: none; - margin: 0; - @include clearfix(); - } - @if $float { - float: #{$default-float}; - margin-#{$opposite-direction}: $button-bar-margin-opposite; - & div { overflow: hidden; } - } -} - -// We use this to control styles for button groups -@mixin button-group-style($radius:false, $even:false, $float:$default-float) { - - // We use this to control the flow, or remove those styles completely. - @if $float { - margin: 0 0 0 -1px; - float: $float; - // Make sure the first child doesn't get the negative margin. - &:first-child { margin-#{$default-float}: 0; } - } - - // We use these to control left and right radius on first/last buttons in the group. - @if $radius == true { - &:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); } - &:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $button-radius); } - } - @else if $radius { - &:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); } - &:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $radius); } - } - - // We use this to make the buttons even width across their container - @if $even { - width: percentage((100/$even) / 100); - .button { width: 100%; } - } - -} - -// Only include these CSS classes if $include-html-classes: true -@if $include-html-button-classes { - - /* Button Groups */ - .button-group { @include button-group-container; - - &> * { @include button-group-style(); } - - &.radius > * { @include button-group-style($radius:$button-radius, $float:null); } - &.round > * { @include button-group-style($radius:$button-round, $float:null); } - - @for $i from 2 through 8 { - &.even#{-$i} li { @include button-group-style($even:$i, $float:null); } - } - } - - .button-bar { - @include clearfix; - .button-group { @include button-group-container($styles:false,$float:true); } - } - -} \ No newline at end of file diff --git a/content/css/zurb-foundation/foundation/components/_buttons.scss b/content/css/zurb-foundation/foundation/components/_buttons.scss deleted file mode 100644 index 5dd33b1..0000000 --- a/content/css/zurb-foundation/foundation/components/_buttons.scss +++ /dev/null @@ -1,219 +0,0 @@ -// -// Button Variables -// - -// We use these to build padding for buttons. -$button-med: emCalc(12px) !default; -$button-tny: emCalc(7px) !default; -$button-sml: emCalc(9px) !default; -$button-lrg: emCalc(16px) !default; - -// We use this to control the display property. -$button-display: inline-block !default; -$button-margin-bottom: emCalc(20px) !default; - -// We use these to control button text styles. -$button-font-family: inherit !default; -$button-font-color: #fff !default; -$button-font-color-alt: #333 !default; -$button-font-med: emCalc(16px) !default; -$button-font-tny: emCalc(11px) !default; -$button-font-sml: emCalc(13px) !default; -$button-font-lrg: emCalc(20px) !default; -$button-font-weight: bold !default; -$button-font-align: center !default; - -// We use these to control various hover effects. -$button-function-factor: 10% !default; - -// We use these to control button border styles. -$button-border-width: 1px !default; -$button-border-style: solid !default; -$button-border-color: darken($primary-color, $button-function-factor) !default; - -// We use this to set the default radius used throughout the core. -$button-radius: $global-radius !default; -$button-round: $global-rounded !default; - -// We use this to set default opacity for disabled buttons. -$button-disabled-opacity: 0.6 !default; - - -// -// Button Mixins -// - -// We use this mixin to create a default button base. -@mixin button-base($style:true, $display:$button-display) { - @if $style { - border-style: $button-border-style; - border-width: $button-border-width; - cursor: pointer; - font-family: $button-font-family; - font-weight: $button-font-weight; - line-height: 1; - margin: 0 0 $button-margin-bottom; - position: relative; - text-decoration: none; - text-align: $button-font-align; - } - @if $display { display: $display; } -} - -// We use this mixin to add button size styles -@mixin button-size($padding:$button-med, $full-width:false, $is-input:false) { - - // We control which padding styles come through, - // these can be turned off by setting $padding:false - @if $padding { - padding-top: $padding; - padding-#{$opposite-direction}: $padding * 2; - padding-bottom: $padding + emCalc(1px); - padding-#{$default-float}: $padding * 2; - - // We control the font-size based on mixin input. - @if $padding == $button-med { font-size: $button-font-med; } - @else if $padding == $button-tny { font-size: $button-font-tny; } - @else if $padding == $button-sml { font-size: $button-font-sml; } - @else if $padding == $button-lrg { font-size: $button-font-lrg; } - @else { font-size: $padding - emCalc(2px); } - } - - // We can set $full-width:true to remove side padding extend width. - @if $full-width { - padding-top: $padding; - padding-#{$opposite-direction}: 0px; - padding-bottom: $padding + emCalc(1px); - padding-#{$default-float}: 0px; - width: 100%; - } - - // 's and