SWWS Theme

This is an Org document. It serves both as a reference of the standard HTML elements and custom user interface components styled by the SWWS theme, and as a sample HTML page that uses the look and feel provided by the theme. To see the sample page, open this document in Emacs and use the keyboard shortcut C-c C-e h h. This will export the document as an HTML file which you can then open in your web browser.

This theme comes with two color schemes: light and dark. Your web browser will activate one or the other automatically based on your system or browser's visual theme preferences (see Light and dark modes).

Documents using this theme will adapt to different screen sizes and should work well enough for printing as well.

Source document: style-reference.org

The Cascading Style Sheets (CSS) provided by this theme are all valid CSS according to the W3C CSS Validation Service (last checked on July 31, 2023), with the following exceptions:

./css/fonts.css

This style sheet uses the text-rendering property, which, according to mdn web docs, "is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux." For this reason, the W3C CSS Validation Service will report a validation error against it with a message like:

The property text-rendering doesn't exist : optimizeLegibility

HTML using this theme is intended to be usable to as many people as possible regardless of the web browser they use or whether they use assistive technologies or not.

The theme should work well, or well enough, in

• Text-based browsers
• CSS-conformant browsers with no JavaScript support
• CSS-conformant browsers with JavaScript support

Currently, the theme hasn't been audited to check its conformance to accessibility guidelines like WCAG (Web Content Accessibility Guidelines) nor it has been tested using assistive technologies like screen readers.

NOTE: The light color scheme is currently disabled in custom-properties.css until there is also a JavaScript switch to allow manual activation.

The SWWS theme supports two color schemes: light and dark. Color scheme selection happens automatically. The dark color scheme is used by default. If the user's desktop or web browser is set to use a light theme, the light color scheme will be used instead.

The automatic selection of light or dark color schemes was tested successfully in the following web browsers and systems:

• Epiphany 42.4 (aka GNOME Web) on Guix System with GNOME
• GNU IceCat 102.8.0esr on Guix System with GNOME
• Google Chrome 108.0.5359.79 on Android 12
• Mozilla Firefox 105.0.1 (Flatpak) on Guix System with GNOME

Automatic color scheme selection is known to fail in the following web browsers:

• Ungoogled Chromium 109.0.5414.119 on Guix System with GNOME

NOTE: Automatic selection of light or dark color scheme might not work as expected in browsers with fingerprinting protection activated.

italics, emphasis (i, em)

This is normal text, but this is italicized text and this is emphasized text.

link (a)

• Normal link: https://softwareworkers.it/
• mailto link: person@domain.ext
• Download link: download

mark

This is normal text, and the following is highlighted text, which is achieved by using the standard mark element directly.

strong, bold

This is normal text, and this is strong or bold text.

The following text is quoted.

Org is a highly flexible structured plain text file format, composed of a few simple, yet versatile, structures — constructed to be both simple enough for the novice and powerful enough for the expert.

— https://orgmode.org/

This text is back to normal.

Code blocks always use a dark background. The CSS for syntax highlighting is not provided by the SWWS theme, it is expected to be generated automatically, inline by the emacs-htmlize package when the document is exported. The colors of the code correspond to those of the active Emacs theme. For this reason, the Emacs theme used when exporting the document should provide enough contrast to look well on dark brackgrounds.

1: ;; Lambda expression example from Elisp Manual.
2: (lambda (x)
3:   "Return the hyperbolic cosine of X."
4:   (* 0.5 (+ (exp x) (exp (- x)))))

There are two kinds of covers: cover_main and cover_product. They look very much alike. The only difference is in their aspect ratio (2:1 and 4:1, respectively) when displayed in wide-enough screens.

The following is an example of cover_main:

And the following is a cover_product:

You can change both cover images by setting new values for main-cover and product-cover in custom-properties.css.

This document already has examples of level 1 and level 2 headings. The following is an example of levels 3 and 4.

International Bank Account Numbers (IBANs) are made human-readable by visually separating them in groups of four. The following is an example IBAN from Wikipedia:

IE12BOFI90000112345678

However, when copied and pasted, spaces are omitted, as follows:

IE12BOFI90000112345678

The following is a responsive image (has the class responsive-image). Its size is adjusted automatically depending on the size of the screen.

The image itself is an untitled illustration from "Cinderella" from the book Les Contes de Perrault, an edition of Charles Perrault's fairy tales (public domain illustration by Gustave Doré).

The follwoing in a vector image in SVG format. It is made responsive in the same way as the previous image.

The following is an image with caption added using Org format. The image is made responsive, centered, and framed using the classes: responsive-image, centered-block, and framed.

Org's captioning also allows using rich text and links, the following figure is an example:

Ordered list:

1. Place the product in a pod.
2. Cover with cold water.
3. Put the pod over high heat.
4. Bring water to a boil.
5. Turn off the heat.

Unordered list:

• Coriander
• Spinach
• Tomatoes
• Onions

Definition list:

casa

house

árbol

tree

perro

dog

The following paragraph has little numbers that take to the footnotes:¹

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.²

The following grid is a block using the people class and its items are also blocks but using the person class.

Carri Lampl

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

carri.lampl@site.ext

Darline Levoy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

darline.levoy@site.ext

Freddy Siewert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

freddy.siewert@site.ext

Gabriela Brecheen

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

gabriela.brecheen@site.ext

Sandy Toledo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

sandy.toledo@site.ext

Wilmer Turpen

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

wilmer.turpen@site.ext

Wile E. Coyote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

wile.coyote@acme.ext Personal website

The following is preformatted text added with Org's example block.

$ guix describe
Generation 69	Mar 01 2023 11:56:52	(current)
  guix ab6e434
    repository URL: https://git.savannah.gnu.org/git/guix.git
    branch: master
    commit: ab6e434eaab270fdbb3403935ef177cfec542ea5

See Code blocks for another kind of preformatted text.

The slogan and highlightN classes style prominent blocks of text. As a slogan, the following text stands out:

A highlight0 is a little bit less prominent than a slogan:

Finally, a highlight1 is even less prominent, but still stands out from normal text:

And this text is back to normal.

The following is a table with heading cells.

The following is a table without heading cells.

To make a table use all the horizontal space available, apply the full-width class to it:

NOTE: Tables with many columns tend to overflow horizontally in narrow screens because Org mode's HTML exporter does not wrap the tables in a container offering automatic scrolling.

To avoid horizontal overflow, wrap the table definition in an div container that uses the autoscroll class (check the previous table source for an example).

Another option is to use a vertical layout if it makes sense for the data you want to present.

Take a look at the heading of this section. It has a tag named neat. That's an Org tag.

Org's inactive timestamps (see Org's dates and times), look as follows.

• Date: [2023-04-01 sáb].
• Date and local time: [2023-04-01 sáb 12:33].
• Date and time range: [2023-04-01 sáb 14:00]–[2023-04-01 sáb 16:00].

The following is a bogus project plan that shows the styling of Org's TODO items.

Videos are similar to images and figures. The following video, for example, is responsive, centered, framed, and it is placed in a figure with caption.

The following is an example of an Org verse block showing the lyrics to a song titled My rough and rowdy ways, by Jimmie Rodgers (1929):

For years and years I've rambled
Drank my wines and gambled
But one day I thought I'd settle down

I met a perfect lady
She said she'd be my baby
We built a cottage in the old hometown

But somehow I can't forget my good old rambling days
The railroad trains are calling me always

I may be rough I may be wild I may be tough and ???
But I can't give up my good old rough and rowdy ways

Sometimes I meet a bounder
Who knew me when I was a rounder
He grabs my hand and says boy have a drink
We'd go down to the poolroom
Get in the gang and then soon
The daylight comes before I'd had a wink

At the time of writing the SWWS theme, the following were the classes specified in Org's manual (sorted alphabetically):

 1: .WAITING
 2: ._HOME
 3: .code-highlighted
 4: .done
 5: .figure-number
 6: .footnum
 7: .footref
 8: .linenr
 9: .listing-number
10: .org-svg
11: .section-number-N
12: .subtitle
13: .table-number
14: .tag
15: .target
16: .timestamp
17: .timestamp-kwd
18: .timestamp-wrapper
19: .title
20: .todo
21: div.figure
22: div.footnotes
23: div.outline-N
24: div.outline-text-N
25: p.author
26: p.creator
27: p.date
28: p.footnote
29: p.verse
30: pre.example
31: pre.src

From all these classes, only the following were explicitly styled in the org.css file:

The following are the classes whose styling was deemed unnecessary. They simply inherit their style from the elements they qualify:

The following are classes for which it was not possible to determine from Org's documentation when they are exported to HTML:

1: .code-highlighted
2: .section-number-N
3: .target
4: .timestamp-kwd
5: div.figure
6: p.footnote

Finally, the following are examples of generated class names based on custom content, they are not actual Org classes:

1: .WAITING
2: ._HOME