| //... | |
| eleventyConfig | |
| .addFilter('yearTags', posts => { | |
| const yearsList = posts.map(p => p.data.date.getFullYear()) | |
| const yearsCount = {} | |
| yearsList.forEach(y => { | |
| if (!yearsCount[y]) yearsCount[y] = 1 | |
| else yearsCount[y]++ | |
| }); | |
| return Object.keys(yearsCount) |
| /* version from https://kittygiraudel.com/snippets/sr-only-class/ */ | |
| .sr-only { | |
| border: 0 !important; | |
| clip: rect(1px, 1px, 1px, 1px) !important; | |
| -webkit-clip-path: inset(50%) !important; | |
| clip-path: inset(50%) !important; | |
| height: 1px !important; | |
| overflow: hidden !important; | |
| margin: -1px !important; |
Select and copy the script into clipboard. Then navigate to codepen.io, and sign in. Next, navigate to your dashboard select private pens. Next, it's important you select the List view so the pens show up as a list instead of grid. You can use the URL example from below if you don't know where it is.
https://codepen.io/${your_username}/pens/private?grid_type=list
| /** | |
| * Converts a SASS map of css property names and values into CSS output. | |
| * Properties named `description` will have their value inserted as comments. | |
| * | |
| * Nested maps will be processed recursively. | |
| * | |
| * @param {map} $map the map of properties to output | |
| */ | |
| @mixin map-to-props($map){ | |
| @if type-of($map) == map { |
| $fonts: ( | |
| Thin: 100, | |
| ThinItalic: 100, | |
| ExtraLight: 200, | |
| ExtraLightItalic: 200, | |
| Light: 300, | |
| LightItalic: 300, | |
| Regular: 400, | |
| Italic: 400, | |
| Medium: 500, |
| $fonts: ( | |
| Thin: 100, | |
| ThinItalic: 100, | |
| ExtraLight: 200, | |
| ExtraLightItalic: 200, | |
| Light: 300, | |
| LightItalic: 300, | |
| Regular: 400, | |
| Italic: 400, | |
| Medium: 500, |
| @mixin font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) { | |
| //$src: null; | |
| $src: local(""+$name+""); | |
| @each $ext in $exts { | |
| $src: append($src, url(quote($path + "." + $ext)) format(quote($ext)), comma); | |
| } | |
| @font-face { | |
| font-family: quote($name); | |
| font-style: $style; |
| @mixin font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) { | |
| $src: null; | |
| @each $ext in $exts { | |
| $src: append($src, url(quote($path + "." + $ext)) format(quote($ext)), comma); | |
| } | |
| @font-face { | |
| font-family: quote($name); | |
| font-style: $style; |
| // In order for these functions to work, the target element needs a transition CSS property to be set. | |
| function slideUp(element, callback) { | |
| element.style.overflow = 'hidden'; | |
| element.style.height = element.clientHeight + 'px'; | |
| setTimeout(() => { | |
| element.style.height = 0; | |
| }, 0); |
| // 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; | |
| } |