From cf1efe7608dd02a4c65718fb82b316a57e71d910 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 23:16:12 +0700 Subject: [PATCH] feat: Stamp border --- contents/_includes/patterns/stamp-border.njk | 3 + contents/index.njk | 6 ++ contents/stamp-border.md | 42 ++++++++++ pages/stamp-border/index.tsx | 81 -------------------- patterns/stamp-border/Cover.tsx | 43 ----------- styles/index.scss | 1 + styles/patterns/_stamp-border.scss | 23 ++++++ 7 files changed, 75 insertions(+), 124 deletions(-) create mode 100644 contents/_includes/patterns/stamp-border.njk create mode 100644 contents/stamp-border.md delete mode 100644 pages/stamp-border/index.tsx delete mode 100644 patterns/stamp-border/Cover.tsx create mode 100644 styles/patterns/_stamp-border.scss diff --git a/contents/_includes/patterns/stamp-border.njk b/contents/_includes/patterns/stamp-border.njk new file mode 100644 index 0000000..efc0b98 --- /dev/null +++ b/contents/_includes/patterns/stamp-border.njk @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 693c7db..b295572 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -241,6 +241,12 @@ eleventyExcludeFromCollections: true
Stacked cards
+
+ +
{% include "patterns/stamp-border.njk" %}
+
Stamp border
+ +
{% include "patterns/video-background.njk" %}
diff --git a/contents/stamp-border.md b/contents/stamp-border.md new file mode 100644 index 0000000..2eb3bd4 --- /dev/null +++ b/contents/stamp-border.md @@ -0,0 +1,42 @@ +--- +layout: layouts/post.njk +title: Stamp border +description: Create stamp border with CSS +keywords: css radial gradient, css stamp border +--- + +## HTML + +```html +
+
+
+``` + +## CSS + +```css +.stamp-border { + /* Background */ + background-color: #d1d5db; + background-image: radial-gradient(#fff 50%, transparent 50%); + background-position: -0.25rem -0.25rem; + background-repeat: repeat; + background-size: 0.5rem 0.5rem; + + /* Spacing */ + padding: 0.25rem; +} + +.stamp-border__content { + /* Background */ + background-color: #d1d5db; + + height: 100%; + width: 100%; +} +``` + +{% demo %} +{% include "patterns/stamp-border.njk" %} +{% enddemo %} diff --git a/pages/stamp-border/index.tsx b/pages/stamp-border/index.tsx deleted file mode 100644 index 399ee9d..0000000 --- a/pages/stamp-border/index.tsx +++ /dev/null @@ -1,81 +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={` - .container { - /* Background */ - background-color: #ccc; - background-image: radial-gradient(#fff 50%, transparent 50%); - background-position: -5px -5px; - background-repeat: repeat; - background-size: 10px 10px; - - /* Spacing */ - padding: 5px; - } - - .container__inner { - /* Background */ - background-color: #ccc; - } - `} - > -
-
-
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/stamp-border/Cover.tsx b/patterns/stamp-border/Cover.tsx deleted file mode 100644 index 535b2cb..0000000 --- a/patterns/stamp-border/Cover.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index f651c73..8c9ce43 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -49,6 +49,7 @@ @import './patterns/ribbon'; @import './patterns/separator'; @import './patterns/stacked-cards'; +@import './patterns/stamp-border'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_stamp-border.scss b/styles/patterns/_stamp-border.scss new file mode 100644 index 0000000..22b622a --- /dev/null +++ b/styles/patterns/_stamp-border.scss @@ -0,0 +1,23 @@ +.stamp-border { + /* Background */ + background-color: #d1d5db; + background-image: radial-gradient(#fff 50%, transparent 50%); + background-position: -0.25rem -0.25rem; + background-repeat: repeat; + background-size: 0.5rem 0.5rem; + + /* Spacing */ + padding: 0.25rem; + + /* Demo */ + height: 100%; + width: 100%; +} + +.stamp-border__content { + /* Background */ + background-color: #d1d5db; + + height: 100%; + width: 100%; +} \ No newline at end of file