From 918b28c91930ae2373bb3452b641199310204f78 Mon Sep 17 00:00:00 2001
From: moonleay <contact@moonleay.net>
Date: Wed, 6 Dec 2023 17:26:49 +0100
Subject: [PATCH] feat: made mobile screenshots appear on the mobile how-do-i
 page

---
 src/pages/how-do-i.astro       | 10 ++++++----
 src/styles/pages/how-do-i.scss | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/how-do-i.astro b/src/pages/how-do-i.astro
index 0e73ab6..bbbe84b 100644
--- a/src/pages/how-do-i.astro
+++ b/src/pages/how-do-i.astro
@@ -12,10 +12,11 @@ import "../styles/pages/how-do-i.scss";
        command.<br />Example:
     </p>
     <div class="imgwrapper">
-      <img
+      <img class="desktop"
           src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexample.png"
           alt="A screenshot of the example in Discord."/>
-      <p><code>/feature feature:Time Planning Feature set:Enable channel:#ich-kann-heute</code></p>
+      <img class="mobile" src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexamplemobile.png" alt="A screenshot of the example in Discord."/>
+      <!--<p><code>/feature feature:Time Planning Feature set:Enable channel:#ich-kann-heute</code></p>-->
     </div>
   </section>
   <section class="section">
@@ -25,11 +26,12 @@ import "../styles/pages/how-do-i.scss";
       />Example:
     </p>
     <div class="imgwrapper">
-      <img
+      <img class="desktop"
           src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.png"
           alt="A screenshot of the example in Discord."
       />
-      <p><code>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code></p>
+      <img class="mobile" src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexamplemobile.png" alt="A screenshot of the example in Discord."/>
+      <!--<p><code>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code></p>-->
     </div>
   </section>
   <section class="footernotesection">
diff --git a/src/styles/pages/how-do-i.scss b/src/styles/pages/how-do-i.scss
index 33ea791..7a2cde5 100644
--- a/src/styles/pages/how-do-i.scss
+++ b/src/styles/pages/how-do-i.scss
@@ -18,21 +18,23 @@
     margin: auto;
     text-align: center;
 
-    img {
+    .desktop {
       display: none;
     }
 
-    p, code {
+    .mobile {
       display: flex;
+      border-radius: 5px;
+      max-width: 100%;
     }
     @media (min-width: 600px) {
-      img {
+      .desktop {
         display: flex;
         border-radius: 5px;
         max-width: 100%;
       }
 
-      p, code {
+      .mobile {
         display: none;
       }
     }