diff --git a/contents/_includes/patterns/media-object.njk b/contents/_includes/patterns/media-object.njk new file mode 100644 index 0000000..9cb6881 --- /dev/null +++ b/contents/_includes/patterns/media-object.njk @@ -0,0 +1,8 @@ +
+
+ {% square "md" %} +
+
+ {% lines "hor", 10 %} +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index ee75f75..630241d 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -187,6 +187,12 @@ eleventyExcludeFromCollections: true
Lined paper
+
+ +
{% include "patterns/media-object.njk" %}
+
Media object
+ +
{% include "patterns/triangle-buttons.njk" %}
diff --git a/contents/media-object.md b/contents/media-object.md new file mode 100644 index 0000000..1ff775b --- /dev/null +++ b/contents/media-object.md @@ -0,0 +1,44 @@ +--- +layout: layouts/post.njk +title: Media object +description: Create a media object with CSS flexbox +keywords: css flexbox, media object +--- + +## HTML + +```html +
+ +
+ ... +
+ +
+ ... +
+
+``` + +## CSS + +```css +.media-object { + /* Align sub-items to top */ + align-items: start; + display: flex; +} + +.media-object__media { + margin-right: 0.5rem; +} + +.media-object__content { + /* Take the remaining width */ + flex: 1; +} +``` + +{% demo %} +{% include "patterns/media-object.njk" %} +{% enddemo %} diff --git a/pages/media-object/index.tsx b/pages/media-object/index.tsx deleted file mode 100644 index fd0b134..0000000 --- a/pages/media-object/index.tsx +++ /dev/null @@ -1,82 +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'; -import Rectangle from '../../placeholders/Rectangle'; -import Square from '../../placeholders/Square'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
- ... -
- - -
- ... -
-
-`} - css={` - .container { - /* Align sub-items to top */ - align-items: start; - display: flex; - } - - .container__media { - margin-right: 16px; - - /* Set the width for the media object */ - width: 200px; - } - - .container__content { - /* Take the remaining width */ - flex: 1; - } - `} - > -
-
- -
-
-
- -
-
- -
-
- -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/media-object/Cover.tsx b/patterns/media-object/Cover.tsx deleted file mode 100644 index 51bf507..0000000 --- a/patterns/media-object/Cover.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; -import Square from '../../placeholders/Square'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
- -
-
-
- -
-
- -
-
- -
- -
- -
-
- -
-
- -
- -
- -
-
- -
-
- -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 48dc0d6..6165d60 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -40,6 +40,7 @@ @import './patterns/keyboard-shortcut'; @import './patterns/layered-card'; @import './patterns/lined-paper'; +@import './patterns/media-object'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_media-object.scss b/styles/patterns/_media-object.scss new file mode 100644 index 0000000..00cbabe --- /dev/null +++ b/styles/patterns/_media-object.scss @@ -0,0 +1,18 @@ +.media-object { + /* Align sub-items to top */ + align-items: start; + display: flex; + + /* Demo */ + height: 100%; + width: 100%; +} + +.media-object__media { + margin-right: 0.5rem; +} + +.media-object__content { + /* Take the remaining width */ + flex: 1; +} \ No newline at end of file