📱 Adds responsive resizing of main element

This commit is contained in:
Daniel Svitan 2025-05-01 13:33:21 +02:00
parent 4906b8f633
commit d4fbfa1a7a

View File

@ -47,10 +47,10 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
</style>
<Layout>
<div class="w-screen h-full flex items-center justify-start flex-col">
<div class="w-screen h-full flex items-center justify-start flex-col overflow-x-scroll">
<div class="w-1 h-10 shrink-0"/>
<main class="w-[50vw] border-solid border-black border-1 p-1 shrink-0">
<main class="w-[90vw] sm:w-[80vw] md:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-black border-1 p-1 shrink-0 overflow-auto">
<p>Note: this page has been kept simple in favor of accessibility</p>
<div class="h-4"/>
@ -72,8 +72,8 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<h2 class="text-lg">Experience:</h2>
<table class="w-full">
<tr>
<th class="w-44">When</th>
<th>Occupation and details</th>
<th class="max-w-44"><p class="px-1">When</p></th>
<th><p class="px-1">Occupation and details</p></th>
</tr>
<tr>
@ -104,10 +104,10 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<h2 class="text-lg">Some of my projects:</h2>
<table class="w-full">
<tr>
<th class="w-60">Name</th>
<th class="w-24">Reference</th>
<th>Description</th>
<th class="w-32">Tags</th>
<th class="max-w-60"><p class="px-1">Name</p></th>
<th class="max-w-24"><p class="px-1">Reference</p></th>
<th><p class="px-1">Description</p></th>
<th class="max-w-32"><p class="px-1">Tags</p></th>
</tr>
<tr>
@ -119,7 +119,7 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<td>Research paper entitled "Faktory ovplyvňujúce študijné výsledky a identifikácia rizikových
skupín"
</td>
<td class="flex gap-x-1 text-sm">
<td class="flex gap-1 flex-wrap text-sm">
<span class="hashtag">#statistics</span>
<span class="hashtag">#research</span>
</td>
@ -132,7 +132,7 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<Link link="https://zelena.svr.sk/"/>
</td>
<td>A website for a school club of environmentalists</td>
<td class="flex gap-x-1 text-sm">
<td class="flex gap-1 flex-wrap text-sm">
<span class="hashtag">#web-dev</span>
<span class="hashtag">#nuxt</span>
</td>
@ -144,7 +144,7 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<Link link="https://gitea.svitan.dev/Streamer272/door-alarm"/>
</td>
<td>A home-made door alarm based on ultrasound sensor distance measurements (in development)</td>
<td class="flex gap-x-1 text-sm">
<td class="flex gap-1 flex-wrap text-sm">
<span class="hashtag">#electronics</span>
<span class="hashtag">#rust</span>
</td>
@ -156,7 +156,7 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<Link link="https://github.com/Streamer272/automod"/>
</td>
<td>A discord bot for my local community</td>
<td class="flex gap-x-1 text-sm">
<td class="flex gap-1 flex-wrap text-sm">
<span class="hashtag">#discord</span>
<span class="hashtag">#kotlin</span>
</td>
@ -169,7 +169,7 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<Link link="https://github.com/7274-dev"/>
</td>
<td>An interactive game-like app for kids with an advent theme</td>
<td class="flex gap-x-1 text-sm">
<td class="flex gap-1 flex-wrap text-sm">
<span class="hashtag">#web-dev</span>
<span class="hashtag">#react</span>
</td>
@ -181,7 +181,7 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<Link link="https://gitea.svitan.dev/Streamer272/free-fall-sim"/>
</td>
<td>A very, very simple free fall simulation</td>
<td class="flex gap-x-1 text-sm">
<td class="flex gap-1 flex-wrap text-sm">
<span class="hashtag">#rust</span>
<span class="hashtag">#physics</span>
</td>
@ -194,7 +194,7 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<Link link="https://github.com/Streamer272/whats-my-acronym-asm"/>
</td>
<td>What's my acronym written in x64 Assembly, compiled with NASM</td>
<td class="flex gap-x-1 text-sm">
<td class="flex gap-1 flex-wrap text-sm">
<span class="hashtag">#assembly</span>
<span class="hashtag">#nasm</span>
</td>
@ -206,7 +206,7 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<Link link="https://github.com/Streamer272/rat"/>
</td>
<td>The cat clone on meth, inspired by bat (not finished)</td>
<td class="flex gap-x-1 text-sm">
<td class="flex gap-1 flex-wrap text-sm">
<span class="hashtag">#c</span>
</td>
</tr>
@ -243,7 +243,8 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
<div class="h-6"/>
<p>Note: the source code of this website is available <a
href="https://gitea.svitan.dev/Streamer272/svitan.dev" target="_blank" class="underline">here</a></p>
href="https://gitea.svitan.dev/Streamer272/svitan.dev" target="_blank" class="underline">here</a>
</p>
</main>
<div class="w-1 h-10 shrink-0"/>