adapted mobile

Robaina · Mar 1, 2021 · 7736c71 · 7736c71
1 parent 01d57a7
commit 7736c71
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -110,9 +110,11 @@
 
   </div> -->
 
-	<footer>
-		<p><a><</a> <a>></a> by <a href="https://semidanrobaina.com">Semidán Robaina Estévez</a>, 2021</p>
-	</footer>
+  <div class="centering_container">
+		<footer>
+			<p><a><</a> <a>></a> by <a href="https://semidanrobaina.com">Semidán Robaina Estévez</a>, 2021</p>
+		</footer>
+  </div>
 
 	<script src="sketch.js"></script>
 

diff --git a/styles.css b/styles.css
@@ -153,10 +153,10 @@ a {
 }
 
 footer {
-  position: absolute;
+  /* position: absolute;
   top: 93vh;
-  left: 40vw;
-  font-size: 1.3vw;
+  left: 40vw; */
+  font-size: 1.3em;
   z-index: 2;
   color: var(--fontColor);
 }
@@ -191,8 +191,33 @@ footer {
     display: inline;
   }
 
+  #cnv_container {
+    margin: calc((100vw - var(--canvasSideLength)) / 2);
+  }
+
+  #button-controls {
+    display: block;
+    margin-top: 2vh;
+  }
+
+  .button {
+    width: 50px;
+    height: 50px;
+    font-size: 1em;
+    display: inline-block;
+  }
+
+  .slider {
+    width: 30vw;
+  }
+
   :root {
-    --canvasSideLength: 100vw;
+    --canvasSideLength: 95vw;
+    --plotWidth: 100vw;
+  }
+
+  footer {
+    font-size: 1em;
   }
 
 }