Redesign: Lego

May 09, 2020
São Paulo, Brazil

I’ve been away from this project for over a month now. As you might have noticed, I ended up taking a little bit of a hiatus as the world got a bit scary ever since1. Still, here we are, learning how to get to the other side of this together.

This past month I avoided jumping into code after work and enjoyed some time away from the screen — mostly reading Frank Herbert’s Dune. I think I’m getting the hang of the quarantine now and feel more comfortable to slowly get back to this website.

I wanted to talk about some of the main layout bricks used here as well as how I’m structuring the bits of code that make them.

Type scales

Most styling frameworks today — Gatsby’s standard included — have pretty decent type scales. This considering the fact I’m not the type of designer that normally pushes for HUGE fonts but also care about accessibility enough to avoid a 8pt body text. For a project like this, using all styles from h1 to h6 plus paragraph seems a bit of an overkill. I won’t be using these many styles and think 4 or 5 might be more than enough for now.

For the font-size at HTML level I am using Gatsby’s default of 112.5%/1.45em (18px instead of the browser’s default of 16px). And then for each text tag I’m using rem units. I have completely discarded h6 and will try to not use h2 either which leaves me with 4 title styles and one for paragraphs.

After some minor letter-spacing adjustments, here’s what I got.

h1

This is a title text

h3

This is a h3 text

h4

This is a h4 text

p

This is a body text

h5
This is a label text

As I’m using markdown to write 99.99% of this website, I decided h4 will have the same size as p with just a different weight and color, giving me more flexibility to play with stiles when writing.

Variables

For now I’m using mostly colour variables but this will likely expand in the future to spacing too.

Background colour

--bg-lightest
--bg-light
--bg-mid
--bg-dark
--bg-darkest

Accents

--primary
--accent

Font colour

--font-high-contrast
--font-mid-contrast
--font-low-contrast

Light and dark

In the future this site will support different colour themes — but if you know how to inspect code in you can already see it in action by adding data-theme="dark" inside the <html> tag.

[data-theme="default"] {
  --bg-lightest: #fff;
  --bg-light: #f7f7f7;
  --bg-mid: #e2e2e2;
  --bg-dark: #dbdbdb;
  --bg-darkest: #d1d1d1;
  --bg-frosted: #ffffffe8;
  --font-high-contrast: #000000ed;
  --font-mid-contrast: #000000ad;
  --font-low-contrast: #0000004f;
  --font-inactive: #cecece;
  --accent: #ffeb82;
  --primary: #2f80ed;
  --primary-bg: #2f80ed12;
  --bg-code: #dcf5ff;
  --code: #ffe2f1;
}
[data-theme="dark"] {
  --bg-lightest: #222222;
  --bg-light: #1e1e1e;
  --bg-mid: #181818;
  --bg-dark: #131313;
  --bg-darkest: #0a0a0a;
  --bg-frosted: #323232de;
  --font-high-contrast: #fffffff7;
  --font-mid-contrast: #ffffffb8;
  --font-low-contrast: #ffffff4d;
  --font-inactive: #3f3f3f;
  --accent: #00877b;
  --primary: #ffcec3;
  --primary-bg: #ffcec312;
  --bg-code: #00877b;
  --code: #fff;
}
Go ahead, inspect and add data-theme=“dark” to the html tag ;)
Go ahead, inspect and add data-theme=“dark” to the html tag ;)

Grid and page body

Oh, grids. This is going to be an unpopular opinion. For the past couple of years I’ve been designing mostly for mobile and my process has involved very little — if any — use of grids. While many of my friends are skeptical about this opinion, grids for me have a similar importance to setting the table for dinner.

Setting the table is an important part of the dinner ritual, and you could spend hours making it perfect — aligning silver and dishes, matching table cloth and napkins — but table setting isn’t anyone’s final goal (I think). I’m a fan of simpler table arrangements that succed at placing the meal under the spotlight.

Here I’m using a single column layout where, every now and then, an element will break the vertical monolyth — without a pre-determined grid, of course.

Truth be told: if you know the basics of CSS, a project like this doesn’t require a grid and can make good use of more automatic layout rules (flexbox’s justify-content is a good example of that).

As mentioned before, I’m challenging myself to build this without any @media in my code, meaning the same lines of style should work across different sizes of devices. For the body of text, I’m using a simple max-width: 60rem.

Markdown and frontmatter

I’m using Markdown to write every page in this website except for the home. Making Markdown powerful is a critical part for the success and speed of posting new work so I’m writing the React template in a way that will allow me to control things such as background colour for an icon or images all via frontmatter.

Blog posts and case studies

The main structure you see here should work for both case studies and blog posts. I’m writing the same React template and adding only a few lines of conditionals that will help only display the field if the content exists in the markdown file.

Sneak peak: “Doing”

I am now working on the about me page and exploring ways to show what I am doing during the quarantine. The idea still needs to mature — and I don’t want to make it a side project within a side project. For now I’ll just leave you with this.

doingSection 1


  1. In case you’re reading this from the future, I’m writing during the COVID-19 pandemic.