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"
-                 width="114">
+            <img ngSrc="/public/img/items/shovel.png" alt="Minecraft golden shovel"
+                 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"
-                 width="96">
+            <img ngSrc="/public/img/items/lead.png" alt="Minecraft lead/leash"
+                 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"
-                 alt="In-game warp GUI"
-                 style="width: 80%; padding-bottom: 15px;"
-                 height="232" width="356">
+            <img ngSrc="/public/img/random/warpgui.png" alt="In-game warp GUI"
+                 class="guiWarp" 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"
-                 alt="In-game warp edit GUI"
-                 style="width: 80%;"
-                 width="384" height="170">
+            <img ngSrc="/public/img/random/editwarpgui.png" alt="In-game warp edit GUI"
+                 class="editWarp" 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;
+  }
+}