After settling down for the basic functionality of a website, its time to dig deeper and let some personality shines! We want your website to speak who you are, so enjoy the freedom of building anything possible, as it is one of the advantages of building your own website.

However, personal style does not just drop in one day. In fact, many designers have been developing styles for clients or companies, they may not have a clear answer.

I also had a long thought on this and I have put together a list of small changes that you can work on in order to discover your style. Most of my suggestions can be applied on blogging platform like Wordpress and Tumblr, as long as CSS can be customized. In my case, I'm using Gatsby and MDX, therefore I own more control over the visual style and integration between design and content.

I believe building a website is a continuous process and for myself, so none of these were designed in the first place when I first launched my website.

For Gatsby users, I have simply applied my styles by injecting CSS globally or referenced in a layout component file. Additional customized components are in my components folder. I am looking to share all the styles across my whole website, so I did not implement my style specifically in MDXProvider as some tutorials did.

1. Ordered and Unordered List

If you use lists in your blog all the time, you should definitely style your lists, all you need is CSS. Reset your style first by clearing all the margins and padding. Follow Josh Comeau to style your own ordered list.

ul li {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

You can replace the default bullet point by assigning an image or character.

ul li:before { 
  content: '\1f852';
  list-style-position: outside;
  }

The content property refers to the Unicode of the special character. Feel free to check all options here.

For ordered list style, I have realized Josh's way of using counter-rest: variable is not compatible when the list span through other elements (separated by a code block or image). But there's a new standard coming, a new pseudo-class ::marker is experimenting right now(which is not turned on by default by Chrome). You just need to make sure it fallback on non-compatible devices.

ol li::marker {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-light-700);
  font-style: italic;
}

2. Blockquote

Quoting from other people is a terrific way of getting backlinks and bringing more authenticity to your writing. I also use blockquote to emphasize the key messages in my writing.

A typical approach to style your blockquote would be using a different font and much larger text size. I also use the quotation mark for indication. Once again, you can use pseudo-elements :before for adding the quotation mark before the quote begins.

blockquote:before {
  content: "\201C";
  position: absolute;
  top: -20px;
  left: 0;
  width: 3rem;
  height: 3rem;
  font: 8rem "PT Sans", sans-serif;
  color: var(--color-primary-light-700);
}

Remember to set position:relative to the parent element so the absolute position could be fixed. In case you want to add the source of quote, an HTML element called <cite> can also added after the end of blockquote. However, Markdown does not support cite directly, so you have to type the markup by yourself.

> We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.
<cite>Donald Knuth</cite>

3. Strong & Link Style

Highlighting important statement in your writing or your conclusion help to guide your readers. In CSS, bolded sentence can also be tweaked in style, by adding more fun and grabbing the attention to it.

In Markdown, **Bold Style** would translate into <strong> in HTML. Then we could style the selector in CSS. Like this animated underline on Codepen, you can easily turn it into a highlight.

For example: premature optimization is the root of all evil.

In most cases, external hyperlinks on your site would be styled already. Please keep in mind links and highlight should be separated, so readers will able to distinguish which one is clickable and which one isn't.

4. Custom Components

This is the part where Gatsby excels at. Being able to build custom components meaning you have unlimited possibilities in displaying your content.

For starter, a Tip component would be an easy start making your article richer. You would be able to separate additional information with your writing.

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  background-color: var(--color-primary-background);
  border-left: 4px solid var(--color-primary-light-700);
  padding: 1rem;
  border-radius: var(--border-radius);
`;

const Title = styled.p`
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  display: inline;
  margin-right: 8px;
`;

const Tip = ({ children, className }) => (
  <Wrapper className={className}>
    <Title>Tip:</Title>
    {children}
  </Wrapper>
);

export default Tip;

Then in your markdown, remember to import Tip component. Then wrap Tip around the paragraph.

import Tip from "components/Tip"

<Tip>Tip Content</Tip>

I have also created a Film component for my quarterly documentary review blogs. These two are just the most simple component you can tailor for your own need. Imagine adding support for affiliate links, GPS, maps and more!

That's it. Here's an example of a custom component that I would love to try someday. This is a map module from Paul Stamatiou's photo journal'.

If you have more ideas or good inspirations in mind please feel free to share with me.

Read more

Takeaways from building a COVID-19 curatorial side project

I built a free resources curatorial site for COVID-19, and here are my lessons

Lessons learned from personal project

There is no better time to start your personal project than today. I have been living in the bubble of agency model for years taking client projects. There