From 22fc90882bb9dffbc30dfb357ce0b5d365c32eaf Mon Sep 17 00:00:00 2001 From: nishtha-agarwal-211 Date: Wed, 20 May 2026 16:12:53 +0530 Subject: [PATCH 1/2] fix(ui): restrict decorative code snippets to hero section and optimize opacity --- web-app/css/styles.css | 18 +++++++++--------- web-app/index.html | 2 ++ 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/web-app/css/styles.css b/web-app/css/styles.css index 97de1fb..bb3215b 100644 --- a/web-app/css/styles.css +++ b/web-app/css/styles.css @@ -232,14 +232,14 @@ body { /* ═══════════════════════════════════════ HERO SECTION ═══════════════════════════════════════ */ -/* .hero-section { +.hero-section { position: relative; - padding: 9rem 0; + padding: 7.5rem 0 3.5rem; min-height: 520px; text-align: center; overflow: hidden; background: var(--hero-green-nav-bg); -} */ +} /* Canvas fills the full hero */ @@ -285,7 +285,7 @@ body { font-family: 'IBM Plex Mono', monospace; font-size: clamp(0.72rem, 1.2vw, 0.92rem); letter-spacing: 0.02em; - opacity: 0.5; + opacity: 0.18; text-shadow: 0 0 18px rgba(34, 197, 94, 0.18); white-space: nowrap; transform-origin: center; @@ -300,14 +300,14 @@ body { .snippet-two { top: 25%; right: 10%; - opacity: 0.5; + opacity: 0.18; animation: codeFloatTwo 22s ease-in-out infinite; } .snippet-three { top: 50%; left: 12%; - opacity: 0.5; + opacity: 0.22; animation: codeFloatThree 20s ease-in-out infinite; } @@ -326,20 +326,20 @@ body { .snippet-six { top: 20%; right: 25%; - opacity: 0.42; + opacity: 0.15; animation: codeFloatThree 26s ease-in-out infinite; } .snippet-seven { top: 80%; right: 18%; - opacity: 0.42; + opacity: 0.15; animation: codeFloatTwo 28s ease-in-out infinite; } [data-theme="light"] .code-snippet { color: color-mix(in srgb, var(--text-secondary) 70%, var(--accent-color)); - opacity: 0.5; + opacity: 0.15; text-shadow: none; } diff --git a/web-app/index.html b/web-app/index.html index def5f9a..89446fd 100644 --- a/web-app/index.html +++ b/web-app/index.html @@ -822,6 +822,7 @@
+
+
From f7fb8c4e44611f9d80a9a5f61464465133fc9210 Mon Sep 17 00:00:00 2001 From: nishtha-agarwal-211 Date: Wed, 20 May 2026 16:23:12 +0530 Subject: [PATCH 2/2] chore(css): consolidate duplicate max-width 768px media queries --- web-app/css/styles.css | 69 ++++++++++++++---------------------------- 1 file changed, 22 insertions(+), 47 deletions(-) diff --git a/web-app/css/styles.css b/web-app/css/styles.css index bb3215b..54730a7 100644 --- a/web-app/css/styles.css +++ b/web-app/css/styles.css @@ -1770,27 +1770,28 @@ body { } .hero-section { - padding: 5rem 0; + padding: 7rem 0; + min-height: 400px; } .hero-title { - font-size: 2.6rem; + font-size: 2.3rem; margin-bottom: 1rem; } .hero-subtitle { font-size: 1rem; - margin-bottom: 1rem; + margin-bottom: 2rem; } .hero-features { - gap: 0.9rem; - margin-bottom: 1rem; + gap: 1rem; + margin-bottom: 2rem; } .feature-badge { - padding: 0.15rem 0 0.35rem; - font-size: 0.8rem; + padding: 0.6rem 1.2rem; + font-size: 0.95rem; } .feature-icon { @@ -1802,10 +1803,6 @@ body { font-size: 1rem; } - .hero-subtitle { - font-size: 1.05rem; - } - .hero-badges { gap: 0.6rem; } @@ -1816,7 +1813,7 @@ body { } .tabs-section { - padding: 2rem 0 1.5rem 0; + padding: 2rem 0 1.5rem; } .tabs-section .container { @@ -1846,10 +1843,10 @@ body { } .btn-random-project { - width: auto; - justify-content: flex-start; - padding: 0.25rem 0; - font-size: 0.84rem; + width: 100%; + justify-content: center; + padding: 0.75rem 1.25rem; + font-size: 0.95rem; } .projects-section { @@ -1857,17 +1854,22 @@ body { } .projects-grid { - grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); - gap: 0.85rem; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 1.5rem; margin-top: 1.5rem; } .project-card { - padding: 0.95rem 1rem; + padding: 1.75rem 1.5rem; + } + + .card-icon { + font-size: 3.25rem; + margin-bottom: 0.85rem; } .project-card h3 { - font-size: 0.98rem; + font-size: 1.15rem; } .search-wrapper { @@ -2377,34 +2379,7 @@ body { .footer-brand { flex: 1 1 100%; max-width: 600px; } } -@media (max-width: 768px) { - .hero-section { padding: 7rem 0; min-height: 400px; } - .hero-title { font-size: 2.3rem; } - .hero-subtitle { font-size: 1rem; margin-bottom: 2rem; } - .hero-features { gap: 1rem; margin-bottom: 2rem; } - .feature-badge { padding: 0.6rem 1.2rem; font-size: 0.95rem; } - .tabs-section { padding: 2rem 0 1.5rem; } - .tabs-section .container { gap: 1.5rem; } - .tabs-wrapper { flex-direction: column; gap: 1rem; align-items: stretch; } - .tabs-wrapper .tabs { min-width: unset; width: 100%; } - .tabs { gap: 0.6rem; margin-top: 0; justify-content: flex-start; } - .tab { padding: 0.6rem 1.1rem; font-size: 0.9rem; } - - .btn-random-project { width: 100%; justify-content: center; padding: 0.75rem 1.25rem; font-size: 0.95rem; } - - .projects-section { padding: 2.5rem 0; } - .projects-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } - .project-card { padding: 1.75rem 1.5rem; } - .card-icon { font-size: 3.25rem; margin-bottom: 0.85rem; } - .project-card h3 { font-size: 1.15rem; } - - .search-wrapper { height: 50px; padding: 0 1.1rem; } - .search-input { font-size: 0.95rem; } - .search-shortcut { display: none; } - - .modal-content { padding: 1.5rem; border-radius: 16px; } -} @media (max-width: 576px) { .footer-content { grid-template-columns: 1fr; text-align: center; gap: 2rem; }