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

feat: Random width for lines

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 16:50:04 +07:00
parent 2baa8f36c2
commit 63235dbb71
2 changed files with 40 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.eleventy.js
View File

@@ -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>`;
});

38
styles/placeholders/_line.scss
View File

@@ -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;