From 23b404d341ab5e42657c5fb6e83543ff00d8fef3 Mon Sep 17 00:00:00 2001
From: adminoo <git@kadath.corp>
Date: Sat, 27 Apr 2024 14:40:13 +0200
Subject: [PATCH] fix: added class for css styling (rather than id selector)

---
 src/App.vue                           | 12 ++++++------
 src/assets/css/main.css               | 18 +++++++++---------
 src/components/CanvasBoard.vue        |  1 +
 src/components/MenuGeneralOptions.vue |  2 --
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4e7b907..7aea5ed 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,19 +35,19 @@
 </script>
 
 <template>
-  <div id="main">
-    <h1 id="main-title" v-if="store.mainMenu || windowWidth <= 800">
-      <span id="burger-toggle" @click="toggleMainMenu">
+  <main>
+    <h1 id="main-title" class="main-title" v-if="store.mainMenu || windowWidth <= 800">
+      <span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
         {{ store.mainMenu == true ? "▼" : "☰" }}
       </span>
       <span >Cellular Automata Explorer</span>
     </h1>
-    <div id="container">
-      <MainMenu v-if="store.mainMenu || windowWidth >= 800" />
+    <div id="container" class="container">
+      <MainMenu class="main-menu" v-if="store.mainMenu || windowWidth >= 800" />
       <CanvasBoard />
     </div>
     <MenuReset :windowWidth=windowWidth />
-  </div>
+  </main>
 </template>
 
 <style src="./assets/css/main.css">
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 65b9a76..6e7bee5 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -43,14 +43,14 @@ h1, .desktop-title {
   text-transform: uppercase;
 }
 
-#container {
+.container {
   display: flex;
   height: calc(100vh - 100px);
   overflow: hidden;
   flex-direction: column;
 }
 
-#burger-toggle {
+.burger-toggle {
   display: none;
   cursor: pointer;
   font-size: 1.5em;
@@ -75,7 +75,7 @@ select {
 }
 
 input[type="number"] {
-  width: 100%;
+  max-width: 100%;
   height: 100%;
   
 }
@@ -126,12 +126,12 @@ label,
   font-weight: bold;
 }
 
-#canvas-board {
+.canvas-board {
   flex: 1;
   margin: 0 auto;
 }
 
-#main-menu {
+.main-menu {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -139,12 +139,12 @@ label,
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
-#main-menu::-webkit-scrollbar {
+.main-menu::-webkit-scrollbar {
   display: none;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
-#main-menu {
+.main-menu {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
@@ -170,11 +170,11 @@ label,
     padding: 0 10px;
   }
 
-  #burger-toggle {
+  .burger-toggle {
     display: inline;
   }
 
-  #main-menu {
+  .main-menu {
     background: var(--dark2);
     margin: 0 auto;
     flex-direction: column;
diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue
index 82074d8..98e26c8 100644
--- a/src/components/CanvasBoard.vue
+++ b/src/components/CanvasBoard.vue
@@ -187,6 +187,7 @@
   <canvas
     id="board-canvas"
     ref="board-canvas"
+    class="board-canvas"
     :width="store.renderer.width"
     :height="store.renderer.height"
   />
diff --git a/src/components/MenuGeneralOptions.vue b/src/components/MenuGeneralOptions.vue
index f5dd205..85d9349 100644
--- a/src/components/MenuGeneralOptions.vue
+++ b/src/components/MenuGeneralOptions.vue
@@ -56,8 +56,6 @@
       </div>
       <div class="form-field">
         <label>Refresh Rate (ms)</label>
-      </div>
-      <div class="form-field">
         <input
           id="refreshRate"
           name="refreshRate"