From fee74d78ad643fef26c28fb82cfab519ec7a43ce Mon Sep 17 00:00:00 2001 From: madrilene Date: Tue, 11 Apr 2023 14:22:35 +0200 Subject: [PATCH] new built with, image size corrections in blog --- package.json | 2 +- readme.md | 1 + src/posts/2022-10-12-post-with-image.md | 10 +++++----- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 18b1e55..99e4a48 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "eleventy-excellent", - "version": "1.4.8", + "version": "1.5.0", "description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.", "author": "Lene Saile", "license": "ISC", diff --git a/readme.md b/readme.md index 52efe7e..73f3a6a 100644 --- a/readme.md +++ b/readme.md @@ -98,6 +98,7 @@ npm run build A list of sites based on eleventy-excellent, some only slightly modified, others completely transformed. +- [misremembe.red](https://misremembe.red/) - [joewrites.io](https://joewrites.io/) - [flamedfury.com](https://flamedfury.com/) - [deimidis.me](https://deimidis.me/) diff --git a/src/posts/2022-10-12-post-with-image.md b/src/posts/2022-10-12-post-with-image.md index da3e81e..33264bc 100644 --- a/src/posts/2022-10-12-post-with-image.md +++ b/src/posts/2022-10-12-post-with-image.md @@ -6,7 +6,7 @@ date: 2022-10-12 This starter uses Eleventy's build-time image transformations. Find more info on https://www.11ty.dev/docs/plugins/image/ and edit settings in `config/shortcodes/imagePlaceholder`. -For now there are three image sizes: 320px, 550px and 820px. +For now there are three image sizes: 320px, 570px and 820px. 820px is the maximum size, equivalent to the width set for our content wrapper in `prose.css`: `--wrapper-max-width: 55rem;`. The `sizes` attribute is set to `sizes = '(min-width: 55rem) 820px, 100vw'`. @@ -43,12 +43,12 @@ You can change the CSS for the page and blog post images in `./src/assets/css/bl ```css .page img { - width: 100%; - height: auto; + max-inline-size: 100%; + block-size: auto; } .blog img { - width: 100%; - height: auto; + max-inline-size: 100%; + block-size: auto; } ```