Update index.html

Author: chanulee

index.html

@@ -36,38 +36,35 @@
             max-width: 42rem;
             margin-left: auto;
             margin-right: auto;
-            padding-left: 2rem;  /* Consistent horizontal padding */
-            padding-right: 2rem; /* Consistent horizontal padding */
             background-color: transparent; /* Ensure main/header bg is transparent */
         }
         header {
-            padding-top: 2rem;    /* Vertical padding only */
-            padding-bottom: 2rem; /* Vertical padding only */
+            padding: 2rem;    /* Vertical padding only */
             /* max-width, horizontal margins/padding moved to combined rule */
         }
         main {
             padding-top: 0.1rem; /* Prevent margin collapse with h2 */
-            padding-bottom: 2rem;
+            padding-bottom: 2rem;            
             /* max-width, horizontal margins/padding moved to combined rule */
         }
 
         main h2 {
             /* Remove horizontal margin */
-            margin: 2.5rem 0 1rem 0;
+            text-align: left;
+            padding: 2.5rem 0 1rem 0;
             /* Keep top/bottom margin and border */
         }
 
         #tag-filters {
             /* Remove horizontal margin */
-            margin: 0 0 1.5rem 0;
+            padding: 0 0 1.5rem 0;
             /* Keep bottom margin and border */
         }
 
         footer {
             /* Full width background */
             background-color: #f4f4f4;
-            padding-top: 2rem;    /* Vertical padding on outer container */
-            padding-bottom: 2rem; /* Vertical padding on outer container */
+            padding: 2rem;    /* Vertical padding on outer container */
             /* Remove max-width, horizontal margins/padding */
             border-top: 1px solid #eee; /* Keep top border */
             color: #555;
@@ -173,6 +170,11 @@
             text-decoration: none; /* Or underline if preferred */
         }
         /* --- Tag Filter & Other Button Styling (Ensure they don't get link hover) --- */
+        #tag-filters {
+            padding-left: 2rem;
+            padding-right: 2rem;
+        }
+        
         #tag-filters button:hover,
         #tag-filters button.clear-button:hover {
             /* These already have specific hover styles, ensure they are kept */
@@ -221,10 +223,12 @@
             grid-template-columns: 1fr; /* Single column for a cleaner list */
             gap: 1rem; /* 24px */
             margin-top: 0;
+            padding-left: 1rem;
+            padding-right: 1rem;
         }
         .repo-card {
             border: none;
-            margin: 0 0 2rem 0; /* Add bottom margin for spacing */
+            margin: 0 1rem 2rem 1rem; /* Add bottom margin for spacing */
             background-color: transparent;
             transition: background-color 0.3s ease; /* Keep hover transition */
             overflow: visible;
@@ -315,6 +319,14 @@
             /* color: #0056b3; */
             /* Hover state now only triggers JS text swap */
         }
+
+        /* Mobile-specific styling for vibe-coding-trigger */
+        @media (max-width: 42rem) {
+            #vibe-coding-trigger {
+                cursor: pointer;
+                position: relative;
+            }
+        }
         /* -------------------------- */
 
         /* --- Revealing Word Span Styling --- */
@@ -385,6 +397,38 @@
             margin-top: 1rem;   /* Space above disclaimer */
             line-height: 1.4; /* Adjust line height for smaller font */
         }
+
+        /* Mobile Breakpoint */
+        @media (max-width: 42rem) {
+            header, main, footer > .footer-content {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+
+            footer > .footer-content {
+                padding-left: 0;
+                padding-right: 0;
+            }
+
+            main h2 {
+                padding: 1.5rem 0 0.75rem 0;
+            }
+
+            #tag-filters {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+
+            .repo-card {
+                margin: 0 0.5rem 1.5rem 0.5rem;
+            }
+
+            .content-section {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+
+        }
     </style>
 </head>
 <body>
@@ -467,6 +511,7 @@ <h4>Contact</h4>
         const addonRepos = [
             { user: 'chanulee', repo: 'coreOllama' },
             { user: 'chanulee', repo: 'VisionOSC' },
+            { user: 'chanulee', repo: 'simpleThesis-typst' },
             // Add more { user: 'username', repo: 'reponame' } objects here
         ];
         // -----------------------------------------
@@ -676,11 +721,12 @@ <h3><a href="${repo.html_url}" target="_blank" rel="noopener noreferrer">${repo.
             });
         }
 
-        // --- Vibe Coding Text Hover Functionality ---
+        // --- Vibe Coding Text Hover/Touch Functionality ---
         const vibeParagraph = document.getElementById('vibe-coding-paragraph');
         const vibeSpan = document.getElementById('vibe-coding-trigger'); // The container span
         let intervalId = null; 
         const wordRevealSpeed = 100; // Milliseconds between STARTING each word reveal
+        let isMobile = window.matchMedia('(max-width: 42rem)').matches;
 
         if (vibeParagraph && vibeSpan) { 
             const originalText = vibeSpan.dataset.originalText;
@@ -690,7 +736,7 @@ <h3><a href="${repo.html_url}" target="_blank" rel="noopener noreferrer">${repo.
             // Store the original content (might just be text) to reset easily
             vibeSpan.dataset.originalContent = vibeSpan.innerHTML;
 
-            vibeParagraph.addEventListener('mouseenter', () => { 
+            function startAnimation() {
                 if (intervalId) {
                     clearInterval(intervalId);
                     intervalId = null;
@@ -716,7 +762,6 @@ <h3><a href="${repo.html_url}" target="_blank" rel="noopener noreferrer">${repo.
                             vibeSpan.appendChild(wordSpan);
 
                             // Trigger the transition shortly after appending
-                            // Use requestAnimationFrame for better timing before paint
                             requestAnimationFrame(() => {
                                 requestAnimationFrame(() => { // Double RAF for robustness
                                     wordSpan.classList.add('word-visible');
@@ -730,15 +775,46 @@ <h3><a href="${repo.html_url}" target="_blank" rel="noopener noreferrer">${repo.
                         }
                     }, wordRevealSpeed);
                 }
-            });
+            }
 
-            vibeParagraph.addEventListener('mouseleave', () => { 
+            function resetAnimation() {
                 if (intervalId) {
                     clearInterval(intervalId);
                     intervalId = null;
                 }
                 // Restore original content using the stored value
                 vibeSpan.innerHTML = vibeSpan.dataset.originalContent;
+            }
+
+            // Handle hover events for desktop
+            if (!isMobile) {
+                vibeParagraph.addEventListener('mouseenter', startAnimation);
+                vibeParagraph.addEventListener('mouseleave', resetAnimation);
+            }
+
+            // Handle touch/click events for mobile
+            vibeParagraph.addEventListener('click', (e) => {
+                if (isMobile) {
+                    e.preventDefault();
+                    if (intervalId) {
+                        resetAnimation();
+                    } else {
+                        startAnimation();
+                    }
+                }
+            });
+
+            // Update mobile state on resize
+            window.addEventListener('resize', () => {
+                isMobile = window.matchMedia('(max-width: 42rem)').matches;
+                // Remove all event listeners
+                vibeParagraph.removeEventListener('mouseenter', startAnimation);
+                vibeParagraph.removeEventListener('mouseleave', resetAnimation);
+                // Re-add appropriate event listeners based on new state
+                if (!isMobile) {
+                    vibeParagraph.addEventListener('mouseenter', startAnimation);
+                    vibeParagraph.addEventListener('mouseleave', resetAnimation);
+                }
             });
         }
     </script>