Scale tracker

components/MililiterInput.vue

@@ -34,7 +34,7 @@ export default {
 <style lang="scss">
 .ml-input {
   margin-top: 0.4em;
-  font-size: 1.4rem;
+  font-size: min(1.4rem, calc((28 / 350) * 90vw));
   border: 7px solid white;
   border-radius: 35px;
   box-shadow: 0 3px 5px #555 inset,

pages/index/index.vue

@@ -121,12 +121,16 @@ export default {
 .tracker-section {
   height: 620px;
   margin-bottom: 150px;
-  padding-top: 120px;
+  padding-top: 120px;//min(120px, calc((110 / 350) * 90vw));
+
+  .button{
+    width:250px;
+  }
 }
 
 .tracker {
-  margin-bottom: 70px;
-  max-width: 250px;
+  margin: 0 auto min(70px,calc((70 / 350) * 90vw)) auto;
+  max-width: min(250px, calc((260 / 350 ) * 90vw));
   display: flex;
   position: relative;
   flex-direction: column;
@@ -135,11 +139,11 @@ export default {
   label {
     text-shadow: 0 4px 7px #333;
     color: white;
-    font-size: 1.6rem;
+    font-size: min(1.6rem, calc((32 / 350) * 90vw ));
     line-height: 80%;
 
     span {
-      font-size: 2rem;
+      font-size: min(2rem, calc((40 / 350) * 90vw));
       color: #004377;
       text-shadow: -1px 3px 4px #444;
     }
@@ -159,8 +163,10 @@ export default {
 
   }
   svg#Layer_1 {
+    width:min(350px, 90vw);
+    height:auto;
     position: absolute;
-    top: -100px;
+    top: max(-100px, calc((-85 / 350) * 90vw));
     z-index: 0;
 
     #tracker-filler {