remove the weird margin that controlled the dot size

tasxatzial · Jan 21, 2024 · e3441ce · e3441ce
1 parent 23a4d78
commit e3441ce
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/src/style.css b/src/style.css
@@ -16,13 +16,17 @@ body {
     flex-flow: column;
     justify-content: center;
     align-items: center;
+    width: 100vw;
+    max-width: 10rem;
+    min-width: 5rem;
 }
 
 .dice-container {
-    display: flex;
+    width: 100%;
 }
 
 .dice {
+    --gap: 6%;
     display: grid;
     grid: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
     grid-template-areas:
@@ -32,22 +36,21 @@ body {
     justify-items: center;
     align-items: center;
     aspect-ratio: 1;
-    padding: 6%;
-    margin: 6%;
-    border-radius: 6%;
+    padding: var(--gap);
+    margin: var(--gap);
+    border-radius: var(--gap);
     background-color: #f5f5f5;
     box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
     cursor: pointer;
 }
 
 .result-container {
-    font-size: min(5rem, 40vw);
+    font-size: min(5rem, 50vw);
     font-weight: bold;
 }
 
 .dot {
     width: 70%;
-    margin: 2rem;
     aspect-ratio: 1;
     background-image: radial-gradient(rgb(90, 90, 90), black);
     border-radius: 50%;