Skip to content

Instantly share code, notes, and snippets.

View jensgro's full-sized avatar

Jens Grochtdreis jensgro

77 followers · 55 following
View GitHub Profile
@jensgro
jensgro / grid-reloaded.scss
Created February 21, 2023 14:09 — forked from wiegertschouten/grid-reloaded.scss
A simple SASS utility to create layouts based on CSS Grid
// These are the mixins
@mixin grid-layout($column-count, $column-gap: 3rem, $row-gap: null) {
$row-gap: if($row-gap == null, $column-gap, $row-gap);
display: grid;
grid-template-columns: repeat($column-count, 1fr);
grid-gap: $row-gap $column-gap;
gap: $row-gap $column-gap;
}
@jensgro
jensgro / grid.scss
Created February 21, 2023 14:08 — forked from wiegertschouten/grid.scss
A very simple grid system built with SASS and CSS grid
$columns: 12;
$gap: 30px;
$breakpoints: (
xs: 480px,
sm: 768px,
md: 960px,
lg: 1170px,
xl: 1280px
);
@jensgro
jensgro / screenreader.md
Created February 13, 2023 19:52
Links zu Übersichtsseiten über Screenreader-Fähigkeiten
@jensgro
jensgro / sort-tags.js
Created February 10, 2023 19:52 — forked from tannerdolby/sort-tags.js
11ty filter for returning a sorted list of tags from collections. Use the it in a template like {{ collections.foo | taglist }} to get the sorted tag list.
eleventyConfig.addFilter("taglist", function(collection) {
const tags = [];
collection.forEach(post => {
tags.push(...post.data.tags);
});
const sorted = [...new Set(tags)].sort((a, b) => a.localeCompare(b));
return sorted;
});
@jensgro
jensgro / svg-pie-charts.html
Created February 9, 2023 22:20 — forked from danfascia/svg-pie-charts.html
Neat responsive SVG pie charts (no javascript)
<!--
Neat way to render responsive pie charts in HTML with SVGs and CSS from https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/
-->
<style>
svg.piechart {
transform: rotate(-90deg);
background: #B0233B;
border-radius: 50%;
}
@jensgro
jensgro / 11ty_contains.js
Created February 9, 2023 22:19 — forked from danfascia/11ty_contains.js
11ty filter to filter a collection (array) by key:value pair - used to filter on custom taxonomies other than tags (source: https://paulrobertlloyd.com/)
/**
* Select objects in array whose key includes a value
*
* @param {Array} arr Array to test
* @param {String} key Key to inspect
* @param {String} value Value key needs to include
* @return {String} Filtered array
*
*/
module.exports = function (arr, key, value) {
@jensgro
jensgro / 11ty_is.js
Created February 9, 2023 22:19 — forked from danfascia/11ty_is.js
11ty filter to filter items in a collection (array) whose key === value. (source: https://paulrobertlloyd.com/)
/**
* Select objects in array whose key matches a value
*
* @param {Array} arr Array to test
* @param {String} key Key to inspect
* @param {String} value Value key needs to match
* @return {String} Filtered array
*
*/
module.exports = function (arr, key, value) {
@jensgro
jensgro / 11ty_permalink.js
Created February 9, 2023 22:19 — forked from danfascia/11ty_permalink.js
Removes index.html from 11ty URL strings to create prettier permalinks. Usage {{url | permalink}} (source: https://paulrobertlloyd.com/)
@jensgro
jensgro / 11ty_date.js
Created February 9, 2023 22:19 — forked from danfascia/11ty_date.js
11ty Date formatting filter using Luxon. Usage: {{ date_field | date('dd LLLL yyyy') }}
const { DateTime } = require("luxon");
// date filter formatting using Luxon. Usage: {{ date_field | date('dd LLLL yyyy') }}
eleventyConfig.addFilter("date", (it, format = "LLLL dd, yyyy") => {
return DateTime.fromJSDate(it, { zone: "utc" }).toFormat(format);
});
@jensgro
jensgro / 11ty_is-not.js
Created February 9, 2023 22:19 — forked from danfascia/11ty_is-not.js
11ty filter to remove items from a filtered array by key:value pair - i.e. {% collection_array... | is-not: 'url', page.url %} (source: https://paulrobertlloyd.com/)
/**
* Remove objects in array whose key matches a value
*
* @param {Array} arr Array to test
* @param {String} key Key to inspect
* @param {String} value Value key needs to match
* @return {String} Filtered array
*
*/
module.exports = function (arr, key, value) {