Skip to content

Fix: Added global top spacing below navbar #57

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

Open
shah0108 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix: Added global top spacing below navbar #57

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
737063f
Merge branch 'main' into nav
shah0108 Oct 6, 2025
0514bf2
Merge branch 'main' into nav
shah0108 Oct 7, 2025
a0f3e48
Merge branch 'main' into nav
shah0108 Oct 10, 2025
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
199 changes: 199 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
/* Global App Styles */
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.main-content {
padding-top: 6rem !important; /* 6rem = 96px — adjust if navbar height is different */
}

/* If there is a hero wrapper that is first child, you can also push it down */
.main-content > *:first-child {
margin-top: 0 !important;
Comment on lines +13 to +14
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Do not blanket-reset first child margins with !important.

This selector wipes out any intentional top spacing on the first child of .main-content, and the !important makes it impossible for downstream components to opt back in. That’s likely to regress pages whose first section relies on margin for internal layout. Please drop this rule (or scope it narrowly to the troubled hero wrapper) and let components manage their own top margins.

🤖 Prompt for AI Agents 
In src/App.css around lines 13-14, the rule ".main-content > *:first-child {
margin-top: 0 !important; }" indiscriminately strips top margins from all first
children and uses !important, preventing downstream components from restoring
spacing; remove this blanket rule and the !important, or replace it with a
narrowly-scoped rule targeting only the specific problematic element (e.g., the
hero wrapper) so components can manage their own top margins.

}

/* Global Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
height: 100%;
width: 100%;
scroll-behavior: smooth;
}

/* Updated Body */
body {
font-family: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
line-height: 1.6;
color: var(--color-text);
background: linear-gradient(135deg, var(--color-bg-muted), #eef2ff);
transition: background 0.3s, color 0.3s;
display: block; /* ✅ Allow full-page layout */
}

/* Dark mode */
body.dark {
background: linear-gradient(135deg, #1f2937, var(--color-bg));
color: var(--color-text);
}

/* Accessibility focus */
*:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

/* Links */
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* Buttons */
button {
background: none;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
color: inherit;
}

/* Images */
img {
max-width: 100%;
height: auto;
}

/* Container utility */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

/* Typography utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Spacing utilities */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }

/* Responsive utilities */
@media screen and (max-width: 768px) {
.container {
padding: 0 1rem;
}
}

/* Animations */
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading { animation: spin 1s linear infinite; }

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.6s ease-out; }

/* Accessibility reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

/* Layout elements */
.container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 3rem 1.5rem;
max-width: 900px;
}

/* Hero section */
.title {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary-strong);
margin-bottom: 1rem;
transition: color 0.3s;
}

body.dark .title {
color: var(--color-accent);
}

.subtitle {
font-size: 1.25rem;
line-height: 1.6;
color: var(--color-text-muted);
max-width: 650px;
margin-bottom: 2rem;
transition: color 0.3s;
}

/* Buttons */
.button {
background-color: var(--color-primary-strong);
color: white;
padding: 0.85rem 2rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: bold;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
transition: transform 0.2s ease, background-color 0.2s ease;
}
.button:hover {
background-color: var(--color-primary);
transform: translateY(-2px);
}

/* About Section */
.about {
margin-top: 4rem;
max-width: 750px;
background: var(--color-surface);
padding: 2rem;
border-radius: 0.75rem;
box-shadow: 0 4px 20px var(--shadow-color);
transition: background 0.3s, box-shadow 0.3s;
}

/* Footer */
.footer {
margin-top: 4rem;
color: var(--color-text-muted);
font-size: 0.9rem;
transition: color 0.3s;
}