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;