feat: Random width for lines

.eleventy.js

@@ -33,11 +33,13 @@ module.exports = function(eleventyConfig) {
     });
     // `direction` can be `hor` or `ver`
     eleventyConfig.addShortcode('line', function(dir) {
-        return `<div class="line line--${dir}"></div>`;
+        const w = randomInteger(1, 4) * 20;
+        return `<div class="line line--${dir} line--${w}"></div>`;
     });
     eleventyConfig.addShortcode('lines', function(dir, numLines) {
         const content = Array(numLines).fill('').map(_ => {
-            return `<div class="line line--${dir}"></div>`
+            const w = randomInteger(1, 4) * 20;
+            return `<div class="line line--${dir} line--${w}"></div>`
         }).join('');
         return `<div class="lines">${content}</div>`;
     });

styles/placeholders/_line.scss

@@ -3,16 +3,50 @@
 }
 .line--hor {
     height: 1px;
+
+    &.line--20 {
+        width: 20%;
+    }
+    &.line--40 {
+        width: 40%;
+    }
+    &.line--60 {
+        width: 60%;
+    }
+    &.line--80 {
+        width: 80%;
+    }
+    &.line--100 {
         width: 100%;
     }
+}
 .line--ver {
-    height: 100%;
     width: 1px;
+
+    &.line--20 {
+        height: 20%;
+    }
+    &.line--40 {
+        height: 40%;
+    }
+    &.line--60 {
+        height: 60%;
+    }
+    &.line--80 {
+        height: 80%;
+    }
+    &.line--100 {
+        height: 100%;
+    }
 }
 
 .lines {
     margin: 0.5rem 0;
     width: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
 }
 .lines .line {
     margin-bottom: 0.25rem;