From 02b7e880ec8f918c9e2213d3bbc5146eb4836e3c Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Sep 2022 21:14:16 +0700
Subject: [PATCH] feat: Square size

---
 .eleventy.js                     |  5 +++--
 styles/placeholders/_square.scss | 13 +++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index c1859e3..fd7bde8 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -53,8 +53,9 @@ module.exports = function(eleventyConfig) {
         const w = width || randomInteger(1, 4) * 20;
         return `<div class="rectangle rectangle--${direction} rectangle--${s} rectangle--${w}"></div>`;
     });
-    eleventyConfig.addShortcode('square', function() {
-        return `<div class="square"></div>`;
+    eleventyConfig.addShortcode('square', function(size) {
+        const s = size || 'sm';
+        return `<div class="square square--${s}"></div>`;
     });
     // `corner` can be one of `t`, `r`, `b`, `l`, `tr`, `br`, `tl`, `bl`
     eleventyConfig.addShortcode('triangle', function(corner, size) {
diff --git a/styles/placeholders/_square.scss b/styles/placeholders/_square.scss
index 5eb4d05..6d8252b 100644
--- a/styles/placeholders/_square.scss
+++ b/styles/placeholders/_square.scss
@@ -1,6 +1,15 @@
 .square {
     background: rgba(0, 0, 0, 0.3);
     border-radius: 0.25rem;
-    height: 100%;
-    width: 100%;
+    height: var(--square-size);
+    width: var(--square-size);
+}
+.square--sm {
+    --square-size: 0.5rem;
+}
+.square--md {
+    --square-size: 2rem;
+}
+.square--lg {
+    --square-size: 4rem;
 }
\ No newline at end of file