Tweaks & Additions To The Blog

2025-09-29

I've spent the last few weeks making adjustments and additions to the blog to get everything set up how I want. This is my new hub on the internet after all.

I don't want to admit the amount of time I've spent tinkering with fonts, sizes and spacing on the back end of the site's CSS. A common routine for me in recent days:

• Get some inspiration from another blog's cool design or layout.
• Try to implement something similar for my own blog.
• Botch the coding entirely—break something.
• Revert back to the default theme.
• Fix the coding, but see that I actually don't like how it looks.
• Lower my expectations and change something incredibly minor, like a link color.
• Glory in my new design aesthetic.

More seriously, it's been fun learning the basics of CSS and refreshing myself with HTML coding. And I'm seriously impressed with what people in the Bearblog universe are able to cook up.

I think I've now got the basic setup I'm looking for which is being run via three different blogs hosted on my own domain. A main blog that houses everything on the root domain and then two sub-domains that run a photo blog and a notes/micro blog.

This guide from @Jedda was essential to help me create both blogs. Each are run using embedded post snippets for the home page.

This is what I'm using for the photo blog:

{{ posts|limit:5|content:True }}

And this is what I'm using for the notes blog:

{{ posts|limit:50|content:True }}

Here's the photo blog CSS styling:

ul.embedded.blog-posts li {
  display: block;
  padding: 0px 0;
}

ul.embedded.blog-posts li a {
  display: block; /* Forces the link title to be on its own line */
  white-space: normal; /* Allows the title to wrap if it's too long */
  text-decoration: none;
}

/* Show any <p> that contains an image */
ul.embedded.blog-posts li p:has(img) {
  display: block;
}

/* Hide <p> that do NOT contain an image (plain text paragraphs) */
ul.embedded.blog-posts li p:not(:has(img)) {
  display: none;
}

Here's the notes blog CSS styling:

ul.embedded.blog-posts li {
  display: block;
  padding: 2px 0;
}

/* Hide only the title link in embedded posts */
ul.embedded.blog-posts li > a {
  display: none;
}

/* Underline the date of embedded posts */
ul.embedded.blog-posts li time {
  text-decoration: underline;
  font-weight: bold;
}

I'm also thankful for this blog from @Ava which helped me figure out how to add a small time stamp to each post on the notes blog and make it look more like a typical Twitter feed.

Both these blogs will allow me to get further away from Twitter and Instagram and allow me to house all my content here on my own site.

I'm planning to backfill the photo blog with most (or all?) of my Instagram photos, and I'm pretty happy with how that site is currently set up.

The notes blog is extremely minimal (which I like) and still has a few issues, though they aren't deal breakers:

• I need a title for each individual note. I'd rather just be able to post the content without a title.
• The time stamp is a manual add. It would be nice if I could get the time added automatically when I click publish.

I went back and forth on whether I even needed a micro-blog like this, but now that I have it up and running I'm excited about it.

OK, that'll wrap this edition of blog housekeeping.

Update: I've tweaked the site layout and am no longer using the subdomain structure mentioned here. The updated note and photo pages themselves still look similar, but everything is now housed in one blog and on my main site. I've updated the links in this piece so they aren't broken but kept all the content in case anyone wants to run a sub domain setup and wants the help.

#blogs #writing