From 77fea91b0d16f445c907b1570b0d5b75812074ff Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Wed, 22 Jun 2022 11:28:14 +0300
Subject: [PATCH] Added new styles for patterns, fixed patterns, added new
 styles for FAQ, updated FAQ

---
 css/styles.css | 17 ++++++++++++++++-
 faq.html       | 28 ++++++++++++++--------------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 80a1198..af01444 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -493,7 +493,7 @@ table, th, td {
     }
 
         .pattern-item {
-            width: 200px;
+            width: 100%;
             height: 48px;
             padding: 8px;
             border-radius: var(--number-border-radius);
@@ -508,6 +508,12 @@ table, th, td {
             cursor: default;
         }
 
+        @media only screen and (min-width: 540px) {
+            .pattern-item {
+                width: 200px;
+            }
+        }
+
         .pattern-item__selected {
             background: var(--color-b);
         }
@@ -562,6 +568,15 @@ table, th, td {
     word-break: break-all;
 }
 
+.faq__ask {
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.faq__reply {
+    padding-left: 16px;
+}
+
 /* ----- */
 /* PAGES */
 /* ----- */
diff --git a/faq.html b/faq.html
index 5a26629..31b0df7 100644
--- a/faq.html
+++ b/faq.html
@@ -96,31 +96,31 @@
         <div class="wavelovers">
             <div class="content-item">
                 <h2 class="content-item__header">FAQ</h2>
-                <span>What is the purpose of this software?</span><br />
-                <span>Everyone decides for himself, but can be used as a gamepad vibration tester, or as a hand massager.</span><br /><br />
+                <span class="faq__ask">What is the purpose of this software?</span><br />
+                <span class="faq__reply">Everyone decides for himself, but can be used as a gamepad vibration tester, or as a hand massager.</span><br /><br />
 
-                <span>Can I use this software as a hand massager?</span><br />
-                <span>Yes of course. If you use this as a massager, then before the session I recommend consulting with a doctor.</span><br /><br />
+                <span class="faq__ask">Can I use this software as a hand massager?</span><br />
+                <span class="faq__reply">Yes of course. If you use this as a massager, then before the session I recommend consulting with a doctor.</span><br /><br />
 
-                <span>I have a gamepad with vibration, what should I do before using it as a hand massager?</span><br />
-                <span>I recommend checking the device for correct operation, mechanical damage, and be sure to use an antiseptic.</span><br /><br />
+                <span class="faq__ask">I have a gamepad with vibration, what should I do before using it as a hand massager?</span><br />
+                <span class="faq__reply">I recommend checking the device for correct operation, mechanical damage, and be sure to use an antiseptic.</span><br /><br />
 
-                <span>I'm having problems with the app or connecting my device to the app?</span><br />
-                <span>Go to Troubleshooting.</span>
+                <span class="faq__ask">I'm having problems with the app or connecting my device to the app?</span><br />
+                <span class="faq__reply">Go to Troubleshooting.</span>
             </div>
             <div class="content-item">
                 <h2 class="content-item__header">Troubleshooting</h2>
                 <span>If you are having difficulty detecting a gamepad by the browser, you can use the utility</span>
                 <a href="https://eugene-serb.github.io/gamepad-master/" target="_blank">Gamepad Master</a><br /><br />
 
-                <span>The app does not see my device.</span><br />
-                <span>Make sure you have a chromium-based browser, then update the app and reconnect your device.</span><br /><br />
+                <span class="faq__ask">The app does not see my device.</span><br />
+                <span class="faq__reply">Make sure you have a chromium-based browser, then update the app and reconnect your device.</span><br /><br />
 
-                <span>The application sees the gamepad, but writes that the vibration actuator is missing.</span><br />
-                <span>This problem is specific to mozilla firefox browser and d-input mode. Check the system requirements before using the software.</span><br /><br />
+                <span class="faq__ask">The application sees the gamepad, but writes that the vibration actuator is missing.</span><br />
+                <span class="faq__reply">This problem is specific to mozilla firefox browser and d-input mode. Check the system requirements before using the software.</span><br /><br />
 
-                <span>My question is not here.</span><br />
-                <span>Write me </span><a href="mailto:eugene.serb@gmail.com" target="_blank">eugene.serb@gmail.com</a>
+                <span class="faq__ask">My question is not here.</span><br />
+                <span class="faq__reply">Write me </span><a href="mailto:eugene.serb@gmail.com" target="_blank">eugene.serb@gmail.com</a>
             </div>
             <div class="content-item">
                 <h2 class="content-item__header">System Requirements</h2>