- Added style rule content-type to gamepad-list, pattern-list and, message-item.

- Deleted style-rules for background in gamepad-list, pattern-list and, message-item.
- Did buttons in manual in row always.
- Rename type combined to complex.

public/assets/patterns.json

@@ -40,7 +40,7 @@
   },
   {
     "name": "Dotted AC",
-    "type": "Combined",
+    "type": "Complex",
     "icon": "🤨",
     "pattern": [
       {
@@ -98,7 +98,7 @@
   },
   {
     "name": "Short Dashed AC",
-    "type": "Combined",
+    "type": "Complex",
     "icon": "🤤",
     "pattern": [
       {
@@ -156,7 +156,7 @@
   },
   {
     "name": "Long Dashed AC",
-    "type": "Combined",
+    "type": "Complex",
     "icon": "😝",
     "pattern": [
       {
@@ -214,7 +214,7 @@
   },
   {
     "name": "Constant AC",
-    "type": "Combined",
+    "type": "Complex",
     "icon": "😵",
     "pattern": [
       {

public/css/styles.css

@@ -413,7 +413,7 @@ table, th, td {
 /* ------ */
 
 .header {
-    border-bottom: 32px solid var(--color-header-borderline);
+    border-bottom: 8px solid var(--color-header-borderline);
     background: var(--color-header-background);
 }
 
@@ -431,7 +431,7 @@ table, th, td {
     }
 
 .header-wrapper {
-    padding-top: 64px;
+    padding-top: 32px;
     padding-bottom: 16px;
 }
 
@@ -447,7 +447,7 @@ table, th, td {
 }
 
 .menu-wrapper {
-    margin-top: 32px;
+    margin-top: 16px;
     align-self: center;
 }
 
@@ -476,6 +476,23 @@ table, th, td {
             color: var(--color-header-navigation-link-hover);
         }
 
+@media only screen and (min-width: 540px) {
+    .header {
+        border-bottom: 32px solid var(--color-header-borderline);
+        background: var(--color-header-background);
+    }
+
+    .header-wrapper {
+        padding-top: 64px;
+        padding-bottom: 16px;
+    }
+
+    .menu-wrapper {
+        margin-top: 32px;
+        align-self: center;
+    }
+}
+
 @media only screen and (min-width: 720px) {
     .header-wrapper {
         display: flex;
@@ -543,8 +560,15 @@ table, th, td {
 
 .page {
     flex-grow: 1;
-    margin-top: 64px;
+    margin-top: 32px;
-    margin-bottom: 64px;
+    margin-bottom: 32px;
+}
+
+@media only screen and (min-width: 540px) {
+    .page {
+        margin-top: 64px;
+        margin-bottom: 64px;
+    }
 }
 
 /* ---- */
@@ -581,7 +605,7 @@ table, th, td {
 
 .content-item {
     margin-bottom: 16px;
-    padding: 32px;
+    padding: 16px;
     border-radius: var(--number-border-radius);
     background: var(--color-content-item-background);
 }
@@ -591,6 +615,12 @@ table, th, td {
         text-align: center;
     }
 
+@media only screen and (min-width: 540px) {
+    .content-item {
+        padding: 32px;
+    }
+}
+
 /* ----- */
 /* PAGES */
 /* ----- */

src/components/AppManual.vue

@@ -73,7 +73,7 @@
         display: flex;
         flex-direction: column-reverse;
         justify-content: space-between;
-        gap: 32px;
+        gap: 16px;
     }
 
     .manual-form__input {
@@ -84,7 +84,7 @@
 
     .manual-form__buttons {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         justify-content: space-between;
         gap: 32px;
     }
@@ -97,18 +97,13 @@
         .manual-form {
             display: flex;
             flex-direction: column;
-            gap: 16px;
+            gap: 32px;
         }
 
         .manual-form__input {
             display: grid;
             grid-template-columns: 1fr 1fr;
         }
-
-        .manual-form__buttons {
-            display: flex;
-            flex-direction: row;
-        }
     }
 </style>
 

src/components/GamepadList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="device-list">
+    <div class="content-item device-list">
         <GamepadItem v-for="gamepad in gamepads"
                      :key="gamepad.id"
                      v-text="gamepad.unit.id" />
@@ -25,10 +25,6 @@
 
 <style lang="scss">
     .device-list {
-        margin-bottom: 16px;
-        padding: 32px;
-        border-radius: var(--number-border-radius);
-        background: var(--color-content-item-background);
         display: flex;
         flex-direction: row;
         justify-content: space-around;

src/components/MessageItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="message">
+    <div class="content-item message">
         <span>
             <slot></slot>
         </span>
@@ -17,10 +17,6 @@
 <style lang="scss">
     .message {
         width: 100%;
-        margin-bottom: 16px;
-        padding: 32px;
-        border-radius: var(--number-border-radius);
-        background: var(--color-content-item-background);
         display: flex;
         flex-direction: column;
         justify-content: center;

src/components/PatternList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="pattern-list">
+    <div class="content-item pattern-list">
         <PatternItem v-for="(pattern, index) in patterns"
                      :key="pattern.name"
                      :pattern="pattern"
@@ -40,15 +40,18 @@
 
 <style lang="scss">
     .pattern-list {
-        margin-bottom: 16px;
-        padding: 32px;
-        border-radius: var(--number-border-radius);
-        background: var(--color-content-item-background);
         display: flex;
         flex-direction: row;
         justify-content: space-around;
         flex-wrap: wrap;
-        gap: 32px;
+        gap: 16px;
+    }
+
+    @media only screen and (min-width: 540px) {
+        .pattern-list {
+            display: flex;
+            gap: 32px;
+        }
     }
 </style>