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.
const postcss = require('postcss'); | |
const colorData = { | |
"Dark": "#030303", | |
"Dark Glare": "#171717", | |
"Mid": "#444444", | |
"Mid Glare": "#cccccc", | |
"Light": "#ffffff", | |
"Light Shade": "#f7f7f7", | |
"Primary": "#FF006A", |
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.
.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; | |
} | |
} |
title | layout | pagination | permalink | ||||
---|---|---|---|---|---|---|---|
The Issue 33 Blog |
layouts/feed.html |
|
blog{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber }}{% endif %}/index.html |