Andy Bell 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.

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

	const postcss = require('postcss');

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

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

	/// 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;

	// Put this in _data/helpers.js

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

	/**
	* 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

	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;

	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

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