Kahlil Lechelt

The Kiko Micro.blog Theme Refined: "Kiko: System"

Update: I made a few tweaks to the CSS. The code below is updated.

It‘s happening 🎉. I am moving my personal blog to Micro.blog. I was hesitant at first because I really wanted to port my current blog design over. But after seeing the theme customization @dialog did I thought: hey that is not half bad!

They are using the Kiko Theme with the Roboto font, which is endlessly appropriate of course because they make the Micro.blog Android app and Roboto is the Android system font.

I am calling my Kiko customization “Kiko: System” because I am using a system font stack in order to use the system font depending on the OS the page is being viewed on.

This means the site will use San Francisco on Mac and iOS, Segoe on Windows and something like Ubuntu on Linux etc.

These fonts really look good in their respective OS environments.

On top of that I also refined the home page layout as well as the single post layout a little bit for readability and – in my eyes – beauty.

If you want the same look for your Micro.blog or base your theme customization on mine you can just set “Kiko” as your theme and paste this pile of CSS into your custom CSS field:

 html {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-weight: 400;
  color: #515151;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.3;
}

h1 {
    font-size: 1.5rem;
}

header {
  margin-bottom: 2rem;
}

a {
    color: #515151;
    text-decoration: none;
    border-bottom: 1px solid #515151;
}

a:hover, a:focus {
    text-decoration: none;
}

.container {
    max-width: 30rem;
    padding: 2rem 1rem 2rem 1rem;
}

.masthead-title {
	font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    padding-top: 2rem;
  	font-size: 2rem;
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .masthead-title {
        font-size: 1.7rem;
    }
}

.masthead-title a {
    color: white;
    border-bottom: none;
    background: #333;
    padding: 5px 10px 7px 10px;
}

.masthead .masthead-nav {
	text-align: center;
    margin-bottom: 4rem;
}

.masthead .masthead-nav a {
    color: #aaa;
    font-weight: 400;
    text-transform: none;
    font-size: .9rem;
    border-bottom: none;
}

.masthead .masthead-nav a:hover, .masthead .masthead-nav a:focus {
    color: #8f8f8f;
}

.list-item.h-entry {
    margin-bottom: 3rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 2rem;
}

.list-post-date a {
    color: #268bd2;
    text-decoration: none;
    border-bottom: none;
}

.masthead-title--small a {
    color: white;
    position: relative;
    border-bottom: none;
}

.masthead-title--small a:before {
    content: "← home";
    position: absolute;
    left: 0;
    color: #ccc;
    font-weight: 400;
    text-transform: none;
    font-size: .75rem;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease
}

.masthead-title--small a:hover:before {
  color: #8f8f8f;
}

.page-title {
    margin-bottom: .5rem;
    font-size: 1.7rem;
}

.post-date {
    color: #ccc;
}

.home-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}