feat: separate footer additional info section into distinct columns

IATI · Dec 18, 2024 · f4ec415 · f4ec415
1 parent a7155f2
commit f4ec415
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/src/scss/components/footer/footer-block/_footer-block.scss b/src/scss/components/footer/footer-block/_footer-block.scss
@@ -23,7 +23,6 @@
 .iati-footer-block__content {
   font-weight: 600;
   :where(p, li) {
-    line-height: 1.375;
     margin: 0;
   }
   a {
@@ -37,14 +36,15 @@
     margin: 0;
     padding: 0;
   }
-  > * + * {
-    margin-block-start: 0.5rem;
-  }
 }
 
 .iati-footer-block__content--columns {
-  @media (min-width: $screen-sm) {
-    columns: 3;
-    column-gap: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  align-items: flex-start;
+
+  & > * {
+    flex-grow: 1;
   }
 }
diff --git a/src/scss/components/footer/footer-block/footer-block.stories.ts b/src/scss/components/footer/footer-block/footer-block.stories.ts
@@ -36,18 +36,18 @@ export const AdditionInfo: Story = {
       <div
         class="iati-footer-block__content iati-footer-block__content--columns"
       >
-        <p>
-          Part of the IATI Unified Platform Code licensed under the GNU AGPL.
-        </p>
-        <p>Documentation licensed under CC by 3.0</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
-        </p>
-        <p>Web v2.8.2</p>
-        <p>Services</p>
-        <p>v2.8.0</p>
-        <p>API v2.4.0</p>
+        <div>
+          <p>Part of the IATI Unified Platform.</p>
+          <p>Code licensed under <a href="#">GNU AGPL</a>.</p>
+          <p>Documentation licensed under <a href="#">CC BY 3.0</a>.</p>
+        </div>
+        <div>
+          <ul>
+            <li><a href="#">Web v2.8.2</a></li>
+            <li><a href="#">Services v2.8.0</a></li>
+            <li><a href="#">API v2.4.0</a></li>
+          </ul>
+        </div>
       </div>
     </div>`,
 };