From 1a98096cfd8fafd716d6c4a42b80c002fa9aa360 Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Thu, 23 Jun 2022 17:03:27 +0300
Subject: [PATCH] Added mobile-patterns.json, updated patterns styles

---
 assets/mobile-patterns.json | 27 +++++++++++++++++++++++++++
 css/styles.css              |  9 ++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 assets/mobile-patterns.json

diff --git a/assets/mobile-patterns.json b/assets/mobile-patterns.json
new file mode 100644
index 0000000..9f06dac
--- /dev/null
+++ b/assets/mobile-patterns.json
@@ -0,0 +1,27 @@
+[
+  {
+    "name": "Mobile Dotted",
+    "type": "Simple",
+    "icon": "😌",
+    "pattern": [ 100, 100 ]
+  },
+  {
+    "name": "Mobile Short Dashed",
+    "type": "Simple",
+    "icon": "🙂",
+    "pattern": [ 250, 100 ]
+  },
+  {
+    "name": "Mobile Long Dashed",
+    "type": "Simple",
+    "icon": "🙂",
+    "pattern": [ 500, 100 ]
+  },
+  {
+    "name": "Mobile Constant",
+    "type": "Simple",
+    "icon": "🙂",
+    "pattern": [ 1000 ]
+  }
+]
+
diff --git a/css/styles.css b/css/styles.css
index af01444..fa8e71a 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -465,14 +465,21 @@ table, th, td {
 
 .wavelovers {
     display: flex;
-    flex-direction: column;
+    flex-direction: column-reverse;
     justify-content: flex-start;
     gap: 16px;
 }
 
+    @media only screen and (min-width: 540px) {
+        .wavelovers {
+            flex-direction: column;
+        }
+    }
+
 .message {
     width: 100%;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     text-align: center;
     font-size: 24px;