diff --git a/package.json b/package.json index 417a22b..0276950 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "eleventy-excellent", - "version": "1.1.0", + "version": "1.1.1", "engines": { "node": ">=16.x.x" }, diff --git a/readme.md b/readme.md index f74a987..38e79f9 100644 --- a/readme.md +++ b/readme.md @@ -25,24 +25,28 @@ https://eleventy-excellent.netlify.app/ ## Features -This starter includes: +**This starter includes:** - The whole CSS workflow as suggested by buildexcellentwebsit.es - Accessible site navigation, editable in `src/_data/navigation.js` -- Image optimization with Eleventy-img (see blog post) -- Youtube embed with lite-youtube (see blog post) -- Syntax highlighting via eleventy-plugin-syntaxhighlight -- SEO (XML-sitemap, metadata) +- Image optimization with Eleventy-img _(see blog post)_ +- Youtube embed with lite-youtube _(see blog post)_ +- Easy resource fetching with eleventy-fetch _(see blog post)_ +- Syntax highlighting via eleventy-plugin-syntaxhighlight _(see blog post)_ +- SEO basics (XML-sitemap, metadata) - dayjs handling dates & times - 301 redirects for netlify -- markdown handling +- Advanced markdown handling - Bundling via esbuild +- RSS feed +- Links to spcial networks in footer +- Mastodon domain verification snippet ## First steps - **Important:** edit meta data in `src/_data/meta.js`, it's being used all over the template. - Search for 'eleventy-excellent.netlify.app'. You'll find an entry in `src/assets/css/global/global-styles.css`. Replace with your own domain. -- Edit your social media in `src/_data/social.js` and `src/_includes/icons`. If you add new icons they must be prefixed with "social-". Great resource: https://lucide.dev/ +- Edit your social media in `src/_data/social.js` and `src/_includes/icons`. If you add new icons they must be prefixed with "social-". By default you have rss, mastodon, twitter, ko-fi, linkedin and github. Great resource: https://lucide.dev/ - Not required, but recommended: Delete `github.js` in `src/_data/github.js` and the blog posts, as these serve only as an example. - Edit your preferences (colors, fluid text sizes etc.) in `src/assets/css/design-tokens`. - Optional: set your (favicon) icons in `src/assets/images/favicon`. @@ -81,8 +85,10 @@ npm run build - updated required node version in package.json - meta.js now controls most of the templates defaults -- added RSS feed, because of course! -- Made twitter and other meta data OPTIONAL. Added Mastodon. +- added RSS feed, because of course!! +- Made twitter and other meta data OPTIONAL +- Added Mastodon verification and more social icon defaults +- focus-within for the cards ### 22-11-04 diff --git a/src/_includes/icons/social-linkedin.svg b/src/_includes/icons/social-linkedin.svg new file mode 100644 index 0000000..0ded2e9 --- /dev/null +++ b/src/_includes/icons/social-linkedin.svg @@ -0,0 +1,17 @@ + diff --git a/src/assets/css/blocks/card.css b/src/assets/css/blocks/card.css index adf96b9..7e8d2f9 100644 --- a/src/assets/css/blocks/card.css +++ b/src/assets/css/blocks/card.css @@ -1,5 +1,6 @@ .card { background: var(--color-dark); + border: 4px solid var(--color-dark); color: var(--color-light); padding: var(--space-m-l); border-radius: var(--border-radius); @@ -23,3 +24,16 @@ .card time { opacity: 0.8; } + +.card:hover, +.card:focus-within { + border: 4px solid var(--color-primary); +} + +.card a { + text-decoration: none; +} + +.card:focus-within a:focus { + outline: none; +} diff --git a/src/assets/css/global/global-styles.css b/src/assets/css/global/global-styles.css index 8a0a836..0ca29b5 100644 --- a/src/assets/css/global/global-styles.css +++ b/src/assets/css/global/global-styles.css @@ -84,7 +84,7 @@ a:hover { } :focus { - outline: 2px solid; + outline: 3px solid; outline-offset: 0.3ch; }