A CSS style for Nim documentation

README.txt

To compile the SASS files into "nimdocs.css", install SASS

    gem install sass

and then run

    sass -t compressed nimdocs.scss:nimdocs.css

Maurizio Tomasi
December 2014

_syntax.scss

/* Syntax highlighting */

span.DecNumber {
    color: blue;
}

span.BinNumber {
    color: blue;
}

span.HexNumber {
    color: blue;
}

span.OctNumber {
    color: blue;
}

span.FloatNumber {
    color: blue;
}

span.Identifier  {
    color: black;
}

span.Keyword {
    font-weight: bold;
}

span.StringLit {
    color: blue;
}

span.LongStringLit {
    color: blue;
}

span.CharLit {
    color: blue;
}

span.EscapeSequence {
    color: black;
}

span.Operator {
    color: black;
}

span.Punctuation {
    color: black;
}

span.Comment, span.LongComment {
    font-style:italic;
    color: #44744f;
}

span.RegularExpression  {
    color: DarkViolet;
}

span.TagStart {
    color: DarkViolet;
}

span.TagEnd {
    color: DarkViolet;
}

span.Key {
    color: blue;
}

span.Value {
    color: black;
}

span.RawData {
    color: blue;
}

span.Assembler {
    color: blue;
}

span.Preprocessor {
    color: DarkViolet;
}

span.Directive  {
    color: DarkViolet;
}

span.Command, span.Rule, span.Hyperlink, span.Label, span.Reference, span.Other  {
    color: black
}

_tables.scss

table.docutils {
    
    th, td {
        border: 0px;
        text-align: left;
        padding: 0.2em;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
    
    th {
        color: $navigation_foreground;
        background: $navigation_background;
        margin: 0;
    }
    
    border: 0px;
    background: $table_background;
    margin-top: 1em;
    margin-bottom: 1em;
}

nimdocs.scss

$navigation_background: #4d423e;
$navigation_foreground: #C0C0C0;
$navigation_shadow: #39302d;
$navigation_shadow_light: #C0C0C0;
$code_background: #d9d2ce;
$table_background: #d9d2ce;

@import '_tables.scss';
@import '_syntax.scss';

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: 'Lato', sans-serif;
}

h1.title {
    margin: 0;
    padding: 1em;
    color: white;
    text-align: right;
    background: $navigation_background;
    display: table-caption;
    caption-side: top;
    text-shadow: 2px 2px 2px $navigation_shadow;
}

h1 {
    font-weight: bold;
    margin-top: 2em;
    margin-bottom: 1em;
}

h2 {
    margin-top: 2em;
    margin-bottom: 1em;
}

blockquote {
    font-style: italic;
}

pre {
    padding: 0.5em;
    line-height: 1.6;

    margin-top: 1.5em;
    margin-bottom: 1.5em;

    border-style: solid;
    border-radius: 0.5em;
    border-spacing: 1em;
    border-width: 1px;
    border-color: $navigation_background;
    background: $code_background;
    font-family:  Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    font-size: 90%;
}

a:hover {
    color: $navigation_foreground;
    background: $navigation_background;
}

a {
    color: $navigation_background;
    text-decoration: none;
}

div#documentId.document {
    display: table;
}

div#documentId.document > small {
    display: table-row;
}

div#content.content, div.navigation {
    vertical-align: top;
    float: none;
    margin: 0; padding: 0;
}

div#content.content {
    float: none;
    max-width: 55em;
    padding: 2em;
    background-color: white;
    display: table-cell;

    p, li, ul, dt {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        line-height: 1.5;
    }

    dt {
        margin-top: 2em;
        margin-bottom: 1em;
    }

    h1 > a, h2 > a, h3 > a {
        padding: 0.2em;
    }
}

div.navigation {
    ul {
        list-style-type: none;
        font-weight: bold;
        line-height: 1.5;
        padding-left: 1em;
        padding-right: 1em;
        font-size: 110%;
    }
    
    ul > ul, ul > ul > ul {
        font-weight: normal;
        font-size: 100%;
    }

    a:hover {
        color: $navigation_background;
        background: $navigation_foreground;
        text-shadow: 0px 0px;
    }

    a {
        color: $navigation_foreground;
        padding: 0.1em;
    }

    text-shadow: 2px 2px 2px $navigation_shadow;
    float: none;
    top: 0px;
    left: 0px;
    margin: 0; padding: 0;
    background-color: $navigation_background;
    display: table-cell;
}