Apple Memoji

Ramblings from Josh Sullivan

Home About Archive Micro Photos Tags Wiki

My Journey into CSS

First Excursion

When I first started to play with CSS on about a month ago, I copied and pasted from a couple of other sites on 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 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.


Currently, on my blog, the upper right-hand Navigation is set to blue highlighting while hiding the Also on” 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

.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 link was due to the link already existing under the Profile Avatar. I’m also thinking of creating a See Profile on link instead due to being unable to change the text in the Also on


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 {
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 {

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, but once I found Manton’s code to hide that I stopped using these changes.

Change the Background and Border color of Also on

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

Change the Hover Color of Also on

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


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 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. code css
Previous post
Sunrise on Hingham Bay.
Next post Dark Theme Changes I’ve compiled a list of CSS changes that were necessary to make the transition from the modified Marfa theme I was using to a Dark themed Marfa.

An IndieWeb Webring 🕸💍