My Marfa Theme Custom CSS

I use the Marfa theme on my Micro.blog. It’s the best looking default theme to start with, but I want things scaled back, colours toned way down to monochrome and all links to look and behave consistently.

Below is my custom CSS. Feel free to use this on your own site, as-is or modified. You can add a custom style sheet to your Micro.blog by going to Posts β†’ Edit Domain & Design β†’ Edit CSS. You can then paste the CSS below into the text box to make your Marfa-themed site look like mine.

/* Make the "Also on Micro.blog" lozenge and the "Follow User on Micro.blog" link below the site header disappear. */

nav.main-nav a.cta, .profile #wrapper .p-role {
    display: none;
}

/* 
Make the normal link underlines appear a light grey
Bring links in various places into line with other links:
    div a: The link to your username in about blocks
    li article header h2 a: article titles
    p a: Regular links within an article
    #footer a; links in the footer
    nav.main-nav a: Links in the main list 
    .h-entry .u-url: Date links on the archive page.
*/

nav.main-nav a, #footer a, #post-nav a, p a ,div a, li article header h2 a, .h-entry .u-url {
    box-shadow: inset 0 -2px 0 #aaa;
    color: #000;
}

/* On hover, turn the box shadow on links black. Subtle but stylish. */

nav.main-nav a:hover, #footer a:hover, #post-nav a:hover, p a:hover, div a:hover, li article header h2 a:hover, .h-entry .u-url:hover {
    box-shadow: inset 0 -2px 0 #000000;
    color: #000;
}

/* after all that, make sure the linked avatar at the top doesn't have an underline. */

a.u-url, a.u-url:hover {
    box-shadow: none;
}

/* Reduce the space between the header and the content. */

.profile #wrapper {
    padding-bottom: 2em;
    border-bottom: 1px solid #eee;
}
Yorrike @yorrike