From bed4c68427ad2de6cdf363de9cff4df08dee89b3 Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Thu, 5 Oct 2023 13:37:18 +0200
Subject: [PATCH] feat(site): better mobile spacing

---
 components/home/Header.vue      | 11 +++++++
 components/layout/Companies.vue | 54 ++++++++++++++++++++++++++++++++-
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/components/home/Header.vue b/components/home/Header.vue
index 291c1476bf..5429a528d6 100644
--- a/components/home/Header.vue
+++ b/components/home/Header.vue
@@ -109,5 +109,16 @@
                 background: var(--bs-pink);
             }
         }
+
+        @include media-breakpoint-down(lg) {
+            .hero {
+                padding-top: 6rem;
+                padding-bottom: 2rem;
+
+                .text-block {
+                    margin-bottom: 0;
+                }
+            }
+        }
     }
 </style>
diff --git a/components/layout/Companies.vue b/components/layout/Companies.vue
index 2756362587..9eba1c24c7 100644
--- a/components/layout/Companies.vue
+++ b/components/layout/Companies.vue
@@ -16,13 +16,32 @@
 
 <script>
     export default defineComponent({
-
+        mounted() {
+            window.addEventListener("resize", this.autoScrollIfNeeded);
+            this.autoScrollIfNeeded();
+        },
+        unmounted() {
+            window.removeEventListener("resize", this.autoScrollIfNeeded)
+        },
         props: {
             inverted: {
                 type: Boolean,
                 default: false
             }
         },
+        methods: {
+            autoScrollIfNeeded() {
+                if (this.$refs && this.$refs.companies) {
+                    const companies = this.$refs.companies;
+                    const classes = companies.classList;
+                    if (companies.clientWidth >= this.$refs.container.parentElement.offsetWidth) {
+                        classes.add("scrolling");
+                    } else {
+                        classes.remove("scrolling")
+                    }
+                }
+            }
+        },
         computed: {
             companies() {
                 return [
@@ -65,4 +84,37 @@
             }
         }
     }
+
+    @keyframes auto-scroll {
+        0% {
+            margin-left: 0;
+        }
+        50% {
+            margin-left: -25%;
+        }
+        100% {
+            margin-left: 0;
+        }
+    }
+
+    @include media-breakpoint-down(lg) {
+        .container {
+            width: fit-content;
+            max-width: unset;
+
+            .companies {
+                display: flex;
+                flex-wrap: nowrap;
+                overflow-x: auto;
+                overflow-y: hidden;
+                width: fit-content;
+                margin: auto;
+
+                &.scrolling {
+                    animation: auto-scroll 30s infinite linear;
+                }
+            }
+        }
+    }
+
 </style>
\ No newline at end of file