Bear Hug

Bear Hug companion

Bear Hug is an add-on for the default Bear Blog theme, featuring a set of thoughtful foundation styles. It focuses on consistency and rhythm, making spacing, headings, images, and layout feel balanced without changing the core look of your blog.

How to use

Copy the styles below and paste them at the end of the default Bear theme. That's it.

Styles

/* Bear Hug | robertbirming.com */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

p {
  margin-block: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 1.6em 0.5em;
  line-height: 1.3;
}

hr,
img,
blockquote {
  margin-block: 1.6em;
}

img {
  display: block;
  height: auto;
}

header {
  margin-block: 1em 1.6em;
}

header a.title {
  display: inline-block;
}

header .title h1 {
  margin-block: 0;
}

header .title h1,
.post main > h1 {
  margin-block-end: 0;
}

header nav p,
.post main > h1 + p {
  margin-block-start: 0.25em;
}

body main > h1:first-child {
  margin-block-start: 0;
}

footer p {
  margin-block: 0.7em;
}

Want more? Check out all my Bear themes and add-ons. Happy blogging, give your blog a hug.