diff --git a/contents/_includes/patterns/watermark.njk b/contents/_includes/patterns/watermark.njk new file mode 100644 index 0000000..5584cc4 --- /dev/null +++ b/contents/_includes/patterns/watermark.njk @@ -0,0 +1,8 @@ +
+
+
+ Draft +
+
+ {% lines "hor", 5 %} +
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 464d086..a805377 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -163,6 +163,12 @@ eleventyExcludeFromCollections: true
Initial avatar
+
+ +
{% include "patterns/watermark.njk" %}
+
Watermark
+ +
diff --git a/contents/watermark.md b/contents/watermark.md new file mode 100644 index 0000000..bc99e53 --- /dev/null +++ b/contents/watermark.md @@ -0,0 +1,68 @@ +--- +layout: layouts/post.njk +title: Watermark +description: Create a watermark with CSS +keywords: css watermark +--- + +## HTML + +```html +
+ +
+ +
+ Draft +
+
+ + + ... +
+``` + +## CSS + +```css +.watermark { + /* Used to position the watermark */ + position: relative; +} + +.watermark__inner { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Absolute position */ + left: 0px; + position: absolute; + top: 0px; + + /* Take full size */ + height: 100%; + width: 100%; +} + +.watermark__body { + /* Text color */ + color: rgba(0, 0, 0, 0.2); + + /* Text styles */ + font-size: 3rem; + font-weight: bold; + text-transform: uppercase; + + /* Rotate the text */ + transform: rotate(-45deg); + + /* Disable the selection */ + user-select: none; +} +``` + +{% demo %} +{% include "patterns/watermark.njk" %} +{% enddemo %} diff --git a/pages/watermark/index.tsx b/pages/watermark/index.tsx deleted file mode 100644 index 3f02b08..0000000 --- a/pages/watermark/index.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -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 ( - - - - - - - - - -
- -
- Draft -
-
- - - ... - -`} - css={` - .container { - /* Used to position the watermark */ - position: relative; - } - - .container__wrapper { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Absolute position */ - left: 0px; - position: absolute; - top: 0px; - - /* Take full size */ - height: 100%; - width: 100%; - } - - .container__watermark { - /* Text color */ - color: rgba(0, 0, 0, 0.2); - - /* Text styles */ - font-size: 3rem; - font-weight: bold; - text-transform: uppercase; - - /* Rotate the text */ - transform: rotate(-45deg); - - /* Disable the selection */ - user-select: none; - } - `} - > -
-
-
-
- Draft -
-
- -
- -
- -
- -
- -
- -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/watermark/Cover.tsx b/patterns/watermark/Cover.tsx deleted file mode 100644 index e306570..0000000 --- a/patterns/watermark/Cover.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
- Draft -
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 2c02667..e4a9ad1 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -36,6 +36,7 @@ @import './patterns/fixed-at-side'; @import './patterns/full-background'; @import './patterns/initial-avatar'; +@import './patterns/watermark'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_watermark.scss b/styles/patterns/_watermark.scss new file mode 100644 index 0000000..b06eb1a --- /dev/null +++ b/styles/patterns/_watermark.scss @@ -0,0 +1,42 @@ +.watermark { + position: relative; + + /* Demo */ + height: 100%; + width: 100%; + align-items: center; + display: flex; + justify-content: center; +} + +.watermark__inner { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Absolute position */ + left: 0px; + position: absolute; + top: 0px; + + /* Take full size */ + height: 100%; + width: 100%; +} + +.watermark__body { + /* Text color */ + color: rgba(0, 0, 0, 0.2); + + /* Text styles */ + font-size: 2rem; + font-weight: bold; + text-transform: uppercase; + + /* Rotate the text */ + transform: rotate(-45deg); + + /* Disable the selection */ + user-select: none; +} \ No newline at end of file