From 63235dbb71fcaaa074dc3c5ecdbf2140725c5971 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Sep 2022 16:50:04 +0700
Subject: [PATCH] feat: Random width for lines

---
 .eleventy.js                   |  6 ++++--
 styles/placeholders/_line.scss | 38 ++++++++++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 460ac73..fe26e80 100644
--- a/.eleventy.js
+++ b/.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>`;
     });
diff --git a/styles/placeholders/_line.scss b/styles/placeholders/_line.scss
index 916dc46..85e4c78 100644
--- a/styles/placeholders/_line.scss
+++ b/styles/placeholders/_line.scss
@@ -3,16 +3,50 @@
 }
 .line--hor {
     height: 1px;
-    width: 100%;
+
+    &.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;