Text formatting example

The site can run in Light-Mode or Dark-Mode. Dark-Mode has been renamed HW Mode. Selecting either at the Index page will cause a change of the main colours and fonts.

Below is how the formatting of documents will look, for respectively selected Mode.

Styling is based upon the following CSS code, latest version 12.11.2024.

CSS

<style>
  @import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

  /* =============== Shared Global Base Settings =============== */

  html, html.dark-mode {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
  }

 
  /* =============== Light Mode Styles =============== */
  html {
      color: #333333;
      background-color: #FFFFFF;
  }
  
  /* ========== Headings (H1 - H4) Only ========== */
  h1, h2, h3, h4, h5 {
      font-family: 'Michroma', sans-serif;
      color: #003466;
      text-shadow: none;
      transition: color 0.3s ease;
  }
  h1 { font-size: 1.6em; margin: 0.5em 0 0.5em; } /* Adjusted size */
  h2 { font-size: 1.5em; margin: 0.5em 0 0.5em; }
  h3 { font-size: 1.4em; margin: 0.5em 0 0.5em; }
  h4 { font-size: 1.3em; margin: 0.5em 0 0.5em; }
  h5 { font-size: 1.2em; margin: 0.5em 0 0.5em; }/* Smallest heading now at 1em */

  /* ========== Paragraphs and Text ========== */
  p, li {
      font-size: 1.1em;
      color: #333333;
      margin-bottom: 1.2em;
  }

  /* ========== Links ========== */
  a {
      color: #0066cc;
      text-decoration: none;
  }
  a:hover {
      text-decoration: underline;
  }
  .content-wrap.card a:hover {
      text-decoration: none;
  }

  /* ========== Lists (ul, ol) ========== */
  ul, ol {
      padding-left: 1.5em;
      margin: 0.5em 0;
  }

  /* ========== Code Blocks ========== */
  pre, code {
      background-color: #ff9900;
      color: #333333;
      padding: 0.5em;
      border-radius: 4px;
      font-family: monospace;
  }
  code {
      background-color: #e9ecef;
      padding: 0.2em 0.4em;
  }

  /* ========== Tables ========== */
  table {
      width: 100%;
      border-collapse: collapse;
      margin: 1em 0;
  }
  th {
      background-color: #005bb3;
      color: #ffffff;
      padding: 0.5em;
  }
  td {
      padding: 0.5em;
      border: 1px solid #ddd;
  }

  /* ========== Horizontal Rule (hr) ========== */
  hr {
      border: 0;
      height: 1px;
      background: #003466;
      margin: 2em 0;
  }

  /* ========== Content Area Adjustments ========== */
  .content-wrap.card {
      background-color: #FAFAFA;
      color: #333333;
      padding: 20px;
      border-radius: 5px;
  }

  /* =============== Dark Mode Styles =============== */
  html.dark-mode {
      color: #ffffff;
      background-color: #003466;
  }
  
  /* ========== Headings (H1 - H4) Only ========== */
  html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5 {
      font-family: 'Michroma', sans-serif;
      color: #EFBA00 !important;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
      transition: color 0.3s ease;
  }
  html.dark-mode h1 { font-size: 1.6em; margin: 0.5em 0 0.5em; }
  html.dark-mode h2 { font-size: 1.5em; margin: 0.5em 0 0.5em; }
  html.dark-mode h3 { font-size: 1.4em; margin: 0.5em 0 0.5em; }
  html.dark-mode h4 { font-size: 1.3em; margin: 0.5em 0 0.5em; }
  html.dark-mode h5 { font-size: 1.2em; margin: 0.5em 0 0.5em; }

  /* ========== Paragraphs and Text ========== */
  html.dark-mode p, html.dark-mode li {
      font-size: 1.1em;
      color: #ffffff;
      margin-bottom: 1.2em;
  }

  /* ========== Links ========== */
  html.dark-mode a {
      color: #aad8ff;
      text-decoration: none;
  }
  html.dark-mode a:hover {
      color: #ffffff;
  }
  .dark-mode .content-wrap.card a:hover {
      color: #aad8ff;
  }

  /* ========== Lists (ul, ol) ========== */
  html.dark-mode ul, html.dark-mode ol {
      padding-left: 1.5em;
      margin: 0.5em 0;
      color: #ffffff;
  }

  /* ========== Code Blocks ========== */
  html.dark-mode pre, html.dark-mode code {
      background-color: #333333;
      color: #FFD86E;
      padding: 0.5em;
      border-radius: 4px;
  }
  html.dark-mode code {
      background-color: #555555;
      padding: 0.2em 0.4em;
  }

  /* ========== Tables ========== */
  html.dark-mode table {
      width: 100%;
      border-collapse: collapse;
      margin: 1em 0;
      background-color: #00204A;
  }
  html.dark-mode th {
      background-color: #003466;
      color: #ffffff;
      padding: 0.5em;
  }
  html.dark-mode td {
      padding: 0.5em;
      border: 1px solid #444444;
      color: #ffffff;
  }

  /* ========== Horizontal Rule (hr) ========== */
  html.dark-mode hr {
      border: 0;
      height: 1px;
      background: #FFD86E;
      margin: 2em 0;
  }

  /* ========== Content Area Adjustments ========== */
  .dark-mode .content-wrap.card {
      background-color: #00204A;
      color: #ffffff;
      padding: 20px;
      border-radius: 5px;
  }
  
</style>

Heading Level 1 (H1)

Heading Level 2 (H2)

Heading Level 3 (H3)

Heading Level 4 (H4)

Heading Level 5 (H5)

This is a paragraph (p) with bold text, italicized text, and underlined text.

Here’s a paragraph with a link (a) to demonstrate how links are styled.

Unordered List

List Item 1 (li)
List Item 2 (li)
List Item 3 (li)

Ordered List

List Item 1 (li)
List Item 2 (li)
List Item 3 (li)

Blockquote

This is a blockquote (blockquote). It’s typically used to represent a quotation or an excerpt from another source.

Preformatted Text

  This is preformatted text (pre). 
  It preserves spaces     and line breaks.
  Useful for code snippets.

Inline Code

Use <code> tags to display inline code.

Code Block


  // This is a code block (pre > code)
  function helloWorld() {
      console.log("Hello, world!");
  }

Table

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

This is a horizontal rule (hr) separating sections above and below.