Skip to content

Instantly share code, notes, and snippets.

Avatar

Melanie Richards melanierichards

View GitHub Profile
@melanierichards
melanierichards / anchor-pos.md
Created Feb 25, 2021
Early ideas for a CSS anchored positioning scheme
View anchor-pos.md

Note: early thinking to start a discussion, not a fully fleshed-out proposal!

CSS Anchored Positioning

Authors:

Introduction

@melanierichards
melanierichards / eleventy-md-responsive-img.js
Last active Oct 17, 2020
Eleventy Markdown shortcode I use for responsive images
View eleventy-md-responsive-img.js
// Shortcode for responsive images in blog posts
eleventyConfig.addShortcode("responsiveImage", function(baseSrc, ext, max, alt, classes) {
let fullBaseSrc = '/assets/images/content/' + baseSrc;
var sources = '<source media="(min-width: 501px)" srcset="' + fullBaseSrc + '-m.' + ext + '">';
if (max !== 'm') {
sources = '<source media="(min-width: 801px)" srcset="' + fullBaseSrc + '-l.' + ext + '">' + sources;
}
if (max === 'xl') {
sources = '<source media="(min-width: 1201px)" srcset="' + fullBaseSrc + '-xl.' + ext + '">' + sources;
}
@melanierichards
melanierichards / moving-the-web-forward.md
Last active Sep 13, 2020
"Moving the Web Forward with Microsoft Edge and Chromium": Session Resources
View moving-the-web-forward.md