small mobile response update

resources/js/components/SMCarousel.vue

@@ -130,7 +130,7 @@ const disconnectMutationObserver = () => {
 <style lang="scss">
 .carousel {
     position: relative;
-    height: 26rem;
+    height: 28rem;
     background: #eee;
     overflow: hidden;
 

resources/js/components/SMCarouselSlide.vue

@@ -77,6 +77,7 @@ handleLoad();
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
+    overflow: hidden;
 
     .carousel-slide-loading {
         display: flex;
@@ -145,7 +146,7 @@ handleLoad();
     }
 }
 
-@media (max-width: 768px) {
+@media only screen and (max-width: 768px) {
     .carousel-slide {
         .carousel-slide-body {
             padding: 0;
@@ -158,8 +159,23 @@ handleLoad();
                 padding-left: 5rem;
                 padding-right: 5rem;
                 border-radius: 0;
+
+                .carousel-slide-content-inner {
+                    overflow: hidden;
+                }
+            }
+
+            h3 {
+                font-size: 120%;
+            }
+
+            .carousel-slide-body-buttons {
+                text-align: center;
             }
         }
     }
 }
+
+@media only screen and (max-width: 640px) {
+}
 </style>

resources/js/components/SMEditor.vue

@@ -601,7 +601,7 @@ centered {
     }
 }
 
-@media (max-width: 768px) {
+@media only screen and (max-width: 768px) {
     trix-toolbar .trix-button--icon {
         height: 1.6rem;
     }

resources/js/components/SMFooter.vue

@@ -129,6 +129,7 @@
 
     ul {
         display: flex;
+        flex-direction: row;
         margin: 0 -1rem;
         padding: 0;
         list-style-type: none;
@@ -137,6 +138,8 @@
             padding: 0;
             margin-left: 1rem;
             margin-right: 1rem;
+            margin-bottom: 0;
+            text-align: center;
         }
     }
 
@@ -165,4 +168,20 @@
         }
     }
 }
+
+@media only screen and (max-width: 640px) {
+    .footer {
+        .footer-acknowledgement {
+            padding: 0 1rem;
+        }
+        .footer-links ul {
+            flex-direction: column;
+
+            li {
+                text-align: center;
+                margin-bottom: 0.5rem;
+            }
+        }
+    }
+}
 </style>

resources/js/views/Home.vue

@@ -84,12 +84,12 @@
                     Minecraft server, participate in weekly challenges and
                     mini-games.
                 </p>
-                <p class="text-left">
+                <p class="minecraft-education">
                     <img
                         src="/img/minecraft-edu.png"
                         height="96"
                         width="96"
-                        class="float-left mt-2 mr-4" />
+                        class="minecraft-image" />
                     We even have
                     <a
                         href="https://education.minecraft.net/en-us/discover/what-is-minecraft"
@@ -100,7 +100,10 @@
                     you walk. No school accounts needed.
                 </p>
                 <p class="pt-5">
-                    <img src="/img/minecraft-address.png" height="70" />
+                    <img
+                        src="/img/minecraft-address.png"
+                        height="70"
+                        class="minecraft-address" />
                 </p>
             </SMContainer>
         </SMContainer>
@@ -267,10 +270,13 @@ handleLoad();
 
     .about {
         margin-top: 5rem;
+        margin-left: 2rem;
+        margin-right: 2rem;
         background-color: #3d4e5d;
         color: rgb(230, 245, 235);
         border-radius: 24px;
         padding: 4rem 8rem;
+        width: auto;
 
         h2 {
             font-size: 400%;
@@ -301,7 +307,6 @@ handleLoad();
             border-radius: 50rem;
             height: 20rem;
             width: 20rem;
-            // transform: rotateZ(-10deg);
         }
     }
 
@@ -310,6 +315,9 @@ handleLoad();
         color: rgb(56, 79, 95);
         border-radius: 24px;
         padding: 4rem 6rem;
+        margin-left: 2rem;
+        margin-right: 2rem;
+        width: auto;
 
         img {
             border-radius: 24px;
@@ -372,6 +380,21 @@ handleLoad();
             max-width: 44rem;
             margin: 1rem auto;
         }
+
+        .minecraft-education {
+            text-align: left;
+
+            .minecraft-image {
+                float: left;
+                margin-top: 1rem;
+                margin-right: 2rem;
+            }
+        }
+
+        .minecraft-address {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     .subscribe {
@@ -400,4 +423,76 @@ handleLoad();
         }
     }
 }
+
+@media only screen and (max-width: 768px) {
+    .home {
+        .about {
+            margin-top: 2rem;
+            margin-left: 0;
+            margin-right: 0;
+            padding: 4rem;
+            border-radius: 0;
+        }
+
+        .workshops {
+            margin-top: 4rem;
+            margin-bottom: 4rem;
+        }
+
+        .support {
+            margin-left: 0;
+            margin-right: 0;
+            padding: 4rem;
+            border-radius: 0;
+        }
+
+        .minecraft {
+            margin-top: 0;
+            padding-left: 1rem;
+            padding-right: 1rem;
+
+            .minecraft-education {
+                text-align: center;
+
+                .minecraft-image {
+                    float: none;
+                    display: block;
+                    margin: 0 auto 1rem auto;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 640px) {
+    .home {
+        .about {
+            padding: 2rem;
+
+            h2 {
+                font-size: 300%;
+            }
+
+            p {
+                font-size: 100%;
+                line-height: 150%;
+            }
+        }
+
+        .workshops,
+        .support,
+        .minecraft,
+        .subscribe {
+            padding: 2rem;
+
+            h2 {
+                font-size: 200%;
+            }
+
+            p {
+                font-size: 100%;
+            }
+        }
+    }
+}
 </style>