Update responsive styles and class names for consistency

Refactored multiple components to improve responsive design, ensuring better usability on smaller screens. Standardized class names for clarity and consistency, and adjusted layouts and styles to enhance overall alignment and accessibility.

frontend/src/app/pages/features/claiming/claiming.component.html

@@ -19,8 +19,8 @@
             <p>To claim land, you will need some basic tools: a golden shovel, and a stick. You can craft these items
               yourself or do <b>/claim</b> to receive them for free. The shovel is used for modifying claims and the
               stick is used for viewing claim information.</p>
-            <img ngSrc="/public/img/items/shovel.png" alt="Minecraft golden shovel" style="width: 25%;" height="114"
+            <img ngSrc="/public/img/items/shovel.png" alt="Minecraft golden shovel"
-                 width="114">
+                 class="shovelClaiming" style="width: 25%;" height="114" width="114">
             <p>Players start with an allowance of 500 “claim blocks” and can purchase additional “claim blocks” with
               in-game currency using <span style="font-family: 'opensans-bold', sans-serif;">/buyclaimblocks</span>. How
               many claims you can create depends on the rank you have - the amount can be found on the <a

frontend/src/app/pages/features/claiming/claiming.component.scss

@@ -7,3 +7,10 @@ main li {
   margin-left: 30px;
   padding-bottom: 10px;
 }
+
+
+@media (max-width: 690px) {
+  .shovelClaiming {
+    height: 100px;
+  }
+}

frontend/src/app/pages/features/customfeatures/customfeatures.component.html

@@ -163,14 +163,13 @@
           <div class="columnParagraph">
             <h2>Miscellaneous</h2>
             <p>Grindstones can strip shulker box & beehive NBT data</p>
-            <p>Sneak click mending</p>
             <p>/iwanttobreakthisblock, required to break some natural generated blocks</p>
             <p>/sneakclickmending, allows you to mend your items by right clicking while sneaking</p>
             <p>Swift Sneak enchantment can be found in villager trades</p>
             <p>Nether portals can be as small as 1x2 (1x2 portal, 3x4 base)</p>
             <p>Lootchests refill once for every player</p>
             <p>Empty maps can be duplicated using paper in a cartography table</p>
-            <p>Eating glowberries gives you a glowing effect</p>
+            <p>Eating glow berries gives you a glowing effect</p>
           </div>
         </div>
       </section>

frontend/src/app/pages/features/customfeatures/customfeatures.component.scss

@@ -7,3 +7,9 @@ main li {
   margin-left: 30px;
   padding-bottom: 10px;
 }
+
+@media (max-width: 690px) {
+  .columnContainer {
+    text-align: left !important;
+  }
+}

frontend/src/app/pages/features/economy/economy.component.html

@@ -104,7 +104,7 @@
               prices will become more and more extreme. You can see where these thresholds are based on your current
               points here:</p>
             <img ngSrc="/public/img/random/pointbracket.png" alt="Visualization of the point bracket."
-                 style="width: 100%; padding: 0 0 15px 0;"
+                 class="visEconomy" style="width: 100%; padding: 0 0 15px 0;"
                  height="100" width="800">
           </div>
           <div class="columnParagraph">

frontend/src/app/pages/features/economy/economy.component.scss

@@ -7,3 +7,19 @@ main li {
   margin-left: 30px;
   padding-bottom: 10px;
 }
+
+@media (max-width: 690px) {
+  .title {
+    height: calc(100% - 110px);
+    margin-top: 100px;
+  }
+
+  .title h2 {
+    font-size: 0.9em;
+  }
+
+  .visEconomy {
+    height: 50px;
+    width: 357px;
+  }
+}

frontend/src/app/pages/features/map/map.component.scss

@@ -11,3 +11,13 @@
   padding-bottom: 25px;
   font-weight: 100;
 }
+
+@media (max-width: 670px) {
+  .title h1 {
+    font-size: 2em;
+  }
+
+  .title h2 {
+    font-size: 1em;
+  }
+}

frontend/src/app/pages/features/mypet/mypet.component.html

@@ -24,8 +24,8 @@
               your other pets while they are in storage. To interact with your MyPet you will need to make it your
               active MyPet by doing <span style="font-family: 'opensans-bold', sans-serif;">/petswitch</span> and
               selecting the one you want to use.</p>
-            <img ngSrc="/public/img/items/lead.png" alt="Minecraft lead/leash" style="width: 20%;" height="96"
+            <img ngSrc="/public/img/items/lead.png" alt="Minecraft lead/leash"
-                 width="96">
+                 class="leadMyPet" style="width: 20%;" height="96" width="96">
           </div>
           <div class="columnParagraph">
             <h2>Skilltrees and Levels</h2>

frontend/src/app/pages/features/mypet/mypet.component.scss

@@ -13,3 +13,9 @@ main li {
   justify-content: space-between;
   flex-wrap: wrap;
 }
+
+@media (max-width: 690px) {
+  .leadMyPet {
+    height: 70px;
+  }
+}

frontend/src/app/pages/features/warps/warps.component.html

@@ -19,10 +19,8 @@
               name, description, and icon) on their own! This lets you easily promote your town, shop, farm, or just
               about anything else.</p>
             <p>All warps are separated into categories so it's easy to find the category of warp you're looking for.</p>
-            <img ngSrc="/public/img/random/warpgui.png"
+            <img ngSrc="/public/img/random/warpgui.png" alt="In-game warp GUI"
-                 alt="In-game warp GUI"
+                 class="guiWarp" style="width: 80%; padding-bottom: 15px;" height="232" width="356">
-                 style="width: 80%; padding-bottom: 15px;"
-                 height="232" width="356">
           </div>
         </div>
         <div class="columnContainer">
@@ -45,7 +43,7 @@
         </div>
       </section>
       <section class="columnSection" style="padding-top: 0;">
-        <div class="columnParagraph" style="padding-left: 15px;">
+        <div class="columnParagraph" style="padding-left: 15px; text-align: center;">
           <h2>Warp Requirements</h2>
           <p>You need to be the owner of the claim your warp is placed in. It should look good, and be as finished as
             your warp type allows you to have it. Safety is an important aspect as well, visitors should not be
@@ -207,10 +205,8 @@
               warp, just do <span style="font-family: 'opensans-bold', sans-serif;">/warps</span> and click on the chest
               labeled "<span style="font-family: 'opensans-bold', sans-serif;">My Warps</span>" in the bottom left
               corner.</p>
-            <img ngSrc="/public/img/random/editwarpgui.png"
+            <img ngSrc="/public/img/random/editwarpgui.png" alt="In-game warp edit GUI"
-                 alt="In-game warp edit GUI"
+                 class="editWarp" style="width: 80%;" width="384" height="170">
-                 style="width: 80%;"
-                 width="384" height="170">
             <p>Maintaining a warp also involves making sure it looks nice, shops are well stocked, and, if it's a town,
               open plots are always available for residents to move in. Make sure you keep up on maintaining your warp
               or it could be deleted! If a warp is deleted by a staff member you will not receive a refund for the

frontend/src/app/pages/features/warps/warps.component.scss

@@ -12,3 +12,13 @@ main li {
   color: var(--font-color);
   transition: 0.5s ease;
 }
+
+@media (max-width: 690px) {
+  .guiWarp {
+    height: 190px;
+  }
+
+  .editWarp {
+    height: 130px;
+  }
+}

frontend/src/app/pages/footer/footer/footer.component.html

@@ -3,7 +3,7 @@
     <div class="footerInner">
       <div class="footerText">
         <h2>ABOUT US</h2>
-        <p>​Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come
+        <p>Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come
           to call "home". We are your place to get together with friends and play survival, with a few extra features
           suggested by our community!</p>
         <div class="followUs" style="height: 35px; display: flex; align-items: flex-end;">

frontend/src/app/pages/footer/footer/footer.component.scss

@@ -67,3 +67,40 @@ footer ul, footer p {
 .copyright {
   margin-top: 50px;
 }
+
+@media (max-width: 1150px) {
+  .footerInner {
+    flex-wrap: wrap;
+    text-align: center;
+  }
+
+  .footerText {
+    flex: 1 1 100%;
+    margin-right: 0;
+    margin-bottom: 30px;
+  }
+
+  .footerNav {
+    border-left: none;
+    padding-left: 0px;
+    padding-bottom: 15px;
+    min-width: 200px;
+  }
+
+  .followUs {
+    width: 100px;
+    margin: 0 auto;
+  }
+
+  .footerNav {
+    border-left: none;
+    padding-left: 0px;
+    padding-bottom: 15px;
+    min-width: 200px;
+  }
+
+  .copyright {
+    margin-top: 30px;
+    text-align: center;
+  }
+}

frontend/src/app/pages/home/home.component.html

@@ -50,7 +50,7 @@
     <section class="darkmodeSection">
       <div class="container" style="padding: 10px 0 80px 0">
         <iframe id="discord-widget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
-        <div class="paragraph" id="discordp">
+        <div class="paragraph" id="discord-p">
           <h2>Meet the Community</h2>
           <p>Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude
             is your place to get together with friends and relax - and maybe enjoy some survival too. Altitude is
@@ -106,7 +106,7 @@
         </div>
       </div>
     </section>
-    <section class="removemobile darkmodeSection">
+    <section class="remove-mobile darkmodeSection">
       <div class="customContainer">
         <h2 style="padding-bottom: 35px; font-size: 2.8em;">Community Builds</h2>
         <p style="padding-bottom: 35px; font-size: 1.1em; margin: auto;">Thank you to our brilliant players for sharing

frontend/src/app/pages/home/home.component.scss

@@ -287,27 +287,23 @@ main .container {
   .container, .customContainer {
     width: 90%;
   }
-
-  #header-img {
-    width: 45%;
-  }
 }
 
 @media (max-width: 900px) {
-  .removemobile {
+  .remove-mobile {
     display: none;
   }
 }
 
 @media (max-width: 690px) {
-  #discordwidget {
+  #discord-widget {
     margin: 0 auto;
     width: 60%;
     max-width: 380px;
     height: 400px;
   }
 
-  #discordp {
+  #discord-p {
     margin: 50px auto;
   }
 

frontend/src/app/pages/reference/lag/lag.component.html

@@ -50,7 +50,7 @@
           <div id="exceptions" [ngClass]="{'hide': !showExceptions}"
                style="display: flex; justify-content: center; padding-bottom: 30px;">
             <img ngSrc="/public/img/random/farm_limiter_darker.png" alt="Visualization of the farm limiter"
-                 style="width: 70%; padding-top: 7px;" height="375" width="715">
+                 class="visLagLimiter" style="width: 70%; padding-top: 7px;" height="375" width="715">
           </div>
           <ul class="full-page-list">
             <li>Turtles only need one breeding pair. The breeding mechanic of turtles allows you to breed one pair over

frontend/src/app/pages/reference/lag/lag.component.scss

@@ -53,3 +53,14 @@ li {
     text-align: center;
   }
 }
+
+@media (max-width: 690px) {
+  .full-page-list {
+    text-align: left;
+    margin-left: 20px;
+  }
+
+  .visLagLimiter {
+    height: 150px;
+  }
+}

frontend/src/app/pages/reference/mapart/mapart.component.html

@@ -61,10 +61,14 @@
           <div class="columnParagraph">
             <h2>Useful Commands</h2>
             <ul>
-              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart save -</span> Save a mapart</li>
+              <li>
-              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart remove -</span> Delete a mapart</li>
+                <span class="usefulBold">/mapart save -</span> Save a mapart
-              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart find -</span> See who made a specific
+              </li>
-                mapart
+              <li>
+                <span class="usefulBold">/mapart remove -</span> Delete a mapart
+              </li>
+              <li>
+                <span class="usefulBold">/mapart find -</span> See who made a specific mapart
               </li>
             </ul>
           </div>

frontend/src/app/pages/reference/mapart/mapart.component.scss

@@ -0,0 +1,13 @@
+main ul {
+  font-family: 'opensans', sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}
+
+.usefulBold {
+  font-family: 'opensans-bold', sans-serif;
+}

frontend/src/app/pages/reference/nicknames/nicknames.component.html

@@ -29,7 +29,7 @@
               color options. These colors will be in the form of <span
                 style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span>; write down the colors that you like so
               that you can easily use them later.</p>
-            <img ngSrc="/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
+            <img ngSrc="/public/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
                  width="480">
             <p>Output of /colorsextra</p>
             <p>Furthermore, you can also use the <a [routerLink]="['/nickgenerator']">nickname generation tool</a> to
@@ -64,13 +64,16 @@
           <div class="columnParagraph">
             <h2>Useful Commands</h2>
             <ul>
-              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick help</span> - Shows a list of all useful
+              <li>
+                <span style="font-family: 'opensans-bold', sans-serif;">/nick help</span> - Shows a list of all useful
                 nickname commands and how to use them.
               </li>
-              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick try name</span> - Allows players to see
+              <li>
+                <span style="font-family: 'opensans-bold', sans-serif;">/nick try name</span> - Allows players to see
                 how a nickname would look as many times as you like.
               </li>
-              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick request name</span> - Allows players to
+              <li>
+                <span style="font-family: 'opensans-bold', sans-serif;">/nick request name</span> - Allows players to
                 submit a new nickname to staff for approval. This function can only be used once per day.
               </li>
             </ul>

frontend/src/app/pages/reference/nicknames/nicknames.component.scss

@@ -0,0 +1,9 @@
+main ul {
+  font-family: 'opensans', sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}

frontend/src/app/pages/reference/rules/rules.component.html

@@ -164,7 +164,7 @@
             glitches). Exploiting any non-vanilla features (our plugins) is prohibited. Additionally, tools that bypass
             our AFK system are not allowed. You may use any mods that fit into the categories below.</p>
           <p style="font-family: 'opensans-bold', sans-serif;">We allow modifications in the following categories:</p>
-          <ul class="list">
+          <ul class="full-page-list">
             <li>Mods that improve client performance (Optifine)</li>
             <li>Minimaps, as long as it doesn't show anything you can't normally see (caves, dungeon locations, etc.)
             </li>

frontend/src/app/pages/reference/rules/rules.component.scss

@@ -62,11 +62,11 @@
 }
 
 @media (max-width: 670px) {
-  main .container {
-    text-align: center;
-  }
-
   .list {
     margin-left: 50px;
   }
+
+  .full-page-list {
+    margin-left: 30px;
+  }
 }

frontend/src/styles.scss

@@ -418,7 +418,7 @@ main .container {
 
 // Different resolution changes
 @media (max-width: 1150px) {
-  .container {
+  .container, .customContainer, .columnSection {
     width: 90%;
   }
 
@@ -430,5 +430,30 @@ main .container {
     height: calc(100% - 150px);
     margin-top: 0;
   }
-
+}
+
+@media (max-width: 690px) {
+  main .container {
+    text-align: center;
+    width: 90%;
+    padding: 30px 0;
+  }
+
+  .title {
+    height: calc(100% - 110px);
+    margin-top: 100px;
+  }
+
+  .title h2 {
+    font-size: 0.9em;
+  }
+
+  .columnContainer {
+    width: 100%;
+    text-align: center;
+  }
+
+  .paragraph {
+    width: 100%;
+  }
 }