template.liquid

@@ -1,94 +1,73 @@
-<div class="columns">
-  <div class="column">
-    <span class="title title--small text--gray-4 text--center">fetched: {{ fetched_at }}</span>
-    {% for pollen in pollen %}
-    <span class="title title--small bg--black text--white text--center">pollen index</span>
-    <div class="richtext gap--xxsmall">
-      <p class="content content--small">forecast at {{pollen.forecast_date}}</p>
+<div>
+  <div class="flex flex--row">
+    <div>
+      <span class="value">{{ current.temp }}°F</span>
+      <span class="label text--gray-4">feels like {{ current.feels_like }}°F</span>
+    </div>
+    <div class="stretch text--right">
+      <span class="value">{{ current.desc }}</span>
+      <span class="label text--gray-4">conditions</span>
+    </div>
   </div>
-      <table class="table table--condensed">
-      <thead>
-        <tr>
-          {% for period in pollen.periods %}
-          <th><span class="label label--small text--center">{{period.period}}</span></th>
-          {% endfor %}
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          {% for period in pollen.periods %}
-          <td><span class="label label--small text--center">{{period.index}}</span></td>
-          {% endfor %}
-        </tr>
-      </tbody>
-    </table>
-    {% endfor %}
 
-    {% for weather in weather %}
-    <span class="title title--small bg--black text--white text--center">weather forecast</span>
-    <div class="richtext gap--xxsmall">
-      <p class="content content--small">forecast at {{weather.forecast_date}}</p>
+  <div class="flex flex--row">
+    <div>
+      <span class="value">{{ current.humidity }}%</span>
+      <span class="label text--gray-4">humidity</span>
     </div>
-      <table class="table table--condensed">
-      <thead>
-        <tr>
-          <th><span class="label label--small w--16"></span></th>
-          {% for period in weather.periods %}
-          <th><span class="label label--small w--16 text--center">{{period.period}}</span></th>
-          {% endfor %}
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td><span class="label label--small text--right">low</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.low}} F</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">high</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.high}} F</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">humidity</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.humidity}}%</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">pressure</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.pressure}}</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">sunrise</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.sunrise}}</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">sunset</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.sunset}}</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">desc</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small h--10 clamp--none text--center">{{period.desc}}</span></td>
-          {% endfor %}
-        </tr>
-      </tbody>
-    </table>
-    {% endfor %}
+    <div class="stretch text--center">
+      <span class="value">{{ current.pressure }}</span>
+      <span class="label text--gray-4">pressure</span>
     </div>
-  <div class="column">
-    {{ Content for column 2 }}
-  </div>
-  <div class="column">
-    {{ Content for column 3 }}
+    <div class="text--right">
+      <span class="value">{{ fetched_at }}</span>
+      <span class="label text--gray-4">date</span>
+    </div>
+  </div>
+</div>
+
+<div class="border--h-1 pt--4"></div>
+
+<div class="pt--4">
+  <div class="flex flex--row">
+    {% assign periods = "today,tomorrow" | split: "," %}
+    {% for period in periods %}
+    {% assign data = [period] %}
+      <div class="stretch ">
+        <div>
+          <div class="label label--inverted text--center">{{ period }}</div>
+
+          <div class="pt--2 text--center">
+            <span class="value">
+              {{ data.low }}°F / {{ data.high }}°F
+            </span>
+          </div>
+
+          <div class="text--center">
+            <span class="value">{{ data.desc }}</span>
+          </div>
+
+          <div class="text--center">
+            <span class="value">{{ data.sunrise }} - {{ data.sunset }}</span>
+          </div>
+
+          <div class="flex flex--row">
+            <div class="text--center">
+              <span class="value">{{ data.humidity }}%</span>
+              <span class="label text--gray-4">humidity</span>
+            </div>
+            <div class="stretch text--center">
+              <span class="value">{{ data.pressure }}</span>
+              <span class="label text--gray-4">pressure</span>
+            </div>
+            <div class="text--center">
+              <span class="value">{{ data.pollen }}%</span>
+              <span class="label text--gray-4">pollen</span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    {% endfor %}
   </div>
 </div>