mobile fixes for footer, comittee and faq

src/components/committee/style.scss

@@ -7,7 +7,7 @@
     h2 {
         color: $primary-color;
         margin-bottom: 0;
-        font-size: 48px;
+        font-size: 38px;
         font-family: "Krona-One";
         margin-bottom: 50px;
         width: 100%;
@@ -18,14 +18,16 @@
     p {
         margin: 0;
         font-family: "Krona-One";
-        font-size: 28px;
+        font-size: 16px;
     }
 
     .function {
         color: $primary-color;
     }
 
     .container {
+        flex-direction: column;
+        flex-wrap: nowrap;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
@@ -34,51 +36,47 @@
         margin-right: auto;
     }
 
-    .left {
-        width: 50%;
+    .left, .right {
         gap: 24px;
         display: flex;
         flex-direction: column;
+        width: 100%;
+        text-align: left;
     }
 
     .right {
-        width: 50%;
-        text-align: right;
-        gap: 24px;
-        display: flex;
-        flex-direction: column;
+        margin-top: 24px;
+    }
 
-        .person {
-            justify-content: flex-end;
-        }
+    .right .person{
+        flex-direction: row-reverse;
+        justify-content: flex-end;
     }
 
+
     .middle {
         width: 100%;
-        text-align: center;
         margin-top: 24px;
 
         .person {
-            justify-content: center;
-            flex-direction: column;
-            align-items: center;
+            flex-direction: row;
             gap: 20px;
         }
     }
 
     img {
         clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-        height: 160px;
-        width: 150px;
-        min-width: 150px;
+        height: 100px;
+        width: 90px;
+        min-width: 90px;
         object-fit: cover;
         position: relative;
     }
 
     .polygon {
-        height: 170px;
-        width: 160px;
-        min-width: 160px;
+        height: 110px;
+        width: 100px;
+        min-width: 100px;
         clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
         background-color: $primary-color;
         display: flex;
@@ -89,6 +87,48 @@
     .person {
         display: flex;
         align-items: center;
-        gap: 40px;
+        gap: 20px;
     }
 }
+
+@include breakpoint(md) {
+    .committee {
+        h2 {
+            font-size: 48px;
+        }
+
+        .container {
+            flex-direction: row;
+            flex-wrap: wrap;
+        }
+
+        .left {
+            width: 50%;
+        }
+
+        .right {
+            width: 50%;
+            text-align: right;
+            margin-top: 0;
+
+            .person {
+                justify-content: flex-end;
+                flex-direction: row;
+            }
+        }
+
+        .middle {
+            width: 100%;
+            text-align: center;
+            margin-top: 24px;
+
+            .person {
+                justify-content: center;
+                flex-direction: column;
+                align-items: center;
+                gap: 20px;
+            }
+        }
+    }
+}
+

src/components/faq/style.scss

@@ -26,7 +26,8 @@
 
     .icon {
         position: absolute;
-        right: 48px;
+        right: 16px;
+        top: 16px;
         color: $primary-color;
         font-size: 24px;
     }
@@ -64,8 +65,12 @@
     }
 }
 
-@include breakpoint(sm) {
+@include breakpoint(md) {
     .faq {
         border-radius: 6px;
+
+        .icon {
+            top: unset
+        }
     }
 }

src/components/footer/index.tsx

@@ -11,32 +11,34 @@ import * as style from "./style.scss";
  */
 export const Footer: FunctionalComponent = () => {
     const scrollToDiv = (target: any) => {
-        if (document.getElementById(target)){
-            window.scrollTo({top: document.getElementById(target).offsetTop})
+        if (document.getElementById(target)) {
+            window.scrollTo({ top: document.getElementById(target).offsetTop })
         }
     }
 
     return (
         <footer>
             <section class={style.footer}>
-            <div>
-                    <p>Site</p>
-                    <a onClick={() => scrollToDiv('home')}>Home</a>
-                    <a onClick={() => scrollToDiv('aboutus')}>About us </a>
-                    <a onClick={() => scrollToDiv('timetable')}>Timetable</a>
-                    <a onClick={() => scrollToDiv('photos')}>Pictures</a>
-                    <a onClick={() => scrollToDiv('themes')}>Themes</a>
-                    <a onClick={() => scrollToDiv('faq')}>FAQ</a>
-                    <a onClick={() => scrollToDiv('sponsors')}>Sponsors</a>
+                <div class={style.container}>
+                    <div class={style.innercontainer}>
+                        <p>Site</p>
+                        <a onClick={() => scrollToDiv('home')}>Home</a>
+                        <a onClick={() => scrollToDiv('aboutus')}>About us </a>
+                        <a onClick={() => scrollToDiv('timetable')}>Timetable</a>
+                        <a onClick={() => scrollToDiv('photos')}>Pictures</a>
+                        <a onClick={() => scrollToDiv('themes')}>Themes</a>
+                        <a onClick={() => scrollToDiv('faq')}>FAQ</a>
+                        <a onClick={() => scrollToDiv('sponsors')}>Sponsors</a>
+                    </div>
+                    <div class={style.innercontainer}>
+                        <p>Contact</p>
+                        <a title="Send us an email!"
+                            href="mailto:[email protected]"
+                            target="_blank"
+                            rel="noopener"> [email protected] </a>
+                    </div>
                 </div>
-                <div>
-                    <p>Contact</p>
-                    <a title="Send us an email!"
-                        href="mailto:[email protected]"
-                        target="_blank"
-                        rel="noopener"> [email protected] </a>
-                </div>
-        </section>
-    </footer>
+            </section>
+        </footer>
     );
 }

src/components/footer/style.scss

@@ -1,27 +1,48 @@
 @import "./src/variables";
+@import "./src/mixins";
+
 
 .footer {
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    margin-bottom: 20px;
+    gap: 16px;
+
+    .container {
+        display: flex;
+        width: 80%;
+        margin-left: auto;
+        margin-right: auto;
+        flex-direction: column;
+        gap: 16px;
+    }
 
     p {
         color: $primary-color;
         font-family: "Krona-One";
-        font-size: 34px;
-        margin: 10px 0;
+        font-size: 16px;
+        margin: 0;
     }
 
     a {
         font-family: "Krona-One";
-        font-size: 34px;
+        font-size: 16px;
         text-decoration: none;
         color: #fff;
-        margin: 10px 0;
     }
 
-    > div {
+    .innercontainer {
         display: flex;
         flex-direction: column;
         width: 30%;
     }
 }
+
+@include breakpoint(md) {
+    .footer .container {
+        flex-direction: row;
+        gap: 0;
+    }
+}
+