NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile Viewport Adjustments

Browse Source 
~ 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
This commit is contained in:
Nick Bland 2024-04-20 20:45:30 +10:00
parent 93b7ca5dc1
commit 1fb5e9d6e7
Signed by: NickBland
GPG Key ID: 31CADD9E5FDD798C
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/countdown.svelte
View File

@ -83,9 +83,11 @@
{:else} {:else}
<h3 class="p-5 text-4xl text-center">Time to Graduation<br /> ({FORMATTED})</h3> <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 class="flex countdown pb-5 font-mono text-4xl justify-center">
<span style="--value:{years};"></span>y <span style="--value:{years};"></span>y&nbsp;
<span style="--value:{months};"></span>m <span style="--value:{months};"></span>m&nbsp;
<span style="--value:{days};"></span>d- <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:{hours};"></span>:
<span style="--value:{minutes};"></span>: <span style="--value:{minutes};"></span>:
<span style="--value:{seconds};"></span> <span style="--value:{seconds};"></span>

16
src/components/skills.svelte
View File

@ -14,56 +14,56 @@
<div <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" 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> <figure><img src={js} alt="Javascript logo" /></figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">JavaScript + TypeScript</h2> <h2 class="card-title">JavaScript + TypeScript</h2>
<Stars count={5} /> <Stars count={5} />
</div> </div>
</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> <figure><img src={python} alt="Python logo" /></figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Python</h2> <h2 class="card-title">Python</h2>
<Stars count={4} half={true} /> <Stars count={4} half={true} />
</div> </div>
</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> <figure><img src={linux} alt="Tux logo" /></figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Linux Administration</h2> <h2 class="card-title">Linux Administration</h2>
<Stars count={4} half={true} /> <Stars count={4} half={true} />
</div> </div>
</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> <figure><img src={teams} alt="A team thinking" /></figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Working in Teams</h2> <h2 class="card-title">Working in Teams</h2>
<Stars count={4} /> <Stars count={4} />
</div> </div>
</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> <figure><img src={project} alt="A lightbulb with gears around it" /></figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Independant Projects</h2> <h2 class="card-title">Independant Projects</h2>
<Stars count={4} /> <Stars count={4} />
</div> </div>
</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> <figure><img src={teaching} alt="A person giving a lecture" /></figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Teaching Others</h2> <h2 class="card-title">Teaching Others</h2>
<Stars count={4} /> <Stars count={4} />
</div> </div>
</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> <figure><img src={interpersonal} alt="People communicating" /></figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Interpersonal Skills</h2> <h2 class="card-title">Interpersonal Skills</h2>
<Stars count={4} /> <Stars count={4} />
</div> </div>
</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> <figure><img src={thinking} alt="A brain and lightbulb together" /></figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Critical Thinking</h2> <h2 class="card-title">Critical Thinking</h2>