From 1fb5e9d6e75fabca39be6c0ef44c8ea3f1a921d4 Mon Sep 17 00:00:00 2001
From: Nick Bland <nick.bland@nickbland.dev>
Date: Sat, 20 Apr 2024 20:45:30 +1000
Subject: [PATCH] Mobile Viewport Adjustments

~ Adjust mobile viewport for the countdown clock - now displays over two lines, and with spacing between the y/m/d times
~ Also adjust viewport for skills card - cards now take up the full width of grid cell now
---
 src/components/countdown.svelte |  8 +++++---
 src/components/skills.svelte    | 16 ++++++++--------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/countdown.svelte b/src/components/countdown.svelte
index 219b793..0680894 100644
--- a/src/components/countdown.svelte
+++ b/src/components/countdown.svelte
@@ -83,9 +83,11 @@
 {:else}
   <h3 class="p-5 text-4xl text-center">Time to Graduation<br /> ({FORMATTED})</h3>
   <span class="flex countdown pb-5 font-mono text-4xl justify-center">
-    <span style="--value:{years};"></span>y
-    <span style="--value:{months};"></span>m
-    <span style="--value:{days};"></span>d-
+    <span style="--value:{years};"></span>y&nbsp;
+    <span style="--value:{months};"></span>m&nbsp;
+    <span style="--value:{days};"></span>d
+  </span>
+  <span class="flex countdown pb-5 font-mono text-4xl justify-center">
     <span style="--value:{hours};"></span>:
     <span style="--value:{minutes};"></span>:
     <span style="--value:{seconds};"></span>
diff --git a/src/components/skills.svelte b/src/components/skills.svelte
index f4e9843..99f541f 100644
--- a/src/components/skills.svelte
+++ b/src/components/skills.svelte
@@ -14,56 +14,56 @@
 <div
   class="m-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-content-center justify-items-center gap-5 p-5 md:max-w-4xl lg:min-w-max"
 >
-  <div class="card card-side w-50 md:w-96 bg-base-300">
+  <div class="card card-side w-full bg-base-300">
     <figure><img src={js} alt="Javascript logo" /></figure>
     <div class="card-body">
       <h2 class="card-title">JavaScript + TypeScript</h2>
       <Stars count={5} />
     </div>
   </div>
-  <div class="card card-side w-50 md:w-96 bg-base-300">
+  <div class="card card-side w-full bg-base-300">
     <figure><img src={python} alt="Python logo" /></figure>
     <div class="card-body">
       <h2 class="card-title">Python</h2>
       <Stars count={4} half={true} />
     </div>
   </div>
-  <div class="card card-side w-50 md:w-96 bg-base-300">
+  <div class="card card-side w-full bg-base-300">
     <figure><img src={linux} alt="Tux logo" /></figure>
     <div class="card-body">
       <h2 class="card-title">Linux Administration</h2>
       <Stars count={4} half={true} />
     </div>
   </div>
-  <div class="card card-side w-50 md:w-96 bg-base-300">
+  <div class="card card-side w-full bg-base-300">
     <figure><img src={teams} alt="A team thinking" /></figure>
     <div class="card-body">
       <h2 class="card-title">Working in Teams</h2>
       <Stars count={4} />
     </div>
   </div>
-  <div class="card card-side w-50 md:w-96 bg-base-300">
+  <div class="card card-side w-full bg-base-300">
     <figure><img src={project} alt="A lightbulb with gears around it" /></figure>
     <div class="card-body">
       <h2 class="card-title">Independant Projects</h2>
       <Stars count={4} />
     </div>
   </div>
-  <div class="card card-side w-50 md:w-96 bg-base-300">
+  <div class="card card-side w-full bg-base-300">
     <figure><img src={teaching} alt="A person giving a lecture" /></figure>
     <div class="card-body">
       <h2 class="card-title">Teaching Others</h2>
       <Stars count={4} />
     </div>
   </div>
-  <div class="card card-side w-50 md:w-96 bg-base-300">
+  <div class="card card-side w-full bg-base-300">
     <figure><img src={interpersonal} alt="People communicating" /></figure>
     <div class="card-body">
       <h2 class="card-title">Interpersonal Skills</h2>
       <Stars count={4} />
     </div>
   </div>
-  <div class="card card-side w-50 md:w-96 bg-base-300">
+  <div class="card card-side w-full bg-base-300">
     <figure><img src={thinking} alt="A brain and lightbulb together" /></figure>
     <div class="card-body">
       <h2 class="card-title">Critical Thinking</h2>