Tutorial: Create a Bear Micro Blog

Micro Bloggers

Thank you to all of you who have reached out asking for a micro blog tutorial.

I have many more ideas, like an Apple shortcut for easy posting, a Bearming Theme version, and a footer widget. Subscribe to the RSS feed to stay updated.

Anyway, here's a first version of the status blog...

Design

I chose a notebook style for the design (the pin icon is from Icons8). If you prefer something different, check out the Design category on the Blog Inspiration page.

Here are my styles for the micro blog:

/* Status */
.status time {
  font-family: "Special Elite";
  font-size: .6em;
  font-weight: bold;
  color: #777;
}
.status.post main h1 {
  display: none;
}
.status ul.blog-posts li,
.status.post main {
  margin: 30px 0;
  padding: 10px 20px 30px;
  font-family: "Indie Flower";
  font-size: 1.15em;
  color: #222;
  background-color: #f9f9cb;
  background-size: 18px 18px;
  background-image:  repeating-linear-gradient(0deg, #ededfa, #ededfa 0.9px, #f9f9cb 0.9px, #f9f9cb);
  border-radius: 7px;
}
.status ul.blog-posts li a {
  margin: 0 0 20px;
  width: 16px; 
  height: 16px;
  background: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/birming/pin.webp"); /* Icon from icons8.com */
  text-indent: -9999px;
}
.status ul.blog-posts li div a,
.status.post main a {
  display: contents;
  color: #222;
  font-weight: bold;
}
.status img {
  padding: 15px 15px 20px;
  background-color: #fff;
  box-shadow: 5px 7px 4px #888;
  border-radius: 0;
}
.status ul.blog-posts p {
  clear: both;
  margin: 5px 0 0;
}
.status.widget ul {
  margin: 0;
  font-size: 120%;
}
.status.widget img {
  margin: 0 auto 25px;
  height: 80%;
  width: 80%;
}
.post .status.widget,
.page.status .status.widget {
  display: none;
}

Fonts

Being left-handed, I picked the leftie-inspired font Indie Flower. For the date, I use the Special Elite typewriter-style font. I only include these fonts on the status pages (see the 'Page' section) to avoid unnecessary loading.

If you want to add them to your main styles instead, it would look something like this:

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

Page

The status page and its subpages (if you want that) are all created in a similar way. For the main page, create a new page with this in the header:

title: Status
link: status
is_page: true
class_name: status
make_discoverable: false

And this in the body:

<style>@import url("https://fonts.bunny.net/css?family=indie-flower:400|special-elite:400");</style>
{{ posts|tag:"status"|limit:15|content:True }}

If you want subpages, simply change the posts tag to the category of your choice. For example, if you have a photo category, it would look like:

{{ posts|tag:"photos"|limit:15|content:True }}.

Change the 'limit' to whatever number of posts you want to display. My plan is to stick with 15 and then link to a "Status Archive" page for the rest.

For the menu, I use the Bearming Theme add-on Submenu.

Post

When posting a status update, include the status class name and tag. To prevent the Bear discovery feed from being flooded with short posts, I highly recommend setting make_discoverable to false.

This is what my template looks like:

title: 
tags: status, photos, movies, notes
make_discoverable: false

Feeds

To avoid overwhelming your subscribers, I suggest using a separate feed for blog posts. For example, include a "posts" tag when publishing an entry. Then, wherever you promote the feed, use a URL like this: www.your-blog.com/feed?q=posts

Happy posting!

Bearming styles

If you are using the Bearming theme and want the status posts to have the same styles, use this code instead:

/* Status */
.status time {
  font-size: .75em;
  color: var(--link-color) !important;
  filter: grayscale(100%);
}
.status ul.blog-posts li {
  margin: 30px 0;
  padding: 20px 35px 30px;
  background: var(--accent-color);
  border-radius: 10px;
}
.status ul.blog-posts li a {
  margin: 3px 0 20px;
  width: 16px; 
  height: 16px;
  background: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/birming/link.png"); /* Icon from icons8.com */
  text-indent: -9999px;
}
.status ul.blog-posts li div a {
  display: contents;
}
.status img {
  margin: 20px 0;
}
.status ul.blog-posts p {
  clear: both;
  margin: 5px 0 0;
}
.status.widget ul {
  margin: 0;
  font-size: 120%;
}
.status.widget img {
  margin: 0 auto 25px;
  height: 70%;
  width: 70%;
}
.post .status.widget,
.page.status .status.widget {
  display: none;
}

November 18: I've updated the styles to include support for footer widget. For the status fonts to work, these must be included in your main theme:

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

To display the widget, include this line of code under "Dashboard -> Settings -> Header and footer directives -> Footer directive:"

{{ posts|tag:"status"|limit:1|content:True }}

Note: Bear doesn't support embeds for posts, so the widget will only be shown on pages.

Permalinks

If you want the permalinks for status posts to have the same look, simply add the 'class_name: status' snippet to your post.

Shortcut

A shortcut for Bear micro blog to make it quick and easy to create and share your status updates.

Robert Birming