Commits on Jun 9, 2022

1. Fix alignment of columns in the More links component on homepage …

   In tablet view and above, the columns in this component were
   misaligned with the columns in the Featured component above.
   This is due to two incompatible layout approaches.
   
   Several approaches to align these elements were investigated,
   using combinations of float based layouts and CSS grid. However
   these approaches did not yield any compatible alignments,
   possibly due to differences in how browsers calculate `%`
   widths vs `fr` widths.
   
   The fix was to use CSS `columns` with a `column-gap` matching
   the gutter in the row/columns layout classes, and limiting the
   width of the list to two columns out of three (66.66%). This
   aligns the elements correctly while keeping the required top ->
   bottom then left -> right behaviour of the links.
   
   Note that the `break-inside: avoid-column` and the padding-top
   and padding-bottom tweaks are used to prevent triggering a
   possible bug in Safari where focused anchors in a multi-column
   layout cause links to jump between columns. As this is not a
   long-term robust solution, we should investigate this further
   for a possible refactor.

   

   matthillco committed Jun 9, 2022
   Configuration menu

   • View commit details
   • Copy full SHA for ce676f4
   • Browse repository at this point

   Copy the full SHA

   ce676f4 View commit details

   Browse the repository at this point in the history