These cascading style sheets are modular to allow for easy adjustments where necessary, without searching for its position in a large, complex file. The primary CSS is [default.css], references all the other files, and is the only one needed to be called directly in the HTML document.

Default.css

The primary stylesheet, which really simply calls all the others They are organised according to purpose, so one only edits the file which one needs, without having to scroll endlessly to find the pertinent section.

These stylesheets have the necessary sections for styling for print also, but one may consider sub-dividing the stylesheets to also include a "print_default.css" which itself would call the various "print_[present].css" as needed. One will probably adjust stylesheets for print separate from stylesheets for monitor screens, with the exception of the colour palette for consistency.

@import "colours.css"; Defines colours for consistent appearance*/

@import "fonts.css"; Defines local font families, web-fonts, et al., for use

@import "columns.css"; How Section columns will be laid out for web and print

@import "paragraph.css"; Defines <p>, <h*>, <header>, and other block styles

@import "character.css"; Defines <b>, <emp>, <strong>, and other in-line styles

@import "sections.css"; Presentation of <main>, <body>, <article>, <section>, et al.

@import "formControls.css"; Appearance of form items

@import "lists.css"; Appearance of all lists and list items

@import "notes.css"; For creating footnotes and endnotes. Experimental.

Colours.css

Global values

Theme colours

--bg-hue is the hue & saturation of the background. The level is not defined here, so that this value can be used as a complement to the background with some other element.

--fg-hue is the hue & saturation of the foreground (text). It is adjacent to the background colour. The level is not defined here, so that this value can be used as a complement to the foreground with some other element.

Likewise, --shadow-hue is for the shadow. It is adjacent to the background colour.

On the contrary, --highlight-hue, --hightlighter, and --widget-hue, are designated to stand out, and be eye-catching.

Fonts.css

This defines the default serif, sans-serif, and mono-spaced fonts, including the fail-overs. The primary fonts are all from the same family, FreeFamily, (FreeSerif, FreeSans, FreeMono). Likewise, the secondary fonts are from the same family of fonts, No Tofu, (Noto Serif, Noto Sans, Noto Mono).

FreeFamily and No Tofu were chosen for being almost complete in glyphs, and being complementary across serif, sans-serif, and mono-spaced fonts. The final font choice defaults to the system default fonts.

The primary font is a WOFF2 font on the server. The secondary font is a WOFF2 font hosted by Google.

In addition, there is the Libre Baskerville Serif, Arimo Sans, Dancing Script cursive, and Sarina cursive Google-hosted WOFF2 fonts.

Defined as variables are,

It might be beneficial to also define defaults for cursive, formal, fantasy, Gothic, and humour.

Columns.css

Reading across a 4k 16:9 monitor may cause discomfort with moving of the neck, and continuity errors from returning to the incorrect line as one goes from far right to far left. This is why newspapers are divided into columns; for easier reading.

This CSS does the same for the Section block. It was originally built on the premise that single Articles have multiple sections. One can adopt it for Articles if one believes that single Sections ought to contain multiple Articles, but even so, with the one and only single Main, containing multiple Sections/Articles, it can still be used to put Sections ——which contain Articles—— into columns with this stylesheet.

Although colours.css is imported by default.css, it is imported here in the rare case that this reusable code is reused by one who does not want to use the default.css stylesheet. The colour of the column rule could simply be defined here, but we want to keep a consistent colour palette.

One is free to replace or redefine the colour palette of colour.css, or use an alternate stylesheet of one's own choosing.

Generally speaking, for the case of a wide monitor of 4k resolution, (3840 to 4096 px), there is a four column layout. Ideally, this ought to be changed for the case of an 8k monitor, however, it is assumed that an 8k monitor will likely be viewed from a similar viewing distance, and creating larger fonts for a greater resolution monitor is a better alternative.

It goes down to one column for a FHD monitor and smaller.

Another thought is that, instead of using millimetres (mm) or pixels (px) for Max-Width, one uses the EM or EX measurements, thus having a greater idea of how many words, ——in particular, large words—— can fit in a column. Thus column size is also dependent on the default section font size, and independent of media type.

Changes for printed output

Large paper. That is, larger than A2. Perhaps it ought to be redefined for sizes as large as A0, but it is presumed that larger sheets would be folded for newspaper tabloids, anyway, so it is unlikely that more columns will be needed.

It is however recognised, that this is not the case for scrolls, banners, and other uses. One is free to make appropriate changes as one sees fit.

Starts at six columns for A2 and larger, and down to one column for A5 and smaller.

Paragraph styles

Set the default font for the entire site

Consider san-serif fonts for monitor screens. Modern high resolution monitors are probably fine for fonts with serif, but small devices still tend to have low-resolution

screens. Fonts without serifs tend to be more readable on these screens.

headings

Headings Have Title-case As Illustrated Here, And Are All Bold, sans-serif.

Since H5 & H6 are likely to be similar sizes to their paragraphs, they are set aside with font-style and indentation.

Defaults

Paragraphs and list items have a 1EM margin so that they do not sit against their containing boxes.

Aside

Asides have slightly smaller fonts so as not to appear within the flow of surrounding paragraphs. They are, after all, asides.

Pictures & Figures

Pictures have box-shadows, except when within headers, to separate them from surrounding content.

Horizontal Rule

Horizontal rules are no larger than one-third the size of their containers.

There is a stylised horizontal rule, on an SVG format, which ought to be scalable. (That is what the "S" in "SVG" is for ;-) ).

hr::before {

content: url (/image/hr4.svg);

display: block;

margin-left:auto;

margin-right:auto;

height:auto;

width:33%;

justify-content:center;

size: contain;

object-fit: scale-down;

(For some reason, it no longer works. It used to work. It may have to do with flex containers).

Low-res Screens

No fonts with serifs on low-resolution screens, (max-width: 800px).

Headings Have Title-case As Illustrated Here, And Are All Bold, Serif, (h1, h2, h3, h4, h5, h6). Fonts with serifs are fine, since heading fonts are larger. The serifs differentiate them from normal paragraphs.

Since H6 & H7 are likely to be similar sizes to their paragraphs, we set them aside with font-style and indentation, and since they are small fonts, they have no serifs.

Print

Serif fonts are a perfectly cromulent choice for print, but the default font-size is re-defined in points, (10pt), and asides, slightly smaller, (8pt).

Character styles

This stylesheet is used for styling inline elements such as,

Et al.

Sections.css

Layout styles

This will set the styling for all box items within the document object model (DOM), such as,

Et al.

To begin with, we set box-sizing to border-box to make width calculations easier.

To end with, footers, by HTML5 default, have details hidden. We want details to show when printed, (@media print). However, CSS is NOT currently able to control this behaviour. We therefore set the value “open” in the PHP, and leave it there. Perhaps one can reconsider what one puts in the details, as things which are only an aside, and can be excluded from normally printing.

formControls.css

Appearance of form items. Currently, it only defines ; orange, with a green border. Button and border gets “lit” when hovered, creating a shadow. On activation, border not lit, shadow less intense, light bleeds.

Lists.css

Appearance of all lists and list items.

Currently, ordered lists have a numbering hierarchy of decimal, (1, 2, 3,…), upper-alpha, (A, B, C,…), upper-Roman, (I, II, III,…), lower-alpha, (a, b, c,…), lower-roman, (i, ii, iii,…), lower-greek, (ɑ, ꞵ, ɣ,…).

  1. level one
    1. level two
      1. level three
        1. level four
          1. level five
            1. level six

Notes.css

For creating footnotes and endnotes. Experimental.

With the presumption that Articles contain Sections, (and not the other way around), then FootnotesGoes at the foot of the page belong after Sections, and EndnotesGoes at the end of the article/section. belong after Articles. Accordingly, footnotes have lower-case letters (lower-alpha) to represent them, (assuming less than 26 notes per Section), and Endnotes have decimal numbers, since this number presumably can get very high in very long articles.

If one feels that Sections ought to contain Articles, then feel free to adjust accordingly.

CAVEAT: Currently, this stylesheet does NOT place the notes in the appropriate locations. We have to work on that, probably with PHP.