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 font variants.
Summary: Shapes emerge from the difference of color, with darkness unseen and light attracting attention. Contrasting more than two colors is nigh impossible, and an excess of differences muddies importance.
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}
/*
*/
html
{color:#cba}
/**/
a
,:link
,:visited
{/*Traditional.*/
color:#0cf}
/**/
code
,var
,kbd
,/*Fragment link emphasis.*/
:target~[\#]
{color:#0c0}
/*Color for borders and outlines.
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}
/*
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}
/*
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}
}
/*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" font families 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 buttons.*/
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 buttons.*/
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}
/*
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.
Usually, interstitial spacing is needed only between regions. Therefore, a region usually has a top margin when after another region. Usually no bottom margin, because padding at the bottom of the document suffices.
View
*/
html
{padding-bottom:1em}
body
{/*Line height
without a unit.*/
line-height:1.5
;max-width:40em
;padding:0 0 1em
;margin:0 .5em
;/*Position for
later content indicator.*/
position:relative
;/*Sometimes helps
minimize height
with short docs.*/
height:intrinsic}
/*
Sectioning
*/
h1
,h2
,h3
,h4
{margin-top:1.75em
;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}
/*h5 = 1.2em,
h6 = 1em*/
/*
Paragraphs
*/
/*Book width,
or 2 article columns.
Maintain two spaces
between sentences.*/
p
{white-space:pre-wrap
;max-width:40em
;margin:0}
pre
{line-height:1.25}
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.5em
;margin:0}
/*
Informational emphasis
(context)
*/
code
,samp
,var
{/*Tahoma/Verdana
are sorta tall.*/
;font-size:.9em
/*...but
it does stand out.*/
;font-size:1em
;margin-right:.125em
;margin-left:.125em}
/*
Interactive emphasis
(buttonboard buttons)
*/
/*Boxed and inline,
so need smaller text.*/
kbd
{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}
/*
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:1.5em}
p+p
{margin-top:1em}
/*
Preformatted
*/
/*Restore font size
and margins.
They were adjusted
for fitting as
informational emphasis
within paragraphs.*/
pre>code
,pre>var
{font-size:1em
;margin-right:0
;margin-left:0}
/*
Lists
*/
*+dl
{margin-top:1.5em}
/*All four
possibilities:
dt+dt, dt+dd,
dd+dd, dd+dt*/
dl
>*+*
{margin-top:.75em}
dd
+dt
{margin-top:1.5em}
*+ul
,*+li
{margin-top:.5em}
ol
>*+li
{margin-top:1em}
/*
Modifier buttons
(which are held down)
*/
kbd
>sub
{/*Already small.*/
font-size:1em
;margin-right:.2em}
/*
A line break increases the visual delimitation between regions, a sum of the line height and the top margin of the next mark (default properties for marks). Though, ineffective after inline-block regions.
Just a little more spacing
with line-breaks
*/
/*...might revoke...*/
body
>br
+*
{margin-top:.5em}
/*
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.
*/
@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}
/*
Document title and
prior content indicator
*/
/*Same position
for both.*/
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
;/*Above CSS rules.*/
position:relative
;z-index:1}
/*
Spacing delays the
removal of the cover
*/
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}
/*
*/
}
/*The final horizontal rule <hr> prior to the index for the document 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
;left:0
;right:0
;bottom:-3.75em}
/*
Cover for
later content indicator
*/
body
>hr
~hr:last-of-type::after
{content:""
;max-width:41em
;height:1em
;display:block
;position:absolute
;left:0
;right:0
;bottom:-.85em}
/*
Later content indicator
*/
body
>hr
~hr:last-of-type::before
{content:""
;max-width:41em
;border-top-style:dashed
;border-width:1em
;position:fixed
;left:0
;right:0
;bottom:-.85em}
/*
*/
}
/*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.
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="begin.html" rel="start">begin</a>
*/
body
>a:last-child
{line-height:1em
;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}
/*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.txt">title of a related document</a>
</dl>
<a href="begin.html" rel="start">begin</a>
Provide a substitute from the index for the final <hr> which has been conscripted for the later content indicator. There is reliably one <hr> after the document title, and one before the index. There is usually a related document, otherwise no need for a divider before the index.
Index 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}
/*
Summary: Bottom border for hyperlinks rather than underlining, with a dashed line for fragment links to the document itself. 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.
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: #.
A paragraph after a named location. A fragment link to that location.
# A paragraph with a named location and its own fragment link.
<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>
<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. As such, a named location is empty for these rules, then fragment links to them can be anywhere helpful.
Common locations are section titles, list items, or a series of paragraphs (instead of as a marked list). One or more named locations can be listed prior to the fragment link for that location in the document, f.e. retaining obsoleted names for that location.
A named location followed by its nearby self-referencing fragment link are near the beginning of a line, thereby consistently appearing along the left edge of the document. That fragment link is given an octothorpe # as an attribute, and marks an octothorpe symbol "#" as its only text, as a mnemonic of its fragment.
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 the display property of a named anchor 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 is within a positioned region, then displace it with top. 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}
/*Selection with TAB button.
(Because default is sometimes
indiscernible.)*/
:focus
{outline-offset:.0625rem
;outline-style:double
;outline-width:3px}
/*
Summary: Headings are ideal for named locations and their fragment links. Attribute: #.
A section of information.
<h3>
- <a id="example_named-locations_headings"></a>
- <a href="#example_named-locations_headings" #>
#</a>
</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.
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}
/*
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. Short phrases might be comma-delimited ",", or within parentheses "( )", or demarcated by em dashes "—". Longer statements and sentences might be within square brackets "[ ]".
Optionally, mark the info for contracting it within the flow of the content, and mark its preceding relevant phrase for temporarily revealing the contracted info. Or, move the comments to a notes list at the end of a document, or for each section. CSS rules for both possibilities are compatible with each other.
Summary: A note hidden in place is revealed by interacting with the preceding relevant phrase.
A sentence with a note about something [A note relevant to the phrase "about something", perhaps a bibliographical reference to a document.] 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 clarifying with more context.] and maybe some more.
<p>A sentence with a note about something [A note relevant to the phrase "about something", perhaps a bibliographical reference to a document.] 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 clarifying with more context.]</ins> and maybe some more.
A note marked with <ins> [Include the preceding space character within the mark, too.] is hidden when its prior relevant phrase is marked with <a> and has the tabindex attribute [always set to zero "0"]. Either tab-selecting [with the TAB button] or pointer-selecting [or merely pointer-hovering] the marked relevant phrase reveals the note.
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.
A note
*/
a[tabindex]
+ins
{/*Hide a note*/
display:none
;/*Just in case note
is in a header.*/
font-size:1rem
;/*For any sentences.*/
white-space:pre-wrap
;text-decoration:none
;margin-left:.25em
;outline-style:dotted
;outline-width:.125em}
/*
Reveal a note
when focused
or pointer-hovering
*/
a[tabindex]:focus
+ins
,a[tabindex]:hover
+ins
{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}
/*
Summary: Linking to a note in a note list is basic hypertext marking. Mark a named location with <a id="..."> and mark a link to it with <a href="#...">. Mark a list as <ol> for automatic numbering.
Formally for these CSS rules, all that really matters is the prefix of the named location: "note-ref_" for references and "note_" for notes. Anything beyond the prefix is for making the id unique, and is ignored by the CSS.
IDs: note_ + section name (if any) + note number; note-ref_ + section name (if any) + note number.
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.
A note relevant to the phrase "about something". Moved to the note list.
^referenceA note relevant to the phrase "with a hidden note about something". Copied to the note list.
^reference<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>
</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">^reference</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">^reference</a>
</ol>
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.
Add a section name for making the named locations unique amongst multiple note listings in the same document. Perhaps "bib" for a bibliography listing [typicallay a sequence of paragraphs rather than a list]. Consider hyphenated numbers for multiple references of the same note.
<p><a id="note_bib_1"></a><br><a href="#note-ref_bib_1-1">^reference-1</a>, <a href="#note-ref_bib_1-2">^reference-2</a>
<p><a id="note_bib_2"></a>The named location for the note in the note listing is at its very beginning, before any of its text. Links to references are after the final paragraph of the note. For clarity, consider using a caret "^" prepended to "reference" for a link from the list item leading to its reference, and a hyphenated number when multiple: "^reference"; or "^reference-1".
Consider using the note number in square brackets, f.e. "[1]", for the link leading to the note list item. The named location for that reference is before its link to the note, perhaps inserted before the relevant text that evoked the reference.
Ideally, a note listing is preceded with a heading and a link to the listing is provided at the beginning of the document. Perhaps named as "Notes" with its named location id as "notes".
Section notes are at the end of its section, with a heading probably named 'Notes for "Name of Section"'. The section name (and quotes) can be conveniently linked to the section heading.
See also the color and font variants.
First paragraph
in a note list item
*/
[id^="note_"]
+*
{margin-top:-1.25em}
/*
Separate multiple references
listed at end of a note
*/
[href^="#note-ref_"]
+[href^="#note-ref_"]
{margin-left:.5em}
/*
Summary: List of described command line examples, with their results when any. Class: command-list
Description of task needing the command or commands.
command --flag filename
command -flags filename
<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.
*/
.command-list
>dd
+dt
{margin-top:1em}
.command-list
>dd
{padding-left:.5em
;border-left-style:solid
;border-width:.2em
;margin-top:.3125em
;margin-left:1em}
.command-list
>dt
+dd
{margin-top:.5em}
.command-list
pre
{margin:0}
/*Summary: Clearly distinguish commands from their results. Class: terminal.
command --flag filename
command -flags filename
command filename
something listed in columns another line listed too
<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>.
*/
.terminal
{padding:.3em .5em .5em
;border-style:solid
;border-width:.1em}
.terminal
>*
{margin-top:.2em
;margin-left:0}
.terminal
pre
{margin:0}
/*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 instead to prevent any breaking at all.
A phrase (Someday a new mark:<f>)*/ /*Delay breaking a phrase apart.*/ span[f] {/*"inline-block" fails to inherit underlining.*/ display:inline-block} /*
Some adjustments for fitting the rules for CSS stylesheets with the website stylesheet.
A sample matches
its environment
*/
.sample
>dd
{padding:.5em 0
;border-left-style:solid
;border-left-width:.5em
;border-right-style:solid
;border-right-width:.5em}
/*
For a set of rules
or a list of sets
*/
.css
,.css-list
{margin-top:1.5em}
/*
For a set of rules:
Optional heading
*/
.css
>b
{line-height:1.5}
/*
Optional inline comments
*/
.css
>code
>b
,.css-list
code
>b
{/*More room for outline.*/
line-height:1.5
;/*Bottom padding because
Hyperlinks use
bottom border.*/
padding-bottom:.125em}
/*
Always start with the most minimal 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 is 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...]
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 http:"
"/"
"/l8l.info"
"/"}
}
/*