From b2037c95757a3ced79ed687c32652ad292651309 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Sat, 22 Apr 2023 22:25:42 +1000
Subject: [PATCH] css updates

---
 resources/css/utils.scss             |  2 +-
 resources/js/components/SMFooter.vue | 23 +++++---
 resources/js/components/SMHero.vue   | 35 +++++++----
 resources/js/components/SMRow.vue    |  2 +-
 resources/js/views/Home.vue          | 88 ++++++++++++----------------
 5 files changed, 78 insertions(+), 72 deletions(-)

diff --git a/resources/css/utils.scss b/resources/css/utils.scss
index 4de120e..f6f09b4 100644
--- a/resources/css/utils.scss
+++ b/resources/css/utils.scss
@@ -92,7 +92,7 @@
 }
 
 .align-items-center {
-    align-items: center;
+    align-items: center !important;
 }
 
 /* Flex Justify */
diff --git a/resources/js/components/SMFooter.vue b/resources/js/components/SMFooter.vue
index e56d971..40694a4 100644
--- a/resources/js/components/SMFooter.vue
+++ b/resources/js/components/SMFooter.vue
@@ -36,10 +36,8 @@
                 </ul>
             </SMColumn>
         </SMRow>
-        <SMRow>
-            <SMColumn
-                width="350px"
-                class="align-items-center justify-content-center align-items-center">
+        <SMRow class="align-items-center">
+            <SMColumn class="align-items-center logo">
                 <router-link to="/" class="logo-link">
                     <img
                         class="dark:d-none"
@@ -76,10 +74,8 @@
                 </p>
             </SMColumn>
         </SMRow>
-        <SMRow>
-            <SMColumn
-                width="350px"
-                class="justify-content-center align-items-center copyright"
+        <SMRow class="align-items-center">
+            <SMColumn class="align-items-center copyright"
                 >Made with ❤️ - Copyright &copy; 2023</SMColumn
             >
             <SMColumn class="justify-content-center footer-links">
@@ -145,6 +141,11 @@
         }
     }
 
+    .copyright,
+    .logo {
+        flex-basis: 350px;
+    }
+
     .logo-link:hover {
         filter: none;
     }
@@ -191,6 +192,12 @@
             align-items: center;
             justify-content: center;
         }
+
+        .copyright,
+        .logo {
+            flex-basis: auto;
+            margin: 16px 0;
+        }
     }
 }
 
diff --git a/resources/js/components/SMHero.vue b/resources/js/components/SMHero.vue
index a973468..7d2a5ad 100644
--- a/resources/js/components/SMHero.vue
+++ b/resources/js/components/SMHero.vue
@@ -1,11 +1,11 @@
 <template>
-    <section class="sm-hero">
-        <div class="sm-hero-background" :style="heroStyles"></div>
+    <section class="hero">
+        <div class="hero-background" :style="heroStyles"></div>
         <SMContainer class="align-items-start">
-            <div class="sm-hero-content">
+            <div class="hero-content">
                 <h1>{{ heroTitle }}</h1>
                 <p>{{ heroExcerpt }}</p>
-                <div class="sm-hero-buttons">
+                <div class="hero-buttons">
                     <SMButton
                         v-if="loaded"
                         type="primary"
@@ -14,7 +14,7 @@
                 </div>
             </div>
         </SMContainer>
-        <div class="sm-hero-caption">
+        <div class="hero-caption">
             <router-link
                 v-if="loaded"
                 :to="{ name: 'article', params: { slug: heroSlug } }"
@@ -100,11 +100,11 @@ handleLoad();
 </script>
 
 <style lang="scss">
-.sm-hero {
+.hero {
     position: relative;
     overflow: hidden;
 
-    .sm-hero-background {
+    .hero-background {
         position: absolute;
         top: 0;
         left: 0;
@@ -115,7 +115,7 @@ handleLoad();
         background-size: cover;
     }
 
-    .sm-hero-content {
+    .hero-content {
         position: relative;
         margin: 150px 32px 120px;
         max-width: 640px;
@@ -137,7 +137,7 @@ handleLoad();
         }
     }
 
-    .sm-hero-caption {
+    .hero-caption {
         position: absolute;
         bottom: 14px;
         right: 30px;
@@ -158,7 +158,7 @@ handleLoad();
         }
     }
 
-    .sm-hero-buttons {
+    .hero-buttons {
         padding-top: 48px;
 
         .primary {
@@ -166,4 +166,19 @@ handleLoad();
         }
     }
 }
+
+@media only screen and (max-width: 640px) {
+    .hero {
+        .hero-content {
+            margin: 150px 0;
+        }
+
+        .hero-buttons {
+            .button {
+                display: block;
+                text-align: center;
+            }
+        }
+    }
+}
 </style>
diff --git a/resources/js/components/SMRow.vue b/resources/js/components/SMRow.vue
index 24e5914..9525074 100644
--- a/resources/js/components/SMRow.vue
+++ b/resources/js/components/SMRow.vue
@@ -37,7 +37,7 @@ defineProps({
 }
 
 @media screen and (max-width: 768px) {
-    .sm-row {
+    .row {
         flex-direction: column;
     }
 }
diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue
index 0b8d130..e3d4fce 100644
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -83,7 +83,9 @@
             <SMRow>
                 <SMColumn
                     class="align-items-center justify-content-center flex-basis-45">
-                    <img src="/img/discord.jpg" />
+                    <div class="support-image">
+                        <img src="/img/discord.jpg" />
+                    </div>
                 </SMColumn>
                 <SMColumn class="align-items-center flex-basis-55">
                     <p>
@@ -210,9 +212,18 @@ import SMHero from "../components/SMHero.vue";
         border-radius: 24px;
         max-width: 960px;
 
+        .row {
+            gap: 30px;
+        }
+
+        .support-image {
+            display: block;
+        }
+
         img {
+            margin: 32px 0;
             border-radius: 24px;
-            width: 80%;
+            width: 320px;
             transform: rotateZ(-10deg);
         }
 
@@ -229,27 +240,14 @@ import SMHero from "../components/SMHero.vue";
 
         .button-row {
             display: flex;
-            justify-content: space-between;
             width: 100%;
             margin-top: 16px;
-        }
-    }
-}
 
-@media only screen and (max-width: 1000px) {
-    .page-home {
-        .support {
-            img {
-                min-width: 256px;
-                margin-left: -90px;
-            }
-            .button-row {
-                flex-direction: column;
-                gap: 15px;
+            flex-direction: column;
+            gap: 15px;
 
-                .button {
-                    text-align: center;
-                }
+            .button {
+                text-align: center;
             }
         }
     }
@@ -258,13 +256,22 @@ import SMHero from "../components/SMHero.vue";
 @media only screen and (max-width: 768px) {
     .page-home {
         .about {
-            margin: 0;
-            border-radius: 0;
+            padding: 0;
+
+            .container-inner {
+                margin: 0;
+                padding: 0 32px;
+                border-radius: 0;
+            }
         }
 
         .workshops {
             margin-top: 0;
             margin-bottom: 0;
+
+            .row {
+                gap: 30px;
+            }
         }
 
         .minecraft {
@@ -283,39 +290,16 @@ import SMHero from "../components/SMHero.vue";
         }
 
         .support {
-            margin: 0;
-            border-radius: 0;
-        }
-    }
-}
+            padding: 0;
 
-@media only screen and (max-width: 640px) {
-    .page-home {
-        .about {
-            padding: 0 32px 32px 32px;
+            .container-inner {
+                margin: 0;
+                padding: 32px;
+                border-radius: 0;
 
-            h2 {
-                font-size: 300%;
-            }
-
-            p {
-                font-size: 100%;
-                line-height: 1.5em;
-            }
-        }
-
-        .workshops,
-        .support,
-        .minecraft,
-        .subscribe {
-            padding: 32px 32px 32px 32px;
-
-            h2 {
-                font-size: 200%;
-            }
-
-            p {
-                font-size: 100%;
+                .row {
+                    gap: 30px;
+                }
             }
         }
     }