diff --git a/static/css/main.css b/static/css/main.css index aed1707..e863df4 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -499,48 +499,75 @@ a:focus { .landing-page .hero { margin-bottom: 3rem; - padding: 2rem 0; + padding: 0; } .hero-content { - display: flex; - align-items: center; - gap: 3rem; max-width: 1000px; margin: 0 auto; } .hero-text { - flex: 1; - text-align: left; + position: relative; + background-image: url('/static/GitCitadel_PFP.png'); + background-size: cover; + background-position: center right; + background-repeat: no-repeat; + padding: 3rem 2rem; + border-radius: 12px; + overflow: hidden; + min-height: 400px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.hero-text::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + to right, + rgba(45, 45, 45, 0.95) 0%, + rgba(45, 45, 45, 0.85) 30%, + rgba(124, 158, 255, 0.4) 60%, + rgba(124, 158, 255, 0.6) 100% + ); + z-index: 1; +} + +.hero-text h1, +.hero-text .lead { + position: relative; + z-index: 2; } .hero-image { - flex: 0 0 auto; - max-width: 300px; - width: 100%; + display: none; } .hero-portrait { - width: 100%; - height: auto; - display: block; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + display: none; } .landing-page .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; text-align: left; + color: var(--text-primary); + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .landing-page .hero .lead { font-size: 1.25rem; - color: var(--text-secondary); - max-width: none; + color: var(--text-primary); + max-width: 600px; margin: 0; text-align: left; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .landing-page .feed-section { diff --git a/static/css/responsive.css b/static/css/responsive.css index b007af1..bfed942 100644 --- a/static/css/responsive.css +++ b/static/css/responsive.css @@ -185,23 +185,28 @@ } .landing-page .hero { - padding: 1.5rem 0; + padding: 0; margin-bottom: 2rem; } .hero-content { - flex-direction: column; - gap: 2rem; text-align: center; } .hero-text { - text-align: center; + min-height: 300px; + padding: 2rem 1.5rem; + background-position: center; } - .hero-image { - max-width: 250px; - margin: 0 auto; + .hero-text::before { + background: linear-gradient( + to bottom, + rgba(45, 45, 45, 0.95) 0%, + rgba(45, 45, 45, 0.85) 40%, + rgba(124, 158, 255, 0.5) 70%, + rgba(124, 158, 255, 0.7) 100% + ); } .landing-page .hero h1 { @@ -212,8 +217,8 @@ .landing-page .hero .lead { font-size: 1rem; - padding: 0; text-align: center; + max-width: 100%; } .landing-page .features { @@ -1045,12 +1050,9 @@ padding: 1.5rem; } - .hero-content { - gap: 2rem; - } - - .hero-image { - max-width: 250px; + .hero-text { + min-height: 350px; + padding: 2.5rem 2rem; } .landing-page .hero h1 { diff --git a/templates/landing.html b/templates/landing.html index f51ccc8..1cf0a51 100644 --- a/templates/landing.html +++ b/templates/landing.html @@ -6,9 +6,6 @@

Welcome to {{.SiteName}}

Your gateway to decentralized knowledge and community-driven content.

-
- {{.SiteName}} -