A small mnml update on the way (v2.5.5) that adds Chinese (Traditional) localization – props to @bobbytung – and tweaks a couple styles that you won’t even notice.
Thanks to @manton, I’ve been able to lay claim to the much coveted short Micro.blog username of just @jim. So if you’ve known me by @jimmitchell, I’m even cooler than I was before. 😁
We’re about to go and try to pick up the RV for the second time. I’m really hoping for all the things to be fixed this time.🤞🏻
Well damn… Not very good news from the cardiologist today. Significant blockages and calcification found. The one good bit of news in it is we’ve caught it in time to do something about it. Paying the tax on all those cheeseburgers, I guess.
The feeling when you see the number of tasks in your task manager and realize you’ve been kicking too many tasks down the road lately. I’ve got a lot on my plate today for sure.
After receiving some glowing recommendations for the Logitech MX Master 3S For Mac online and getting a comprehensive review by email (thank you, @luxury_format), I dropped the cash for one. I’m hoping it lives up to the hype, y’all…
Using Phosphor Icons for Micro.blog Navigation
This post walks through how I’m using Phosphor icons for the Mastodon, Github and Search navigation links on my blog using the mnml theme.
While mnml supports the use of icons in page and navigation titles now, I wanted to use only icons when browsed on desktop screens, but use the actual page title links without icons for the mobile responsive menu…
First, the Disclaimers...
This method might work for other themes. I haven’t tested it nor can I support other themes.
With some tweaks, you could probably use the Font Awesome Plugin for your icons instead. This tutorial doesn’t cover that.
Before you publish my code to your live site, I very strongly encourage you to try it out on your Micro.blog test site first. I can’t be held responsible for anything breaking.
Also, don’t change your theme styles directly. It’s best to use the Micro.blog Custom CSS option to apply styles.
Let's Do This!
The first step is to decide which Phosphor Icons for Micro.blog set you want to use. My example uses the “Regular” set.
You should also get the Unicode values of the icons you want to use from the Phosphor Icons website in advance. See comments in the code below about using Unicode values.
The next step is to create your pages and get their url. In this example, I’ve created a Mastodon page with redirect.
With all the pages I want to use icons for published, knowing their urls, and having icon Unicode values, the final step is to add this CSS to my Micro.blog Custom CSS.
Follow along with the comments in the styles to understand what each declaration does. You should be changing the a[href$="/url/"] selectors to match your own urls.
/* first, let's move the actual nav links off page way to the left */
.nav-item a[href$="/mastodon/"],
.nav-item a[href$="/github/"],
.nav-item a[href$="/search/"] {
text-indent: -9999px;
display: inline-block;
line-height: 1;
}
/* add icons to the ":after" pseudo element, set their text indent to 0 */
.nav-item a[href$="/mastodon/"]:after,
.nav-item a[href$="/github/"]:after,
.nav-item a[href$="/search/"]:after {
color: var(--accent-3);
font-family: "Phosphor"; /* Note: the font family will be different based on which plugin you use */
text-indent: 0;
display: flex;
justify-content: flex-end;
margin-left: auto;
line-height: 0;
}
/* adjust icon left margins after the first icon to look better */
.nav-item > a[href$="/github/"],
.nav-item > a[href$="/search/"] {
margin-left: -.75rem;
}
/* remove text underline on hover for desktop because it just doesn't look right to me. */
.nav-item > a[href$="/mastodon/"]:hover,
.nav-item > a[href$="/github/"]:hover,
.nav-item > a[href$="/search/"]:hover {
text-decoration: none;
}
/*
Set the element "content" to the font unicode from the Phosphor icon site.
To get this, find the "U+XXXX" value of the icon and use the "XXXX" value.
Example: "U+ED68" for the Mastodon icon is equal to "\ed68" for content.
Refer to the Mastodon screenshot above.
*/
.nav-item a[href$="/mastodon/"]:after {
content: "\ed68";
}
.nav-item a[href$="/github/"]:after {
content: "\e576";
}
.nav-item a[href$="/search/"]:after {
content: "\e30c";
}
/* use specific brand colors on hover, because it looks better */
.nav-item a[href$="/mastodon/"]:hover:after {
color: #563acc;
}
.nav-item a[href$="/github/"]:hover:after {
color: #08872b;
}
.nav-item a[href$="/search/"]:hover:after {
color: var(--link-hover);
}
/* use specific brand colors on hover in dark mode, because it looks even better */
@media (prefers-color-scheme: dark) {
.nav-item a[href$="/mastodon/"]:hover:after {
color: #858afa;
}
.nav-item a[href$="/github/"]:hover:after {
color: #5fed83;
}
}
/*
finally, for the mobile responsive main menu,
remove the icons and "unhide" the navigation link text.
*/
@media only screen and (max-width: 768px) {
.nav-item a[href$="/mastodon/"],
.nav-item a[href$="/github/"],
.nav-item a[href$="/search/"] {
text-indent: 0;
display: block;
margin: 0;
}
.nav-item a[href$="/mastodon/"]:after,
.nav-item a[href$="/github/"]:after,
.nav-item a[href$="/search/"]:after {
content: "";
}
/* add link text-underline back since we're not using icons anymore */
.nav-item > a[href$="/mastodon/"]:hover,
.nav-item > a[href$="/github/"]:hover,
.nav-item > a[href$="/search/"]:hover {
text-decoration: underline;
}
}
That’s all there is to it.
The styles may look scary, but they’re not really.
I’m happy to answer questions, but hope you can understand if I decline to write or tweak styles for your specific needs. Use my contact page to get in touch with questions.
Of course, if you really wanted me to write code for you, I might be convinced should you decide to buy me a coffee or two…or three. Or maybe you decide what it’s worth to you. 😁
Happy style hacking!
Along with duct tape and Velcro, I think one of man’s greatest inventions has to be the zip tie.
My new Keychron keyboard arrived today. After just 10 minutes of use, I’m 100% a mechanical keyboard convert… Now I need a good mouse to pair it with. Any recommendations? I’ve been using an Apple Magic Mouse forever.
And finally, all six sets of Phosphor Icons for Micro.blog have been made available as plugins. That’s it. I’m done flooding your timeline for the day, maybe…
Hot on the heels of last night’s mnml release, I’ve made some additional updates to fix some category related class output and add styling for the <figure> and <figcaption> html elements. Version 2.5.4 is the latest.
Another mnml Release
A new release of mnml has been published that adds the following features:
- Added Microformats to make mnml compatible with the new “use blog theme” preview feature added to the Micro.blog for macOS application. Props to @manton for sharing a pull request to get me headed in the right direction.
- For those who would like to use icons in their navigation menus, or page and post titles, this release adds the ability to use Fontawesome or Phosphor Icons. A post will be coming over on mnml.micro.blog with more details about this feature soon.
You should see an update available in your plugin listing soon if you don’t already. As always, thanks to all who continue to support mnml development.
It’s been a minute, so for the new folks… Here’s the semi-irregular reminder that a Micro.blog t-shirt is available for purchase here.
I’m working on a series of Micro.blog plugins to add the different Phosphor Icon Sets to your Micro.blog site. The first plugin for the “Regular” set is available now. More sets coming soon. A post how to use the icons will come in a few days.
I think I’ve found just about the most perfect Lofi Jazz station on Apple Music there ever was…
It can be frustrating how quickly the best laid task management plans can go awry because a seemingly simple little thing turns into a big gnarly thing. Today is shot. Officially moving all scheduled tasks to tomorrow…
Trying something different… I’m going to set my personal Mastodon instance aside for a bit and just use Micro.blog with its Fediverse features over the next few weeks to see if I like it better. If you saw me follow you from my dot-org domain, it’s legit.
The office has been watching the Big Bear eagle nest cam on the open space TV since before the chicks hatched. The juveniles are now about to fledge. Whenever one of them tests their wings, the whole office pauses to see if this the time that one leaves the nest. 🦅
I finally found the cable to my Garmin Instinct watch. It’s been so long, I’ve forgotten how to operate the darned thing. I hope the battery isn’t toast by sitting uncharged for so long…
A mnml Micro.blog theme update just dropped adding some cool features that have been requested by a few users…