Andy-set-studio

const postcss = require('postcss');

const colorData = {
  "Dark": "#030303",
  "Dark Glare": "#171717",
  "Mid": "#444444",
  "Mid Glare": "#cccccc",
  "Light": "#ffffff",
  "Light Shade": "#f7f7f7",
  "Primary": "#FF006A",

Andy-set-studio

This is from an initial grab of 1000 items from https://viewport-logger.netlify.app/.

There's a count of 630 items because they are grouped. The count property is how many instances of that width and height combo exist in the raw dataset.

Andy-set-studio

.cutout-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  aspect-ratio: 1920/839;
}

.cutout-hero :is(img, picture, video) {

Andy-set-studio

/// VERTICALLY ALIGN LABEL
/// Adds a pseudo-element to help vertically align
/// text labels in buttons/block-like links without
/// using magic numbers
/// More: https://ishadeed.com/article/button-label-alignment/
@mixin vertically-align-label() {
  &::before {
    content: '';
    display: inline-block;
    vertical-align: middle;

Andy-set-studio

// Put this in _data/helpers.js

module.exports = {
  currentYear() {
    const today = new Date();
    return today.getFullYear();
  }
}

Andy-set-studio

/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
$gorko-base-size: 1rem;

/**
 * SIZE SCALE

Andy-set-studio

const fetch = require('node-fetch');

module.exports = async () => {
  try {
    const res = await fetch(
      'https://11ty-from-scratch-content-feeds.piccalil.li/media.json'
    );
    const {items} = await res.json();

    return items;

Andy-set-studio

A quick recappermalink

Here’s a list of stuff we have learned over the last 9 lessons:

1. What Eleventy is and how it works
2. How to create a “Hello, world” with Eleventy
3. What Nunjucks is and how it works
4. What Front Matter is and how it works
5. How to copy assets over to your dist folder with Passthrough copy
6. How to create partials with Nunjucks

Andy-set-studio

.skip-link {
  &:not(:focus) {
    @extend .visually-hidden;           
  }
}

Andy-set-studio

title	layout	pagination	permalink
The Issue 33 Blog	layouts/feed.html	data size collections.blog 5	blog{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber }}{% endif %}/index.html