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.

Light Mode is based upon the following CSS code

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

Form Elements

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