From c83ed9087c957486a1eb62bb8e1fd43613873991 Mon Sep 17 00:00:00 2001
From: Alessio Gravili <70709113+AlessioGr@users.noreply.github.com>
Date: Mon, 24 Jan 2022 18:25:47 +0100
Subject: [PATCH] Style improvements to sidebar and footer (#587)

---
 frontend/components/layouts/Footer.vue |  2 +-
 frontend/pages/index.vue               | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/components/layouts/Footer.vue b/frontend/components/layouts/Footer.vue
index 8a0ed26a..4598cfdd 100644
--- a/frontend/components/layouts/Footer.vue
+++ b/frontend/components/layouts/Footer.vue
@@ -4,7 +4,7 @@
             <br />
             <v-row align="center" justify="center">
                 <v-col cols="12" class="d-flex justify-center">
-                    By using this site you're accepting our <a href="https://papermc.io/community-guidelines"> Terms of Service</a>
+                    <p>By using this site you're accepting our <a href="https://papermc.io/community-guidelines">Terms of Service</a></p>
                 </v-col>
             </v-row>
 
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 9b542ef5..b5b04f64 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-row>
-            <v-col cols="12" sm="8" md="5" offset-md="3">
+            <v-col cols="12" sm="8" md="5" offset-md="3" class="main-plugin-content">
                 <br />
                 <br />
                 <v-row justify="center" align="center">
@@ -20,7 +20,7 @@
                 </v-row>
             </v-col>
 
-            <v-col cols="12" sm="2" md="2">
+            <v-col cols="12" md="2" class="main-sidebar">
                 <br />
                 <HangarSponsor :sponsor="sponsor" />
 
@@ -160,3 +160,22 @@ export default class Home extends HangarComponent {
     }
 }
 </script>
+
+<style lang="scss" scoped>
+@media (max-width: 746px) {
+    .main-plugin-content {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+@media (min-width: 747px) and (max-width: 840px) {
+    .main-sidebar {
+        max-width: 30%;
+    }
+}
+@media (min-width: 841px) and (max-width: 1370px) {
+    .main-sidebar {
+        max-width: 25%;
+    }
+}
+</style>