README.md

@@ -1,8 +1,8 @@
-# Responsive Calculator App
+# React + Vite
 
-I built this as coursework for a [Frontend certification](https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries). [Check out the live demo.](https://demos.ajstepien.xyz/calculator) 
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-## This app is..
+Currently, two official plugins are available:
-- fully functional as a calculator.
+
-- designed to look good on a range of devices, in a range of aspect ratios.
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- built with an elegant routing system (if I do say so myself), that leverages javascript's builtin hashmaps.
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

src/App.css

@@ -9,29 +9,13 @@
     src: url("DS-DIGIB.TTF");
 }
 
-@media screen and (min-width:601px) {
+html {
-    html {
+    font-size: 16px;
-        font-size: 16px;
-    }
-}
-
-@media screen and (max-width:600px) {
-    html {
-        font-size: 12px;
-    }
-}
-
-body {
-    padding: 0px;
-    margin: 0px;
 }
 
 #calculator {
-    background-color: white;
+    height: 800px;
-    height: 50rem;
+    width: 550px;
-    max-height: 100vh;
-    width: 35rem;
-    max-width: 100vw;
     margin: auto;
     background: rgb(68, 64, 64);
     background: linear-gradient(351deg, rgba(68, 64, 64, 1) 0%, rgba(156, 150, 150, 1) 100%);
@@ -41,7 +25,6 @@ body {
 
 #calculator-content {
     height: 100%;
-    max-width: 100%;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr 1.6fr repeat(5, 1fr);
@@ -54,7 +37,7 @@ body {
         "numbers numbers numbers operators"
         "numbers numbers numbers operators"
     ;
-    gap: 1em;
+    gap: 1rem;
 }
 
 
@@ -77,7 +60,7 @@ body {
     grid-area: display;
     justify-self: end;
     align-self: end;
-    height: 9em;
+    height: 9rem;
     width: 100%;
     display: grid;
     grid-template-rows: 1fr 6fr 1fr;