website stylesheet, 2019-11-22

website stylesheet, 2019-11-22


Stylesheet used with the l8l.info website.


Color. Always separate from other properties.

Font variants. Always separate from other properties.

Default properties for HTML marks. No IDs, no classes, no color, no fonts.

Basic document characteristics:

Features:

Stylesheet documents
Classes: css; css-list.

Document views.

The print medium.

# color

Summary: Shapes emerge from the difference of color, with darkness unseen and light attracting attention. An excess of differences is an excess of distractions.

Difference of color asserts visual existence and legibility. Lack of light, darkness, correlates with lack of sight, visually unnoticeable, ignorable, and unimportant. Light is visually noticed, a focal point of importance, such as text, and everything in between either an ignorable darkness or a distraction of other light.

Highlighting a detail deflects from the topic. Emphasizing with distinctive shaping evokes a physical sense for visual contrast, f.e. spacing, symbols, punctuation, font variants. Delineate further with either the emphasis color or the secondary background, but preferably only one of those when at all.

For congruency of color, group all the selectors for a specific property/value pair once. For example, one rule with all selectors for a specific background color.

Default background
*/
body
{background-color:#012}
/*
Secondary background
*/
html
,/*Document title.*/
body
>h1:first-child
,/*Cover for
prior content indicator*/
body
>h1:first-child
+hr::before
,/*Cover for
later content indicator.*/
body
>hr
~hr:last-of-type::after
,/*A note.*/
a[tabindex]+ins
,/*Site link.*/
body
>a:last-child
{background-color:#000}
/*
Default foreground
*/
html
{color:#cba}
/*
Emphasis foreground
*/
code
,var
,kbd
,/*Fragment link
emphasis.*/
:target~[\#]
{color:#0c0}
/*
Foreground for
hyperlinks and
interactions
*/
:link
,:visited
{/*Traditional.*/
color:#0cf}
/*
Boundaries
*/
/*Document title*/
body
>h1:first-child
{border-right-color:#000}

/*Cover for
prior content indicator*/
body
>h1:first-child
+hr::before
{/*Text and outline
same as background.*/
color:#000}

/*Hyperlinks and
interactions.*/
:focus
{outline-color:#0cf}
/*

# color for stylesheet documents

Some adjustments for fitting the rules for CSS stylesheets with the website stylesheet.

A sample matches
its environment
*/
.sample
>dd
{border-color:#000}
/*
CSS comment
*/
.css
>code
>b
,.css-list
code
>b
{/*Same as
secondary background.*/
background-color:#000}
/*

# color for the print medium

Assume black ink on white materials. Depend on shapes rather than color.

*/
@media print
{

html
{background-color:#fff!important
;color:#000!important}

*
{background-color:transparent!important
;color:inherit!important}

}
/*

# font variants

Summary: Minimize visual complexity by tracking all font variants, other than size or line height.

The system font is preferred for documentation because it is probably well designed or comfortably familiar.

The very commonly available "Tahoma" and "Verdana" faces have a tilde "~" (used in file system paths) distinctive from the hyphen "-", with "Tahoma" more compact than "Verdana".

Default
*/
body
{font-family:
FreeSans
,system-ui
,-apple-system
,Tahoma
,/*Mac OS X+*/
"Avenir Next"
,"Helvetica Neue"
,/*MS Windows+*/
"Segoe UI"
,SegoeUI
,"Lucida Sans"
,/*any OS*/
Arial
,sans-serif}
/*
Section headings
*/
/*Document title.*/
body
>h1:first-child
,/*Prior content
indicator cover.*/
body
>h1:first-child
+hr::before
,/*Prior content
indicator.*/
body::before
,h1
,h2
,h3
,h4
{font-weight:normal}
/*
Informational emphasis
(context)
*/
code
,var
,/*Modifier keys.*/
kbd>sub
{font-family:
/*Tilde "~" distinct from
hyphen "-".*/
Tahoma
,Verdana
,/*Unambiguous
characters.*/
"PT Mono"
,/*Everything else
is a compromise.*/
"Lucida Console"
,Monaco
,Courier
,monospace}

var
{/*Traditional variant.*/
font-style:italic}

/*Modifier keys.*/
kbd>sub
{font-variant:small-caps}
/*
Interactive emphasis
(keyboard text)
*/
kbd
,samp
,tt
,pre
,.terminal *
{font-family:
/*Unambiguous
characters.*/
"PT Mono"
,/*Everything else
is a compromise.*/
"Lucida Console"
,Monaco
,Courier
,monospace}
/*
Fragment link.
*/
[\#]
{font-family:
"PT Mono"
,/*Everything else
is a compromise.*/
"Lucida Console"
,"Courier"
,monospace}
/*
Lead-ins
*/
/*Index*/
body
>hr
~hr:last-of-type
+p::first-line
{font-weight:600}
/*

# default properties for marks

Summary: Default property values for font size, line height, spacing, borders, placement, etc., therefore neither classes nor IDs. No color nor font variants.

Distinctive shapes enable using only one highlight color, when at all. Therefore, emphasize with symbols and punctuation, or with the traditional spacing and font variants from marks.

View
*/
html
{/*Line height
without a unit.*/
line-height:1.25
;padding-bottom:1em}

body
{max-width:40em
;padding:0 0 1em
;margin:0 .5em
;/*Position for
later content indicator.*/
position:relative
;/*Sometimes helps
minimize default.*/
height:intrinsic}
/*
Sectioning
*/
h1
,h2
,h3
,h4
{margin-top:1em
;margin-bottom:.5em}

hr
{clear:both
;padding:0
;border-style:solid
;border-width:.125em 0 0
;margin:.5em 0}
/*
Heading sizes
*/
h1
{font-size:2em
;text-align:center}

h2
{font-size:1.9em}

h3
{font-size:1.6em}

h4
{font-size:1.4em}
/*
Paragraphs
*/
p
{white-space:pre-wrap
;/*Book width,
or 2 article columns.*/
max-width:40em
;margin:0}

blockquote
{padding:.25em .5em
;border-left-style:solid
;border-left-width:.125em
;margin:.5em 0 0 1em}
/*
Lists
*/
dl
{margin-top:0
;margin-bottom:0}

dd
{margin-left:1em}

ol
{padding-left:1.5em}

ul
{padding-left:1.2em
;margin:0}
/*
Informational emphasis
(context)
*/ code ,var {/*Tahoma/Verdana are sorta tall.*/ font-size:.9em ;margin-right:.0625em ;margin-left:.0625em} /*
Interactive emphasis
(keyboard text)
*/ kbd {/*Boxed and inline, so need smaller text.*/ font-size:.8em ;display:inline-block ;padding:0 .2em .1em ;outline-style:solid ;outline-width:.1em ;margin-right:.1em ;margin-left:.1em} /*
Override traditional
faulty line spacing of
superscripts and
subscripts.
*/
sup
{font-size:.8em
;vertical-align:baseline
;position:relative
;bottom:.4em}

sub
{font-size:.8em
;vertical-align:baseline
;position:relative
;bottom:-.2em}
/*

# contextual rules for marks

Property values for marks based on their contextual relationships with one another within a document. Generally, rules with CSS selectors using combinators: space, >, +, ~, etc.

Sections
*/
/*Probably
deprecating...*/
*+h1::before
{content:""
;border-top-style:solid
;border-width:.2em
;position:absolute
;top:-.4em
;right:-1rem
;left:-1rem}
/*
Paragraphs
*/
*+p
{margin-top:1em}
/*
Lists
*/
*+dl
{margin-top:1em}

dl
>*+*
{margin-top:.5em}

dd
+dt
{margin-top:1em}

*+li
{margin-top:.25em}

ol
>*+li
{margin-top:1em}
/*
Modifier keys
(which are held down)
*/ kbd >sub {/*Already small.*/ font-size:1em ;margin-right:.2em} /*

# document title

Summary: A triple layer of regions consisting of the prior content indicator beneath its covering beneath the document title. The prior content indicator is revealed when the document is scrolled, while the document title remains affixed to the top of the view.

Notably, typing the spacebar shifts the document up (a.k.a. "page down"). Some web browsers also ensure about two lines worth of area from the bottom of the view is still visible at the top of the view afterwards. The document titles are pinned to the top as normal sized text, thereby without obscuring subsequent text.

The first marked text within the <body> region is the document title, and following that is a horizontal rule <hr>. The text in the document title region is also the value of the data‑doc‑title attribute for both the <body> and <hr> marks, for making their ::before regions the same size and shape as the document title region.

The document title region and the ::before region of the <body> are fixed to the top of the view. The remainder of the document contents is layered between the two, hiding the same sized ::before region of the <hr>.

The ::before region of the <body> extends an outline from its bottom edge for indicating the existence of prior content. The ::before region of the <hr> layered above it also extends an outline which then covers that prior content indicator. The bounds of the <hr> region carry away that covering beneath the document title when the document is scrolled, revealing the prior content indicator.

# rules for document title

*/
@media screen
{
/*
Document title
and divider lines
*/
body
>h1:first-child
,body
>h1:first-child
+hr::before
,body::before
{font-size:1em
;line-height:1
;text-align:left
;max-width:41em
;padding:.25em 0
;margin:0}

/*Same position for
document title and
prior content indicator.*/
body
>h1:first-child
,body::before
{position:fixed
;top:0
;right:0
;left:0}

/*Document title
above everything.*/
body
>h1:first-child
{border-right-style:solid
;border-right-width:.1em
;z-index:2}
/*
Prior content indicator
*/
body::before
{content:attr(data-doc-title)
;outline-offset:-.9em
;outline-style:dashed
;outline-width:1em
;/*Above CSS rules.*/
z-index:1}
/*
Indicator cover
*/
body
>h1:first-child
+hr::before
{content:attr(data-doc-title)
;display:block
;outline-offset:-.85em
;outline-style:solid
;outline-width:1em
;/*Sticky maintains
hiding of indicator.*/
position:-webkit-sticky
;position:sticky
;top:0}
/*
Spacing after the
document title
*/
/*The title divider.*/
body
>h1:first-child+hr
{border-style:none
;margin:0 -.5em
;position:relative
;/*Above CSS rules.*/
z-index:1}

/*Spacing delays the
cover's removal.*/
body
>h1:first-child
+hr::after
{content:""
;display:block
;height:2.1em}

/*First mark after
the title divider.*/
body
>h1:first-child
+hr
+*
{margin-top:0}
/*
*/
}
/*

# later content indicator

The final horizontal rule <hr> prior to the document's index is repurposed as the later content indicator and affixed to the bottom of the view.

Positioning the ::after region of the <hr> as non-static is enough to overlap the fixed position ::before region without the need for z-index.

*/
@media screen
{
/*
Index divider
*/
body
>hr
~hr:last-of-type
{border-style:none
;margin:0 -.5em
;position:absolute
;right:0
;bottom:-3.75em
;left:0}
/*
Cover for
later content indicator
*/
body
>hr
~hr:last-of-type::after
{content:""
;max-width:41em
;height:.2em
;display:block
;position:relative}
/*
Later content indicator
*/
body
>hr
~hr:last-of-type::before
{content:""
;max-width:41em
;border-top-style:dashed
;border-width:1em
;position:fixed
;right:0
;bottom:-.85em
;left:0}
/*
*/
}
/*

# index

Summary: Consolidate links to related documents at the bottom of a document, and for the main index of the website.

Browsing a set of documents without a webserver is possible when hyperlink paths amongst them are relative. That means prepending the link paths with "../" for each subdirectory of the document for links to other documents. Preferably, never create subdirectories.

# to the beginning

A document ends with a horizontal rule <hr> (used for the later content indicator) followed by a hyperlink leading to the main index of the site.

<hr>
<a href="index.html" rel="start">begin</a>
*/
body
>a:last-child
{padding:.8em 1.6em 1em 1em
;border-radius:100%
/ 1em 3em 3em 0
;border-style:solid solid none none
;border-width:.2em
;margin-top:1.5em
;margin-left:-.5em
;position:absolute}
/*

# related documents

After the final horizontal rule <hr> (used for the later content indicator) and before the final site link can be a <dl> with back-reference links for the document, returning to other documents on the website that link to it. Its <dt> has "More in:", and each <dd> has a link with a relative path.

<hr>
<dl>
<dt>More in:
<dd><a href="some-doc.html">somewhere</a>
</dl>
<a href="index.html" rel="start">begin</a>

Recall the first <hr> is after the document title.

Divider
*/
body
>hr
~hr:last-of-type
+dl::before
{content:""
;display:block
;border-radius:0 100% 0 0
;border-top-style:solid
;border-width:.2em
;margin-top:2em
;margin-bottom:1em}
/*

# hyperlinks

Summary: Bottom border for hyperlinks rather than underlining, with a dashed line for the document's own fragment links. Named locations are discovered and emphasized by their own fragment links. Attribute: #.

An HTML mark with an id attribute is a named location within an HTML document, and is most useful when it is shown with a fragment link. A URL with an octothorp "#" followed by a named location is a "fragment link", the "#" demarcating its fragment.

# a location and its fragment link

Summary: Ensure a gap from the top of the view for a targeted named location. Emphasize a targeted named location with its nearby fragment link. Attribute: #.

Sample:

A paragraph after a named location. A fragment link to that location.

# A paragraph with a named location and its own fragment link.

Markup:
<a id="example_hyperlinks_basics-1"></a>
<p>A paragraph after a named location. A <a href="#example_hyperlinks_basics-1">fragment link to that location</a>.
<p><a id="example_hyperlinks_basics-2"></a><a href="#example_hyperlinks_basics-2" #>#</a> A paragraph with a named location and its own fragment link.

Though a named anchor <a id="..."> could be its own fragment link, they represent two different tasks.

For these rules, named locations are empty and a fragment link marks the symbol "#" as a mnemonic of its fragment. One or more named locations can be listed (f.e. retaining obsoleted names), then an optional fragment link classed as #.

# rules for a location and its fragment link

An HTML viewer (f.e. web browser) shifts a document so a targeted anchor is at the top of the view, giving the impression there is nothing afore. The document titles on this website are pinned to the top, too, thereby overlapping targeted locations. Ensuring a gap at the top of the view for a targeted anchor resolves both circumstances.

Unfortunately, simply positioning the anchor itself with its position property as "relative" does not change the location targeted in the document, even though the anchor itself will be moved. This is seemingly because an anchor is by default displayed inline rather than as a block.

So, set a named anchor's display to either "block" or "inline-block" (and likely vertical-align to "top"), and its position to "relative". Or set only the position to "absolute" and ensure it's within a positioned region. The former is preferred for its independence.

Any named location
*/
a[id]:empty
{display:inline-block
;vertical-align:top
;position:relative
;top:-1.8em
;top:-3rem}
/*
Hyperlinks
*/
a
{text-decoration:none
;border-width:0 0 .125em}

:link
,:visited
{border-style:solid}

/*A fragment link to
its own document*/
[href^="#"]
{border-style:dashed}
/*
A fragment link
at its own location
*/
[\#]
{padding-right:.2em
;padding-left:.15em
;border-radius:0 .5em 1em 1em
/ 100%
;border-style:none dashed dashed none
;border-width:.15em
;margin-right:.2em
;margin-left:-.5rem}

:target~[\#]
{border-radius:0 1em 1em 1em
/ 100%
;border-style:none solid solid none}

/*A paragraph after
a fragment link.*/
[\#]
+p
{margin-top:0}
/*
Interactions
*/
[tabindex]
{border-style:dotted}

/*Tab-selection with
TAB key.  (Because
default is sometimes
indiscernible.)*/
:focus
{outline-offset:.0625rem
;outline-style:double
;outline-width:3px}
/*

# fragment links of headings

Summary: Headings are ideal for named locations and their fragment links. Attribute: #.

Sample:

# example of a heading with its fragment link

A section of information.

Markup:
<h3><a id="example_named-locations_headings"></a><a href="#example_named-locations_headings" #>#</a>
example of a heading with its fragment link</h3>
<p>A section of information.

Probably best to keep the fragment link immediately after the named location, with no spaces. Seems easiest to manage the section name on a separate line, and the resulting space after the fragment link is fine.

# rules for fragment links of headings

Locations are typically at beginning of a heading, and sometimes on a separate line. The extra space is noticeable before the heading text when without a fragment link.

A location for a heading
*/
/*No extra space when
no fragment link.*/
h2 a[id]:empty
,h3 a[id]:empty
,h4 a[id]:empty
{display:block}
/*
A fragment link for a heading
*/
h2>[\#]
,h3>[\#]
,h4>[\#]
{padding-right:.125em
;padding-left:.25em
;border-radius:100%
/ 0 1.2em 1.2em .3em
;border-style:none dashed dashed none
;border-width:.15rem
;margin-left:-.5rem}
/*
Emphasize targeted heading
*/
h2>:target~[\#]
,h3>:target~[\#]
,h4>:target~[\#]
{border-radius:100%
/ .4em 1.2em 1.2em 0
;border-style:solid none
;border-width:.2rem}
/*

# notes and their lists

Summary: A parenthetical remark conveniently remains in the flow of reading, optionally hidden then revealed when the prior phrase is focused or pointer-hovered. Alternatively, move aside or copy to a note list for the document or for a section.

Notes emerge naturally as supplementary details and addenda. While short phrases might be comma delimited "," or within parentheses "( )", longer statements and sentences might be within square brackets "[ ]".

Mark the info and its preceding relevant phrase for optionally reading the info within the flow of the content. Or, move the comments to a notes list at the end of a document or for each section. Rules for both possibilities are compatible with each other.

# a note, detail, or remark

Summary: A note hidden in place is revealed by interacting with the preceding relevant phrase.

Sample:

A sentence with a note about something [A note relevant to the phrase "about something", perhaps clarifying with more context.] and maybe some more.

A sentence with a hidden note about something[A note relevant to the phrase "with a hidden note about something", perhaps a bibliographical reference to a document.] and maybe some more.

Markup:
<p>A sentence with a note about something [A note relevant to the phrase "about something", perhaps clarifying with more context.] and maybe some more.
<p>A sentence <a tabindex="0">with a hidden note about something</a><ins>[A note relevant to the phrase "with a hidden note about something", perhaps a bibliographical reference to a document.]</ins> and maybe some more.

A note marked with <ins> is hidden when its prior relevant phrase is marked with <a> and has a tabindex attribute[always set to "0"]. Either tab-selecting[with the TAB key] or pointer-selecting[or merely pointer-hovering] the marked relevant phrase reveals the note.

# rules for a note, detail, or remark

Hide a note
*/
a[tabindex]
+ins
{text-decoration:none
;display:none
;margin-left:.25em}
/*
Reveal a note
when focused
or pointer-hovering
*/
a[tabindex]:focus
+ins
,a[tabindex]:hover
+ins
{/*Just in case note
is in a header.*/
font-size:1rem
;/*For any sentences.*/
white-space:pre-wrap
;display:inline}
/*

Sometimes the title of a document is given a note, typically at the very end of the title name. That is an unnecessary and awkward use of a footnote or endnote. Such a note typically describes the source of the document or explains the title itself. Instead of hiding introductory information, simply precede the document with the text from that note, and leave it out of the note listing.

In other words, introduce the titled document. Consider following the introduction with a horizontal rule <hr>.

This style needs to be obsoleted
and removed.
Please consider introducing the document
at its beginning rather than deferring
its description elsewhere.
*/
/*A note reference in a heading
is assumed at the end of the line.
Regardless, a note reference in the title
is very awkward.*/
h2
>a[tabindex]:focus
+ins
,h2
>a[tabindex]:hover
+ins
{display:inline-block}
/*

# a note list

Summary: Copy or displace a note to a note list. Unlike other named locations, there is no emphasis of a targeted note nor of a targeted note reference, because they are parenthetical. IDs: note_ + section name (if any) + note number; note-ref_ + section name (if any) + note number.

Sample:

A sentence with a note about something[1] and maybe some more.

A sentence with a hidden note about something[A note relevant to the phrase "with a hidden note about something". Copied to the note list.][2] and maybe some more.

# Notes

  1. A note relevant to the phrase "about something". Moved to the note list.

    ^return
  2. A note relevant to the phrase "with a hidden note about something". Copied to the note list.

    ^return
Markup:
<p>A sentence with a note <a id="note-ref_1"></a>about something<a href="#note_1">[1]</a> and maybe some more.
<p>A sentence <a id="note-ref_2"></a><a tabindex="0">with a hidden note about something</a><ins>[A note relevant to the phrase "with a hidden note about something". Copied to the note list.]</ins><a href="#note_2">[2]</a> and maybe some more.
<h2>
<a id="notes"></a><a href="#notes" #>#</a>
Notes
</h2>
<ol>
<li>
<a id="note_1"></a>
<p>A note relevant to the phrase "about something". Moved to the note list.</p>
<a href="#note-ref_1">^return</a>
<li>
<a id="note_2"></a>
<p>A note relevant to the phrase "with a hidden note about something". Copied to the note list.</p>
<a href="#note-ref_2">^return</a>
</ol>

Precede a note listing with a heading, perhaps named "Notes" with a named location id as "notes". Section notes are at the end of its section with a heading probably named 'Notes for "Name of Section"', with the section name (and quotes) linked to the section heading. Mark the list as <ol> for automatic numbering.

The named location before the relevant phrase referring to the note is "note-ref_" prepended to the section name, if any, and then the note number. The named location before the first paragraph of the note in the note listing is "note_" prepended to the section name, if any, and then the note number.

The link leading to the note list item is the note number in square brackets, f.e. "[1]". For clarity, a link from the list item leading to the note reference is "^" prepended to "return", and after the final paragraph of the note list item.

Optionally add the hidden attribute to a marked note that is also in a note list for compact viewing when without CSS.

<p>A sentence <a id="note-ref_3"></a><a tabindex="0">with a hidden note about something</a><ins hidden>[A note relevant to the phrase "with a hidden note about something". Copied to the note list.]</ins><a href="#note_3">[3]</a> and maybe some more.

# rules for a note list

See also the color and font variants.

First paragraph
in a note list item
*/
[id^="note_"]
+p
{margin-top:-1.2em}
/*

# a phrase

Summary: Delay breaking apart a group of words. Ideally, there would be a briefly named mark, such as <f> (for "phrase"), with the expectation of being common and nesting. Attribute: f.

Ideally, there would be a mark for delaying the breaking of a region of text, by breaking before and after the region first. Eventually, the region will be at the beginning of a line when the width of the region its within is too narrow for its own full width. Only then is that phrase region broken apart normally.

In other words, the region stays whole until it occupies a whole line by itself, then it will wrap when the line is too narrow for it. Of course, there can be other similar regions marked within it, and their wrapping would be similarly delayed, t.i. wrapped after the regions they are within have become too narrow for them.

In the mean time, mark such a phrase with <span> and add the f attribute (no value needed). As usual, use a nonbreaking space to prevent any breaking at all.

# rules for a phrase

A phrase
(Someday a new mark: <f>)
*/
/*Delay breaking
a phrase apart.*/
span[f]
{/*"inline-block"
fails to inherit
underlining.*/
display:inline-block}
/*

# list of command line examples

Summary: List of described command line examples, with their results when any. Class: command-list

Sample:

Description of task needing the command or commands.

> command --flag filename
> command -flags filename
Markup:
<dl class="command-list">
<dt>
<p>Description of task needing the command or commands.
<dd>> <code>command</code> <var>--flag</var> filename
<dd>> <code>command</code> <var>-flags</var> filename
</dl>

A list of tasks using commands are in a <dl> classed as command-list. Each topic is in a <dt> followed by a <dd> for each command or their results.

The commands are likely marked with <code>, and their options marked with <var>. The results are probably marked with <samp> or <pre>. Alternatively, use a terminal format for the commands and their results.

# rules for list of command line examples

*/
.command-list
>dd
+dt
{margin-top:1em}

.command-list
>dd
{padding-left:.5em
;border-left-style:solid
;border-width:.2em
;margin-top:.1875em
;margin-left:1em}

.command-list
>dt
+dd
{margin-top:.5em}

.command-list
pre
{margin:0}
/*

# terminal format of commands

Summary: Clearly distinguish commands from their results. Class: terminal.

Sample:
> command --flag filename
> command -flags filename
something
> command filename
something  listed  in      columns
another    line    listed  too
Markup:
<dl class="terminal">
<dt>> <code>command</code> <var>--flag</var> filename
<dt>> <code>command</code> <var>-flags</var> filename
<dd><samp>something</samp>
<dt>> <code>command</code> filename
<dd><pre>
something  listed  in      columns
another    line    listed  too
</pre>
</dl>

A <dl> classed as terminal has each command in a <dt> and a sample result in its <dd>, when any.

The commands are likely marked with <code>, and their options marked with <var>. The results are probably marked with <samp> or <pre>.

# rules for terminal format of commands

*/
.terminal
{padding:.3em .5em .5em
;border-style:solid
;border-width:.1em}

.terminal
>*
{margin-top:.2em
;margin-left:0}

.terminal
pre
{margin:0}
/*

# stylesheet documents

Some adjustments for fitting the rules for CSS stylesheets with the website stylesheet.

A sample matches
its environment
*/
.sample
>dd
{padding:.5em 0
;border-right-style:solid
;border-right-width:.5em
;border-left-style:solid
;border-left-width:.5em}
/*
*/
/*Hyperlinks
use bottom border.*/
.css
>code
>b
,.css-list
code
>b
{padding-bottom:.125em}
/*

# document views

Always start with the most minmal width, t.i. zero, for the content, then consider how everything flows outward from there on. Article column width is ≈20em (6–8 words/line), and book width is ≈40em (12–18 words/line).

Position named locations beyond twice the height of a fixed document title because the document title might wrap in very narrow views.

Web browsers typical use 16px as default font size, so 1em is likely 16px. Changing the font size of <html> or <body> from the web browser default adversely affects the @media queries for responsive layouts.

Only Safari treats "rem" properly by using the font size set for the <html> mark, thereby responding properly during view resizing. (Oddly, that is considered incorrect by its developers and other web browser developers, so it's likely to change.) Other web browsers treat "em" and "rem" the same for @media queries thereby preventing even a personal stylesheet from overriding the font size in the inaccessible user agent stylesheets of web browsers.

Therefore, leave the font at the default size (t.i. 1em) for the general text (f.e. <body>), and trust the person viewing the document to use the "View" menu, zooming, or font sizing buttons of the HTML viewer when desired. (Some HTML viewers even save that setting per website.) That is compatible with @media queries.

[...redesign made additional @media rules for screen unnecessary...]

# the print medium

Summary: Minimize space to save paper. Depend on shapes rather than expecting a variety of color.

*/
@media print
{

body
{font-size:14px
;max-width:none
;padding:0 1em
;margin-right:auto
;margin-left:auto}


/*Document title.*/
body
>h1:first-child
{font-size:1em
;text-align:left
;padding:0
;margin:0}


/*Site link.*/
body
>a:last-child[rel*=start]::after
{content:
" at https:"
"/"
"/l8l.info"
"/"}

}
/*

More in:
stylesheet stylesheet
begin