Skip to main content

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.

This is not ready yet, in particular HW Mode lacks some styling.

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

Light Mode is based upon the following CSS code 

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

  /* =============== DefaultShared Global Base Settings =============== */

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

 
  /* =============== Light Mode Styles =============== */
  /* ========== Global Base Settings ========== */

/* Base settings for the page */
html {
    font-family: Arial, sans-serif;
    line-height: 1.6; /* Improved readability */
      color: #333333;
      /* Softer dark gray text */
    background-color: #FFFFFF; /* White background for light mode */
    margin: 0;
    padding: 20px; /* Adds padding around main content */
  }
  
  /* ========== Headings (H1 - H5)H4) Only ========== */
  /*h1, Headingsh2, areh3, styledh4, withh5 a{
      clearfont-family: 'Michroma', sans-serif;
      color: #003466;
      text-shadow: none;
      transition: color hierarchy0.3s andease;
  spacing for readability */}
  h1 { font-size: 2.5em;1.6em; color:margin: #003466;0.5em /* Dark blue for main heading */
    margin-top: 1em;
    margin-bottom:0 0.5em; } /* Adjusted size */
  h2 { font-size: 2em;1.5em; color:margin: #004080;0.5em /* Slightly lighter blue for second-level headings */
    margin-top: 1em;
    margin-bottom:0 0.5em; }
  h3 { font-size: 1.75em;4em; color: #004d99;
    margin-top:margin: 0.75em;5em margin-bottom:0 0.5em; }
  h4 { font-size: 1.5em;3em; color: #0059b3;
    margin-top:margin: 0.75em;5em margin-bottom:0 0.5em; }
  h5 { font-size: 1.25em;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;
      margin-top: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;
      margin-bottom: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 Generalp, paragraphhtml.dark-mode styling for better readability */
pli {
      font-size: 1.1em;
      /*color: Slightly larger font size for readability */
    line-height: 1.6; /* Relaxed line spacing */#ffffff;
      margin-bottom: 1.2em; /* Space after each paragraph */
  }

  /* ========== Links (a) ========== */
  /* Links are styled with a distinct color and an underline on hover */html.dark-mode a {
      color: #0066cc; /* Blue link color */#aad8ff;
      text-decoration: none;
  }
  html.dark-mode a:hover {
      text-decoration:color: underline;#ffffff;
  /*}
  Underline.dark-mode on.content-wrap.card a:hover for{
      claritycolor: */#aad8ff;
  }

  /* ========== Lists (ul, ol, li)ol) ========== */
  /* List styling with extra padding for readability */html.dark-mode ul, html.dark-mode ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
      padding-left: 1.5em;
      /* Indented list items */
}
li {
    margin-bottom:margin: 0.5em;5em /*0;
      Spacecolor: between list items */#ffffff;
  }

  /* ========== Blockquotes ========== */

/* Blockquotes are highlighted with a left border and italics */
blockquote {
    border-left: 4px solid #003466; /* Blue left border */
    padding-left: 1em;
    color: #555; /* Dark gray text color */
    font-style: italic;
    margin: 1em 0;
    background-color: #f9f9f9; /* Light background for contrast */
}

/* ========== Preformatted Text and Code Blocks ========== */
  /* Code and preformatted text blocks have a soft background and padding */html.dark-mode pre, html.dark-mode code {
      background-color: #f5f5f5;#333333;
      /*color: Light gray background for readability */#FFD86E;
      padding: 0.5em;
      border-radius: 4px;
  font-family: monospace;
}
  /* Inline code styling */html.dark-mode code {
      background-color: #e9ecef; /* Lighter gray background */#555555;
      padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
  }

  /* ========== Tables ========== */
  /* Tables are styled with padding and background colors for readability */html.dark-mode table {
      width: 100%;
      border-collapse: collapse;
      margin: 1em 0;
      background-color: #00204A;
  }
  html.dark-mode th {
      background-color: #003466;
      /* Dark blue background for headers */
    color: #ffffff; /* White text for headers */
      padding: 0.5em;
  text-align:}
  left;
}html.dark-mode td {
      padding: 0.5em;
      border: 1px solid #ddd; /* Light border for cell separation */
}

/* ========== Form Elements ========== */

/* Form styling for inputs, textareas, and buttons */
input[type="text"], select, textarea {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1em;
}

/* Button styling */
button, .cta-button {
    padding: 0.5em 1em;
    background-color: #003466;#444444;
      color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}
button:hover, .cta-button:hover {
    background-color: #00509e;
  }

  /* ========== Horizontal Rule (hr) ========== */
  /* Styling for horizontal rules for section separation */html.dark-mode hr {
      border: 0;
      height: 1px;
      background: #003466; /* Solid blue line */#FFD86E;
      margin: 2em 0;
  }

  /* ========== FooterContent (Example)Area Adjustments ========== */
  /* Footer styling if applicable */.dark-mode .footercontent-wrap.card {
      background-color: #003466; /* Dark blue background for footer */#00204A;
      color: #ffffff;
      /* White text for contrast */
    padding: 20px;
      text-align:border-radius: center;
    font-size: 0.9em;5px;
  }
  
.footer a {
    color: #66ccff;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}

</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

  1. List Item 1 (li)
  2. List Item 2 (li)
  3. 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.

Back to top