figbertmath

commit 830a2c1a8f761781e8bddb307c89e401f9f9fb1e
parent 097ac4cabd013f5cda289d85872a5b6dbdaf5c4e
Author: therealFIGBERT <figbertwelner@gmail.com>
Date:   Sat, 23 Nov 2019 22:34:23 -0800

Make calculator more responsive on desktop

Diffstat:
M
src/components/App.css
 | 
28
++++++++++++++++------------
M
src/components/calcOut.js
 | 
5
++---
M
src/index.css
 | 
7
+++----

3 files changed, 21 insertions(+), 19 deletions(-)
diff --git a/src/components/App.css b/src/components/App.css
@@ -5,26 +5,29 @@
 }
 
 .calc__out {
-    width: 10vw;
-    height: 5vh;
-    font-size: xx-large;
+    width: 10vmax;
     text-align: right;
     line-height: 50%;
-    padding: 3vh 10vw 3vh 10vw;
-    border: 1vw solid #1d1d1d;
-    border-top-left-radius: 1.5vw;
-    border-top-right-radius: 1.5vw;
+    padding: 1.5vmax 10vmax 1.5vmax 10vmax;
+    border: 1vmax solid #1d1d1d;
+    border-top-left-radius: 1.5vmax;
+    border-top-right-radius: 1.5vmax;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: flex-end;
 }
 
 .calc__pad {
-    height: 75vh;
     background-color: #1d1d1d;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: space-evenly;
-    border-bottom-left-radius: 1.5vw;
-    border-bottom-right-radius: 1.5vw;
+    padding-bottom: 4vmax;
+    border-bottom-left-radius: 1.5vmax;
+    border-bottom-right-radius: 1.5vmax;
 }
 
 .calc__row {
@@ -33,11 +36,12 @@
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-evenly;
+    margin-top: 2vmax;
 }
 
 .calc__button {
-    width: 6vw;
-    height: 12vh;
+    width: 6vmax;
+    height: 6vmax;
     font-size: x-large;
     text-align: center;
     border-radius: 25%;
diff --git a/src/components/calcOut.js b/src/components/calcOut.js
@@ -6,9 +6,8 @@ export class CalcOut extends React.Component {
     render() {
         return (
             <div className='calc calc__out'>
-                {this.props.output}
-                <br/>
-                <span style={{fontSize: 'large'}}>{this.props.input}</span>
+                <div style={{fontSize: '4vmax', marginBottom: '2vmax'}}>{this.props.output}</div>
+                <div style={{fontSize: '1.5vmax'}}>{this.props.input}</div>
             </div>
         );
     }
diff --git a/src/index.css b/src/index.css
@@ -4,11 +4,10 @@
 }
 
 body {
-    width: 100vw;
-    height: 100vh;
-    margin: 2vh 0 0;
+    overflow: scroll;
+    margin-top: 1.5vmax;
     background: #7e1221;
-    font-family: -apple-system, sans-serif;
+    font-family: Tomorrow, -apple-system, sans-serif;
     display: flex;
     flex-direction: row;
     justify-content: center;