Sample Page

This page is here to demonstrate all of the common elements¹ used on this website. This is primarily intended for my personal use during stylesheet development. Oh, and by the way, here is a link that goes nowhere.

This paragraph contains bold, bold italic (some of which is linked), plain italic, and ~~strikethrough~~ text.

And here is a feature I don’t quite have setup: inline references

This website is best viewed with any browser.

#Colors

Set the primary color for this page using this or the field in the table below:

Color/Gradient Name	… Color Preview …	Color String
--color-primary	Sample
--color-primary-sat	Sample
--color-pop	Sample
--color-pop-bgcontrast	Sample
--color-link	Sample
--color-link-underline	Sample
--color-h1	Sample
--color-h2	Sample
--color-fg	Sample
--color-fg-hc	Sample
--color-bg	Sample
--color-bg-hc	Sample
--color-tinted-shadow	Sample
--bg	Sample
--header-bg	Sample

#Unordered Lists

typically comprised of bullet points
can have multiple levels
- each of which can have more levels
  - but more than 3 is inadvisable
- which can be ordered
  1. though this can be a bit confusing
  2. typically begins with numbers rather than letters

#Ordered Lists

Typically numbered
Can have multiple levels
1. which often alternate between letters and capital and lowercase numbers
  - in markdown, we still express these with numbers
Are used for situations such as:
1. Requirements, for
  1. software projects
  2. budget planning
2. Lists of instructions that need to be followed from beginning to end, and which the reader may need to refer back to several times during the operation without losing their place.

#Images

This is an svg: svg diagram

This is a normal image which links to a page:

This is a reduced resolutiom image which links to a higher resolution version:

#Code and <pre>

There’s two primary ways to write code. You can use inline code by quoting it with `single backticks` or a multiline <pre><code> surrounded by triple backticks, optionally placing a language on the first line after the backticks. For example, here’s some HTML.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Hello, world!</title>
<main>
	<h1>Hello, world.</h1>
	<p>This is a complete sample HTML document within my sample document. A meta sample, so to speak. And it has a rather ~w~i~d~e~ line of text. A line of text that might compress the size of the left sidebar if you're on a wide enough screen. Actually, that may be a bit of a bug. The line of text in question, the one you're currently reading, is so wide that even on a 4k monitor set to 96 DPI, you should still have to scroll just a little bit in order to see the whole thing.
</main>

And here is some preformatted text, specifically a table with ascii box drawing characters, taken from Suraj Kurapati

                     A more complex table-within-a table.
               An inner table showing a variety of headings and data items.
            ┌────────────────────────────────────────────────────────────────┐
            │                          Inner Table                           │
            ├───────────────────┬────────────────────────────────────────────┤
            │                   │                   Head1                    │
            │      CORNER       ├────────────────────────────┬───────────────┤
            │                   │                            │     Head3     │
            ├───────────┬───────┤           Head2            ├──────┬────────┤
            │   Head4   │ Head5 │                            │Head6 │        │
   Outer    ├───────────┼───────┼────────────────────────────┼──────┴────────┤
   Table    │A          │       │  • Lists can be table data │   Two Wide    │
            │           │       │  • Images can be table data│               │
            ├───────────┤       ├────────────────────────────┼──────┬────────┤
            │           │Two    │A Form in a table: Your age:│      │        │
            │           │Tall   │            [  ]            │  No  │Multiple│
            │HTML       │       │ What is your favorite ice  │border│line    │
            │Station    │       │           cream?           │Little│item    │
            │           │       │    [Chocolate         ]    │Table │        │
            │           │       │       [OK] [Cancel]        │      │        │
            └───────────┴───────┴────────────────────────────┴──────┴────────┘

Sometimes a program has a sample output, which we represent with <samp> usually enclosed in <pre>. Here’s the first few lines of what happens of you press Ctrl + Shift + Alt + ?:

Basic editing functions
=======================
Enter            AcceptLine          Accept the input or move to the next line if input is missing a closing token.
Shift+Enter      AddLine             Move the cursor to the next line without attempting to execute the input
Backspace        BackwardDeleteChar  Delete the character before the cursor
Ctrl+h           BackwardDeleteChar  Delete the character before the cursor
[...output truncated...]

#Blockquotes

Sometimes, you want a blockquote that doesn’t quote anyone.

Who wrote this?

But more often, you’ll want to attribute the quote to an author (or even –Anonymous). Here’s what that would look like, with a longer quote.

Freak the fuck out and panic sell everything right now.

It’s fucking over.

—Warren Buffet

2025-06-23

#Description Lists

First Term: This is the definition of the first term.
Second Term: This is one definition of the second term.; This is another definition of the second term.

#Domain Eukaryota

Organisms whose cells possess a membrane-bound nucleus.

#Kingdom Animalia

Multicellular eukaryotes which generally consume organic material, breathe oxygen, move, and reproduce sexually.

#Phylum Chordata

Animals possessing a notochord at some stage in development.

#Class Mammalia

Warm-blooded vertebrates with hair/fur and mammary glands.

#Order Carnivora

Meat-eating mammals with specialized teeth and claws.

#Family Felidae

The biological family of cats, known for retractable claws and keen predation skills.

Snow Leopard, Panthera uncia The snow leopard — a solitary, mountain-dwelling big cat native to Central and South Asia.