Asciidoctor compact theme and build script change

build-default-stylesheet.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 
 compass compile -s compact
 LINES=`wc -l stylesheets/asciidoctor.css | cut -d" " -f1`

sass/asciidoctor-compact.scss

@@ -0,0 +1,131 @@
+@import "settings/asciidoctor-compact";
+@import "components/asciidoc";
+@import "components/awesome-icons";
+
+h1, h2 {
+  letter-spacing: -0.01em;
+}
+
+dt, th.tableblock, td.content {
+  text-rendering: optimizeLegibility; // already set for p
+}
+
+p, td.content {
+  letter-spacing: -0.01em;
+  // TODO needs to apply anywhere we have bold prose
+  strong {
+    letter-spacing: -0.005em;
+  }
+}
+
+// NOTE include blockquote for when it doesn't have a nested p
+p, blockquote, dt, td.content {
+  font-size: 1.0625rem;
+}
+p {
+  margin-bottom: 1.25rem;
+}
+
+// restore font size in sidebar block and regular table cells
+.sidebarblock p, .sidebarblock dt, .sidebarblock td.content, p.tableblock {
+  font-size: 1em;
+}
+
+.exampleblock > .content {
+  // white
+  //background-color: #fff;
+  //border-color: $panel-border-color;
+  //@include single-box-shadow($panel-border-color, 0, 1px, 2px);
+  // 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);
+}
+
+.paragraph.lead > p,
+#preamble > .sectionbody > .paragraph:first-of-type p {
+  font-size: $paragraph-font-size + emCalc(2.5);
+  line-height: 1.5;
+}
+
+.admonitionblock > table {
+  border-collapse: separate;
+  border: 0;
+  background: none;
+  width: 100%;
+  td.icon {
+    text-align: center;
+    // FIXME use ems!
+    width: 40px;
+    img {
+      max-width: none;
+    }
+    .title {
+      //font-weight: $header-font-weight;
+      font-weight: bold;
+      font-family: $header-font-family;
+      text-transform: uppercase;
+    }
+  }
+  td.content {
+    padding-left: emCalc(14px);
+    padding-right: emCalc(16px);
+    border-left: $hr-border-width $hr-border-style $hr-border-color;
+    // FIXME use $aside-font-color
+    color: $blockquote-cite-font-color;
+    line-height: 1.4;
+    // QUESTION use opacity instead of blockquote-cite-font-color?
+    //opacity: 0.75;
+    //& > .paragraph:last-child > p {
+    & > :last-child > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.literalblock,
+.listingblock {
+  // use pre[class] so we win over pre.<name> styles
+  pre, pre[class] {
+    @if $pre-border-size {
+      border: $pre-border-size $pre-border-style $pre-border-color;
+    }
+    // FIXME make border radius on listing blocks configurable!
+    @include radius;
+    word-wrap: break-word;
+
+    &.nowrap {
+      overflow-x: auto;
+      white-space: pre;
+      word-wrap: normal;
+    }
+
+    // screens below breakpoint
+    padding: $pre-padding;
+    font-size: $em-base;
+
+    @media #{$small} {
+      font-size: emCalc($em-base + 1);
+    }
+
+    @media #{$medium} {
+      font-size: emCalc($em-base + 2);
+    }
+  }
+}
+
+.listingblock code[data-lang]:before {
+  display: none;
+  content: attr(data-lang);
+  position: absolute;
+  font-size: $em-base - 1;
+  //top: 0.5rem; // 0.67em
+  top: 0.425rem;
+  right: 0.5rem; // 0.67em
+  line-height: 1;
+  text-transform: uppercase;
+  color: #999;
+}
+
+
+@import "components/print";

sass/settings/_asciidoctor-compact.scss

@@ -0,0 +1,135 @@
+// Color Palette
+
+// rgba(0,0,0,.9) - deep black
+// rgba(0,0,0,.85) - black
+// rgba(0,0,0,.8) - print black
+// rgba(0,0,0,.75) - light black
+// rgba(0,0,0,.6) - muted black
+// #ba3925 - orange
+// #7a2518 - dark orange
+// #3a120c - maroon
+// #2561ba - blue
+// #f8f8f7 - warm beige
+// #f7f7f8 - cool beige
+// #f7f8f7 - tinted beige
+// #ddddd8 - light gray
+// #d8d8d8 - lighter gray
+// #efefed - very light gray
+
+// Body (IMPORTANT $body-* variables must be defined above the defaults import)
+
+$body-bg: white;
+$body-font-color: rgba(0,0,0,0.8);
+$body-font-family: "Noto Serif", "DejaVu Serif", serif;
+
+
+$base-font-size: 12px;
+
+@import "defaults";
+
+
+$em-base: $base-font-size;
+
+// Default Overrides
+
+$primary-color: darken(#2561ba, 5%);
+$alert-color: lighten(#3a120c, 15%); // $code-color is 15% darker than $alert-color, so we lighten here by 15%
+$global-radius: 4px;
+$panel-bg: #f8f8f7;
+$panel-font-color: rgba(0,0,0,0.75);
+
+// Headings
+
+$header-font-family: "Open Sans", "DejaVu Sans", sans-serif;
+$header-font-weight: 300;
+$header-font-color: #ba3925;
+$header-line-height: 1.2;
+$header-top-margin: 1em;
+$header-word-spacing: -0.05em;
+$title-font-color: rgba(0,0,0,0.85);
+$title-font-weight: $header-font-weight;
+$subheader-font-family: $body-font-family;
+$subheader-font-size: 1rem;
+$subheader-font-color: darken($header-font-color, 15%); // resolves to #7a2518
+$subheader-font-weight: normal;
+$subheader-font-style: italic;
+$subheader-line-height: 1.45;
+$subheader-top-margin: 0;
+$subheader-bottom-margin: 0.25em;
+$sidebar-header-align: center;
+$sect-divider-size: 1px;
+$sect-divider-style: solid;
+$sect-divider-color: #efefed;
+$hr-border-color: #ddddd8;
+
+$h1-font-size: emCalc(32px);
+$h2-font-size: emCalc(28px);
+$h3-font-size: emCalc(24px);
+$h4-font-size: emCalc(20px);
+$h5-font-size: emCalc(16px);
+$h6-font-size: 1em;
+
+// Paragraphs
+// FIXME doesn't support rem math
+//$paragraph-font-size: 1.0625rem; // result of emCalc(17px) converted to rem (18px is 1.125em)
+
+// Inline Code
+
+$code-font-family: "Droid Sans Mono", "DejaVu Sans Mono", "Monospace", monospace;
+// NOTE will need to adjust code-font-size if we bump p font-size to 1.125em
+//$code-font-size: 0.95em;
+$code-font-size: emCalc($em-base -1);
+$code-font-weight: normal;
+// FIXME don't forget about code in a table cell
+$code-line-height: 1.4;
+$code-color: rgba(0,0,0,0.9);
+$code-bg-color: #f7f7f8;
+$code-padding: 0.1em 0.5ex;
+$code-word-spacing: -0.15em;
+$code-text-rendering: optimizeSpeed;
+
+// Inline Code
+
+$code-font-weight: normal;
+$code-font-size: emCalc($em-base - 1);
+$code-bg-color: darken(#fff, 5%);
+$code-border-color: darken(#fff, 20%);
+$code-border-size: 1px;
+$code-padding: 1px 3px 0;
+
+// Code Blocks
+// *Recommended highlight.js themes: magula, default, docco
+
+$pre-font-family: "Droid Sans Mono", "DejaVu Sans Mono", "Monospace", monospace;
+$pre-font-color: rgba(0,0,0,0.9);
+$pre-border-size: null;
+$pre-bg: #f7f7f8;
+$pre-padding: emCalc(16px);
+$pre-line-height: 1.4;
+
+// Links
+
+$anchor-text-decoration: underline;
+
+// Lists
+
+$list-side-margin: emCalc(20px);
+$definition-list-header-margin-bottom: emCalc(5px);
+$definition-list-margin-bottom: emCalc(12px);
+
+// Blockquotes
+
+$blockquote-font-color: $title-font-color;
+$blockquote-cite-font-color: rgba(0,0,0,0.6);
+$blockquote-cite-font-size: emCalc(13px);
+
+// Tables
+
+$table-head-font-size: inherit;
+$table-row-font-size: inherit;
+$table-line-height: 1.6;
+$table-head-bg: #f7f8f7;
+$table-even-row-bg: #f8f8f7;
+$table-border-color: #dedede;
+
+