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/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><span style="font-family: 'opensans-bold', sans-serif;">/mapart remove -</span> Delete a mapart</li>
-              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart find -</span> See who made a specific
-                mapart
+              <li>
+                <span class="usefulBold">/mapart save -</span> Save a mapart
+              </li>
+              <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;
+  }
 }