From ef43e16941c333fe3efb767576b91530ae6019fb Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 15:28:01 +0700 Subject: [PATCH] feat: Add Diagonal section pattern --- .../_includes/patterns/diagonal-section.njk | 3 + contents/diagonal-section.md | 51 +++++++++ contents/index.njk | 6 ++ pages/diagonal-section/index.tsx | 101 ------------------ patterns/diagonal-section/Cover.tsx | 31 ------ styles/index.scss | 1 + styles/patterns/_diagonal-section.scss | 24 +++++ 7 files changed, 85 insertions(+), 132 deletions(-) create mode 100644 contents/_includes/patterns/diagonal-section.njk create mode 100644 contents/diagonal-section.md delete mode 100644 pages/diagonal-section/index.tsx delete mode 100644 patterns/diagonal-section/Cover.tsx create mode 100644 styles/patterns/_diagonal-section.scss diff --git a/contents/_includes/patterns/diagonal-section.njk b/contents/_includes/patterns/diagonal-section.njk new file mode 100644 index 0000000..2b31a41 --- /dev/null +++ b/contents/_includes/patterns/diagonal-section.njk @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/contents/diagonal-section.md b/contents/diagonal-section.md new file mode 100644 index 0000000..cc26384 --- /dev/null +++ b/contents/diagonal-section.md @@ -0,0 +1,51 @@ +--- +layout: layouts/post.njk +title: Diagonal section +description: Create a diagonal section with CSS +keywords: css diagonal section, css transform skew +--- + +## HTML + +```html +
+ +
+ + + ... +
+``` + +## CSS + +```css +.diagonal-section { + /* Used to position the diagonal area */ + position: relative; +} + +.diagonal-section__diagonal { + /* Absolute position */ + left: 0px; + position: absolute; + top: 0px; + + /* Take full size */ + height: 100%; + width: 100%; + + /* Create diagonal sides */ + transform: skewY(-5deg); + + /* Background color */ + background-color: rgba(0, 0, 0, 0.3); + + /* Displayed under the main content */ + z-index: -1; +} +``` + +{% demo %} +{% include "patterns/diagonal-section.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index ca60095..bcf1b24 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -91,6 +91,12 @@ eleventyExcludeFromCollections: true
Curved background
+
+ +
{% include "patterns/diagonal-section.njk" %}
+
Diagonal section
+ +
diff --git a/pages/diagonal-section/index.tsx b/pages/diagonal-section/index.tsx deleted file mode 100644 index dc943b0..0000000 --- a/pages/diagonal-section/index.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
- - - ... - -`} - css={` - .container { - /* Used to position the diagonal area */ - position: relative; - } - - .container__diagonal { - /* Absolute position */ - left: 0px; - position: absolute; - top: 0px; - - /* Take full size */ - height: 100%; - width: 100%; - - /* Create diagonal sides */ - transform: skewY(-5deg); - - /* Background color */ - background-color: rgba(0, 0, 0, 0.3); - - /* Displayed under the main content */ - z-index: -1; - } - `} - > -
-
-
-
- -
-
-
- - - - - ); -}; - -export default Details; diff --git a/patterns/diagonal-section/Cover.tsx b/patterns/diagonal-section/Cover.tsx deleted file mode 100644 index 175fb3c..0000000 --- a/patterns/diagonal-section/Cover.tsx +++ /dev/null @@ -1,31 +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 a099612..d6d0fb6 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -24,6 +24,7 @@ @import './patterns/cookie-banner'; @import './patterns/corner-ribbon'; @import './patterns/curved-background'; +@import './patterns/diagonal-section'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_diagonal-section.scss b/styles/patterns/_diagonal-section.scss new file mode 100644 index 0000000..a96b60d --- /dev/null +++ b/styles/patterns/_diagonal-section.scss @@ -0,0 +1,24 @@ +.diagonal-section { + /* Used to position the diagonal area */ + position: relative; + + height: 100%; + width: 100%; +} + +.diagonal-section__diagonal { + /* Absolute position */ + left: 0px; + position: absolute; + top: 50%; + + /* Take full size */ + height: 2rem; + width: 100%; + + /* Create diagonal sides */ + transform: translate(0, -50%) skewY(-15deg); + + /* Background color */ + background-color: rgba(0, 0, 0, 0.3); +} \ No newline at end of file