configure-theme-for-asciidoc-and-website.adoc

Configure a theme for AsciiDoc and the website

Table of Contents

• Clone Asciidoctor stylesheet factory as a submodule
• Import theme into main stylesheet
• Add extra styles needed for website layout
• Load SASS functions for themes
• Remove unnecessary files
• Assign id to main content
• Revise main heading on home page
• Format site name in nav bar
• Clean and preview site to see changes
• Next: Activate posts extension (blog, news, etc)

Previous: Activate AsciiDoc content

Tutorial 7

This tutorial…​

Clone Asciidoctor stylesheet factory as a submodule

$ git submodule add -b embedded-stylesheets \
https://github.com/asciidoctor/asciidoctor-stylesheet-factory.git \
stylesheets/_themes

Import theme into main stylesheet

1. Delete all content in stylesheets/app.scss

2. Populate the file with the content in the listing below

stylesheets/app.scss

$row-width: 72em;
@import "_themes/sass/foundation-embedded.scss";

Tip	Alternative themes for the first line include asciidoctor-embedded and rocket-panda-embedded.

Add extra styles needed for website layout

stylesheets/app.scss

@import "foundation/components/buttons";
@import "foundation/components/button-groups";
@import "foundation/components/top-bar";
@import "foundation/components/inline-lists";
$pagination-link-unavailable-font-color: #e9e9e9;
@import "foundation/components/pagination";

$footer-bg: $body-font-color !default;
$footer-font-color: invert($body-font-color) !default;
.top-bar a {
  text-decoration: none;
}
h1 em {
  letter-spacing: 1px;
}
body > footer {
  background: $footer-bg;
  padding: $panel-padding;
  color: $footer-font-color;
}

Load SASS functions for themes

Add line to top of _ext/pipeline.rb

require './stylesheets/_themes/lib/functions.rb'

Remove unnecessary files

$ rm stylesheets/{_normalize.scss,_settings.scss}

Important

Also remove the normalize.css link from _layouts/base.html.haml.

Assign id to main content

Edit _layouts/base.html.haml

  #content.row
    .large-12.columns
      =content

Revise main heading on home page

Edit index.html.haml

.row
  .large-12.columns
    %h1 Welcome to #{Asciidoctor.render site.name, :doctype => :inline}!

Important

Make sure to remove the %hr under the %h1.

Format site name in nav bar

Edit _layouts/base.html.haml

      %li.name
        %h1
          %a(href="#{site.ctx_path}/")
            =Asciidoctor.render site.name, :doctype => :inline

Clean and preview site to see changes

$ rake clean preview

Next: Activate posts extension (blog, news, etc)