jensgro

a {
    color: #C0281C;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

jensgro

function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {  
      document.documentElement.requestFullScreen();  
    } else if (document.documentElement.mozRequestFullScreen) {  
      document.documentElement.mozRequestFullScreen();  
    } else if (document.documentElement.webkitRequestFullScreen) {  
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }  

jensgro

/*
Usage:

eleventyConfig.addCollection("tagList", require("11ty_getTagList.js") );

This collection then produces a useful list...

for tag in collections.tagList...

which then gives access to

jensgro

// Stolen from https://stackoverflow.com/a/31615643
const appendSuffix = n => {
  var s = ['th', 'st', 'nd', 'rd'],
    v = n % 100;
  return n + (s[(v - 20) % 10] || s[v] || s[0]);
};

module.exports = function dateFilter(value) {
  const dateObject = new Date(value);

jensgro

Linklist for using 11ty (Eleventy)

The project itself has a very good documentation.

Linkcollections

• 11tybundle - huge link collection
• Awesome Eleventy
• 11ty Plugin Repository

jensgro

$fontBasePath: "../fonts/";
@mixin ff($name, $style, $weight, $path){
    @font-face {
        font-family: '#{$name}';
        font-style: #{$style};
        font-weight: $weight;
        src: local(''),
             url($fontBasePath+$path+'.woff2') format('woff2'), 
             url($fontBasePath+$path+'.woff') format('woff'); 
      }    

jensgro

@mixin ff($name, $weight, $path){
    @font-face {
        font-family: '#{$name}';
        font-style: normal;
        font-weight: $weight;
        src: local(''),
             url('../fonts/'+$path+'.woff2') format('woff2'), 
             url('../fonts/'+$path+'.woff') format('woff'); 
      }    
}

jensgro

$left-width-initial: 95px;
$left-width-sm-up: 110px;
$left-width-lg-up: 123px;

$image-ml: 16px;

$image-path: "test/";
$icon: test;
$selector: "";

jensgro

.sitefooter {
  $parent: &;
  
  border-top: 2px solid blue;
  padding: 20px  0;

  #{$parent}--home {
    color: red;   
  }
  

jensgro

/* ***********************************************
  Styles for Mastodon

  Adapted from different sources
  - https://write.as/panais/styles-pour-mastodon-avec-stylus
  - https://mastodon.social/@matuzo/109284559864791077
  - https://mastodon.social/@matuzo/109284628517006156
  - https://gist.github.com/justmarkup/e4f6d52bef604e170815aaf44f459fbc
*********************************************** */