mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-07 06:37:01 +02:00
Code Issues Releases Wiki Activity

feat: Square size

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 21:14:16 +07:00
parent ec8c32556e
commit 02b7e880ec
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.eleventy.js
View File

@@ -53,8 +53,9 @@ module.exports = function(eleventyConfig) {
const w = width || randomInteger(1, 4) * 20; const w = width || randomInteger(1, 4) * 20;
return `<div class="rectangle rectangle--${direction} rectangle--${s} rectangle--${w}"></div>`; return `<div class="rectangle rectangle--${direction} rectangle--${s} rectangle--${w}"></div>`;
}); });
eleventyConfig.addShortcode('square', function() { eleventyConfig.addShortcode('square', function(size) {
return `<div class="square"></div>`; const s = size || 'sm';
return `<div class="square square--${s}"></div>`;
}); });
// `corner` can be one of `t`, `r`, `b`, `l`, `tr`, `br`, `tl`, `bl` // `corner` can be one of `t`, `r`, `b`, `l`, `tr`, `br`, `tl`, `bl`
eleventyConfig.addShortcode('triangle', function(corner, size) { eleventyConfig.addShortcode('triangle', function(corner, size) {

13
styles/placeholders/_square.scss
View File

@@ -1,6 +1,15 @@
.square { .square {
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
border-radius: 0.25rem; border-radius: 0.25rem;
height: 100%; height: var(--square-size);
width: 100%; width: var(--square-size);
}
.square--sm {
--square-size: 0.5rem;
}
.square--md {
--square-size: 2rem;
}
.square--lg {
--square-size: 4rem;
} }