STYLE GUIDE

Last updated 22 hours, 50 minutes ago

I saw some bloggers include a style guide for their blog. I never planned on making one, but lately I've implemented so many different rules for various elements that a style guide would keep me in check.

Points I-III are universal rules. Since this is still a fun project, I don't want to feel too constrained, so some pages have branched off on their own (just mildly).

TABLE OF CONTENTS

(Click to jump.)

TYPOGRAPHY

The "typewriter font" is the main inspiration for this blog and thus the primary font. I imagine I'm typing on a typewriter and therefore have limited usage of text styling, so I utilize uppercase to add some variety and/or emphasis.

However, I quickly realized that a single font became monotonous; if this site was a physical space, I would use my own handwriting to add some texture and interest, like scribbling down a note here or there. That's when I brought in a secondary font that was the closest match to my actual handwriting.

As I continued to add more to the blog, a tertiary font was included. This is just the default monospace font, and I use it for more technical elements like tables or the "music player" on my NOW page.

Rules:

• Blog posts are written in uppercase
• When using visual elements like post-it notes or stickies, use Cedarville Cursive.

Fonts

1. Special Elite:
Headers, body, link text

2. Cedarville Cursive:
Notes, comments by others, "handwritten" text

3. Monospace:
Table, music player

Heading 1:
Titles

Heading 2:
Section headers

Heading 3:
Call-outs

Heading 4:
Subtitles in blog posts

Heading 5:
Footnotes

Heading 6:
Footer

Text styling

This is what italics look like.

Highlighted text is used in place of bold.

a single line of code

.code-block {
this is what;
a block of code;
looks like;
}

Pull quote

The quick brown dog jumped over the lazy fox.

Symbols

Since the design honors the ephemeral, modern emojis are used sparingly.¹

Instead, opt for flat, black-and-white text symbols and dingbats.

✎ ⁂ ✤ ✌︎ ▨ ➳ ✹ 🝛

The kaomoji bears also work well too, since they are made up of text.

ʕノ•ᴥ•ʔノ ︵ ┻━┻

TABLE OF CONTENTS ↑

COLORS

Continuing with the realistic typewriter theme, I decided to stick with the original theme's colors of almost black and off-white.

I actually really like seeing red ink on a page (I read somewhere that it can be stressful for some people, as red is traditionally used to indicate mistakes). So, to add some realism to my theme, I included a red color that's not the default color: red;.

Primary

Secondary

There are a lot of colors on this blog. Some are intentionally random, since real stationery was used as a reference. Because of this, not every color will be included in this palette, as most of us don't curate every single color in our day-to-day life.

Thus, only colors that are used repeatedly throughout the blog make up the secondary color palette.²

Color mixing

To avoiding increasing the color palette even further, mix two existing colors to create a "new" color. (I learned this from Robert's code snippets!)

For example:

In CSS:

color: color-mix(in srgb, #e3f4ff 100%, #999 20%);

TABLE OF CONTENTS ↑

VISUAL ELEMENTS

This section is dedicated to all the elements that aren't text-based. Right now, that's lists, tables, and graphics. I can foresee this section growing more, especially as I'm still figuring out how to categorize elements properly.

Horizontal rules

Main

<hr> used to separate the header and footer from the main body of the page.

Custom

<hr class="custom"> used within posts to separate or emphasize paragraphs.

Lists

Bulleted

Unordered <ul> list using * markdown.

• Item 1
• Item 2
• Item 3

Numbered

Ordered <ol> list using numbers in markdown.

1. Item 1
2. Item 2
3. Item 3

Table of contents

<div class="toc"> and set <ol type="I"> for sections and <ol type="i"> for nested items.

To-do

<div class="todo-list"> and the use standard markdown for ul lists.

Checked

/* To-do list */
.todo-list h3 {
  margin-bottom: 0.5rem;
}
.todo-list ul {
  list-style-position: outside;
  margin: 0;
  padding: 0 0 0 1.4rem;
}
.todo-list ul li::marker {
  content: "☐ ";
  font-size: 1.25em;
}
.todo-list ol {
  list-style-position: outside;
  margin: 0;
  padding: 0 0 0 1.35rem;
}
.todo-list ol li::marker {
  content: "☑ ";
  font-size: 1.2em;
}

Dainty

I started this list style in my COLOPHON, only to use it throughout the blog.³

.colophon h4 {
  font-family: var(--font-main);
  font-size: 13pt;
  color: var(--text-color);
  line-height: 1.5em;
  letter-spacing: 0;
}
.colophon h4 a{
  font-size: 13pt;
  font-weight: 400;
  color: var(--text-color);
  text-decoration: underline;
  }
.colophon strong {
  font-size: 18pt;
  font-weight: 200;
  line-height: 2pt;
  }
.colophon h5 {
  color: #999;
  }
.colophon details {
  font-size: 13pt;
  font-style: italic;
  padding: 0.75rem 1rem 0.5rem 1rem;
  border-radius: 4px;
  background-color: color-mix(in srgb, #fbfbf6 100%, #666 10%);
  }

Tables

Default

Use markdown:

.table-container {
  overflow-x: auto;
  }
table {
  width: 100%;
  border-collapse: collapse;
  font-family: monospace;
  font-size: 12pt;
  background: white;
  padding: 2em;
}
th {
  background: #3B3B3B;
  color: white;
  font-size: 9pt;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px;
  border: 1px solid #3B3b3b;
}
td {
   border: 1px dotted #3B3B3B;
  padding: 10px;
  width: auto;
}
table a {
  font-family: monospace;
}

With label

Add <div class="table-label"> before table markdown.⁴

.table-label {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  max-width: 180px;
  max-height: 30px;
  border-radius: 15px 15px 0px 0;
  background-color: #3B3B3B;
  margin: 0;
  padding: 5px 0 10px 20px;
  text-align: center;
  font-family: var(--font-secondary);
  color: white;
  font-size: 16pt;
  letter-spacing: -1px;
}

Graphics

Mood stamp

<div class="mood-item"> used only in Sunday journal entries. Limited usage due to its absolute positioning. Mood is always displayed in uppercase.

/* Mood tracker item */
.mood-item {
  position: absolute; /* remove it from normal flow */
  top: 500px;          /* distance from top of page/container */
  left: 300px;         /* distance from left of page/container */
   display: inline-flex;           /* flex container that respects size */
  justify-content: center;        /* horizontal centering */
  align-items: center;   
  text-align: center;
  color: #4262ff;
  text-transform: uppercase;
   border: 2.5px solid #4262ff;
  border-radius: 100%;
  font-size: 15pt;
  font-weight: 700;
  height: 120px;
  width: 120px;
  margin-top: 1em;
  margin-bottom: 1em; 
    rotate: -4deg;
}

Music player

<div class="music"> to display songs, playlists, and albums.

Additional styles:

/* Music player */
.music {
  display: block;
  position: relative;
  max-width: 350px;
  min-height: 30px;
  border-radius: 10px;
  box-shadow: inset 0px 0px 8px #637475;
  border: 1px solid #c3d5d6;
  background-color: #c3d5d6;
  margin-top: 10px;
  margin-left: 0;
  margin-bottom: 40px;
  padding: 10px 20px 10px 20px;
  align-items: center;
  text-align: center;
  text-transform: none;
  font-family: monospace;
  color: #28393b;
  font-size: 12pt; 
}
.music b {
  color: #28393b;
}
.music a {
  color: #28393b;
  font-family: monospace;
}
.music a:hover {
  color: blue;
}
.music hr {
  --s: 6px; /* size of the wave */
  --b: 2px; /* thickness of the line */
  --m: 0.4; /* curvature of the wave [0 2] */
  
  background: #28393b;
  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  height: calc(2*var(--R));
  width: 100%;
  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g)) 
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}

HTML:

<div class="music"><hr>◀◀ ◼︎ ▶︎▶︎<br><b>♫ Song</b><br>Artist</div>

Mini note

Shows a preview of the latest note from the home page.

/* Mini note */
.scribble ul.embedded.blog-posts {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  max-width: 400px;
  height: 80px;
  box-shadow: 12px 0px 8px -5px #b38a62;
  border-radius: 0 50px 50px 0;
  background-color: #fcd9c5;
  margin-top: 10px;
  margin-left: 0;
  margin-bottom: 40px;
  align-items: center;
}
/* Text styling */
.scribble ul.embedded.blog-posts p {
  text-align: left;
  font-family: var(--font-secondary);
  color: #333;
  font-size: 16pt;
  letter-spacing: -1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 220px;
}
/* Remove extra space above content */
.scribble ul.embedded.blog-posts > li div p:first-child {
  margin: 0;
}
/* Hide title, but not link */
.scribble ul.embedded.blog-posts > li > a {
  visibility: hidden;
  font-size: 0px;
  text-decoration: none;
}
/* Date styling of mini note */
.scribble ul.embedded.blog-posts li time {
  position: absolute;   /* position relative to the <li> */
  left: 1.5em;
  top: 1.8em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: none;
  font-style: normal;
  color: brown;
  font-family: var(--font-main);
  font-size: 12pt;
  letter-spacing: 0px;
  padding-right: 2em;
  white-space: nowrap;  /* prevent wrapping */
}
/* Hide image */
.scribble ul.embedded.blog-posts img {
  display: none;
}

HTML:

<div class="scribble">
{{ posts|tag:notes|limit:1|content:True }}
</div>  

Sticky note

Can be placed anywhere.

/* Scribble anywhere */
.scribble-b {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  max-width: 200px;
  min-height: 200px;
  box-shadow: 0 12px 5px -5px #81b5a4;
  border-radius: 10px;
  background-color: #d1fff0;
  margin-top: 1rem;
  margin-left: 0;
  margin-bottom: 40px;
  padding: 10px 30px 10px 30px;
  align-items: center;
  text-align: left;
  font-family: var(--font-secondary);
  color: #333;
  font-size: 20pt;
  letter-spacing: -1px;
  rotate: -1deg;
}

HTML:

<div class="scribble-b">Looks best when there's at least 47 characters.</div>

Images

Images are currently styled in two ways: with and without captions. All images must have descriptive alt text.

With captions

Use <div class="gallery-post"> when adding an image with a caption. This operates like a list, so the markdown looks like this:

- ![Alt text](imageurl) \
Caption

Without captions

When captions aren't needed, use Robert Birming's lightbox photo gallery. Don't forget the descriptive alt text!

TABLE OF CONTENTS ↑

PAGES

These pages are outliers and have branched out on their own. This blog is a scrapbook: Some pages are typed out while others contain handwritten notes and stickers. A style guide creates rules that tie everything together, but sometimes, rules are meant to be broken.

Notes

Inspired by post-it notes. Read the details here.

FONTS

1. Cedarville Cursive:
Body

2. Special Elite:
Headers, date, link text

TEXT STYLING

Body text is set to 18pt.

Underline is used to emphasize text.

Strikethrough looks like this.

This is what a link looks like.

TODAY IS APRIL 16, 2026.

COLORS

Text

Note

Sticker

TABLE OF CONTENTS ↑

FOOTNOTES

1. They are most often seen in NOTES, which was the original break-off from the typewriter theme, and introducing the idea of tactile ephemera. ↗

2. More colors may be added as I continue to grow the blog. ↗

3. I didn't consider this at the time, which is why the label stuck.↗

4. So far, this style is limited to my weekly media lists.↗

5. Default red stands out better against the yellow background compared to almost red.↗

#about