diff --git a/src/App.vue b/src/App.vue
index 1d94c50..4e7b907 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,17 +36,17 @@
-
+
{{ store.mainMenu == true ? "▼" : "☰" }}
- Cellular Automata Explorer
+ Cellular Automata Explorer
-
+
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index a5f294d..65b9a76 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -33,12 +33,12 @@ canvas {
}
h1,
-h2 {
+h2,
+.desktop-title {
font-weight: bold;
}
-h1 {
- margin: 10px auto;
+h1, .desktop-title {
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;
+ }
}
diff --git a/src/components/MenuReset.vue b/src/components/MenuReset.vue
index c719028..e222ce0 100644
--- a/src/components/MenuReset.vue
+++ b/src/components/MenuReset.vue
@@ -1,42 +1,47 @@