combine sections

3 weeks ago · 6214d04f16
2 changed files with 25 additions and 19 deletions
--- a/index.html
+++ b/index.html
@ -12,12 +12,6 @@
				@@ -12,12 +12,6 @@
 <body>

  <div class="dashboard">
-    <section class="game_section weather_section">
-      <h2 class="section_title">Weather</h2>
-      <img class="weather_icon" src="sunny.png" alt="Weather">
-      <p class="weather_label" data-bind="weather">sunny</p>
-    </section>
-
    <section class="game_section">
      <h2 class="section_title">Supplies</h2>

@ -75,9 +69,14 @@
				@@ -75,9 +69,14 @@
    </section>

    <section class="game_section day_section">
-      <h2 class="section_title">Game</h2>
+      <div class="weather_display">
+        <img class="weather_icon" src="sunny.png" alt="Weather">
+        <p class="weather_label" data-bind="weather">sunny</p>
+      </div>
+      <div class="game_stats">
        <p class="section_hint">Cups sold: <span data-bind="cups_sold">0</span></p>
        <p class="section_hint">Earnings: <span data-bind="total_earnings" data-format="currency">$0.00</span></p>
+      </div>
      <button class="start_day_btn">Start Day</button>
    </section>
  </div>
--- a/style.css
+++ b/style.css
@ -54,28 +54,35 @@ body {
				@@ -54,28 +54,35 @@ body {
  margin-top: auto;
 }

-/* Weather Section */
-.weather_section {
-  text-align: center;
+/* Weather display in game section */
+.weather_display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 8px;
 }

 .weather_icon {
-  width: 80px;
-  height: 80px;
+  width: 48px;
+  height: 48px;
  object-fit: contain;
-  margin: 8px auto;
-  display: block;
 }

 .weather_label {
  font-family: 'Fredoka', sans-serif;
-  font-size: 18px;
-  font-weight: 500;
+  font-size: 20px;
+  font-weight: 600;
  color: #5C4632;
  text-transform: capitalize;
  margin: 0;
 }

+.game_stats {
+  text-align: center;
+  margin-bottom: 8px;
+}
+
 .game_list {
  list-style: none;
  margin: 8px 0;
@ -204,7 +211,7 @@ body {
				@@ -204,7 +211,7 @@ body {
 }

 .game_section .section_hint {
-  font-size: 13px;
+  font-size: 15px;
  margin: 2px 0 8px;
 }