Columbian headings css

In DokuWiki, the Wrap plugin is used to add HTML classes around parts of a wiki page. For our purposes, we mimic the page headers of Columbia Games, Inc. documents on pages in the Hârn section and sections for other HârnWorld regions. Those pages have a wrapper around the headings like this:

<WRAP chybisa columbian-h1>
====== Chybisa ======
</WRAP>

CSS is used to style those added classes; what is chybisa in the wiki text is referred to as .wrap_chybisa in the corresponding CSS. The .wrap_chybisa class (one of many such classes for each realm, document category, etc.) controls the color, and the .wrap_columbian-h1 provides the distinctive double border. No attempt has been made to bring in the Korinna font. This CSS file can be found in the custom template's directory at /conf/tpl/harnstrap3/css/harn/columbian.css from the wiki root.

Variables are used for the colors in order to tie into the Template Style Settings page. The color values for the variables are defined in the template initialization file located at /lib/tpl/harnstrap3/style.ini. In this case, the background value is #da521f and the color is #ffffff.

.wrap_chybisa h1 {
    background: __chybisa_background__;
    color:      __chybisa_color__;
}

For the border, we use a box-shadow property with 0 offsets for the outermost “rings”; the innermost black border is from the usual border property. First there is a white ring and then a second black one. The outer white ring with a 2px blur is not actually needed on a white page; indeed it is invisible. However, the Bootstrap3 template—customized into the harnstrap3 variant used here—allows for the selection of dark themes. In these instances, the extra ring eases the transition from the outer black ring into a dark-themed page.

/* Counter extra width of header box-shadow */
.dokuwiki .wrap_columbian-h1 {
    padding-bottom: 2em;
    padding-left:   4px;
    padding-right:  4px;
}
/* A semblance of the Columbia Hârn title bar format */
.dokuwiki .wrap_columbian-h1 h1 {
    border:         2.5px solid black;
    border-radius:  7.5px;
    box-shadow:
            0 0 0   2.5px white,
            0 0 0   4px   black,
            0 0 2px 4.5px white;    /* fades into dark background */
    margin-bottom:  2em;
    padding-bottom: 2em;
    padding-left:   0.3em;
    padding-top:    0.2em;
}