timeline.tsx 718 B

12345678910111213141516171819202122232425
  1. import styled from '@emotion/styled';
  2. /**
  3. * Use grid to create columns that we can place child nodes into.
  4. * Leveraging grid for alignment means we don't need to calculate percent offset
  5. * nor use position:absolute to lay out items.
  6. *
  7. * <Columns>
  8. * <Col>...</Col>
  9. * <Col>...</Col>
  10. * </Columns>
  11. */
  12. export const Columns = styled('ul')<{remainder: number; totalColumns: number}>`
  13. /* Reset defaults for <ul> */
  14. list-style: none;
  15. margin: 0;
  16. padding: 0;
  17. /* Layout of the lines */
  18. display: grid;
  19. grid-template-columns: repeat(${p => p.totalColumns}, 1fr) ${p => p.remainder}fr;
  20. `;
  21. // Export an empty component which so that callsites can correctly nest nodes:
  22. export const Col = styled('li')``;