From d4fbfa1a7aa98a1662ee6408d64729f98619bf22 Mon Sep 17 00:00:00 2001
From: Daniel Svitan <daniel.svitan.team7274dev@gmail.com>
Date: Thu, 1 May 2025 13:33:21 +0200
Subject: [PATCH] :iphone: Adds responsive resizing of main element

---
 src/pages/index.astro | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index fe81cc7..e19c01a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -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"/>