Style guide

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

Last modified: 3 days, 6 hours ago

Navigation

• Language
• Typography
• Color palette
• Post structure
• Permalinks
• Discoverability

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.
   • Example: don't = do not
2. For possessive forms, the extra s after the apostrophe is omitted in words and names ending in s.
   • Examples:
     • octopus's → octopus'
     • Ninomae Ina'nis's → Ninomae Ina'nis'

Abbreviations and acronyms

Abbreviations and acronyms are enclosed with an <abbr> tag. However, this rule is not applicable to some well-known (like TV, CD, and DVD) and Internet-related ones (like HTML, CSS, RSS, and AI).

• Example: WYSIWYG

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.
   • Example: The Complete Book of Ribbon Embroidery by Heather Joynes
2. Movies are followed by the year in parentheses.
   • Example: Finding Nemo (2003)
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).
   • Example: Friends S1E1
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.
   • Examples:
     • Lady Gaga - Poker Face (English = title case)
     • Bara bada bastu by KAJ (Swedish = sentence case)
5. Transliterations from non-Latin scripts come after their original names. They must be enclosed in square brackets.
   • Example: Golden Bomber - 女々しくて [Memeshikute] (Japanese = Kanji and kana + Hepburn romanization)

Typography

Fonts

• EB Garamond is used throughout the entire blog.
• The default monospace font 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

This blog's theme uses the wintry color palette.

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

This is used for post and page titles, as well as this blog's name on the header. It can also be applied to the main sections of this guide.

Level 2

This is used for main headings.

Level 3

This is used for subheadings.

Level 4

This is occasionally used, though it is intended for subheadings under Level 3.

Level 5

This is rarely used, though it is intended for subheadings under Level 4.

Level 6

This is also rarely used, though it is intended for subheadings under Level 5.

Published dates

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

• Example: 01 Apr, 2026

Short prefaces

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

Archived posts begin with the following:

Posts hidden from the Discovery feed use this following statement:

Additional lines right after the italicized text can be included, though they are reverted into the regular text style (with the exception of short, bolded text until the colon). These are often used for last modified dates and content warnings.

Speaking of content warnings, these are required for posts and pages with mature themes and/or controversial entities.

Lists

Lists can be either be bulleted or numbered. They can be 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)

• Item 1
• Item 2
• Item 3

Bulleted list (multilevel)

• Item 1
  • Sub-item 1
    • This
  • Sub-item 2
    • That

Numbered list (single-level)

1. Yes
2. No

Numbered list (multi-level)

1. Item
   1. Sub-item
      1. Sub-sub-item

Mixed lists use a combination of numbered and bulleted lists. This can be used for lecture notes.

1. Antarctica
   • Southernmost and least-populated continent on Earth
   • Home to the South Pole, as well as numerous research stations

Block quotes

Block quotes are italicized and can span multiple lines. These are padded on the left and right sides. These are marked with a slightly thick vertical line on the left side.

This element can be used for excerpts from published works, regardless of the medium.

Codes

Codes have a dark background and a thin white border, with the latter being a dark mode exclusive. These can be integrated into the text or made as a separate element (which maximizes the page width). These are intended for post tags within regular text, as well as element tags and code snippets in HTML, CSS, JavaScript, and other programming languages.

• Example: text-decoration: none;

Images

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

Captions provide descriptive and concise information about the image. These are 20% smaller than the regular text, and these must be centered and italicized right after the image.

Photographs and illustrations use the white border style with a subtle, blurry box shadow.

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

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

Pixel art and 88x31 buttons do not use the regular image styling. These must be tagged under <img class="web-graphic"> and have a pixelated rendering to achieve a crisp image quality. These can be hovered to show blurry shadows.

Tables

Tables can be used to display and organize data. These have baby blue headers with bolded text, as well as thin borders and hoverable rows. Like codes, these elements maximize the page width.

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

Source: Bulbapedia

Info boxes

Info boxes can be added to provide tips and supplementary information within posts and pages. These are tagged with <div class="info-box"> and maximize the page width. These have a baby blue background and a blurred shadow inside the edges (which have rounded corners).

Heading tags inside these boxes are replaced with bolded, normal-sized text.

.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. Obviously, these are placed at the end of the post or page.

Definitions of words and phrases are marked with a right arrow sign (U+2192) between the bolded text and the meaning themselves.

• Example:
  • siya → he, she, [singular] they (Filipino)

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.

• Example: Crème brûlée -> /creme-brulee/

Shortened versions of long titles must still convey the same meaning as their original counterparts.

• Example: Chumbawumba - The Boy Bands Have Won [...] -> /chumbawumba-tbbhw/

Definite and indefinite articles are often omitted for conciseness.

• Examples:
  • The quick brown fox jumps over the lazy dog -> /quick-brown-fox-jumps-over-lazy-dog/
  • A collection of vintage postcards -> /collection-of-vintage-postcards/

Discoverability

Posts with an "OK" toast button mean that they can be publicly discovered via Bear Blog's Discover feed. Those without the mentioned element mean that they are intentionally hidden from the discover feed. However, they are still accessible via other means (such as RSS feeds and blog directories). (Please refer to my toast button styling guide to see how that element looks like.)

Archived posts are tagged under #archive and have the make_discoverable: false meta tag. They have a short preface to indicate their origins and changes.

Pages must be marked with is_page: true and make_discoverable: false in the meta tags. These become completely hidden from public feeds (such as the Bear Blog Discover page, website directories, and RSS). This rule is applied to the about and now pages, as well as the entirety of my digital garden.