Skip to content

fix: constrain decorative code snippets to hero section #488

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
steam-bell-92 merged 2 commits into from
May 20, 2026
Merged

fix: constrain decorative code snippets to hero section #488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22fc908
fix(ui): restrict decorative code snippets to hero section and optimi…
nishtha-agarwal-211 May 20, 2026
f7fb8c4
chore(css): consolidate duplicate max-width 768px media queries
nishtha-agarwal-211 May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 31 additions & 56 deletions web-app/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
} */
}
Comment thread
nishtha-agarwal-211 marked this conversation as resolved.


/* Canvas fills the full hero */
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}

Expand All @@ -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;
}

Expand Down Expand Up @@ -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 {
Expand All @@ -1802,10 +1803,6 @@ body {
font-size: 1rem;
}

.hero-subtitle {
font-size: 1.05rem;
}

.hero-badges {
gap: 0.6rem;
}
Expand All @@ -1816,7 +1813,7 @@ body {
}

.tabs-section {
padding: 2rem 0 1.5rem 0;
padding: 2rem 0 1.5rem;
}

.tabs-section .container {
Expand Down Expand Up @@ -1846,28 +1843,33 @@ 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 {
padding: 2.5rem 0;
}

.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 {
Expand Down Expand Up @@ -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; }
Expand Down
2 changes: 2 additions & 0 deletions web-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -822,6 +822,7 @@
</div>

<main id="main-content" tabindex="-1">
<section class="hero-section">
<div class="hero-background color-bends-container" aria-hidden="true"></div>
<div class="hero-code-snippets" aria-hidden="true">
<span class="code-snippet snippet-one">score += 1</span>
Expand Down Expand Up @@ -866,6 +867,7 @@ <h1 class="hero-title">Learn Python the Fun Way!</h1>
<button class="btn-random-project" id="randomProjectBtn" title="Discover a random project!">launch random →</button>
</div>
</div>
</section>

<section class="projects-section" aria-label="Projects">
<div class="container">
Expand Down
Loading