diff --git a/.gitignore b/.gitignore index 9b60117..179d751 100644 --- a/.gitignore +++ b/.gitignore @@ -20,5 +20,8 @@ # Ignore .DS_store file .DS_Store -# Ignore bower components +# Ignore frontend packages /bower_components +/node_modules +/gulp_dist +npm-debug.log diff --git a/Gemfile b/Gemfile index e506c47..6f54eca 100644 --- a/Gemfile +++ b/Gemfile @@ -1,33 +1,26 @@ -# If you do not have OpenSSL installed, update -# the following line to use 'http://' instead +# If you do not have OpenSSL installed, change +# the following line to use 'http://' source 'https://rubygems.org' -ruby '2.2.0' +ruby '2.3.0' gem 'dotenv' -gem 'middleman', '~>3.3.10' +# Middleman Gems +gem 'middleman', '~> 4.1' # gem 'middleman-blog' -gem 'middleman-livereload', '~> 3.1.0' -# Lossless image size reduction -# https://github.com/grosser/smusher -gem 'middleman-smusher' - -# Generates robots.txt +gem 'middleman-livereload' gem 'middleman-robots' -gem 'rake' -gem 'builder' # XML Builder +gem 'redcarpet', '~> 3.3', '>= 3.3.3' gem 'slim' -gem 'bourbon' -gem 'middleman-autoprefixer' +# For feed.xml.builder +gem 'builder' -### Debugging gem 'pry' -### For Windows -# Faster file watcher updates on Windows: -gem 'wdm', '~> 0.1.0', :platforms => [:mswin, :mingw] +# For faster file watcher updates on Windows: +gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw] # Windows does not come with time zone data -gem 'tzinfo-data', platforms: [:mswin, :mingw] +gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby] diff --git a/Gemfile.lock b/Gemfile.lock index 2216237..bef6a17 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,171 +1,152 @@ GEM remote: https://rubygems.org/ specs: - activesupport (4.1.10) - i18n (~> 0.6, >= 0.6.9) + activesupport (4.2.6) + i18n (~> 0.7) json (~> 1.7, >= 1.7.7) minitest (~> 5.1) - thread_safe (~> 0.1) + thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) - autoprefixer-rails (5.1.11) - execjs - json - bourbon (4.2.1) - sass (~> 3.4) - thor + addressable (2.4.0) + backports (3.6.8) builder (3.2.2) - celluloid (0.16.0) - timers (~> 4.0.0) - chunky_png (1.3.4) - coderay (1.1.0) + capybara (2.5.0) + mime-types (>= 1.16) + nokogiri (>= 1.3.3) + rack (>= 1.0.0) + rack-test (>= 0.5.4) + xpath (~> 2.0) + coderay (1.1.1) coffee-script (2.4.1) coffee-script-source execjs - coffee-script-source (1.9.1) - compass (1.0.3) - chunky_png (~> 1.2) - compass-core (~> 1.0.2) - compass-import-once (~> 1.0.5) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - sass (>= 3.3.13, < 3.5) - compass-core (1.0.3) - multi_json (~> 1.0) - sass (>= 3.3.0, < 3.5) + coffee-script-source (1.10.0) compass-import-once (1.0.5) sass (>= 3.2, < 3.5) - dotenv (2.0.0) + concurrent-ruby (1.0.1) + contracts (0.13.0) + dotenv (2.1.1) em-websocket (0.5.1) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) erubis (2.7.0) - eventmachine (1.0.7) - execjs (2.5.2) - ffi (1.9.8) - haml (4.0.6) + eventmachine (1.2.0.1) + execjs (2.6.0) + fast_blank (1.0.0) + fastimage (2.0.0) + addressable (~> 2) + ffi (1.9.10) + haml (4.0.7) tilt - hike (1.2.3) - hitimes (1.2.2) - hooks (0.4.0) - uber (~> 0.0.4) + hamster (3.0.0) + concurrent-ruby (~> 1.0) + hashie (3.4.4) http_parser.rb (0.6.0) - httpclient (2.6.0.1) i18n (0.7.0) - json (1.8.2) - kramdown (1.6.0) - listen (2.10.0) - celluloid (~> 0.16.0) + json (1.8.3) + kramdown (1.10.0) + listen (3.1.2) rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) + rb-inotify (>= 0.9.7) + ruby_dep (~> 1.1) method_source (0.8.2) - middleman (3.3.10) + middleman (4.1.7) coffee-script (~> 2.2) - compass (>= 1.0.0, < 2.0.0) compass-import-once (= 1.0.5) - execjs (~> 2.0) haml (>= 4.0.5) kramdown (~> 1.2) - middleman-core (= 3.3.10) - middleman-sprockets (>= 3.1.2) + middleman-cli (= 4.1.7) + middleman-core (= 4.1.7) sass (>= 3.4.0, < 4.0) - uglifier (~> 2.5) - middleman-autoprefixer (2.4.3) - autoprefixer-rails (~> 5.1.3) - middleman-core (>= 3.3.3) - middleman-core (3.3.10) - activesupport (~> 4.1.0) + middleman-cli (4.1.7) + thor (>= 0.17.0, < 2.0) + middleman-core (4.1.7) + activesupport (~> 4.2) + addressable (~> 2.3) + backports (~> 3.6) bundler (~> 1.1) + capybara (~> 2.5.0) + contracts (~> 0.13.0) erubis - hooks (~> 0.3) + execjs (~> 2.0) + fast_blank + fastimage (~> 2.0) + hamster (~> 3.0) + hashie (~> 3.4) i18n (~> 0.7.0) - listen (>= 2.7.9, < 3.0) - padrino-helpers (~> 0.12.3) + listen (~> 3.0) + padrino-helpers (~> 0.13.0) + parallel rack (>= 1.4.5, < 2.0) - rack-test (~> 0.6.2) - thor (>= 0.15.2, < 2.0) - tilt (~> 1.4.1, < 2.0) - middleman-livereload (3.1.1) - em-websocket (>= 0.2.0) - middleman-core (>= 3.0.2) - multi_json (~> 1.0) - rack-livereload - middleman-robots (1.0.1) - middleman (~> 3.3) - middleman-smusher (3.0.0) - middleman (>= 3.0.0) - smusher (~> 0.4.9) - middleman-sprockets (3.4.2) + sass (>= 3.4) + servolux + tilt (~> 1.4.1) + uglifier (~> 3.0) + middleman-livereload (3.4.6) + em-websocket (~> 0.5.1) middleman-core (>= 3.3) - sprockets (~> 2.12.1) - sprockets-helpers (~> 1.1.0) - sprockets-sass (~> 1.3.0) - minitest (5.5.1) - multi_json (1.11.0) - padrino-helpers (0.12.5) + rack-livereload (~> 0.3.15) + middleman-robots (1.2.0) + middleman (~> 4.0) + mime-types (3.0) + mime-types-data (~> 3.2015) + mime-types-data (3.2016.0221) + mini_portile2 (2.0.0) + minitest (5.8.4) + nokogiri (1.6.7.2) + mini_portile2 (~> 2.0.0.rc2) + padrino-helpers (0.13.1) i18n (~> 0.6, >= 0.6.7) - padrino-support (= 0.12.5) + padrino-support (= 0.13.1) tilt (~> 1.4.1) - padrino-support (0.12.5) + padrino-support (0.13.1) activesupport (>= 3.1) - pry (0.10.1) + parallel (1.8.0) + pry (0.10.3) coderay (~> 1.1.0) method_source (~> 0.8.1) slop (~> 3.4) - rack (1.6.0) - rack-livereload (0.3.15) + rack (1.6.4) + rack-livereload (0.3.16) rack rack-test (0.6.3) rack (>= 1.0) - rake (10.4.2) - rb-fsevent (0.9.4) - rb-inotify (0.9.5) + rb-fsevent (0.9.7) + rb-inotify (0.9.7) ffi (>= 0.5.0) - sass (3.4.13) - slim (3.0.3) + redcarpet (3.3.4) + ruby_dep (1.1.0) + sass (3.4.22) + servolux (0.12.0) + slim (3.0.6) temple (~> 0.7.3) tilt (>= 1.3.3, < 2.1) slop (3.6.0) - smusher (0.4.9) - httpclient (>= 2.2) - json - rake - sprockets (2.12.3) - hike (~> 1.2) - multi_json (~> 1.0) - rack (~> 1.0) - tilt (~> 1.1, != 1.3.0) - sprockets-helpers (1.1.0) - sprockets (~> 2.0) - sprockets-sass (1.3.1) - sprockets (~> 2.0) - tilt (~> 1.1) - temple (0.7.5) + temple (0.7.6) thor (0.19.1) thread_safe (0.3.5) tilt (1.4.1) - timers (4.0.1) - hitimes tzinfo (1.2.2) thread_safe (~> 0.1) - uber (0.0.13) - uglifier (2.7.1) - execjs (>= 0.3.0) - json (>= 1.8.0) + uglifier (3.0.0) + execjs (>= 0.3.0, < 3) + xpath (2.0.0) + nokogiri (~> 1.3) PLATFORMS ruby DEPENDENCIES - bourbon builder dotenv - middleman (~> 3.3.10) - middleman-autoprefixer - middleman-livereload (~> 3.1.0) + middleman (~> 4.1) + middleman-livereload middleman-robots - middleman-smusher pry - rake + redcarpet (~> 3.3, >= 3.3.3) slim tzinfo-data wdm (~> 0.1.0) + +BUNDLED WITH + 1.11.2 diff --git a/bower.json b/bower.json index 15b57ba..57d051d 100644 --- a/bower.json +++ b/bower.json @@ -1,9 +1,13 @@ { - "name": "Secret Sauce Middleman SEO template", + "name": "secretsauce-seo-middleman", "version": "0.0.0", + "homepage": "http://secretsaucehq.com", "authors": [ - "Secret Sauce " + "Feifan Wang " ], + "description": "Secret Sauce Middleman SEO template", + "main": "", + "moduleType": [], "license": "MIT", "private": true, "ignore": [ @@ -14,7 +18,7 @@ "tests" ], "dependencies": { - "jquery": "~2.1.3", - "normalize.css": "~3.0.3" + "foundation-sites": "~6.2.1", + "bourbon": "~4.2.7" } } diff --git a/config.rb b/config.rb index 02f9996..eda29ec 100644 --- a/config.rb +++ b/config.rb @@ -1,81 +1,77 @@ -### -# Compass -### +require 'lib/page_helpers' +helpers PageHelpers -# Change Compass configuration -# compass_config do |config| -# config.output_style = :compact -# end +page '/*.xml', layout: false +page '/*.json', layout: false +page '/*.txt', layout: false +page '/sitemap.html', layout: false + +# With alternative layout +# page "/path/to/file.html", layout: :otherlayout + +# Proxy pages (http://middlemanapp.com/basics/dynamic-pages/) +# proxy "/this-page-has-no-template.html", "/template-file.html", locals: { +# which_fake_page: "Rendering a fake page with a local variable" } ### -# Page options, layouts, aliases and proxies +# Helpers ### -# Per-page layout changes: -# -# With no layout -# page "/path/to/file.html", :layout => false -# -# With alternative layout -# page "/path/to/file.html", :layout => :otherlayout -# -# A path which all have the same layout -# with_layout :admin do -# page "/admin/*" -# end +# activate :blog do |blog| +# # This will add a prefix to all links, template references and source paths +# blog.name = 'blog' +# # blog.prefix = 'blog' -# Proxy pages (https://middlemanapp.com/advanced/dynamic_pages/) -# proxy "/this-page-has-no-template.html", "/template-file.html", :locals => { -# :which_fake_page => "Rendering a fake page with a local variable" } +# blog.permalink = '{title}.html' +# blog.sources = 'articles/{year}-{month}-{day}-{title}.html' +# blog.default_extension = ".md" -page 'sitemap.html', layout: false -page 'sitemap.xml', layout: false -page 'feed.xml', layout: false +# blog.tag_template = "tag.html" -# Automatic image dimensions on image_tag helper -# activate :automatic_image_sizes +# blog.paginate = true +# blog.per_page = 10 +# blog.page_link = 'page/{num}' + +# # blog.taglink = "tags/{tag}.html" +# # blog.layout = "layout" +# # blog.summary_separator = /(READMORE)/ +# # blog.summary_length = 250 +# end -### -# Helpers -# Built in custom helpers live in /helpers/custom_template_helpers.rb -### -# Reload the browser automatically whenever files change configure :development do activate :livereload end -# Add bower's directory to sprockets asset path -after_configuration do - @bower_config = JSON.parse IO.read("#{root}/.bowerrc") - sprockets.append_path File.join "#{root}", @bower_config["directory"] -end +ignore "*.sass" -set :css_dir, 'stylesheets' -set :js_dir, 'javascripts' -set :images_dir, 'images' +activate :external_pipeline, + name: :gulp, + command: build? ? './node_modules/gulp/bin/gulp.js default' : './node_modules/gulp/bin/gulp.js watch', + source: "./gulp_dist", + latency: 1 -activate :autoprefixer +set :relative_links, true activate :directory_indexes +set :markdown_engine, :redcarpet +set :markdown, fenced_code_blocks: true, smartypants: true + +set :js_dir, 'assets/javascripts' +set :css_dir, 'assets/stylesheets' +set :images_dir, 'assets/images' +set :fonts_dir, 'assets/fonts' + # Build-specific configuration configure :build do - # For example, change the Compass output style for deployment - activate :minify_css - activate :minify_javascript activate :asset_hash - activate :smusher - - # Use relative URLs - # activate :relative_assets - - # Or use a different image path - # set :http_prefix, "/Content/images/" + # Minify CSS on build + # activate :minify_css - # github.com/yterajima/middleman-robots - # Make sure this stays on the bottom + # Minify Javascript on build + # activate :minify_javascript activate :robots, rules: [ - { user_agent: '*', allow: ['/'] } + { user_agent: '*', allow: ['/'] } ], sitemap: "#{data.site.url}/sitemap.xml" end diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..44b7bb5 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,39 @@ +'use strict'; + +const gulp = require('gulp'); +const sass = require('gulp-sass'); +const sourcemaps = require('gulp-sourcemaps'); +const bower = require('gulp-bower'); +const autoprefixer = require('gulp-autoprefixer'); + +const paths = { + stylesheetsEntryPoint: 'source/assets/stylesheets/site.sass', + stylesheets: 'source/assets/stylesheets/**/*.sass', + views: 'source/**/*.slim', + bower: './bower_components', + outputDist: 'gulp_dist/assets' +}; + +gulp.task('bower', () => { return bower(); }); + +gulp.task('sass', () => { + return gulp.src(paths.stylesheetsEntryPoint) + .pipe(sass({ + outputStyle: 'compressed', + includePaths: [ + require('node-normalize-scss').includePaths, + `${paths.bower}/bourbon/app/assets/stylesheets`, + `${paths.bower}/foundation-sites/scss`] + })) + .pipe(autoprefixer()) + .pipe(sourcemaps.init()) + .pipe(sass().on('error', sass.logError)) + .pipe(sourcemaps.write()) + .pipe(gulp.dest(`${paths.outputDist}/stylesheets`)); +}); + +gulp.task('watch', ['sass'], () => { + gulp.watch(paths.stylesheets, ['sass']); +}); + +gulp.task('default', ['sass', 'bower']); diff --git a/helpers/custom_template_helpers.rb b/lib/page_helpers.rb similarity index 98% rename from helpers/custom_template_helpers.rb rename to lib/page_helpers.rb index 670ef7f..45d0cd3 100644 --- a/helpers/custom_template_helpers.rb +++ b/lib/page_helpers.rb @@ -1,5 +1,5 @@ # Methods defined in the helpers block are available in templates -module CustomTemplateHelpers +module PageHelpers def page_title current_page.data.title || data.site.title end @@ -54,3 +54,4 @@ def linkedin_url "&source=#{data.site.url}" end end + diff --git a/package.json b/package.json new file mode 100644 index 0000000..f6d68f3 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "secretsauce-seo-middleman", + "version": "1.0.0", + "description": "http://secretsaucehq.com", + "main": "gulpfile.js", + "dependencies": { + "gulp": "^3.9.1", + "gulp-autoprefixer": "^3.1.0", + "gulp-bower": "0.0.13", + "gulp-sass": "^2.3.1", + "gulp-sourcemaps": "^2.0.0-alpha", + "node-normalize-scss": "^1.3.1" + }, + "devDependencies": {}, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/secretsaucehq/middleman-seo.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/secretsaucehq/middleman-seo/issues" + }, + "homepage": "https://github.com/secretsaucehq/middleman-seo#readme" +} diff --git a/source/404.slim b/source/404.html.slim similarity index 100% rename from source/404.slim rename to source/404.html.slim diff --git a/source/images/favicon.ico b/source/assets/images/favicon.ico similarity index 100% rename from source/images/favicon.ico rename to source/assets/images/favicon.ico diff --git a/source/javascripts/all.js b/source/assets/javascripts/site.js similarity index 100% rename from source/javascripts/all.js rename to source/assets/javascripts/site.js diff --git a/source/assets/stylesheets/setup/_all.sass b/source/assets/stylesheets/setup/_all.sass new file mode 100644 index 0000000..81dfa75 --- /dev/null +++ b/source/assets/stylesheets/setup/_all.sass @@ -0,0 +1,9 @@ +@import normalize +@import bourbon + +@import colors +@import sizes +@import foundation-settings +@import foundation +@import helpers +@include foundation-everything diff --git a/source/assets/stylesheets/setup/_colors.sass b/source/assets/stylesheets/setup/_colors.sass new file mode 100644 index 0000000..212c9f9 --- /dev/null +++ b/source/assets/stylesheets/setup/_colors.sass @@ -0,0 +1 @@ +$primary-green: #66CC99 diff --git a/source/assets/stylesheets/setup/_foundation-settings.scss b/source/assets/stylesheets/setup/_foundation-settings.scss new file mode 100644 index 0000000..3c22cca --- /dev/null +++ b/source/assets/stylesheets/setup/_foundation-settings.scss @@ -0,0 +1,567 @@ +// Foundation for Sites Settings +// ----------------------------- +// +// Table of Contents: +// +// 1. Global +// 2. Breakpoints +// 3. The Grid +// 4. Base Typography +// 5. Typography Helpers +// 6. Abide +// 7. Accordion +// 8. Accordion Menu +// 9. Badge +// 10. Breadcrumbs +// 11. Button +// 12. Button Group +// 13. Callout +// 14. Close Button +// 15. Drilldown +// 16. Dropdown +// 17. Dropdown Menu +// 18. Flex Video +// 19. Forms +// 20. Label +// 21. Media Object +// 22. Menu +// 23. Meter +// 24. Off-canvas +// 25. Orbit +// 26. Pagination +// 27. Progress Bar +// 28. Reveal +// 29. Slider +// 30. Switch +// 31. Table +// 32. Tabs +// 33. Thumbnail +// 34. Title Bar +// 35. Tooltip +// 36. Top Bar + +@import 'util/util'; + +// 1. Global +// --------- + +$global-font-size: 100%; +$global-width: rem-calc(1200); +$global-lineheight: 1.5; +$foundation-palette: ( + primary: #2199e8, + secondary: #777, + success: #3adb76, + warning: #ffae00, + alert: #ec5840, +); +$light-gray: #e6e6e6; +$medium-gray: #cacaca; +$dark-gray: #8a8a8a; +$black: #0a0a0a; +$white: #fefefe; +$body-background: $white; +$body-font-color: $black; +$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; +$body-antialiased: true; +$global-margin: 1rem; +$global-padding: 1rem; +$global-weight-normal: normal; +$global-weight-bold: bold; +$global-radius: 0; +$global-text-direction: ltr; +$global-flexbox: false; +$print-transparent-backgrounds: true; + +@include add-foundation-colors; + +// 2. Breakpoints +// -------------- + +$breakpoints: ( + small: 0, + medium: 640px, + large: 1024px, + xlarge: 1200px, + xxlarge: 1440px, +); +$breakpoint-classes: (small medium large); + +// 3. The Grid +// ----------- + +$grid-row-width: $global-width; +$grid-column-count: 12; +$grid-column-gutter: ( + small: 20px, + medium: 30px, +); +$grid-column-align-edge: true; +$block-grid-max: 8; + +// 4. Base Typography +// ------------------ + +$header-font-family: $body-font-family; +$header-font-weight: $global-weight-normal; +$header-font-style: normal; +$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; +$header-sizes: ( + small: ( + 'h1': 24, + 'h2': 20, + 'h3': 19, + 'h4': 18, + 'h5': 17, + 'h6': 16, + ), + medium: ( + 'h1': 48, + 'h2': 40, + 'h3': 31, + 'h4': 25, + 'h5': 20, + 'h6': 16, + ), +); +$header-color: inherit; +$header-lineheight: 1.4; +$header-margin-bottom: 0.5rem; +$header-text-rendering: optimizeLegibility; +$small-font-size: 80%; +$header-small-font-color: $medium-gray; +$paragraph-lineheight: 1.6; +$paragraph-margin-bottom: 1rem; +$paragraph-text-rendering: optimizeLegibility; +$code-color: $black; +$code-font-family: $font-family-monospace; +$code-font-weight: $global-weight-normal; +$code-background: $light-gray; +$code-border: 1px solid $medium-gray; +$code-padding: rem-calc(2 5 1); +$anchor-color: $primary-color; +$anchor-color-hover: scale-color($anchor-color, $lightness: -14%); +$anchor-text-decoration: none; +$anchor-text-decoration-hover: none; +$hr-width: $global-width; +$hr-border: 1px solid $medium-gray; +$hr-margin: rem-calc(20) auto; +$list-lineheight: $paragraph-lineheight; +$list-margin-bottom: $paragraph-margin-bottom; +$list-style-type: disc; +$list-style-position: outside; +$list-side-margin: 1.25rem; +$list-nested-side-margin: 1.25rem; +$defnlist-margin-bottom: 1rem; +$defnlist-term-weight: $global-weight-bold; +$defnlist-term-margin-bottom: 0.3rem; +$blockquote-color: $dark-gray; +$blockquote-padding: rem-calc(9 20 0 19); +$blockquote-border: 1px solid $medium-gray; +$cite-font-size: rem-calc(13); +$cite-color: $dark-gray; +$keystroke-font: $font-family-monospace; +$keystroke-color: $black; +$keystroke-background: $light-gray; +$keystroke-padding: rem-calc(2 4 0); +$keystroke-radius: $global-radius; +$abbr-underline: 1px dotted $black; + +// 5. Typography Helpers +// --------------------- + +$lead-font-size: $global-font-size * 1.25; +$lead-lineheight: 1.6; +$subheader-lineheight: 1.4; +$subheader-color: $dark-gray; +$subheader-font-weight: $global-weight-normal; +$subheader-margin-top: 0.2rem; +$subheader-margin-bottom: 0.5rem; +$stat-font-size: 2.5rem; + +// 6. Abide +// -------- + +$abide-inputs: true; +$abide-labels: true; +$input-background-invalid: map-get($foundation-palette, alert); +$form-label-color-invalid: map-get($foundation-palette, alert); +$input-error-color: map-get($foundation-palette, alert); +$input-error-font-size: rem-calc(12); +$input-error-font-weight: $global-weight-bold; + +// 7. Accordion +// ------------ + +$accordion-background: $white; +$accordion-plusminus: true; +$accordion-item-color: foreground($accordion-background, $primary-color); +$accordion-item-background-hover: $light-gray; +$accordion-item-padding: 1.25rem 1rem; +$accordion-content-background: $white; +$accordion-content-border: 1px solid $light-gray; +$accordion-content-color: foreground($accordion-background, $primary-color); +$accordion-content-padding: 1rem; + +// 8. Accordion Menu +// ----------------- + +$accordionmenu-arrows: true; +$accordionmenu-arrow-color: $primary-color; + +// 9. Badge +// -------- + +$badge-background: $primary-color; +$badge-color: foreground($badge-background); +$badge-padding: 0.3em; +$badge-minwidth: 2.1em; +$badge-font-size: 0.6rem; + +// 10. Breadcrumbs +// --------------- + +$breadcrumbs-margin: 0 0 $global-margin 0; +$breadcrumbs-item-font-size: rem-calc(11); +$breadcrumbs-item-color: $primary-color; +$breadcrumbs-item-color-current: $black; +$breadcrumbs-item-color-disabled: $medium-gray; +$breadcrumbs-item-margin: 0.75rem; +$breadcrumbs-item-uppercase: true; +$breadcrumbs-item-slash: true; + +// 11. Button +// ---------- + +$button-padding: 0.85em 1em; +$button-margin: 0 0 $global-margin 0; +$button-fill: solid; +$button-background: $primary-color; +$button-background-hover: scale-color($button-background, $lightness: -15%); +$button-color: $white; +$button-color-alt: $black; +$button-radius: $global-radius; +$button-sizes: ( + tiny: 0.6rem, + small: 0.75rem, + default: 0.9rem, + large: 1.25rem, +); +$button-opacity-disabled: 0.25; + +// 12. Button Group +// ---------------- + +$buttongroup-margin: 1rem; +$buttongroup-spacing: 1px; +$buttongroup-child-selector: '.button'; +$buttongroup-expand-max: 6; + +// 13. Callout +// ----------- + +$callout-background: $white; +$callout-background-fade: 85%; +$callout-border: 1px solid rgba($black, 0.25); +$callout-margin: 0 0 1rem 0; +$callout-padding: 1rem; +$callout-font-color: $body-font-color; +$callout-font-color-alt: $body-background; +$callout-radius: $global-radius; +$callout-link-tint: 30%; + +// 14. Close Button +// ---------------- + +$closebutton-position: right top; +$closebutton-offset-horizontal: 1rem; +$closebutton-offset-vertical: 0.5rem; +$closebutton-size: 2em; +$closebutton-lineheight: 1; +$closebutton-color: $dark-gray; +$closebutton-color-hover: $black; + +// 15. Drilldown +// ------------- + +$drilldown-transition: transform 0.15s linear; +$drilldown-arrows: true; +$drilldown-arrow-color: $primary-color; +$drilldown-background: $white; + +// 16. Dropdown +// ------------ + +$dropdown-padding: 1rem; +$dropdown-border: 1px solid $medium-gray; +$dropdown-font-size: 1rem; +$dropdown-width: 300px; +$dropdown-radius: $global-radius; +$dropdown-sizes: ( + tiny: 100px, + small: 200px, + large: 400px, +); + +// 17. Dropdown Menu +// ----------------- + +$dropdownmenu-arrows: true; +$dropdownmenu-arrow-color: $anchor-color; +$dropdownmenu-min-width: 200px; +$dropdownmenu-background: $white; +$dropdownmenu-border: 1px solid $medium-gray; + +// 18. Flex Video +// -------------- + +$flexvideo-margin-bottom: rem-calc(16); +$flexvideo-ratio: 4 by 3; +$flexvideo-ratio-widescreen: 16 by 9; + +// 19. Forms +// --------- + +$fieldset-border: 1px solid $medium-gray; +$fieldset-padding: rem-calc(20); +$fieldset-margin: rem-calc(18 0); +$legend-padding: rem-calc(0 3); +$form-spacing: rem-calc(16); +$helptext-color: $black; +$helptext-font-size: rem-calc(13); +$helptext-font-style: italic; +$input-prefix-color: $black; +$input-prefix-background: $light-gray; +$input-prefix-border: 1px solid $medium-gray; +$input-prefix-padding: 1rem; +$form-label-color: $black; +$form-label-font-size: rem-calc(14); +$form-label-font-weight: $global-weight-normal; +$form-label-line-height: 1.8; +$select-background: $white; +$select-triangle-color: $dark-gray; +$select-radius: $global-radius; +$input-color: $black; +$input-placeholder-color: $medium-gray; +$input-font-family: inherit; +$input-font-size: rem-calc(16); +$input-background: $white; +$input-background-focus: $white; +$input-background-disabled: $light-gray; +$input-border: 1px solid $medium-gray; +$input-border-focus: 1px solid $dark-gray; +$input-shadow: inset 0 1px 2px rgba($black, 0.1); +$input-shadow-focus: 0 0 5px $medium-gray; +$input-cursor-disabled: not-allowed; +$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; +$input-number-spinners: true; +$input-radius: $global-radius; + +// 20. Label +// --------- + +$label-background: $primary-color; +$label-color: foreground($label-background); +$label-font-size: 0.8rem; +$label-padding: 0.33333rem 0.5rem; +$label-radius: $global-radius; + +// 21. Media Object +// ---------------- + +$mediaobject-margin-bottom: $global-margin; +$mediaobject-section-padding: $global-padding; +$mediaobject-image-width-stacked: 100%; + +// 22. Menu +// -------- + +$menu-margin: 0; +$menu-margin-nested: 1rem; +$menu-item-padding: 0.7rem 1rem; +$menu-item-color-active: $white; +$menu-item-background-active: map-get($foundation-palette, primary); +$menu-icon-spacing: 0.25rem; + +// 23. Meter +// --------- + +$meter-height: 1rem; +$meter-radius: $global-radius; +$meter-background: $medium-gray; +$meter-fill-good: $success-color; +$meter-fill-medium: $warning-color; +$meter-fill-bad: $alert-color; + +// 24. Off-canvas +// -------------- + +$offcanvas-size: 250px; +$offcanvas-background: $light-gray; +$offcanvas-zindex: -1; +$offcanvas-transition-length: 0.5s; +$offcanvas-transition-timing: ease; +$offcanvas-fixed-reveal: true; +$offcanvas-exit-background: rgba($white, 0.25); +$maincontent-class: 'off-canvas-content'; +$maincontent-shadow: 0 0 10px rgba($black, 0.5); + +// 25. Orbit +// --------- + +$orbit-bullet-background: $medium-gray; +$orbit-bullet-background-active: $dark-gray; +$orbit-bullet-diameter: 1.2rem; +$orbit-bullet-margin: 0.1rem; +$orbit-bullet-margin-top: 0.8rem; +$orbit-bullet-margin-bottom: 0.8rem; +$orbit-caption-background: rgba($black, 0.5); +$orbit-caption-padding: 1rem; +$orbit-control-background-hover: rgba($black, 0.5); +$orbit-control-padding: 1rem; +$orbit-control-zindex: 10; + +// 26. Pagination +// -------------- + +$pagination-font-size: rem-calc(14); +$pagination-margin-bottom: $global-margin; +$pagination-item-color: $black; +$pagination-item-padding: rem-calc(3 10); +$pagination-item-spacing: rem-calc(1); +$pagination-radius: $global-radius; +$pagination-item-background-hover: $light-gray; +$pagination-item-background-current: $primary-color; +$pagination-item-color-current: foreground($pagination-item-background-current); +$pagination-item-color-disabled: $medium-gray; +$pagination-ellipsis-color: $black; +$pagination-mobile-items: false; +$pagination-arrows: true; + +// 27. Progress Bar +// ---------------- + +$progress-height: 1rem; +$progress-background: $medium-gray; +$progress-margin-bottom: $global-margin; +$progress-meter-background: $primary-color; +$progress-radius: $global-radius; + +// 28. Reveal +// ---------- + +$reveal-background: $white; +$reveal-width: 600px; +$reveal-max-width: $global-width; +$reveal-padding: $global-padding; +$reveal-border: 1px solid $medium-gray; +$reveal-radius: $global-radius; +$reveal-zindex: 1005; +$reveal-overlay-background: rgba($black, 0.45); + +// 29. Slider +// ---------- + +$slider-width-vertical: 0.5rem; +$slider-transition: all 0.2s ease-in-out; +$slider-height: 0.5rem; +$slider-background: $light-gray; +$slider-fill-background: $medium-gray; +$slider-handle-height: 1.4rem; +$slider-handle-width: 1.4rem; +$slider-handle-background: $primary-color; +$slider-opacity-disabled: 0.25; +$slider-radius: $global-radius; + +// 30. Switch +// ---------- + +$switch-background: $medium-gray; +$switch-background-active: $primary-color; +$switch-height: 2rem; +$switch-height-tiny: 1.5rem; +$switch-height-small: 1.75rem; +$switch-height-large: 2.5rem; +$switch-radius: $global-radius; +$switch-margin: $global-margin; +$switch-paddle-background: $white; +$switch-paddle-offset: 0.25rem; +$switch-paddle-radius: $global-radius; +$switch-paddle-transition: all 0.25s ease-out; + +// 31. Table +// --------- + +$table-background: $white; +$table-color-scale: 5%; +$table-border: 1px solid smart-scale($table-background, $table-color-scale); +$table-padding: rem-calc(8 10 10); +$table-hover-scale: 2%; +$table-row-hover: darken($table-background, $table-hover-scale); +$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); +$table-striped-background: smart-scale($table-background, $table-color-scale); +$table-stripe: even; +$table-head-background: smart-scale($table-background, $table-color-scale / 2); +$table-foot-background: smart-scale($table-background, $table-color-scale); +$table-head-font-color: $body-font-color; +$show-header-for-stacked: false; + +// 32. Tabs +// -------- + +$tab-margin: 0; +$tab-background: $white; +$tab-background-active: $light-gray; +$tab-item-font-size: rem-calc(12); +$tab-item-background-hover: $white; +$tab-item-padding: 1.25rem 1.5rem; +$tab-expand-max: 6; +$tab-content-background: $white; +$tab-content-border: $light-gray; +$tab-content-color: foreground($tab-background, $primary-color); +$tab-content-padding: 1rem; + +// 33. Thumbnail +// ------------- + +$thumbnail-border: solid 4px $white; +$thumbnail-margin-bottom: $global-margin; +$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); +$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); +$thumbnail-transition: box-shadow 200ms ease-out; +$thumbnail-radius: $global-radius; + +// 34. Title Bar +// ------------- + +$titlebar-background: $black; +$titlebar-color: $white; +$titlebar-padding: 0.5rem; +$titlebar-text-font-weight: bold; +$titlebar-icon-color: $white; +$titlebar-icon-color-hover: $medium-gray; +$titlebar-icon-spacing: 0.25rem; + +// 35. Tooltip +// ----------- + +$has-tip-font-weight: $global-weight-bold; +$has-tip-border-bottom: dotted 1px $dark-gray; +$tooltip-background-color: $black; +$tooltip-color: $white; +$tooltip-padding: 0.75rem; +$tooltip-font-size: $small-font-size; +$tooltip-pip-width: 0.75rem; +$tooltip-pip-height: $tooltip-pip-width * 0.866; +$tooltip-radius: $global-radius; + +// 36. Top Bar +// ----------- + +$topbar-padding: 0.5rem; +$topbar-background: $light-gray; +$topbar-submenu-background: $topbar-background; +$topbar-title-spacing: 1rem; +$topbar-input-width: 200px; +$topbar-unstack-breakpoint: medium; + diff --git a/source/assets/stylesheets/setup/_helpers.sass b/source/assets/stylesheets/setup/_helpers.sass new file mode 100644 index 0000000..6330759 --- /dev/null +++ b/source/assets/stylesheets/setup/_helpers.sass @@ -0,0 +1,6 @@ +@mixin text-center + text-align: center + +@mixin remove-list-styles + li + list-style: none diff --git a/source/assets/stylesheets/setup/_sizes.sass b/source/assets/stylesheets/setup/_sizes.sass new file mode 100644 index 0000000..e69de29 diff --git a/source/assets/stylesheets/site.sass b/source/assets/stylesheets/site.sass new file mode 100644 index 0000000..4a79d14 --- /dev/null +++ b/source/assets/stylesheets/site.sass @@ -0,0 +1 @@ +@import setup/all diff --git a/source/index.slim b/source/index.html.slim similarity index 100% rename from source/index.slim rename to source/index.html.slim diff --git a/source/layouts/layout.slim b/source/layouts/layout.slim index 5f22ed9..3ee2795 100644 --- a/source/layouts/layout.slim +++ b/source/layouts/layout.slim @@ -35,8 +35,8 @@ html itemscope='' itemtype='http://schema.org/WebPage' lang=data.site.language - if current_page.data.preferred_url link rel='canonical' href=current_page.data.preferred_url - = stylesheet_link_tag 'all' - = javascript_include_tag 'all' + = stylesheet_link_tag :site + = javascript_include_tag :site = favicon_tag 'images/favicon.ico' = favicon_tag 'images/favicon.ico', rel: 'apple-touch-icon', type: 'image/png' diff --git a/source/sitemap.slim b/source/sitemap.html.slim similarity index 100% rename from source/sitemap.slim rename to source/sitemap.html.slim diff --git a/source/stylesheets/all.sass b/source/stylesheets/all.sass deleted file mode 100644 index 2bead49..0000000 --- a/source/stylesheets/all.sass +++ /dev/null @@ -1,5 +0,0 @@ -@charset 'utf-8' - -// imported from /bower_components -@import normalize.css/normalize -@import bourbon