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: Add placeholders

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 08:55:53 +07:00
parent e2ec4d94fc
commit d43e019bac
15 changed files with 107 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
.eleventy.js
View File

@@ -15,6 +15,33 @@ module.exports = function(eleventyConfig) {
}); });
eleventyConfig.setLibrary('md', markdownLibrary); eleventyConfig.setLibrary('md', markdownLibrary);
// Shortcodes
eleventyConfig.addShortcode('circle', function() {
return `<div class="circle"></div>`;
});
// `direction` can be `hor` or `ver`
eleventyConfig.addShortcode('line', function(dir) {
return `<div class="line line--${dir}"></div>`;
});
eleventyConfig.addShortcode('lines', function(dir, numLines) {
const content = Array(numLines).fill('').map(_ => {
return `<div class="line line--${dir}"></div>`
}).join('');
return `<div class="lines">${content}</div>`;
});
eleventyConfig.addShortcode('rectangle', function() {
return `<div class="rectangle"></div>`;
});
eleventyConfig.addShortcode('square', function() {
return `<div class="square"></div>`;
});
// `corner` can be one of `t`, `r`, `b`, `l`, `tr`, `br`, `tl`, `bl`
eleventyConfig.addShortcode('triangle', function(corner) {
return `<div class="triangle triangle--${corner}"></div>`;
});
// Get the first `n` elements of a collection. // Get the first `n` elements of a collection.
eleventyConfig.addFilter("head", (array, n) => { eleventyConfig.addFilter("head", (array, n) => {
if (!Array.isArray(array) || array.length === 0) { if (!Array.isArray(array) || array.length === 0) {

25
placeholders/BrowserFrame.tsx
View File

@@ -1,25 +0,0 @@
import * as React from 'react';
import { Window } from '@1milligram/design';
import { Code } from '../components/Code';
interface BrowserFrameProps {
css: string;
html: string;
}
const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
return (
<Window>
<div className="demo__html">
<Code language="markup">{html}</Code>
</div>
<div className="demo__css">
<Code language="css">{css}</Code>
</div>
<div className="demo__live">{children}</div>
</Window>
);
};
export default BrowserFrame;

21
placeholders/Circle.tsx
View File

@@ -1,21 +0,0 @@
import * as React from 'react';
interface CircleProps {
backgroundColor?: string;
size?: number;
}
const Circle: React.FC<CircleProps> = ({ backgroundColor = 'rgba(0, 0, 0, .3)', size = 16 }) => {
return (
<div
style={{
backgroundColor,
borderRadius: '9999px',
height: `${size}px`,
width: `${size}px`,
}}
/>
);
};
export default Circle;

19
placeholders/Line.tsx
View File

@@ -1,19 +0,0 @@
import * as React from 'react';
interface LineProps {
backgroundColor?: string;
}
const Line: React.FC<LineProps> = ({ backgroundColor = 'rgba(0, 0, 0, 0.3)' }) => {
return (
<div
style={{
backgroundColor,
height: '1px',
width: '100%',
}}
/>
);
};
export default Line;

20
placeholders/Rectangle.tsx
View File

@@ -1,20 +0,0 @@
import * as React from 'react';
interface RectangleProps {
height?: number;
}
const Rectangle: React.FC<RectangleProps> = ({ height = 8 }) => {
return (
<div
style={{
backgroundColor: 'rgba(0, 0, 0, .3)',
borderRadius: '0.25rem',
height: `${height}px`,
width: '100%',
}}
/>
);
};
export default Rectangle;

21
placeholders/Square.tsx
View File

@@ -1,21 +0,0 @@
import * as React from 'react';
interface SquareProps {
backgroundColor?: string;
size?: string;
}
const Square: React.FC<SquareProps> = ({ backgroundColor = 'rgba(0, 0, 0, 0.3)', size = '100%' }) => {
return (
<div
style={{
backgroundColor,
borderRadius: '0.25rem',
height: size,
width: size,
}}
/>
);
};
export default Square;

68
placeholders/Triangle.tsx
View File

@@ -1,68 +0,0 @@
import * as React from 'react';
interface TriangleProps {
backgroundColor?: string;
corner?: string;
size?: number;
}
const Triangle: React.FC<TriangleProps> = ({ backgroundColor = 'rgba(0, 0, 0, .3)', size = 16, corner = 'tl' }) => {
let bw = '';
let bc = '';
switch (corner) {
case 't':
bw = `0 ${size}px ${size}px ${size}px`;
bc = `transparent transparent ${backgroundColor} transparent`;
break;
case 'r':
bw = `${size}px 0 ${size}px ${2 * size}px`;
bc = `transparent transparent transparent ${backgroundColor}`;
break;
case 'b':
bw = `${size}px ${size}px 0 ${size}px`;
bc = `${backgroundColor} transparent transparent transparent`;
break;
case 'l':
bw = `${size}px ${2 * size}px ${size}px 0`;
bc = `transparent ${backgroundColor} transparent transparent`;
break;
case 'tr':
bw = `0 ${size}px ${size}px 0`;
bc = `transparent ${backgroundColor} transparent transparent`;
break;
case 'br':
bw = `0 0 ${size}px ${size}px`;
bc = `transparent transparent ${backgroundColor} transparent`;
break;
case 'bl':
bw = `${size}px 0 0 ${size}px`;
bc = `transparent transparent transparent ${backgroundColor}`;
break;
case 'tl':
default:
bw = `${size}px ${size}px 0 0`;
bc = `${backgroundColor} transparent transparent transparent`;
break;
}
return (
<div
style={{
borderColor: bc,
borderStyle: 'solid',
borderWidth: bw,
height: 0,
width: 0,
}}
/>
);
};
export default Triangle;

15
placeholders/VerticalLine.tsx
View File

@@ -1,15 +0,0 @@
import * as React from 'react';
const VerticalLine: React.FC<{}> = () => {
return (
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
width: '1px',
}}
/>
);
};
export default VerticalLine;

2
styles/blocks/_category.scss
View File

@@ -25,6 +25,6 @@
@media (min-width: 768px) { @media (min-width: 768px) {
:root { :root {
--category__name-font-size: 2rem; --category__name-font-size: 2rem;
--category__post-num-columns: 2; --category__post-num-columns: 5;
} }
} }

10
styles/index.scss
View File

@@ -9,5 +9,15 @@
@import './blocks/nav'; @import './blocks/nav';
@import './blocks/post'; @import './blocks/post';
// Cover
@import './covers/accordion';
// Placeholders
@import './placeholders/circle';
@import './placeholders/line';
@import './placeholders/rectangle';
@import './placeholders/square';
@import './placeholders/triangle';
// Themes // Themes
@import './themes/dracula.scss'; @import './themes/dracula.scss';

6
styles/placeholders/_circle.scss Normal file
View File

@@ -0,0 +1,6 @@
.circle {
background: rgba(0, 0, 0, .3);
border-radius: 9999px;
height: 1rem;
width: 1rem;
}

14
styles/placeholders/_line.scss Normal file
View File

@@ -0,0 +1,14 @@
.line {
background: rgba(0, 0, 0, 0.3);
}
.line--hor {
height: 1px;
width: 100%;
}
.line--ver {
height: 100%;
width: 1px;
}
.lines .line {
margin-bottom: 0.25rem;
}

6
styles/placeholders/_rectangle.scss Normal file
View File

@@ -0,0 +1,6 @@
.rectangle {
background: rgba(0, 0, 0, .3);
border-radius: 0.25rem;
height: 0.5rem;
width: 100%;
}

6
styles/placeholders/_square.scss Normal file
View File

@@ -0,0 +1,6 @@
.square {
background: rgba(0, 0, 0, 0.3);
border-radius: 0.25rem;
height: 100%;
width: 100%;
}

37
styles/placeholders/_triangle.scss Normal file
View File

@@ -0,0 +1,37 @@
.triangle {
border-style: solid;
height: 0;
width: 0;
}
.triangle--t {
border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
border-width: 0 0.5rem 0.5rem 0.5rem;
}
.triangle--r {
border-color: transparent transparent transparent rgba(0, 0, 0, .3);
border-width: 0.5rem 0 0.5rem 1rem;
}
.triangle--b {
border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
border-width: 0.5rem 0.5rem 0 0.5rem;
}
.triangle--l {
border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
border-width: 0.5rem 1rem 0.5rem 0;
}
.triangle--tr {
border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
border-width: 0 0.5rem 0.5rem 0;
}
.triangle--br {
border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
border-width: 0 0 0.5rem 0.5rem;
}
.triangle--bl {
border-color: transparent transparent transparent rgba(0, 0, 0, .3);
border-width: 0.5rem 0 0 0.5rem;
}
.triangle--tl {
border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
border-width: 0.5rem 0.5rem 0 0;
}