Feedbin now offers read later capabilities called Pages. The official app also has a built in share extension in iOS.

Absolutely killer.

Big day.

Whenever I finish a big customization with my Micro.blog design, I like to write up a blog post and share it with the community.

That little act of sharing paid off today! I overwrote the customizations to my podcast feed, so I pulled up my written instructions and I’m back in business.

Ummm, where did iCloud Tabs go in iOS 13/Safari 13?!

A few weeks ago, I wrote about a method that I used to swap out my site logo in dark mode. In that post, I wrote about you can use some custom CSS to display a different logo when a browser was in dark mode.

It wasn’t a very elegant method, but it got the job done. There was, however, a huge drawback. The Kiko theme sets the header logo/blog title as a link back to your site’s root. By replacing the logo in the way I shared in the post referenced above, the link broke. In essence, my blog showed the correct logo in dark mode, but visitors no longer had an easy way back to the home page.

I now have a better way of accomplishing the same objective.

As a reminder, I’m using a custom version of the Kiko theme.

Setting Up Your Site Logo

1. Upload both light and dark mode versions of your logo to your Micro.blog account. Copy the links and have them ready to go.

2. Go in to your custom theme in the Micro.blog Design dashboard. Open the layouts/partials/header.html template.

3. You’re now going to load your image URLs into the <a> links <h1 class> area. Just copy and paste the URL for your light mode logo into the place of the URL link currently in the template. Then copy and paste that whole <a> link, and load your dark mode logo URL into the second link. Make sure that you update both alternate descriptions!

4. That will put both images in your header, the light and dark versions. Within those links, you’ll need to define a custom class. Simply add class="logo-dark" immediately after the logo URL and before the </a> tag in the first link. Add class="logo-light" to the second link, again, immediately before the </a> tag. This is what will allow us to use CSS to get across the finish line.

5. Save that template. If you refresh your blog, you should see your light mode logo stacked on top of your dark mode logo in the header.

Now we’re going to get them to show up when we want them to. Go into your Custom CSS on the Micro.blog dashboard Design tab.

We’re going to use the CSS display property to show and hide the correct logo version in the correct browser light/dark setting.

First, let’s focus on the light mode of your website. We don’t want the dark mode logo to show up when the browser is in light mode. We’re going to hide it by adding this CSS:

.logo-dark {display: none;}

Now, let’s configure your dark mode logo. In dark mode, we want the light mode logo to hide and the dark mode logo to show up.

Find the @media query in your CSS where you’ve done all of your other dark mode styling. Add the following CSS within the {} of the @media query:

.logo-light {
		display: none !important;
}

.logo-dark {
		display: inline !important;
}

There you have it! Your site logo will switch as expected between browser light and dark modes. Go ahead and test it out!

My thanks to Manton for giving Micro.blog users the flexibilty to edit and customize blogs from within Micro.blog!

Sometimes, the best solution is the simplest.

I had no idea that I could class specific links. That technique fixes all of my light mode/dark mode image link issues.

I had an idea this morning while getting ready for the day. What if I used a custom div and the CSS display property to swap out images between light and dark mode?

BOOM! It works!!!

Almost a week of unsweetened coffee. I was missing a real treat! ☕️

I have two HomeKit garage door openers. Siri in iOS 13 CarPlay always helpfully offers me the wrong one.

Nice day for a walk in the park.

One of my favorite weather phenomena.

I got a new bow tie with a logo in the print. Apparently they didn’t have anyone who knows how to tie them, because the logo is upside down when the knot is finished.

I did solve it by tying the tie inside out. You can only tell if you look under my collar. Still funny.

Matt Maher on the HomePod while we eat breakfast and get ready for Mass. This is a fantastic Sunday routine. 🎵

Good morning.

Whenever a website asks me for my Twitter or Facebook URL, what’s to stop me from just putting my Micro.blog link?

Might be the Best iOS 13 feature.

I spent some time this week tweaking my footer. I want to spread the word about Micro.blog, but in a way that suits my style. A few folks asked for the code that I used, so here it is!

The first link is to the Micro.blog homepage, while the svg Micro.blog icon links directly to my profile. Make sure to update the link for the svg or your visitors might end up someplace they weren’t expecting!

As a reminder, this is set-up for the Kiko theme, and I have this snippet in the “Edit Footer” area on the Micro.blog Design tab.

<div class="center">
<center style="padding-bottom: 35px;">
  <p>An independent website powered by <a href="https://micro.blog">Micro.blog</a></p>
<p>© 2019 Chet J. Collins </p>
<p style="margin-bottom: 0px;">
<a href="https://micro.blog/chet">
<svg style="width: 24px; height: 24px; fill: #FD9927;" xmlns="[www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 482.79 486.16">
<path class="cls-1" d="M495.79,372.06c32-37.64,51.11-85,51.11-136.5C546.9,113,438.82,13.72,305.5,13.72S64.1,113,64.1,235.56,172.18,457.4,305.5,457.4a259.65,259.65,0,0,0,86.2-14.58,7.78,7.78,0,0,1,8.81,2.77c20.17,27.23,51.67,46.38,86.7,54.17a4.79,4.79,0,0,0,4.74-7.65,94.37,94.37,0,0,1,4-120.11ZM420,209.48l-62.17,47.19,22.56,74.72a7.06,7.06,0,0,1-10.79,7.84L305.5,294.68l-64.09,44.55a7.06,7.06,0,0,1-10.79-7.84l22.56-74.72L191,209.48a7.06,7.06,0,0,1,4.12-12.68l78-1.63,25.67-73.71a7.06,7.06,0,0,1,13.33,0l25.67,73.71,78,1.63A7.06,7.06,0,0,1,420,209.48Z" transform="translate(-64.1 -13.72)" />
</svg>
</a>
</center>
</div>

There’s a ton of health information on the Internet, but much of it is spurious.

It’d be great if a big research hospital funded a consumer-focused health information website.