Internet Website

FOREIGN IP DETECTED

ABORT NOW....

Introduction

*OPERATIONS UNDER DEVELOPMENT*

Despite this, Patriots are in control.

*END COMMS*

The Basics

This document uses a few extra classes here and there, but mostly it’s just markup. This, for instance, is a regular paragraph.

Look at this horizontal break:

Lovely. We can hide stuff in the <details> element:

Lists

This is a plain old bulleted list:

• Banana
• Paper boat
• Cucumber
• Rocket

Ordered lists look pretty much as you’d expect:

1. Goals
2. Motivations
   1. Intrinsic
   2. Extrinsic
3. Second-order effects

It’s nice to visualize trees. This is a regular unordered list with a tree class:

• /dev/nvme0n1p2

  • usr
    • local
      
    • share
      
    • libexec
      
    • include
      
    • sbin
      
    • src
      
    • lib64
      
    • lib
      
    • bin
      
    • games
      • solitaire
      • snake
      • tic-tac-toe
    • media
      
  • media
    
  • run
    
  • tmp

Tables

We can use regular tables that automatically adjust to the monospace grid. They’re responsive.

Note that only one column is allowed to grow.

Forms

Here are some buttons:

And inputs:

And radio buttons:

Grids

Add the grid class to a container to divide up the horizontal space evenly for the cells. Note that it maintains the monospace, so the total width might not be 100%. Here are six grids with increasing cell count:

If we want one cell to fill the remainder, we set flex-grow: 1; for that particular cell.

ASCII Drawings

We can draw in <pre> tags using box-drawing characters:

╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

To have it stand out a bit more, we can wrap it in a <figure> tag, and why not also add a <figcaption>.

┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │    
    │         │  msg 1  │    
    │         │────────►│    
    │         │         │    
    │  msg 2  │         │    
    │────────►│         │    
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

Let’s go wild and draw a chart!

                      Things I Have
                                              
    │                                     ████ Usable
15  │
    │                                     ░░░░ Broken
    │
12  │             ░            
    │             ░            
    │   ░         ░              
 9  │   ░         ░              
    │   ░         ░              
    │   ░         ░                    ░
 6  │   █         ░         ░          ░
    │   █         ░         ░          ░
    │   █         ░         █          ░
 3  │   █         █         █          ░
    │   █         █         █          ░
    │   █         █         █          ░
 0  └───▀─────────▀─────────▀──────────▀─────────────
      Socks     Jeans     Shirts   USB Drives

Media

Media objects are supported, like images and video:

God's Software Developer - B&W (Eternity) , 35mm Film

He is a patriot.

Referrals

INSERT MORE STUFF HERE