Manton Reece

Years ago my wife and I were in Vegas and had a chance to see Elton John… and missed it. This year, when I realized he was playing in Toronto on the night of our 20th anniversary, I bought tickets as a surprise birthday gift and we planned a short trip around the concert.

We arrived in the late afternoon earlier this week, took the airport train to Union Station and the subway to our hotel, then went down to Polson Pier to catch the sunset. We had dinner and explored the Distillery District before checking out Jurassic Park for the Raptors game — too late, they had already closed it off — and settling for beers at the sports bar next door to watch the end of the game.

The next day we did a bike tour of the city. On the way to meet the guide, we wandered down a street to look at the trees and a woman said hi as she walked by. Realizing we were tourists, she stopped and told us that she had been friends with Jane Jacobs, who lived just a block away. There’s a sign outside her old house.

The bike tour was a great way to see a bunch of Toronto. Murals, CN Tower, trains at Roundhouse Park, sculptures at Ireland Park, the university, and several neighborhoods. We stopped for hot chocolate and then back on our own visited a couple libraries including the Sherlock Holmes room at the Toronto Reference Library.

Dinner in Little India and then the streetcar back for the concert. We loved it. Even with just a couple days we really got a lot out of visiting the city. Looking forward to coming back one day.

Test

Saturday

Friday

Wednesday

Saturday

Friday

An excellent improvement to Micro.blog was announced last month. The addition of custom templates via the implementation of the Hugo framework makes hosted blogs endlessly customizable.¹ The easiest way to get started is to clone an existing theme from an account’s design page and use the existing structure to change just about every detail of a hosted blog. It’s really quite remarkable how much control @manton has added by switching the build engine to Hugo.

Hugo Templates

I’ve been reading through the Hugo docs in my spare time this last month and I’ve made a few notes along the way which I thought I would share. First, here’s a list of the template file names used by the average Hugo theme:

static/css or static/assets/css: the folder where the CSS file for a theme will be found. This is where most (if not all) customizations are made.
layouts/list.archivehtml.html: the page to make adjustments to the blog archive.
layouts/_default/baseof.html: provides the main structure of every page served by a blog.
layouts/post/single.html: provides the layout for every post.
layouts/_default/single.html: provides a backup layout to load when layouts/post/single.html fails or doesn’t apply.
layouts/post/summary.html: provides the layout for the individual posts listed on a blog’s front page.
layouts/index.html: provides the pagination structure of the front page.
layouts/_default/list.html: builds the front page of a blog based on an index of the individual posts’ summaries.

Get to Theming

It’s not hard to clone an existing theme and personalize just about every aspect of it. In the account page, Navigate to Posts then Design and Edit Custom Themes. From there clicking on New Theme will prompt you for a URL of a Hugo Github repo to clone. Micro.blog themes can be found here. If you want to be more adventurous you can clone any Hugo theme and follow the instructions from this video by Manton.

From here it’s just a matter of digging into the CSS file to make your blog look any way you like. I used the Arabica because it’s very simple and I really like the pop up footnotes² which are implemented through Javascript that’s beyond my knowledge but I don’t need to know because it’s built into the theme.

Basic changes to CSS can make a big difference in the overall look of any site. Start with text adjustments like font, colors, size. You can chose a Google font, copy one line of code to your partials/head.html file. The Google fonts site walks you through the process but the link looks something like this <link href=\"[fonts.googleapis.com/css](https://fonts.googleapis.com/css?family=FONT+NAME)\" rel=\"stylesheet\">. Once you put the link into your head file, set the font for the body tag or headings in your CSS file. In Arabica a Google font is already loaded so all you have to do is change the name of the font linked and change the CSS file accordingly.

Next you can make the font color lighter for ease of reading or pick something colorful just so you can remake a late 90’s Geocities look. Change the sizes of the Headings (h1, h2... h6 tags) to your liking. Or change the style of your header to make it smaller and left aligned. Here are some CSS selectors in Arabica to get you started:

.blog-title: class for the main title of your blog. Mine is uncrtn blog.
.blog-description: class for the link to your Micro.blog timeline.
.nav: class for pages linked in the header.
.post: class for the body of a post.
.site-footer: class to edit your blog footer.

Some Marfa Additions

Lastly, as part of my ongoing theme edit I copied some stuff over from the Marfa theme into my Arabica based theme.

Search Field

For a Marfa-style DuckDuckGo search insert this code into the CSS file:

 #search input.field {
    width: 600px;
    height: 2rem;
    font-size: 0.777rem;
    font-weight: 300;
    padding-left: 1rem;
    border: 1px solid #eee;
    margin: 1rem auto;
    border-radius: 9px;
    -webkit-appearance: none;
}

And add this to the layouts/partials/footer.html file:

<form method=\"get\" id=\"search\" action=\"[duckduckgo.com](https://duckduckgo.com/)\">
    <input type=\"hidden\" name=\"sites\" value=\"%20%22/%22%20%7C%20absURL%20\"/>
    <input type=\"hidden\" name=\"k8\" value=\"#444444\"/>
    <input type=\"hidden\" name=\"k9\" value=\"#ee4792\"/>
    <input type=\"hidden\" name=\"kt\" value=\"h\"/>
    <input class=\"field\" type=\"text\" name=\"q\" maxlength=\"255\" placeholder=\"Search…\"/>
    <input type=\"submit\" value=\"Search\" style=\"display: none;\" />
</form>  

Micro.blog timeline link

For a Marfa like avatar and timeline link at the bottom of your posts add this to your CSS file:

 #post-meta {
    font-size: 13px;    
    font-weight: bold;
    line-height: 1.5;
    border-top: 1px solid #eee;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 60px;
    border-bottom: 1px solid #eee;
    display: block;
}
 #post-meta div span {
    color: #212121;
    font-weight: 500;
    display: block;
}
 #post-meta a {
    color: #000;
}
 #post-meta img.avatar {
    height: 36px;
    width: 36px;
    float: left;
    margin-right: 15px;
    margin-top: 0;
    border-radius: 50%;
}  

Then add this to your /layouts/post/single.html file:

<section id=\"post-meta\" class=\"clearfix\">
  <a href=\"/\">
    <img class=\"u-photo avatar\" src=\"%20.Site.Author.avatar%20\">
    <div>
      <span class=\"p-author h-card dark\">%20.Site.Author.name%20</span>
      <span><a href=\"[micro.blog/%20.Site....](https://micro.blog/%20.Site.Author.username%20)\">@%20.Site.Author.username%20</a></span>
    </div>
  </a>
</section>

Anyway, those are just some of the changes I’ve made so far. As always, feel free to correct me if I’ve done some thing wrong and if you have any questions be sure to ask.