Polishing responsive styles

ProLoser · May 12, 2024 · 6d48485 · 6d48485
1 parent d549fc0
commit 6d48485
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 51 deletions.
diff --git a/public/dice.html b/public/dice.html
@@ -7,6 +7,36 @@
             background: blue;
             margin: 10px;
         }
+
+        .dice3d {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            display: none;
+        }
+
+        .dive3d>div {
+            width: 100%;
+            height: 100%;
+            background: #da0060;
+            border: 2px solid black;
+            position: absolute;
+            opacity: 0.7;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .dive3d>div:before {
+            content: '';
+            width: 20%;
+            height: 20%;
+            background: black;
+            border-radius: 50%;
+        }
     </style>
 </head>
 
@@ -23,6 +53,14 @@
         <div></div>
         <div></div>
     </div>
+<div class="dice3d">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
 </body>
 
 </html>
diff --git a/public/game.html b/public/game.html
@@ -25,36 +25,6 @@
             transform: translateY(-50%);
         }
 
-        .dice3d {
-            position: relative;
-            width: 200px;
-            height: 200px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            display: none;
-        }
-
-        .dive3d>div {
-            width: 100%;
-            height: 100%;
-            background: #da0060;
-            border: 2px solid black;
-            position: absolute;
-            opacity: 0.7;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .dive3d>div:before {
-            content: '';
-            width: 20%;
-            height: 20%;
-            background: black;
-            border-radius: 50%;
-        }
-
         .bar {
             position: absolute;
             left: 48%;
@@ -108,31 +78,33 @@
             }
 
             .point::before {
+                left: 50%;
+                transform: translateX(-50%);
                 border-left: 40px solid transparent;
                 border-right: 40px solid transparent;
+            }
+
+            :nth-child(-n+12 of .point)::before {
                 border-top: 40vh solid #f00;
-                top: 0;
-                left: 50%;
-                transform: translateX(-50%);
             }
 
-            :nth-child(odd of .point)::before {
+            :nth-child(-n+12 of .point):nth-child(odd)::before {
                 border-top-color: lightcoral;
                 border-top-width: 30vh;
             }
 
-            :nth-child(n+13 of .point):nth-child(even)::before {
-                border-bottom-color: lightcoral;
-                border-bottom-width: 30vh;
-            }
-
             :nth-child(n+13 of .point)::before {
                 border-top: none;
                 border-bottom: 40vh solid #f00;
                 bottom: 0;
                 top: auto;
             }
 
+            :nth-child(n+13 of .point):nth-child(even)::before {
+                border-bottom-color: lightcoral;
+                border-bottom-width: 30vh;
+            }
+
             :nth-child(n+13 of .point):hover::before {
                 border-bottom-color: blue !important;
             }
@@ -153,15 +125,18 @@
             }
 
             .point::before {
+                top: 50%;
+                transform: translateY(-50%);
                 border-top: 40px solid transparent;
                 border-bottom: 40px solid transparent;
+            }
+
+            :nth-child(-n+12 of .point)::before {
                 border-left: 40vh solid #f00;
                 left: 0;
-                top: 50%;
-                transform: translateY(-50%);
             }
 
-            :nth-child(odd of .point)::before {
+            :nth-child(-n+12 of .point):nth-child(odd)::before {
                 border-left-color: lightcoral;
                 border-left-width: 30vh;
             }
@@ -175,7 +150,6 @@
                 border-left: none;
                 border-right: 40vh solid #f00;
                 right: 0;
-                top: auto;
             }
 
             :nth-child(n+13 of .point):hover::before {
@@ -191,14 +165,6 @@
             <img src="images/digit-6-white.png" />
             <img src="images/digit-5-black.png" />
         </div>
-        <div class="dice3d">
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
         <!-- <div class="bar"></div>
                                                                                                                                                                                                         <div class="home"></div> -->
         <div class="point" ondragover="event.preventDefault()"