My Journey into CSS

First Excursion

When I first started to play with CSS on Micro.blog about a month ago, I copied and pasted from a couple of other sites on Micro.blog with a link to the source in the CSS and used it for about a month. Sorry if this is frowned upon, but I’ve found the best way to learn is to copy and make changes until you understand what you are doing. Therefore, I clearly don’t mind if someone copies and pastes my entire CSS file for themselves.

This post will mainly be sharing my current custom CSS on Micro.blog using the Marfa theme ending with some thoughts on delving into CSS for the first time. So without further ado, I’ll start with Navigation.

Navigation

Currently, on my blog, the upper right-hand Navigation is set to blue highlighting while hiding the “Also on Micro.blog” button.

Hide Also on Micro.Blog

Source: Manton on Slack

.cta {
	display: none;
}
nav.main-nav a, #footer a, #post-nav a, p a{
   box-shadow: inset 0 -2px 0 #6495ED;
}
nav.main-nav a:hover, #footer a:hover, #post-nav a:hover, p a:hover {
	box-shadow: inset 0 -25px 0 #6495ED;
}

Reduce Padding around Profile (Avatar, Blog Name, Follow on micro.blog)

.profile #wrapper {
  padding: 20px !important;

I like the blue better and prefer all links and URLs to have the same color for consistency. Hiding the Also on Micro.blog link was due to the link already existing under the Profile Avatar. I’m also thinking of creating a See Profile on Micro.blog link instead due to being unable to change the text in the Also on Micro.blog.

Images

This section was borrowed from Miraz Jordan and adds a drop shadow behind photos.

Add Drop Shadow Behind Images

Source: Drop Shadow on Image - Miraz

img {
margin-top:1.5em; 
background-color: #ffffff; 
box-shadow: 5px 5px 5px gray;
}

Fix Avatar Padding

Source: Miraz Jordan

img#avatar {
margin-top:0; padding-top:0;
}

Center Avatar at the Bottom of Posts With Text

Source: Thank you to uncrtn for point this out

#post-meta img.avatar {
    margin-top:0;
}

Block Quotes

I’m a fan of block quotes but wasn’t a fan of the light text in the Marfa theme. I also remember having found a blockquote style I liked previously and had noted it would be fun to have on my blog when I got around to creating one.

Change the Color of Text and Border to Slimmer Light Shade Grey.

blockquote {
  color: #000000;
  background: #f9f9f9;
  border-left: 5px solid #778899;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

Add Open Quote Icon Before Block Quote.

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

Set the Quote to Start on the Same Line as the Icon.

blockquote p {
  display: inline;
}

Post List Changes

The first thing I changed with Posts was the dividing line. I wasn’t a fan of the thin line and wanted a more defined beginning and end to posts. Marfa has a much lighter font than I felt comfortable with, and the date was the same issue. Changing the date color then underlining it defined the link. Finally, the width always seemed too narrow, by expanding the width quotes look a little better.

Bold Post Dividing Line

span.divider {
    display: block;
    width: 100%;
    background-color: #000;
    height: 1px;
    margin: 0 auto;
}

Increase Post Width

#wrapper {
    max-width: 50rem;
    margin: 0 auto;
    padding: 25px;
}

Underline and Change Color of Date

.dates {
  text-decoration: underline;
  color: #2F4F4F;
}

Change Post Text to Darker Solid Black

body {
  font-size: 18px !important;
  color: #000000 !important;
  line-height: 1.6 !important;
} 

Archive Page

Bold Header in Archive Page

b, strong {
    font-weight: bold !important;
    color: inherit !important;
}

Marfa Specific

This section was borrowed from uncrtn blog to fix issues with Lists and Superscript on the Marfa Theme.

Correct Ordered Lists in Marfa Theme

Source: Uncrtn on Slack

.post-body ol li {
list-style-type: decimal !important;
} 

Fix Superscript on Marfa Theme

Source: Uncrtn on Slack

sup { 
    vertical-align: super;
    font-size: smaller;
}

Didn’t Make the Cut

I originally had the follow changes to change the color of Also on Micro.blog, but once I found Manton’s code to hide that I stopped using these changes.

Change the Background and Border color of Also on Micro.blog

nav.main-nav a.cta {
	background: #fff;
	color: #00507f;
	border: 2px solid #00507f;
}

Change the Hover Color of Also on Micro.blog

nav.main-nav a.cta:hover {
	background: #6495ED;
	color: #00507f;
}

Conclusion

Overall this might not seem like a substantial change, but so far I am pleased with the progress I’ve made. I think my next changes will be trying to find a dark background and light text so that I can have a light theme and dark theme blog, who knows by the time you read this you might already be reading it on a dark theme.

I encourage anyone to reach out to me on Micro.blog if you have questions, suggestions, or comments. I’m sure some of the above could be changed or improved so please reach out if I’ve done something wrong or you have a better way of accomplishing it.

Josh Sullivan @joshsullivan