Skip to content

fix: polish form validation and landing page styling #2

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
nasserx merged 1 commit into from
Jun 6, 2026
Merged

fix: polish form validation and landing page styling #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
49 changes: 26 additions & 23 deletions portfolio_app/static/css/landing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,15 @@ html { scroll-behavior: smooth; }
}

.landing-nav .landing-container {
display: flex; align-items: center;
justify-content: space-between; height: 100%;
display: grid; align-items: center;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
height: 100%;
gap: 1.5rem;
}

.landing-brand {
display: flex; align-items: center; gap: 0.625rem;
justify-self: start;
text-decoration: none; color: var(--text-1);
font-weight: 700; font-size: 1rem; letter-spacing: -0.2px;
}
Expand All @@ -39,7 +41,7 @@ html { scroll-behavior: smooth; }

.landing-nav-links {
display: flex; align-items: center; gap: 0.25rem;
margin-left: auto; margin-right: 0.5rem;
justify-self: center;
}
.nav-link-inline {
font-size: 0.875rem; font-weight: 500;
Expand All @@ -48,9 +50,16 @@ html { scroll-behavior: smooth; }
border-radius: var(--radius-md) !important;
transition: background var(--transition), color var(--transition);
}
.nav-link-inline:hover { background: var(--surface-hover); color: var(--text-1); }
.nav-link-inline:hover,
.nav-link-inline.is-active,
.nav-link-inline[aria-current="location"] {
background: var(--surface-hover); color: var(--text-1);
}

.landing-nav-end { display: flex; align-items: center; gap: 0.5rem; }
.landing-nav-end {
display: flex; align-items: center; gap: 0.5rem;
justify-self: end;
}

.landing-theme-toggle {
display: flex; align-items: center; justify-content: center;
Expand All @@ -74,6 +83,12 @@ html { scroll-behavior: smooth; }
box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2);
}

.landing-how,
.landing-features,
.landing-fit {
scroll-margin-top: 84px;
}


/* ============================================================ */
/* Hero */
Expand All @@ -94,16 +109,6 @@ html { scroll-behavior: smooth; }
justify-content: center;
}

.landing-badge {
display: inline-block;
background: var(--primary-muted); color: var(--primary);
padding: 0.3rem 0.875rem;
font-size: 0.75rem; font-weight: 600;
width: fit-content; letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--radius-pill) !important;
}

.landing-headline {
font-size: 3.25rem; font-weight: 700;
line-height: 1.08; letter-spacing: -1.2px;
Expand Down Expand Up @@ -171,8 +176,7 @@ html { scroll-behavior: smooth; }
display: flex; flex-direction: column; gap: 0.5rem;
border-radius: var(--radius-lg) !important;
outline: 1px solid var(--border-color) !important;
box-shadow: 0 4px 14px rgba(60,64,67,.08), 0 16px 36px rgba(60,64,67,.08) !important;
transition: transform var(--transition-slow), box-shadow var(--transition-slow);
transition: transform var(--transition-slow);

/* Donut palette — matches the Material palette used in /charts
(PALETTE constant in charts.html) so the landing preview reads
Expand All @@ -197,7 +201,6 @@ html { scroll-behavior: smooth; }
}
.landing-preview:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(60,64,67,.12), 0 20px 44px rgba(60,64,67,.10) !important;
}

/* Stat strip — uses --surface so it stays seamless against the
Expand Down Expand Up @@ -721,14 +724,17 @@ html { scroll-behavior: smooth; }
/* Responsive */
/* ============================================================ */
@media (max-width: 1080px) {
.landing-nav .landing-container {
display: flex;
justify-content: space-between;
}
.landing-nav-links { display: none; }

.landing-hero { padding: 64px 0 48px; }
.landing-hero .landing-container {
grid-template-columns: 1fr; gap: 3rem; text-align: center;
}
.landing-hero-content { align-items: center; }
.landing-badge,
.landing-cta-group { justify-content: center; }
.landing-cta-note { max-width: 100%; text-align: center; }
.landing-subtext { max-width: 100%; margin: 0 auto; }
Expand Down Expand Up @@ -814,7 +820,7 @@ body.auth-modal-open .landing-footer {
/* Dark Mode */
/* ============================================================ */
[data-bs-theme="dark"] .landing-preview {
box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 16px 36px rgba(0,0,0,.25) !important;
outline-color: transparent !important;

/* Google Material dark-theme tones — softer, higher-contrast on dark surfaces. */
--donut-1: #8ab4f8; /* Blue — Stocks */
Expand All @@ -832,9 +838,6 @@ body.auth-modal-open .landing-footer {
translucent tiles (which otherwise blend with --surface). */
--tile-gap: var(--surface-2);
}
[data-bs-theme="dark"] .landing-preview:hover {
box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 20px 44px rgba(0,0,0,.3) !important;
}
[data-bs-theme="dark"] .landing-features { border-top-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .landing-footer { border-top-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .landing-nav { border-bottom-color: rgba(255,255,255,.08); }
Expand Down
7 changes: 6 additions & 1 deletion portfolio_app/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -922,7 +922,6 @@ textarea:-webkit-autofill, select:-webkit-autofill {

.form-control.is-invalid,
.form-select.is-invalid {
background: var(--danger-muted) !important;
background-image: none !important;
outline: 2px solid var(--danger) !important;
outline-offset: 0 !important;
Expand Down Expand Up @@ -1521,6 +1520,12 @@ i.bi { vertical-align: middle; }
[data-bs-theme="dark"] .form-select:focus {
outline: 2px solid var(--primary) !important;
}
[data-bs-theme="dark"] .form-control.is-invalid,
[data-bs-theme="dark"] .form-select.is-invalid,
[data-bs-theme="dark"] .form-control.is-invalid:focus,
[data-bs-theme="dark"] .form-select.is-invalid:focus {
outline: 2px solid var(--danger) !important;
}

/* Data colors in dark — slightly brighter */
[data-bs-theme="dark"] .profit { color: #81c995 !important; }
Expand Down
73 changes: 71 additions & 2 deletions portfolio_app/templates/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

<!-- Project CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css', v='20260503-20') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/landing.css', v='20260505-1') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/landing.css', v='20260606-1') }}">
</head>
<body>

Expand Down Expand Up @@ -67,7 +67,6 @@

<!-- Left: copy -->
<div class="landing-hero-content reveal">
<span class="landing-badge">Investment Tracker</span>
<h1 class="landing-headline">
Take control of your investment records.
</h1>
Expand Down Expand Up @@ -671,6 +670,76 @@ <h2 class="auth-title mb-2">Check your inbox</h2>
onScroll();
}

/* ── Active section nav state ── */
const sectionLinks = Array.from(document.querySelectorAll('.landing-nav-links .nav-link-inline[href^="#"]'));
const sectionTargets = sectionLinks
.map((link) => document.getElementById(link.getAttribute('href').slice(1)))
.filter(Boolean);
let activeSectionId = '';
let activeUpdateQueued = false;

function setActiveSection(sectionId) {
if (!sectionId || sectionId === activeSectionId) return;
activeSectionId = sectionId;

sectionLinks.forEach((link) => {
const isActive = link.getAttribute('href') === `#${sectionId}`;
link.classList.toggle('is-active', isActive);
if (isActive) {
link.setAttribute('aria-current', 'location');
} else {
link.removeAttribute('aria-current');
}
});
}

function currentSectionId() {
const navHeight = navbar?.offsetHeight || 64;
const activationPoint = window.scrollY + navHeight + Math.min(window.innerHeight * 0.32, 240);
let sectionId = '';

sectionTargets.forEach((section) => {
if (section.offsetTop <= activationPoint) {
sectionId = section.id;
}
});

return sectionId || activeSectionId;
}

function updateActiveSection() {
activeUpdateQueued = false;
setActiveSection(currentSectionId());
}

function queueActiveSectionUpdate() {
if (activeUpdateQueued) return;
activeUpdateQueued = true;
requestAnimationFrame(updateActiveSection);
}

sectionLinks.forEach((link) => {
link.addEventListener('click', () => {
setActiveSection(link.getAttribute('href').slice(1));
});
});

if (sectionTargets.length && 'IntersectionObserver' in window) {
const activeSectionObserver = new IntersectionObserver(() => {
queueActiveSectionUpdate();
}, {
rootMargin: '-64px 0px -45% 0px',
threshold: [0, 0.2, 0.6, 1]
});
sectionTargets.forEach((section) => activeSectionObserver.observe(section));
}

if (sectionTargets.length) {
window.addEventListener('scroll', queueActiveSectionUpdate, { passive: true });
window.addEventListener('resize', queueActiveSectionUpdate, { passive: true });
queueActiveSectionUpdate();
}

/* ── Scroll-reveal animation ──
Adds .is-visible to .reveal elements when they enter the viewport.
Falls back to immediate reveal if IntersectionObserver is unavailable. */
Expand Down
Loading