Post styles

The default Bear Blog theme keeps the post page simple, a title, a date, and the content underneath. That leaves plenty of room to add some character to the pieces around your writing.

This page collects small CSS tweaks and variations for the post page. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 9 minutes ago.

Tighter spacing

Tighter title and date spacing

/* Post: tighter spacing | robertbirming.com */
body.post main h1 {
  margin-block-end: 0;
}

body.post main h1 + p {
  margin-block-start: 0.2em;
}

Centered

Centered post title and date

/* Post: centered | robertbirming.com */
body.post main h1 {
  margin-block-end: 0;
  text-align: center;
}

body.post main h1 + p {
  margin-block-start: 0.2em;
  text-align: center;
}

Bottom border

Bottom border post title and date

/* Post: bottom border | robertbirming.com */
body.post main h1 {
  margin-block-end: 0.5rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid;
}

body.post main h1 + p {
  margin-block-start: 0;
}

Inline

Inline post title and date

/* Post: inline | robertbirming.com */
body.post main h1 {
  display: inline;
  margin-block-end: 0;
}

body.post main h1 + p {
  display: inline;
  margin-inline-start: 0.6em;
  font-size: 0.85em;
}

Accent border

Accent border post title and date

/* Post: accent border | robertbirming.com */
body.post main {
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--link-color);
}

body.post main h1 {
  margin-block-end: 0;
}

body.post main h1 + p {
  margin-block-start: 0.2em;
}

Eyebrow date

Eyebrow date above post title

/* Post: eyebrow date | robertbirming.com */
body.post main {
  position: relative;
}

body.post main h1 {
  margin-block-end: 0;
  padding-block-start: 0.7em;
}

body.post main h1 + p {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin: 0;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

Boxed date

Boxed date above post title

/* Post: boxed date | robertbirming.com */
body.post main h1 {
  margin-block-end: 0.4em;
}

body.post main h1 + p {
  display: inline-block;
  margin-block-end: 0.5em;
  padding: 2px 10px;
  font-size: 0.8em;
  border: 1px solid;
}

Double border

Double border around post content

/* Post: double border | robertbirming.com */
body.post main {
  padding-block: 0 1.5rem;
  padding-inline: 1.5rem;
  border: 4px double;
}

Have fun dressing up the space around your writing.

Want more? Check out the full Bear Blog library.