Style guide

This serves as a visual guide for this blog's post and page layout. It will be updated over time.

Last modified: 2 weeks, 5 days ago

Navigation

• Language
  • General rules
  • Short forms
  • Published works
• Typography
  • Fonts
  • Basic formatting
• Color palette
• Post structure
  • Headings
  • Published dates
  • Prefaces
  • Lists
  • Tables
  • Block quotes
  • Codes
  • Images
  • Info boxes
  • Footnotes
  • Citations
• Permalinks

Language

This blog is mostly written in English. Both American and British variants are used, with more emphasis in the former. Philippine English terms may pop up occasionally.

General rules

1. Contractions must be avoided unless they are part of a quote or a title for a published work.
2. Gender-neutral terms should be used when referring to a person or a group of people.
3. For possessive forms, the extra s after the apostrophe is omitted in words and names ending in s.

Short forms

Use the <abbr> tag to add dotted underlines to any unfamiliar short forms, especially abbreviations and acronyms. This is not needed for short forms that are already well-known in daily life (like TV, CD, and DVD) and the Internet world (like HTML, CSS, RSS, and AI).

Published works

Names of published works (books, movies, TV shows, songs, etc.) are usually italicized. Depending on the language, these can be written using the title or sentence cases.

Here are the general rules for such titles:

1. Books come before the author. While periodicals (like magazines and academic journals) are exempt from this rule, the articles inside them must follow this similar format.
2. Movies can be followed by their released year in parentheses.
3. TV shows often use the season-episode format instead of the year in parentheses. Seasons and episodes can either be shortened (S1E1) or written in full (Season 1, Episode 1).
4. Music tracks and albums come after the artist or group name. If they are mentioned in a sentence or paragraph, they must follow the same format as books.
5. Transliterations from non-Latin scripts come after their original names. They must be enclosed in square brackets.

Typography

Fonts

• EB Garamond → embedded serif font (from Bunny.net) that is used throughout my personal domains
• Monospace → system-default font that is reserved for both single-line and multiline codes

Basic formatting

This is a sample paragraph with a justified text alignment. It can be bolded or italicized... It can also be bolded in italics or italicized in bold. It can even be underlined struck through. (This is a tangent. Seriously, what is the point of this?)

Color palette

The provided colors are also used in my personal website.

Post structure

Headings

Headings are usually written in sentence case, though there are some exceptions like proper names (like people and places) and titles of published works.

Level 1 headings should be used for titles, while Level 2 and 3 are reserved for main headings and subheadings, respectively. However, Level 4 to 6 are rarely used in a normal post.

Level 1

Level 2

Level 3

Level 4

Level 5

Level 6

Published dates

Published dates follow the month-day-year format, and these are shortened (with the month having the first three letters and the day having a trailing zero) in blog posts and lists.

01 Apr, 2026

Prefaces

Short prefaces may be added depending on the nature of a blog post or page.

Archived posts

Posts marked with make_discoverable: false

Disclaimers

Lists

Lists can be bulleted, numbered, or both. While these can be indented as many times as possible, these are typically limited to two or three times for accessibility reasons.

Bulleted list (single-level)

• This is the first item.
• This is the second item.
• This is the third item.

Bulleted list (multilevel)

• This is the only item.
  • This is a variant of an item.
    • Here goes a description for the variant.
  • This is another variant of an item.
    • Here goes a description for another variant.

Numbered list (single-level)

1. This is the first step.
2. This is the second step.

Numbered list (multi-level)

1. This is the only step.
   1. Here goes extra information about the only step.
      1. Here goes even more extras for that step.

Mixed list

1. This is the only item.
   • Here goes an important detail about the item.
   • Here goes another detail about the item.

Tables

Tables can be used to display and organize data. Their rows are hoverable for accessibility purposes.

External sources must be added right under the table. These should be linked to a relevant website or a printed publication.

Source: Bulbapedia

Block quotes

Block quotes should be italicized and indented on both sides. They have a slightly thick line on the left side, and they must be followed by their original sources. Published dates can be added for online sources, especially in the open web.

Life hack: Keep your youthful whimsy by still hitting the annoying mouth smack, followed by contented sigh combo after drinking a refreshing beverage.

Codes

Codes can be integrated within the text or made as a separate element. These are intended for tags in blog posts and web design elements, as well as code snippets.

Taking my adaptation of Sylvia's code snippet (via Vince Blog's image caption guide) for my image styling as an example...

img {
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
    border: 8px solid #f2f2f2;
    box-shadow: 0px 0px 2px #666;
}

Images

Images can be embedded within posts (in any format except WebP) or linked individually to their corresponding URLs. Although these are not needed in most cases, these are required in posts with the #gallery tag.

A photo of a sleeping ginger cat, taken from my Nikon DSLR camera.

Pixel art and 88x31 buttons do not use the bordered image styling. They must be tagged under <img class="web-graphic"> and have a pixelated rendering to achieve a crisp image quality.

Info boxes

Info boxes can be added to provide tips, examples, and supplementary information. These are tagged with <div class="info-box"> and can be placed anywhere within a post or page.

.info-box {
    padding: 25px;
    border-radius: 10px;
    background-color: #6b9fb1;
    color: #f2f2f2;
    box-shadow: 0px 0px 10px inset #336d80;
}

Footnotes

Footnotes may be appended to provide extra information and talk about outdated statements. They can be used for define an unfamiliar term within the post or page.

Citations

Citations are written in the APA format. These are treated similarly as normal footnotes, except they do not use numbered lists.

Taking one citation from a post about my favorite unconventional animal...

Permalinks

Permalinks for this blog are always written in lowercase. These should not have any accented letters at all. Hyphens must be added for permalinks with more than two words.

Shortened versions of long titles must still convey a similar meaning as their original counterparts.

Definite and indefinite articles are often omitted for conciseness.