diff --git a/resources/js/components/SMCarousel.vue b/resources/js/components/SMCarousel.vue index 574ef3f..e7a857f 100644 --- a/resources/js/components/SMCarousel.vue +++ b/resources/js/components/SMCarousel.vue @@ -130,7 +130,7 @@ const disconnectMutationObserver = () => { diff --git a/resources/js/components/SMEditor.vue b/resources/js/components/SMEditor.vue index dfe2e04..adaeaae 100644 --- a/resources/js/components/SMEditor.vue +++ b/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; } diff --git a/resources/js/components/SMFooter.vue b/resources/js/components/SMFooter.vue index 26bf89c..82c912e 100644 --- a/resources/js/components/SMFooter.vue +++ b/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; + } + } + } +} diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue index cfcdb56..3c7d49a 100644 --- a/resources/js/views/Home.vue +++ b/resources/js/views/Home.vue @@ -84,12 +84,12 @@ Minecraft server, participate in weekly challenges and mini-games.

-

+

+ class="minecraft-image" /> We even have

- +

@@ -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%; + } + } + } +}