resolves #19 migrate to Foundation 5

- migrate from Foundation 4 to Foundation 5
- upgrade to Compass 1.0.1
- make stylesheet changes necessary to accomodate upgrades
- add Bower configuration
- update README with information about Bower requirement
- refactor handling of trailing margins in asciidoc component
- drop old themes: iconic, colony, maker, rubygems
- rework readthedocs theme to match new theme on readthedocs.org
- add motion theme
- improve build-stylesheet.sh script
- declare custom sass functions
- fix background colors for sidebar & example blocks in asciidoctor theme
- many minor refinements to styles & scss source

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components"
+}

.gitignore

@@ -1,4 +1,5 @@
 /*.html
 /.sass-cache/
 /Gemfile.lock
+/bower_components/
 /stylesheets/

Gemfile

@@ -1,4 +1,3 @@
 source 'https://rubygems.org'
 
-gem 'compass', '0.12.7'
-gem 'zurb-foundation', '4.3.2'
+gem 'compass', '~> 1.0.1'

LICENSE

@@ -1,7 +1,6 @@
-Asciidoctor styles
-------------------
+= Asciidoctor styles
 
-Copyright (c) 2013 Dan Allen
+Copyright (C) 2013-2016 Dan Allen and the Asciidoctor Project
 
 MIT License
 
@@ -28,13 +27,13 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 Other licensed work
 -------------------
 
-- Foundation 4 by Zurb, on which the themes are built, is licensed under the
+- Foundation 5 by Zurb, on which the themes are built, is licensed under the
   Apache License, v2.0:
 
   http://apache.org/licenses/LICENSE-2.0
   http://foundation.zurb.com
 
-- The riak theme is derived from the Riak documentation theme by Basho,
+- The stone theme is derived from the old Riak documentation theme by Basho,
   licensed under the Creative Commons Attribution 3.0 Unported License:
 
   http://creativecommons.org/licenses/by/3.0/us

README.adoc

@@ -1,6 +1,6 @@
-= Asciidoctor stylesheet factory
+= Asciidoctor Stylesheet Factory
 Dan Allen
-:toc:
+:toc: preamble
 :source: https://github.com/asciidoctor/asciidoctor-stylesheet-factory
 
 This project is a factory for stylesheets that can be used to style the HTML generated by an AsciiDoc processor (specifically the html5 backend).
@@ -9,19 +9,20 @@ In addition to being a general purpose AsciiDoc stylesheet generator, it is used
 == Foundation
 
 The stylesheets in this project are built using http://compass-style.org[Compass], a CSS authoring framework that uses http://sass-lang.com[Sass] to generate CSS files.
-The styles and components are generated by http://foundation.zurb.com[Foundation 4], an awesome and flexible CSS component framework that ensures your stylesheet is cross-browser friendly and mobile friendly.
+The styles and components are generated by http://foundation.zurb.com[Foundation 5], an awesome and flexible CSS component framework that ensures your stylesheet is cross-browser friendly and mobile friendly.
 
 == Setup and compilation
 
-To setup the project, make sure you have Ruby, RubyGems and, optionally, Bundler.
-Next, run Bundler to install the required gems:
+To setup the project, make sure you have Ruby, RubyGems, Bundler and http://bower.io[Bower].
+First, run Bower to install the required web components:
 
- $ bundle install
+ $ bower install
 
-That command is equivalent to executing:
+Then, run Bundler to install the required gems:
 
- $ gem install --version '0.12.7' compass
- $ gem install --version '4.3.2' zurb-foundation
+ $ bundle
+
+NOTE: The `bundle` command installs all the gems listed in Gemfile.
 
 Once you have the gems installed, you can build the stylesheets.
 
@@ -57,7 +58,7 @@ TIP: Alternatively, you can use this README as an example.
 
 Then, use AsciiDoc or Asciidoctor to generate HTML that uses one of the stylesheets from the +stylesheets/+ directory:
 
- $ asciidoctor -a stylesheet=./stylesheets/asciidoctor.css sample.adoc
+ $ asciidoctor -a stylesheet=./stylesheets/readthedocs.css sample.adoc
 
 If you want to activate syntax highlighting in the code, add this argument:
 
@@ -83,7 +84,7 @@ To create a new theme (e.g., +hipster+), start by creating two new files:
   * Imports the AsciiDoc components
   * Defines any explicit customizations
 +sass/settings/_hipster.scss+::
-  * Sets variables that customize Foundation 4 and the AsciiDoc CSS components
+  * Sets variables that customize Foundation 5 and the AsciiDoc CSS components
 
 Here's a minimal version of +sass/hipster.scss+:
 
@@ -96,10 +97,10 @@ Here's a minimal version of +sass/hipster.scss+:
 
 NOTE: You don't have to include the underscore prefix when importing files.
 
-NOTE: The +awesome-icons+ component is only applicable to HTML generated by Asciidoctor >= 0.1.2 with the +icons+ attribute set to +awesome+.
+NOTE: The +awesome-icons+ component is only applicable to HTML generated by Asciidoctor >= 0.1.2 with the +icons+ attribute set to +font+.
 
 You can add any explicit customizations below the import lines.
 
-The variables you can set in +sass/settings/_hipster.scss+ are a combination of the {source}/blob/master/sass/settings/_settings.scss.dist[Foundation 4 built-in global settings] and {source}/blob/master/sass/settings/_defaults.scss[global settings and imports for the AsciiDoc components].
+The variables you can set in +sass/settings/_hipster.scss+ are a combination of the https://github.com/zurb/foundation/blob/v5.5.0/scss/foundation/_settings.scss[Foundation 5 global settings] and {source}/blob/master/sass/settings/_defaults.scss[default settings and imports for the AsciiDoc components].
 
 Happy theming!

bower.json

@@ -0,0 +1,8 @@
+{
+  "name": "asciidoctor-stylesheet-factory",
+  "version": "1.0.0-dev",
+  "private": "true",
+  "dependencies": {
+    "foundation": "zurb/bower-foundation#5.5.0"
+  }
+}

build-stylesheet.sh

@@ -10,22 +10,31 @@ compass compile -s compact
 LINES=`wc -l stylesheets/$STYLESHEET_NAME.css | cut -d" " -f1`
 echo '/* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */' > $STYLESHEET_NAME.css
 cat stylesheets/$STYLESHEET_NAME.css | \
+  # strip comments (cssshrink now handles this operation)
   sed 's/ *\/\*\+!\? [^*]\+\($\| \*\/\)//g' | \
   sed 's/^\/\*\* .* \*\/$//' | \
   sed '/^\(*\/\|\) *$/d' | \
+  # remove some unused class names and styles
   sed 's/\.antialiased, body/body/' | \
   sed '/object, svg { display: inline-block;/d' | \
   sed 's/img { display: inline-block;/img, object, svg { display: inline-block;/' | \
   sed '/\(meta\.\|\.vcard\|\.vevent\|#map_canvas\)/d' | \
+  # remove font-awesome @import if present
   grep -v 'font-awesome' >> $STYLESHEET_NAME.css
 
 # see https://www.npmjs.org/package/cssshrink
 cssshrink $STYLESHEET_NAME.css | \
   sed '1i\
-/* Remove comment around @import statement below when using as a custom stylesheet */\
+/* Uncomment the @import statement below when using as a custom stylesheet */\
 /*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/' | \
+  # add license header
   sed '1i\
 /* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */' | \
+  # quote font names
   sed 's/\(Open Sans\|DejaVu Sans\|Noto Serif\|DejaVu Serif\|Droid Sans Mono\|DejaVu Sans Mono\|Ubuntu Mono\|Liberation Mono\|Varela Round\)/"\1"/g' | \
+  # allow browser to map bold to font-weight 600 from Open Sans (maybe not the best solution)
   sed 's/font-weight:700/font-weight:bold/g' | \
-  ruby -e 'puts STDIN.read.gsub(/}(?!})/, %(}\n)).chomp' - > $STYLESHEET_NAME.min.css
+  # put endlines after every } that precedes a non-} character
+  sed 's/}\([^}]\)/}\n\1/g' | \
+  # remove the responsive alignment classes
+  sed '/-text-\(left\|right\|center\|justify\)/d' > $STYLESHEET_NAME.min.css

config.rb

@@ -1,5 +1,5 @@
-require 'zurb-foundation'
-require './lib/functions'
+add_import_path 'bower_components/foundation/scss'
+require_relative 'lib/functions'
 
 http_path = '/'
 css_dir = 'stylesheets'

lib/functions.rb

@@ -7,6 +7,7 @@ def string_to_color(name)
     # FIXME check to see if a color could be found, don't just assume
     Sass::Script::Color.new Sass::Script::Color::COLOR_NAMES[name.value]
   end
+  declare :string_to_color, [:name]
 
   # background_noise from https://gist.github.com/aaronrussell/856571 by Aaron Russell
   def background_noise(c, noise = 0.5, opacity = 0.08, size = 200, mono = false)
@@ -43,4 +44,5 @@ def background_noise(c, noise = 0.5, opacity = 0.08, size = 200, mono = false)
     Sass::Script::String.new("url('data:image/png;base64,#{data}')")
 
   end
+  declare :background_noise, [:c, :noise, :opaciy, :size, :mono]
 end

sass/asciidoctor.scss

@@ -1,4 +1,4 @@
-//@import "fonts/asciidoctor";
+//@import "fonts/asciidoctor-collection";
 @import "settings/asciidoctor";
 @import "components/asciidoc";
 @import "components/awesome-icons";
@@ -20,30 +20,45 @@ p, td.content, div.footnote {
   }
 }
 
+// FIXME add variable and move this to asciidoc component
 // NOTE include blockquote for when it doesn't have a nested p
 p, blockquote, dt, td.content, span.alt {
-  font-size: 1.0625rem;
+  font-size: rem-calc(17px);
 }
 
-p {
-  margin-bottom: 1.25rem;
-}
-
-// restore font size in sidebar block and regular table cells
-.sidebarblock p, .sidebarblock dt, .sidebarblock td.content, p.tableblock {
+// restore font size in sidebar block
+.sidebarblock p, .sidebarblock dt, .sidebarblock td.content {
   font-size: 1em;
 }
 
 .exampleblock > .content {
   // white
-  //background-color: #fff;
-  //border-color: $panel-border-color;
-  //@include single-box-shadow($panel-border-color, 0, 1px, 2px);
+  background-color: #fff;
+  border-color: $panel-border-color;
+  @include single-box-shadow(0, 1px, 4px, null, $panel-border-color);
 
   // light yellow
-  background-color: #fffef7; // from rgb(252,247,227), analogous to #f8f8f7
-  border-color: $panel-border-color;
-  @include single-box-shadow($panel-border-color, 0, 1px, 4px);
+  //background-color: #fffef7; // from rgb(252,247,227), analogous to #f8f8f7
+  //border-color: $panel-border-color;
+  //@include single-box-shadow(0, 1px, 4px, null, $panel-border-color);
+}
+
+// FIXME make this situation simpler
+// we're trying to accomodate highlight themes that have background colors
+// if "highlight" is in first position, then a source highlighter is not in use
+.literalblock pre,
+.listingblock pre:not(.highlight),
+.listingblock pre[class="highlight"],
+.listingblock pre[class^="highlight "],
+.listingblock pre.CodeRay,
+.listingblock pre.prettyprint {
+  .sidebarblock & {
+    // FIXME make me a variable
+    // FIXME what about inline code?
+    //background: #ededef;
+    //background: #f2f1f1;
+    background: #fff;
+  }
 }
 
 @import "components/print";