diff --git a/contents/_includes/patterns/color-swatch.njk b/contents/_includes/patterns/color-swatch.njk new file mode 100644 index 0000000..ccd6458 --- /dev/null +++ b/contents/_includes/patterns/color-swatch.njk @@ -0,0 +1,8 @@ +
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/contents/color-swatch.md b/contents/color-swatch.md new file mode 100644 index 0000000..c370a0c --- /dev/null +++ b/contents/color-swatch.md @@ -0,0 +1,40 @@ +--- +layout: layouts/post.njk +title: Color swatch +description: Create a color swatch with CSS flexbox +keywords: css color swatch, css flexbox +--- + +## HTML + +```html +
+
+ + + ... +
+``` + +## CSS + +```css +.swatch { + /* Wrap the items */ + display: flex; + flex-wrap: wrap; +} +.swatch__item { + /* Rounded border */ + border-radius: 9999px; + height: 1.5rem; + width: 1.5rem; + + /* Space between items */ + margin: 0.5rem; +} +``` + +{% demo %} +{% include "patterns/color-swatch.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 298a497..11ed38c 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -61,6 +61,12 @@ eleventyExcludeFromCollections: true
Close button
+
+ +
{% include "patterns/color-swatch.njk" %}
+
Color swatch
+ +
diff --git a/pages/color-swatch/index.tsx b/pages/color-swatch/index.tsx deleted file mode 100644 index e3df502..0000000 --- a/pages/color-swatch/index.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - -
- - - ... - -`} - css={` - .swatch { - /* Wrap the items */ - display: flex; - flex-wrap: wrap; - } - .swatch__item { - /* Rounded border */ - border-radius: 9999px; - height: 1.5rem; - width: 1.5rem; - - /* Space between items */ - margin: 0.5rem; - } - `} - > -
-
- {Array(9) - .fill(0) - .map((_, index) => ( -
- ))} -
-
- - - ); -}; - -export default Details; diff --git a/patterns/color-swatch/Cover.tsx b/patterns/color-swatch/Cover.tsx deleted file mode 100644 index f220bb4..0000000 --- a/patterns/color-swatch/Cover.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
- {Array(4) - .fill(0) - .map((_, index) => ( -
- ))} -
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 2f16db7..ac2818a 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -19,6 +19,7 @@ @import './patterns/card'; @import './patterns/centering'; @import './patterns/close-button'; +@import './patterns/color-swatch'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_color-swatch.scss b/styles/patterns/_color-swatch.scss new file mode 100644 index 0000000..203cecf --- /dev/null +++ b/styles/patterns/_color-swatch.scss @@ -0,0 +1,32 @@ +.swatch { + /* Wrap the items */ + display: flex; + flex-wrap: wrap; +} +.swatch__item { + /* Rounded border */ + border-radius: 9999px; + height: 1.5rem; + width: 1.5rem; + + /* Space between items */ + margin: 0.5rem; +} +.swatch__item--1st { + background-color: rgba(0, 0, 0, .1); +} +.swatch__item--2nd { + background-color: rgba(0, 0, 0, .2); +} +.swatch__item--3rd { + background-color: rgba(0, 0, 0, .3); +} +.swatch__item--4th { + background-color: rgba(0, 0, 0, .4); +} +.swatch__item--5th { + background-color: rgba(0, 0, 0, .5); +} +.swatch__item--6th { + background-color: rgba(0, 0, 0, .6); +} \ No newline at end of file