Add updated date to Terms page + fix responsive

src/routes/terms/+page.server.ts

@@ -7,6 +7,7 @@ export const load: PageServerLoad = async () => {
         const res = await fetchAPI(`query {
             legal {
                 terms
+                date_updated
             }
         }`)
 

src/routes/terms/+page.svelte

@@ -4,12 +4,17 @@
 
 <script lang="ts">
     import type { PageData } from './$types'
+    import dayjs from 'dayjs'
+    import relativeTime from 'dayjs/plugin/relativeTime'
+    // Components
     import PageTransition from '$components/PageTransition.svelte'
     import Metas from '$components/Metas.svelte'
     import Heading from '$components/molecules/Heading.svelte'
 
     export let data: PageData
     const { legal } = data
+
+    dayjs.extend(relativeTime)
 </script>
 
 <Metas
@@ -31,6 +36,12 @@
                     </div>
                 </article>
             {/each}
+
+            <footer>
+                <p class="text-info">
+                    Updated: <time datetime={dayjs(legal.date_updated).format('YYYY-MM-DD')}>{dayjs().to(dayjs(legal.date_updated))}</time>
+                </p>
+            </footer>
         </div>
     </section>
 </PageTransition>

src/style/pages/_terms.scss

@@ -3,13 +3,22 @@
     &__categories {
         .container {
             display: block;
+            padding-bottom: clamp(48px, 12vw, 80px);
 
             @include bp (sm) {
                 display: grid;
+                padding-bottom: clamp(80px, 10vw, 144px);
+            }
         }
 
-            & > * {
-                margin-bottom: clamp(40px, 5vw, 72px);
+        // Footer
+        footer {
+            margin-top: 40px;
+            color: $color-lilas-bright;
+
+            @include bp (sm) {
+                grid-column: 12 / -3;
+                margin-top: 64px;
             }
         }
     }
@@ -18,7 +27,14 @@
     &__section {
         --columns: 16;
         display: block;
-        padding: 0 20px;
+
+        &:not(:last-of-type) {
+            margin-bottom: 40px;
+
+            @include bp (sm) {
+                margin-bottom: clamp(40px, 5vw, 72px);
+            }
+        }
 
         @include bp (sm) {
             display: grid;
@@ -47,6 +63,7 @@
         }
         .text {
             color: $color-tertiary;
+            line-height: 1.5;
 
             @include bp (sm) {
                 grid-column: 6 / -1;