====== Columbian headings css ======

In DokuWiki, the [[doku>plugins:wrap|Wrap plugin]] is used to add HTML classes around parts of a wiki page. For our purposes, we mimic the page headers of [[works:publishers:cgi]] documents on pages in the [[harn:]] section and sections for other HârnWorld regions. Those pages have a wrapper around the headings like this:

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

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''.

<code css>
.wrap_chybisa h1 {
    background: __chybisa_background__;
    color:      __chybisa_color__;
}
</code>

For the border, we use a [[https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow|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 [[doku>template:bootstrap3|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. 

<code css>
/* 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;
}
</code>