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

feat: Rectangle with random width

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 16:29:59 +07:00
parent 8e4ad11e45
commit a3522be10b
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.eleventy.js
View File

@@ -3,6 +3,8 @@ const markdownIt = require('markdown-it');
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
const htmlmin = require('html-minifier');
const randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
module.exports = function(eleventyConfig) {
// Copy the `img` and `css` folders to the output
eleventyConfig.addPassthroughCopy('assets');
@@ -40,8 +42,9 @@ module.exports = function(eleventyConfig) {
return `<div class="lines">${content}</div>`;
});
eleventyConfig.addShortcode('rectangle', function() {
return `<div class="rectangle"></div>`;
eleventyConfig.addShortcode('rectangle', function(width) {
const w = width || randomInteger(1, 4) * 20;
return `<div class="rectangle rectangle--${w}"></div>`;
});
eleventyConfig.addShortcode('square', function() {
return `<div class="square"></div>`;

14
styles/placeholders/_rectangle.scss
View File

@@ -2,5 +2,19 @@
background: rgba(0, 0, 0, .3);
border-radius: 0.25rem;
height: 0.5rem;
}
.rectangle--20 {
width: 20%;
}
.rectangle--40 {
width: 40%;
}
.rectangle--60 {
width: 60%;
}
.rectangle--80 {
width: 80%;
}
.rectangle--100 {
width: 100%;
}