| <html> | |
| <head> | |
| <title>Click me if you can</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| html, body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; |
| .logo_background { | |
| background-image: url('../img/logo@1x.png'); | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| background-size: 80px 40px; /* size of the logo image @ 1x */ | |
| } | |
| @media /* only for retina displays */ | |
| only screen and (-webkit-min-device-pixel-ratio: 2), | |
| only screen and (min--moz-device-pixel-ratio: 2), | |
| only screen and (min-device-pixel-ratio: 2), |
| // entnommen: https://github.com/jensgro/11ty-starter | |
| // ======= Farben | |
| $custom-colors: ( | |
| "black": ( | |
| "base": #000 | |
| ), | |
| "white": ( | |
| "base": #fff, | |
| "nearly": #fafafa | |
| ), |
| // entnommen: https://github.com/jensgro/11ty-starter | |
| // ======= Farben | |
| $custom-colors: ( | |
| "black": ( | |
| "base": #000 | |
| ), | |
| "white": ( | |
| "base": #fff, | |
| "nearly": #fafafa | |
| ), |
| // entnommen: https://github.com/jensgro/11ty-starter | |
| // ======= Farben | |
| $custom-colors: ( | |
| "black": ( | |
| "base": #000 | |
| ), | |
| "white": ( | |
| "base": #fff, | |
| "nearly": #fafafa | |
| ), |
| $fonts: ( | |
| Thin: 100, | |
| ThinItalic: 100, | |
| ExtraLight: 200, | |
| ExtraLightItalic: 200, | |
| Light: 300, | |
| LightItalic: 300, | |
| Regular: 400, | |
| Italic: 400, | |
| Medium: 500, |
| //... | |
| 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 { |