feat: title in reset menu if mobile viewport

src/App.vue

@@ -36,17 +36,17 @@
 
 <template>
   <div id="main">
-    <h1 id="main-title">
+    <h1 id="main-title" v-if="store.mainMenu || windowWidth <= 800">
       <span id="burger-toggle" @click="toggleMainMenu">
         {{ store.mainMenu == true ? "▼" : "☰" }}
       </span>
-      Cellular Automata Explorer
+      <span >Cellular Automata Explorer</span>
     </h1>
     <div id="container">
       <MainMenu v-if="store.mainMenu || windowWidth >= 800" />
       <CanvasBoard />
     </div>
-    <MenuReset row-title="" />
+    <MenuReset :windowWidth=windowWidth />
   </div>
 </template>
 

src/assets/css/main.css

@@ -33,12 +33,12 @@ canvas {
 }
 
 h1,
-h2 {
+h2,
+.desktop-title {
   font-weight: bold;
 }
 
-h1 {
+h1, .desktop-title {
-  margin: 10px auto;
   font-size: larger;
   text-transform: uppercase;
 }
@@ -64,9 +64,9 @@ a {
   padding: 2px;
 }
 
-a:hover {
+h2:hover {
   cursor: pointer;
-  color: var(--light1);
+  color: var(--light2);
 }
 
 select {
@@ -74,11 +74,17 @@ select {
   padding: 5px;
 }
 
+input[type="number"] {
+  width: 100%;
+  height: 100%;
+  
+}
+
 input[type="button"] {
   min-width: 60px;
+  margin: 0 5px;
   padding: 5px;
   font-weight: bold;
-  margin-right: 10px;
 }
 
 .form-field {
@@ -98,7 +104,6 @@ input[type="button"] {
   cursor: pointer;
   border-bottom: 1px solid var(--dark3);
   border-top: 1px solid var(--dark3);
-  margin: 0 0 10px 0;
 }
 
 .menu-row a {
@@ -112,6 +117,7 @@ input[type="button"] {
   position: absolute;
   background: var(--dark1);
   width: 100%;
+  overflow: scroll;
 }
 
 label,
@@ -145,8 +151,14 @@ label,
 
 .reset-menu {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  padding: 10px;
+  vertical-align: center;
+}
+
+.reset-menu .loop {
   padding: 5px;
+  display: inline-block;
 }
 
 @media screen and (max-width: 800px) {
@@ -192,4 +204,8 @@ label,
     position: relative;
     width: 100%;
   }
+
+  .reset-menu {
+    justify-content: flex-end;
+  }
 }

src/components/MenuReset.vue

@@ -1,42 +1,47 @@
 <script setup>
   import { globalStore } from "../stores/index.js";
+  import { defineProps } from "vue";
 
+  const props = defineProps(['windowWidth']);
   const store = globalStore();
 </script>
 
 <template>
   <div class="reset-menu">
-    <div class="form-field">
+    <div class="desktop-title" v-if="windowWidth >= 800">Cellular Automata Explorer</div>
-      <label>
+    <div class="reset-input">
-        loop
+      <div class="loop">
-        <input
+        <label>
-          :value="store.loop"
+          loop
-          type="checkbox"
+          <input
-          :checked="store.loop"
+            :value="store.loop"
-          @input="store.toggleLoop()"
+            type="checkbox"
-        />
+            :checked="store.loop"
-      </label>
+            @input="store.toggleLoop()"
+          />
+        </label>
+      </div>
+      <input
+        type="button"
+        name="next"
+        class="next"
+        value="next"
+        @click="store.toggleNext()"
+      />
+      <input
+        type="button"
+        name="stop"
+        class="stop"
+        value="stop"
+        @click="store.toggleStop()"
+      />
+      <input
+        type="button"
+        name="reset"
+        class="reset"
+        value="reset"
+        @click="store.toggleReset()"
+      />
     </div>
-    <input
-      type="button"
-      name="next"
-      class="next"
-      value="next"
-      @click="store.toggleNext()"
-    />
-    <input
-      type="button"
-      name="stop"
-      class="stop"
-      value="stop"
-      @click="store.toggleStop()"
-    />
-    <input
-      type="button"
-      name="reset"
-      class="reset"
-      value="reset"
-      @click="store.toggleReset()"
-    />
   </div>
 </template>