u

deathclock/assets/style.css

@@ -23,7 +23,7 @@ h2 {
 #main-content-container {
     display: flex;
     flex-wrap: wrap;
-    gap: 20px;
+    gap: 10px; /* Reduced gap */
     width: 100%;
     justify-content: center;
 }
@@ -31,14 +31,14 @@ h2 {
 #nba-container,
 #mlb-container {
     flex: 1;
-    min-width: 300px;
+    min-width: 220px; /* Reduced min-width */
 }
 
 /* Individual Score Containers */
 .score-container {
     width: 100%;
-    padding: 0; /* Remove padding from score container */
+    padding: 0;
-    margin: 0; /* remove margin from score container */
+    margin: 0;
 }
 
 #mlb-scores-display {
@@ -47,27 +47,32 @@ h2 {
 
 .score-box {
     background-color: #232338;
-    padding: 2px 5px; /* Reduced padding on score boxes */
+    padding: 2px 5px;
-    margin-bottom: 2px; /* Reduced margin on score boxes */
+    margin-bottom: 2px;
     border-radius: 6px;
     border: 1px solid #4a4a82;
-    display: flex; /* Use flexbox for inner alignment */
+    display: flex;
-    flex-direction: column; /* Stack the game-score and game-period vertically */
+    flex-direction: column;
-    justify-content: center; /* Center vertically */
+    justify-content: center;
+    align-items: center;
 }
 
 .game-score {
     font-size: 0.9em;
     color: #e6e6fa;
-    text-align: center;
+    margin: 2px 0;
-    margin: 2px 0; /* Add a small top/bottom margin */
+    white-space: nowrap;
+}
+
+.game-score span {
+    display: inline;
 }
 
 .game-period {
     font-size: 0.8em;
     color: #b39ddb;
-    text-align: center;
+    margin: 2px 0;
-    margin: 2px 0; /* Add a small top/bottom margin */
+    white-space: nowrap;
 }
 
 /* Weather Styles */
@@ -81,6 +86,7 @@ h2 {
     border: 1px solid #4a4a82;
     transition: all 0.3s ease;
     flex: 1;
+     min-width: 220px;
 }
 
 #weather-display:hover {
@@ -124,7 +130,65 @@ h2 {
 }
 
 /* Media Queries */
-@media (min-width: 750px) {
+@media (min-width: 750px) and (max-width: 800px) {
+    body {
+        padding: 10px; /* Reduced padding */
+        font-size: 14px; /* Reduced font-size */
+        max-width: none; /* Removed max-width */
+        margin: 0; /* Removed margin */
+    }
+
+    h1{
+      font-size: 1.5rem;
+    }
+
+    h2{
+      font-size: 1.2rem;
+    }
+
+    #main-content-container {
+        flex-wrap: nowrap; /* No wrapping */
+        justify-content: space-around;
+        gap: 5px; /* Further reduced gap */
+    }
+
+    #nba-container,
+    #mlb-container {
+      min-width: 220px; /* Adjusted min-width */
+    }
+
+    #mlb-scores-display {
+        column-count: 1; /* Changed to 1 column */
+    }
+     #weather-display {
+        padding: 10px; /* Reduced padding */
+        margin: 0; /* Remove margin */
+        max-width: none; /* Removed max-width */
+         min-width: 220px; /* Adjusted min-width */
+    }
+     .score-box {
+        padding: 1px 3px; /* Reduced padding on score boxes */
+        margin-bottom: 1px; /* Reduced margin on score boxes */
+    }
+
+    .game-score {
+        font-size: 0.7em; /* Reduced font-size */
+        margin: 1px 0; /* Reduced margin */
+    }
+    .game-period {
+        font-size: 0.6em; /* Reduced font-size */
+        margin: 1px 0; /* Reduced margin */
+    }
+
+    .ticker {
+        padding: 10px; /* Reduced padding */
+    }
+
+    .news-item {
+        padding-right: 25px; /* Reduced padding */
+    }
+}
+@media (min-width: 801px) {
     /* Landscape layout */
     body {
         padding: 20px;
@@ -136,22 +200,13 @@ h2 {
     #main-content-container {
         flex-wrap: nowrap;
         justify-content: space-around;
+        gap: 20px;
     }
 
     #mlb-scores-display {
         column-count: 2;
     }
 
-    .score-container {
-        padding: 0; /* Remove padding from score container */
-        margin: 0; /* remove margin from score container */
-    }
-
-    .score-box {
-        padding: 2px 5px; /* Reduced padding on score boxes */
-        margin-bottom: 2px; /* Reduced margin on score boxes */
-    }
-
     #weather-display {
         padding: 20px;
         margin: 0;
@@ -195,23 +250,20 @@ h2 {
     #mlb-container {
         min-width: 0;
     }
-    .score-container {
+
-         padding: 0; /* Remove padding from score container */
-        margin: 0; /* remove margin from score container */
-    }
     .score-box {
-         padding: 2px 5px; /* Reduced padding on score boxes */
+        padding: 2px 5px;
-        margin-bottom: 2px; /* Reduced margin on score boxes */
+        margin-bottom: 2px;
     }
 
     .game-score {
         font-size: 0.8em;
-         margin: 2px 0; /* Add a small top/bottom margin */
+        margin: 2px 0;
     }
 
     .game-period {
         font-size: 0.7em;
-         margin: 2px 0; /* Add a small top/bottom margin */
+        margin: 2px 0;
     }
 
     .ticker {