From 15294f95a14849b726e5cee34e9eed891d0c0a44 Mon Sep 17 00:00:00 2001
From: Tim Kainz <tikaiz@gmx.at>
Date: Thu, 16 Apr 2026 23:08:42 +0200
Subject: [PATCH] improve touchscreen scrolling on carousel and make mobile
 page wider

---
 src/app/app.css                                            | 6 +++---
 src/components/tech-stack-carousel/tech-stack-carousel.css | 2 +-
 src/pages/home/home.css                                    | 2 +-
 src/styles.css                                             | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/app.css b/src/app/app.css
index 48a7aee..ba99748 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -151,14 +151,14 @@
 
 @media (max-width: 768px) {
   .content {
-    padding-top: calc(6.5rem + env(safe-area-inset-top));
+    padding: calc(6.5rem + env(safe-area-inset-top)) 0.5rem 3rem;
   }
 
   .sidebar {
     position: fixed;
     top: 0.75rem;
-    right: 0.75rem;
-    left: 0.75rem;
+    right: 0.5rem;
+    left: 0.5rem;
     transform: none;
     width: auto;
     margin: 0;
diff --git a/src/components/tech-stack-carousel/tech-stack-carousel.css b/src/components/tech-stack-carousel/tech-stack-carousel.css
index 958e5f4..0650a39 100644
--- a/src/components/tech-stack-carousel/tech-stack-carousel.css
+++ b/src/components/tech-stack-carousel/tech-stack-carousel.css
@@ -209,7 +209,7 @@ h2 {
 @media (max-width: 760px) {
   .stack-carousel-shell {
     --carousel-nav-space: 0;
-    --carousel-edge-fade-size: 1rem;
+    --carousel-edge-fade-size: 0.6rem;
     width: 100%;
     margin-inline: 0;
   }
diff --git a/src/pages/home/home.css b/src/pages/home/home.css
index e73de7a..ffb54b9 100644
--- a/src/pages/home/home.css
+++ b/src/pages/home/home.css
@@ -161,7 +161,7 @@ h2 {
 
 @media (max-width: 760px) {
   .page-wrap {
-    padding-top: 0.5rem;
+    padding: 0.5rem 0.75rem 3.5rem;
   }
 
   .hero {
diff --git a/src/styles.css b/src/styles.css
index e6a1ecf..8d9c656 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -82,7 +82,7 @@ a {
 
 @media (max-width: 760px) {
   .page-shell {
-    padding-top: 0.5rem;
+    padding: 0.5rem 0.75rem 3.5rem;
   }
 
   .hero-panel {