Update styles.css

Amit30swgoh · Sep 26, 2024 · 92e5c3b · 92e5c3b
1 parent aa57d10
commit 92e5c3b
Showing 1 changed file with 32 additions and 2 deletions.
diff --git a/26.9-backgammon/styles.css b/26.9-backgammon/styles.css
@@ -1,4 +1,4 @@
-/* styles.css - Improved Layout and Styling */
+/* styles.css - Optimized Layout and Styling */
 
 * {
     box-sizing: border-box;
@@ -12,7 +12,8 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
+    margin: 0;
 }
 
 #backgammon-board {
@@ -25,6 +26,7 @@ body {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     position: relative;
+    overflow: hidden;
 }
 
 /* Side bars */
@@ -50,19 +52,26 @@ body {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: 1fr 1fr;
+    gap: 5px;
+    padding: 10px;
 }
 
 /* Triangles */
 .triangle {
     clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
     background-color: #fff;
+    transition: background-color 0.3s ease;
     margin: 5px;
 }
 
 .triangle:nth-child(even) {
     background-color: #ddd;
 }
 
+.triangle:hover {
+    background-color: #ffcc00;
+}
+
 /* Pieces */
 .piece {
     width: 90%;
@@ -74,6 +83,13 @@ body {
     align-items: center;
     font-weight: bold;
     color: #333;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
+}
+
+.piece:hover {
+    transform: scale(1.1);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
 }
 
 .white-piece {
@@ -99,6 +115,11 @@ body {
     justify-content: center;
     align-items: center;
     font-size: 2rem;
+    transition: transform 0.5s ease;
+}
+
+.dice:hover {
+    transform: rotate(360deg);
 }
 
 /* Roll Button */
@@ -114,18 +135,27 @@ body {
     border-radius: 5px;
     border: none;
     cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+#roll-btn:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
 }
 
+/* Responsive Adjustments */
 @media (max-width: 768px) {
     #backgammon-board {
         width: 95vw;
         height: 95vw;
     }
+
     .dice {
         width: 40px;
         height: 40px;
         font-size: 1.5rem;
     }
+
     #roll-btn {
         padding: 8px 16px;
         font-size: 1rem;