mobile temp fix

frontend/public/styles/css/classes.css

@@ -167,4 +167,38 @@ hr {
 
 .zoom:hover {
     transform: scale(1.05);
+}
+
+.sgaButtontext {
+    visibility: hidden;
+    transform:
+            translateX(140px)
+            translateY(-15px);
+    font-size: small;
+    margin-bottom: -20px;
+    color: var(--accent);
+}
+
+.myButtonText {
+    transform:
+            translateX(-136px);
+    margin-top: -32px;
+    font-size: small;
+    color: var(--accent);
+}
+
+.friendlyButtons {
+    transform:
+            translateX(-147px);
+}
+
+.otherButtons {
+    transform:
+            translateX(134px);
+}
+
+.sendButton {
+    width: 15%;
+    margin-top: 4px;
+    margin-left: -30px;
 }

frontend/public/styles/css/mobile.css

@@ -29,4 +29,38 @@
     .beep-buttons {
         min-width: 42%;
     }
+
+    .sgaButtontext {
+        visibility: hidden;
+        transform:
+                translateY(-15px);
+        font-size: small;
+        margin-bottom: -20px;
+        color: var(--accent);
+    }
+
+    .myButtonText {
+        transform:
+                translateX(-90px)
+                translateY(-90px);
+        margin-top: -32px;
+        font-size: small;
+        color: var(--accent);
+    }
+
+    .friendlyButtons {
+        transform:
+                translateX(-8px);
+    }
+
+    .otherButtons {
+        transform:
+                translateX(-8px);
+    }
+
+    .sendButton {
+        width: 15%;
+        margin-top: 4px;
+        margin-left: -10px;
+    }
 }

frontend/src/components/footer/buttons.astro

@@ -7,8 +7,8 @@ import OtherButtons from "./other-buttons.astro"
 <MyButtons />
 <hr>
 <div style="display: flex; flex-wrap: nowrap; justify-content: center;">
-    <p style="transform: translateX(-147px);">friendly buttons</p>
+    <p class="friendlyButtons">friendly buttons</p>
-    <p style="transform: translateX(134px);">other buttons</p>
+    <p class="otherButtons">other buttons</p>
 </div>
 <div style="display: flex; flex-wrap: nowrap; justify-content: center;">
     <FriendlyButtons />

frontend/src/components/footer/mybuttons.astro

@@ -9,5 +9,5 @@
         <img id="sgaButton" style="cursor: pointer; display: none;" width="88" height="31" style="cursor:pointer;" onclick="toggleTheme()" src="/assets/images/badges/mine/standard-galactic-alphabet.png" alt="animation of a bunch of twinkling stars" loading="lazy">
     </div>
 </div>
-<p id="sgaButtonText" style="visibility: hidden; transform: translateX(140px) translateY(-15px); font-size: small; margin-bottom: -20px; color: var(--accent);">press me!</p>
+<p id="sgaButtonText" class="sgaButtontext">press me!</p>
-<p style="transform: translateX(-136px); margin-top: -32px; font-size: small; color: var(--accent);">for this site!</p>
+<p class="myButtonText">for this site!</p>

frontend/src/components/main-page/widgets/ntfy.astro

@@ -15,8 +15,7 @@
   </div>
 
   <button
-  class="custom-btn btn-1"
+  class="custom-btn btn-1 sendButton"
-  style="width: 15%; margin-top: 3px; margin-left: -30px;"
   onclick="ntfyClick()"
   id="ntfy-button">
   <span>Send</span>