Make home page mobile responsive

alexlostorto · Oct 30, 2023 · d7a250f · d7a250f
1 parent 562caad
commit d7a250f
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 0 deletions.
diff --git a/components/header.php b/components/header.php
@@ -53,6 +53,19 @@
                 text-decoration: none;
                 color: var(--accent);
             }
+
+            ::-webkit-scrollbar {
+                z-index: 999; /* Adjust the value as needed */
+                width: 8px; /* Set the width of the scrollbar */
+            }
+
+            ::-webkit-scrollbar-thumb {
+                background-color: var(--accent); /* Color of the thumb (dragged part) */
+            }
+
+            ::-webkit-scrollbar-track {
+                background-color: var(--primary); /* Color of the track (background) */
+            }
         </style>
 
         <!-- Hotjar -->

diff --git a/components/navbar.php b/components/navbar.php
@@ -22,6 +22,7 @@ function getRelativePath($absolutePath, $parentTraversals) {
 <style>
     /* DESKTOP */
     #navbar-desktop {
+        background-color: var(--primary);
         display: flex !important;
         padding: 2rem;
     }
@@ -54,6 +55,7 @@ function getRelativePath($absolutePath, $parentTraversals) {
 
     /* MOBILE */
     #navbar-mobile {
+        background-color: var(--primary);
         display: none !important;
         padding: 2rem;
     }

diff --git a/index.php b/index.php
@@ -221,6 +221,64 @@
         grid-column: span 2;
     }
 
+    @media only screen and (max-width: 768px) {
+        body {
+            overflow-y: auto;
+        }
+
+        main {
+            flex-direction: column;
+            padding-right: 1rem;
+        }
+
+        #side-text {
+            width: auto !important;
+            margin: 1rem 0;
+        }
+
+        #side-text #theme-overflow {
+            height: 2.5rem;
+        }
+
+        #side-text #theme-container p {
+            z-index: -1;
+            height: 2.2rem;
+            margin-bottom: 2.2rem;
+            font-size: 1.2rem;
+        }
+
+        main #side-text h2 {
+            margin: 0;
+            font-size: 1.4rem;
+        }
+
+        main #side-text h1 {
+            margin: 0;
+            font-size: 3rem;
+        }
+
+        main #side-text #theme-overflow {
+            margin-left: 0;
+        }
+
+        #gallery {
+            margin-top: 1rem;
+            width: 100%;
+        }
+
+        @keyframes text-animation {
+            0% {margin-top: 0;}
+            16% {margin-top: 0;}
+            21% {margin-top: -4.4rem;}
+            37% {margin-top: -4.4rem;}
+            42% {margin-top: -8.8rem;}
+            58% {margin-top: -8.8rem;}
+            63% {margin-top: -4.4rem;}
+            79% {margin-top: -4.4rem;}
+            84% {margin-top: 0;}
+            100% {margin-top: 0;}
+        }
+    }
 </style>
 
 <?php include('./components/navbar.php'); ?>