diff --git a/contents/_includes/patterns/zigzag-timeline.njk b/contents/_includes/patterns/zigzag-timeline.njk new file mode 100644 index 0000000..7725f4a --- /dev/null +++ b/contents/_includes/patterns/zigzag-timeline.njk @@ -0,0 +1,8 @@ +
+ {% for i in range(0, 2) -%} +
+
+ {% lines "hor", 5 %} +
+ {%- endfor %} +
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 2e60df7..71f7b41 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -295,6 +295,12 @@ eleventyExcludeFromCollections: true
Watermark
+
+ +
{% include "patterns/zigzag-timeline.njk" %}
+
Zigzag timeline
+ +
diff --git a/contents/zigzag-timeline.md b/contents/zigzag-timeline.md new file mode 100644 index 0000000..1677c49 --- /dev/null +++ b/contents/zigzag-timeline.md @@ -0,0 +1,72 @@ +--- +layout: layouts/post.njk +title: Zigzag timeline +description: Create a zigzag timeline +keywords: css timeline, css zigzag timeline +--- + +## HTML + +```html +
+ +
...
+ + + ... +
+ + +... +``` + +## CSS + +```css +.zigzag-timeline__item { + /* Used to position the milestone */ + position: relative; + + /* Border */ + border-bottom: 1px solid #9ca3af; + + /* Take full width */ + width: 100%; +} + +.zigzag-timeline__milestone { + /* Absolute position */ + position: absolute; + top: 50%; + + /* Circle it */ + border-radius: 50%; + height: 1rem; + width: 1rem; + + /* Misc */ + background: #9ca3af; +} + +/* Styles for even items */ +.zigzag-timeline__item:nth-child(2n) { + border-left: 1px solid #9ca3af; +} +.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone { + left: 0; + transform: translate(-50%, -50%); +} + +/* Styles for odd items */ +.zigzag-timeline__item:nth-child(2n + 1) { + border-right: 1px solid #9ca3af; +} +.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone { + right: 0; + transform: translate(50%, -50%); +} +``` + +{% demo %} +{% include "patterns/zigzag-timeline.njk" %} +{% enddemo %} diff --git a/pages/zigzag-timeline/index.tsx b/pages/zigzag-timeline/index.tsx deleted file mode 100644 index dfe70d2..0000000 --- a/pages/zigzag-timeline/index.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { Pattern } from '../../constants/Pattern'; -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
...
- - - ... - - - -... -`} - css={` - .zigzag-timeline__item { - /* Used to position the milestone */ - position: relative; - - /* Border */ - border-bottom: 1px solid #71717a; - - /* Take full width */ - width: 100%; - } - - .zigzag-timeline__milestone { - /* Absolute position */ - position: absolute; - top: 50%; - - /* Circle it */ - border-radius: 50%; - height: 2rem; - width: 2rem; - - /* Misc */ - background: #71717a; - } - - /* Styles for even items */ - .zigzag-timeline__item:nth-child(2n) { - border-left: 1px solid #71717a; - } - .zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone { - left: 0; - transform: translate(-50%, -50%); - } - - /* Styles for odd items */ - .zigzag-timeline__item:nth-child(2n + 1) { - border-right: 1px solid #71717a; - } - .zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone { - right: 0; - transform: translate(50%, -50%); - } - `} - > -
-
-
-
- -
- -
-
-
-
- -
- -
-
-
-
- -
- -
-
- - - - - - ); -}; - -export default Details; diff --git a/patterns/zigzag-timeline/Cover.tsx b/patterns/zigzag-timeline/Cover.tsx deleted file mode 100644 index 8659a2b..0000000 --- a/patterns/zigzag-timeline/Cover.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
- -
-
- -
-
- -
-
-
-
-
- -
-
- -
-
- -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 924ec59..d540dc6 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -59,6 +59,7 @@ @import './patterns/video-background'; @import './patterns/voting'; @import './patterns/watermark'; +@import './patterns/zigzag-timeline'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_zigzag-timeline.scss b/styles/patterns/_zigzag-timeline.scss new file mode 100644 index 0000000..9383d74 --- /dev/null +++ b/styles/patterns/_zigzag-timeline.scss @@ -0,0 +1,47 @@ +.zigzag-timeline { + height: 8rem; + width: 8rem; +} + +.zigzag-timeline__item { + /* Used to position the milestone */ + position: relative; + + /* Border */ + border-bottom: 1px solid #9ca3af; + + /* Take full width */ + width: 100%; +} + +.zigzag-timeline__milestone { + /* Absolute position */ + position: absolute; + top: 50%; + + /* Circle it */ + border-radius: 50%; + height: 1rem; + width: 1rem; + + /* Misc */ + background: #9ca3af; +} + +/* Styles for even items */ +.zigzag-timeline__item:nth-child(2n) { + border-left: 1px solid #9ca3af; +} +.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone { + left: 0; + transform: translate(-50%, -50%); +} + +/* Styles for odd items */ +.zigzag-timeline__item:nth-child(2n + 1) { + border-right: 1px solid #9ca3af; +} +.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone { + right: 0; + transform: translate(50%, -50%); +} \ No newline at end of file diff --git a/styles/placeholders/_line.scss b/styles/placeholders/_line.scss index 85e4c78..b0e080b 100644 --- a/styles/placeholders/_line.scss +++ b/styles/placeholders/_line.scss @@ -41,7 +41,7 @@ } .lines { - margin: 0.5rem 0; + padding: 0.5rem 0; width: 100%; align-items: center; display: flex;