On this day last year, I had finished reading my 22nd book of 2018. Today, I just finished my 31st.

I give full credit to IndieBookClub and Goodreads for my success. I love tracking my progress and creating a permanent record on my blog.

Hitting your reading goal is attainable if you can budget an hour per day to it.

I am thoroughly convinced that standard clothing sizes have gotten bigger over the past decade.

The paperback proof of my new book just arrived.

I always love the experience of seeing my work in print for the first time.

My autumn magnet game is strong.

Okay, Audio Sharing is really cool.

WeWork’s Adam Neumann Steps Down as CEO

The company’s founder will remain nonexecutive chairman but cede majority control

Juul CEO to Exit and Philip Morris, Altria End Talks as Vaping Scrutiny Intensifies

The chief executive of e-cigarette startup Juul Labs Inc. abruptly stepped down on Wednesday, as U.S. efforts to combat underage vaping threaten to upend the trendy alternative to smoking.

eBay CEO Devin Wenig Resigns

Wenig has left the online marketplace citing conflicts with the company’s new board, which is overseeing a strategic review of the business.

Real estate photographers are misleading.

We had the luck of a little rainbow appearing low over our backyard during a thunderstorm.

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.