diff --git a/contents/_includes/patterns/initial-avatar.njk b/contents/_includes/patterns/initial-avatar.njk new file mode 100644 index 0000000..aecc6ad --- /dev/null +++ b/contents/_includes/patterns/initial-avatar.njk @@ -0,0 +1,3 @@ +
+ PN +
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index b333a4e..464d086 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -157,6 +157,12 @@ eleventyExcludeFromCollections: true
Full background
+
+ +
{% include "patterns/initial-avatar.njk" %}
+
Initial avatar
+ +
diff --git a/contents/initial-avatar.md b/contents/initial-avatar.md new file mode 100644 index 0000000..325e3bb --- /dev/null +++ b/contents/initial-avatar.md @@ -0,0 +1,38 @@ +--- +layout: layouts/post.njk +title: Initial avatar +description: Create an initial avatar with CSS +keywords: css avatar +--- + +## HTML + +```html +
+ ... +
+``` + +## CSS + +```css +.initial-avatar { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Colors */ + background-color: rgba(0, 0, 0, 0.3); + color: #fff; + + /* Rounded border */ + border-radius: 50%; + height: 3rem; + width: 3rem; +} +``` + +{% demo %} +{% include "patterns/initial-avatar.njk" %} +{% enddemo %} diff --git a/pages/initial-avatar/index.tsx b/pages/initial-avatar/index.tsx deleted file mode 100644 index 730e179..0000000 --- a/pages/initial-avatar/index.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- To center the content, you also can use other technique demonstrated in the{' '} - - Centering - {' '} - pattern. -
- -
- - ... -
- -`} - css={` - .avatar { - /* Center the content */ - display: inline-block; - vertical-align: middle; - - /* Used to position the content */ - position: relative; - - /* Colors */ - background-color: rgba(0, 0, 0, 0.3); - color: #fff; - - /* Rounded border */ - border-radius: 50%; - height: 48px; - width: 48px; - } - - .avatar__letters { - /* Center the content */ - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - } - `} - > -
-
-
- PN -
-
-
- - - - - - - ); -}; - -export default Details; diff --git a/patterns/initial-avatar/Cover.tsx b/patterns/initial-avatar/Cover.tsx deleted file mode 100644 index 1838daf..0000000 --- a/patterns/initial-avatar/Cover.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
- PN -
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 4455561..2c02667 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -35,6 +35,7 @@ @import './patterns/fixed-at-corner'; @import './patterns/fixed-at-side'; @import './patterns/full-background'; +@import './patterns/initial-avatar'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_initial-avatar.scss b/styles/patterns/_initial-avatar.scss new file mode 100644 index 0000000..c234f53 --- /dev/null +++ b/styles/patterns/_initial-avatar.scss @@ -0,0 +1,15 @@ +.initial-avatar { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Colors */ + background-color: rgba(0, 0, 0, 0.3); + color: #fff; + + /* Rounded border */ + border-radius: 50%; + height: 3rem; + width: 3rem; +} \ No newline at end of file