landing page header images

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;
+    position: relative;
-    text-align: left;
+    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;
+    display: none;
-    max-width: 300px;
-    width: 100%;
 }
 
 .hero-portrait {
-    width: 100%;
+    display: none;
-    height: auto;
-    display: block;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 .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);
+    color: var(--text-primary);
-    max-width: none;
+    max-width: 600px;
     margin: 0;
     text-align: left;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .landing-page .feed-section {

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 {
+    .hero-text::before {
-        max-width: 250px;
+        background: linear-gradient(
-        margin: 0 auto;
+            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 {
+    .hero-text {
-        gap: 2rem;
+        min-height: 350px;
-    }
+        padding: 2.5rem 2rem;
-    
-    .hero-image {
-        max-width: 250px;
     }
     
     .landing-page .hero h1 {

templates/landing.html

@@ -6,9 +6,6 @@
                 <h1>Welcome to {{.SiteName}}</h1>
                 <p class="lead">Your gateway to decentralized knowledge and community-driven content.</p>
             </div>
-            <div class="hero-image">
-                <img src="/static/GitCitadel_Graphic_Portrait.png" alt="{{.SiteName}}" class="hero-portrait">
-            </div>
         </div>
     </section>