paulinhapenedo/11ty-garden

This is my digital garden/playground, my little safe space on the web.

11ty-garden's Issues

Update README

Configure theme colors (light/dark)

/* Retrowave / Synthwave colors */
  /* Sony Dynamicron T-120 VHS */
  /**
      Working color combinations (contrast):
      - With bg as paper:
        - black, red, purple
      - With bg as yellow:
        - black
      - With bg as red:
        - paper
      - With bg as purple:
        - paper
      - With bg as black:
        - paper, yellow
    */
  --paper: #f2eee3;
  --yellow: #fec52e;
  --red: #b81937;
  --purple: #af01cf;
  --black: #10110b;

Setup custom domain on Netlify

Design "All Tags" screen

Refine blog post layout

Improve pagination to blog post listing

Configure Inter as custom font

Design tag screen

Add CSS minification

Motivation

We are already minifying the inline CSS with the font-face declaration. This issue is to handle the index.css (or multiple css files, if we decide to go with the code-splitting by route approach).

Maybe https://github.com/benjaminrancourt/eleventy-plugin-files-minifier?

Enhance footer spacing

Add SASS

Motivation

I wasn't gonna use any preprocessor, but the CSS file is getting huge with everything I'm adding from Utopia (spaces and types), color schemes and stuff, so SASS will be used for better DX.

Will be following this tutorial https://11ty.recipes/recipes/add-a-sass-workflow/

Write About Me content

Configure CI/CD automation

Add Prism.css only to posts with code snippets

Motivation

To avoid loading an unnecessary Prism.css file on pages where we are not gonna show code snippets, we should remove it from the base.njk file and only add it to the templates where it's required.

<link rel="stylesheet" href="{{ '/assets/css/prism.css' | url }}">

Configure Open Graph tags

Handle FOUT with custom fonts

Motivation

Lighthouse audit is signalizing that CSS is a problem because of the flash of unstyled text, or FOUT.
Right now, the approach used is to have a CSS file for the font-face declarations and import this file using native's @import declaration. Because of that, the main CSS file takes longer to load since it needs to wait for all fonts to be loaded before rendering everything else.

Checklist

• Research approaches to avoid FOUT (font-display: swap is implemented already);
• Maybe we need to minimize the CSS?
• How to handle Prism CSS: could we only render it when we know that we are gonna show some code?
• Remove DankMono from monospaced variable
• Add DankMono to Prism CSS

Make tables responsive

markdown-it doesn't allow tables to be wrapped in HTML tags like div, making it impossible to use the overflow approach.
The only other option is to collapse the rows, or columns, to better display the information to the user.

I could use HTML inside the markdown file, but that's the last resort.

Add Favicon

Motivation

We need a favicon. Simple as that.
Maybe an owl? A penguin? Something while we wait for May to draw my chibi versions.

Checklist

• Dark mode
• Light mode

Add #til content