mobile optimized

WhatsMusic · Mar 27, 2024 · 2bb3760 · 2bb3760
1 parent 1bdc169
commit 2bb3760
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -9,17 +9,16 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <title>Circle of Fifths</title>
         <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="style.css">
     </head>
     <body>
         <!--[if lt IE 7]>
             <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
 
-            <div class="main">
                 <div id="circle-of-fifths"></div>
-            </div>
+
         <script src="app.js" async defer></script>
     </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,19 +1,11 @@
 body {
-    display:block;
-    margin:0;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: block;
+    margin: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: lighter;
     background-color: rgb(103 136 107 / 35%);
 }
 
-.main {
-  position:relative;
-  display:inline;
-  width:80vw;
-  left:auto;
-  right:auto;
-}
-
 #wrapper {
     display:block;
     position:relative;
@@ -25,36 +17,34 @@ body {
 }
 
 #circle-of-fifths {
-  position: relative; /* add this to enable positioning of child elements */
-  display: flex;
-  justify-content: center; /* center the children horizontally */
-  align-items: center; /* center the children vertically */
-  width: 65vh;
-  height: 65vh;
-  margin: 90px auto;
-  border-radius: 50%;
-  background-color: #243326;
-  box-shadow: 0px 0px 10px 4px #ccc;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 700px;
+    height: 700px;
+    margin: 120px auto;
+    border-radius: 50%;
+    background-color: #243326;
+    box-shadow: 0px 0px 10px 4px #ccc;
 }
 
 
 
 .key, .chord {
     position: absolute;
-    top: 42%; /* position from the center */
-    left: 41.5%; /* position from the center */
     transform: translate(-50%, -50%); /* center the element itself */
     cursor: pointer;
     box-shadow: #999;
   }
 
   .key {
-    width: 100px;
-    height: 100px;
+    width: 75px;
+    height: 75px;
     transform-origin: bottom center;
     border-radius: 50%;
     text-align: center;
-    line-height: 100px;
+    line-height: 75px;
     font-size: 1.4rem;
     box-shadow: 0px 0px 5px 1px #4c4c4c;
   }
@@ -74,7 +64,7 @@ body {
     display: flex;
     font-size: 1.4rem;
     text-align: center;
-    width: 25vh;
+    width: 300px;
     flex-wrap: nowrap;
     color: #fff;
     flex-direction: column;
@@ -107,3 +97,6 @@ body {
   .highlight {
       border: 4px solid #FFF;
   }
+
+
+