Style Guide

Contents

  1. Colour Palette
    1. Light Mode
    2. Dark Mode
  2. General
    1. Links
  3. Articles
    1. Date
    2. Quote
    3. Citation
    4. Image
    5. Important
    6. Edit Notes
    7. Sources List
    8. Generic List
    9. Subtext
  4. Tables
    1. Posts Table
    2. Stack Table
    3. Index Table
    4. Generic Table
  5. Code Blocks
    1. Python
    2. Bash
    3. SQL
    4. HTML
    5. CSS
    6. YAML
    7. TOML
    8. JSON
    9. Diff
    10. nginx
    11. Access Log
    12. Dockerfile

Colour Palette

Light Mode

               

Dark Mode

               

General

Articles

Date


Quote

This is a quote
Author

Citation

Citation1

Image

Test SVG diagram (dark mode) Test SVG diagram (light mode)
Test SVG that switches based on the page theme.

Important

This is important.

Edit Notes

Edit Notes

2000-01-01: Edit note content.

Sources List

Sources

  1. Source Title

Generic List

  • Item 1
  • Item 2
  • Item 3

Subtext

Subtext.

Tables

Posts Table

Title Date
Post 1
Post 2

Stack Table

Service Description
Compose Stack 1 Description 1.
Compose Stack 2 Description 2.

Index Table

Title Description
Page 1 Description 1.
Page 2 Description 2.

Generic Table

Header Header
Item Item
Item Item

Code Blocks

Python

# comment
def function(n: int) -> None:
  i = 0
  while i <= n:
    print(i)

Bash

# comment
function () {
  for ((i = 0 ; i <= $1 ; i++)); do
    echo $i
  done
}

SQL

-- comment
SELECT
  col1,
  col2
FROM tab
WHERE
  col2 IN (1, 2, 3)
  OR col1 LIKE 'abc%'

HTML

<!-- comment -->
<p>
  This is a <b>paragraph<b>.
<p>

CSS

/* comment */
.class {
  font-size: 12px;
}

YAML

# comment
people:
  - john:
    age: 20
    job: job
  - amy:
    age: 30
    job: job

TOML

# comment
[people]

[people.john]
  age = 20
  job = "job"

[people.amy]
  age = 30
  job = "job"

JSON

{
  "people": {
      "john": {
        "age": 20
        "job": "job"
      }
      "amy": {
        "age": 30
        "job": "job"
    }
  }
}

Diff

unchanged
+ addition
- deletion

nginx

# comment
server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html;
  }
}

Access Log

127.0.0.1 - - [01/Jan/2000:00:00:00 +0000] "GET / HTTP/1.1" 200 140 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.5 Safari/535.19"

Dockerfile

# comment
FROM ubuntu:26.04

RUN apt-get update && \
apt-get install -y redis-server && \
apt-get clean

EXPOSE 6379

CMD ["redis-server", "--protected-mode", "no"]