Bearming Styles

Want to take your blog's design to the next level? This is where you'll find options to go beyond basic color and font changes.

Simply copy and paste the provided code snippets, then get creative! The user-friendly customization process makes it easy to implement the changes, even if you're not a coding expert.

The page is regularly updated with new styles (last updated 1 month, 1 week ago).

Theme Styles Palettes Add-ons

Import fonts

If you prefer the fonts prior to Bearming 2.0, or any other font, simply add this snippet above the Global fonts and sizes part:

/* Import fonts from fonts.bunny.net */
@import url("https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i|inter:400,700,900");

Then replace the font part with this:

  --font-main: "Atkinson Hyperlegible", sans-serif;
  --font-secondary: "Inter", sans-serif;

For a list of font providers, see Fonts under Designing.

Alternative blog list

Display the list of blog posts in a slightly different style. Simply replace to theme Blog list part with this code:

/* Blog list */
ul.blog-posts {
  margin: var(--size-large) 0 0;
  padding: 0;
  list-style-type: none;
}
.blog-posts li {
  display: flex;
  flex-direction: column-reverse;
  padding: var(--size-small) 0;
  border-top: 1px solid var(--accent-color);
}
.blog-posts a {
  text-decoration: none;
 }
.blog-posts li:last-child {
  border-bottom: 1px solid var(--accent-color);
}

More colorful logo

Add even more colors to your logo. Simply replace to theme Multicolor logo part with this code:

.title h1 {
  background-image: linear-gradient(90deg, rgba(94,114,235,1) 0%, rgba(255,145,144,1) 56%, rgba(254,193,149,1) 100%);
  color: transparent;
  -webkit-background-clip: text;
}

Original menu

If you prefer the look of the menu prior to Bearming 2.0, simply replace to theme Navigation part with this code:

/* Navigation */
nav {
  margin: var(--size-nano) 0 var(--size-large);
  font-family: var(--font-secondary);
}
nav p {
  display: inline;
}
nav a {
  display: inline-block;
  margin: var(--size-nano) var(--size-nano) var(--size-nano) 0;
  padding: var(--size-nano) var(--size-smaller);
  font-size: var(--size-small);
  font-weight: 800;
  color: var(--link-color);
  text-decoration: none;
  border: 1px solid var(--link-color);
  border-radius: var(--size-mid);
}
nav a:hover {
  background: var(--accent-color);
}