diff --git a/build-default-stylesheet.sh b/build-default-stylesheet.sh index fba2e39..682f7ce 100755 --- a/build-default-stylesheet.sh +++ b/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` diff --git a/sass/asciidoctor-compact.scss b/sass/asciidoctor-compact.scss new file mode 100644 index 0000000..3ba37b1 --- /dev/null +++ b/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. 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"; diff --git a/sass/settings/_asciidoctor-compact.scss b/sass/settings/_asciidoctor-compact.scss new file mode 100644 index 0000000..eb9b190 --- /dev/null +++ b/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; + +