Changeset 4c5169f in Klonkt

Timestamp:

06/14/2026 03:37:12 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

337ec5a

Parents:

6e0249f

Message:

hub: overview is a headerless landing with hero image

The hub overview now starts directly with the hero — no masthead/profile-header/
view-switcher/bottom-tab (those belong to a PrutFolio and appear on /user/
pages). Hero supports a background image (setting hub_hero_image, configurable
in Admin) with a dark overlay; otherwise gradient. Roster avatars use each
artist's accent color.

• shell.ejs: chrome gated on bodyClass 'on-hub'.
• hub.js: artists.accent + hub.heroImage from settings.
• admin-settings: hub_hero_image field.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• routes/admin-settings.js (modified) (2 diffs)
• routes/hub.js (modified) (2 diffs)
• views/pages/admin-settings.ejs (modified) (1 diff)
• views/pages/hub-home.ejs (modified) (6 diffs)
• views/shell.ejs (modified) (3 diffs)

src/routes/admin-settings.js

@@ -26 +26 @@
     hubTagline: getSetting('hub_tagline') || '',
     hubIntro: getSetting('hub_intro') || '',
+    hubHeroImage: getSetting('hub_hero_image') || '',
     success: req.query.success || null,
   });
@@ -43 +44 @@
     setSetting('hub_intro', (req.body.hub_intro || '').toString().slice(0, 400).trim());
   }
+  if (typeof req.body.hub_hero_image !== 'undefined') {
+    setSetting('hub_hero_image', (req.body.hub_hero_image || '').toString().slice(0, 300).trim());
+  }
   res.redirect('/admin/settings?success=' + encodeURIComponent('Opgeslagen'));
 });

src/routes/hub.js

@@ -37 +37 @@
   // ALLE PrutFolio's (elke user, incl. de admin z'n eigen site) voor de roster.
   const artists = db.prepare(`
-    SELECT s.slug, s.title, s.tagline, s.profile_photo,
+    SELECT s.slug, s.title, s.tagline, s.profile_photo, s.accent,
            (SELECT COUNT(*) FROM posts WHERE site_id = s.id AND status = 'published') AS post_count
     FROM sites s
@@ -49 +49 @@
     tagline: getSetting('hub_tagline') || '',
     intro: getSetting('hub_intro') || '',
+    heroImage: getSetting('hub_hero_image') || '',
   };
 

src/views/pages/admin-settings.ejs

@@ -51 +51 @@
         <textarea name="hub_intro" maxlength="400" rows="3" placeholder="Korte introtekst onder de titel."><%= hubIntro %></textarea>
       </label>
+      <label class="set-field">
+        <span>Hero-afbeelding (URL) <small style="font-weight:400;color:var(--ink-muted)">— optioneel; achtergrond van de hero</small></span>
+        <input type="text" name="hub_hero_image" maxlength="300" value="<%= hubHeroImage %>" placeholder="/media/... of https://...">
+      </label>
       <button type="submit" class="btn btn-primary">Opslaan</button>
     </form>

src/views/pages/hub-home.ejs

@@ -1 +1 @@
 <div class="hub">
 
-  <%# ── HERO (label / bedrijf) ─────────────────────────────────────── %>
-  <header class="hub-hero">
+  <%# ── HERO (label) — de pagina begint hier, geen header erboven ────── %>
+  <header class="hub-hero<%= hub.heroImage ? ' has-img' : '' %>"<% if (hub.heroImage) { %> style="--hero-img:url('<%= hub.heroImage %>')"<% } %>>
     <div class="hub-hero-inner container">
       <h1 class="hub-hero-title"><%= hub.title %></h1>
@@ -23 +23 @@
         <% artists.forEach(function(a){ %>
           <a class="roster-card" href="/user/<%= a.slug %>">
-            <span class="roster-avatar"<% if (a.profile_photo) { %> style="background-image:url('<%= a.profile_photo %>')"<% } %>>
+            <span class="roster-avatar"<% if (a.profile_photo) { %> style="background-image:url('<%= a.profile_photo %>')"<% } else { %> style="background:<%= a.accent || 'var(--accent)' %>;color:#fff"<% } %>>
               <% if (!a.profile_photo) { %><%= (a.title || a.slug).charAt(0).toUpperCase() %><% } %>
             </span>
@@ -65 +65 @@
 /* ── Hero ─────────────────────────────────────────────────────────── */
 .hub-hero {
+  display: flex; align-items: center; justify-content: center;
+  min-height: clamp(340px, 58vh, 560px);
+  text-align: center;
   background:
-    radial-gradient(120% 140% at 50% -20%, color-mix(in srgb, var(--accent) 22%, var(--paper)) 0%, var(--paper) 60%);
+    radial-gradient(130% 130% at 50% -10%, color-mix(in srgb, var(--accent) 26%, var(--paper)) 0%, var(--paper) 62%);
   border-bottom: 1px solid var(--rule);
-  text-align: center;
 }
-.hub-hero-inner { padding: 4rem 1rem 3.25rem; }
+.hub-hero.has-img {
+  background:
+    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 100%),
+    var(--hero-img) center / cover no-repeat;
+  border-bottom: 0;
+  color: #fff;
+}
+.hub-hero-inner { padding: 3.5rem 1rem; }
 .hub-hero-title {
   font-family: var(--font-display, serif);
-  font-size: clamp(2.4rem, 6vw, 3.6rem);
-  line-height: 1.05; margin: 0;
-  letter-spacing: -0.01em;
+  font-size: clamp(2.6rem, 7vw, 4.4rem);
+  line-height: 1.02; margin: 0; letter-spacing: -0.015em;
 }
 .hub-hero-tag {
-  margin: 0.6rem 0 0; font-size: 1.05rem; font-weight: 600;
-  color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em;
+  margin: 0.7rem 0 0; font-size: 1.05rem; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--accent);
 }
+.hub-hero.has-img .hub-hero-tag { color: #fff; opacity: 0.92; }
 .hub-hero-desc {
-  margin: 1rem auto 0; max-width: 46ch;
-  color: var(--ink-muted); font-size: 1.05rem; line-height: 1.5;
+  margin: 1.1rem auto 0; max-width: 48ch;
+  font-size: 1.1rem; line-height: 1.55; color: var(--ink-muted);
 }
+.hub-hero.has-img .hub-hero-desc { color: rgba(255,255,255,.9); }
 
-.hub-body { padding-bottom: 4rem; }
+.hub-body { padding-bottom: 4.5rem; }
 .hub-sec { margin-top: 3rem; }
 .hub-sec-title {
@@ -103 +114 @@
 .roster-card {
   display: flex; flex-direction: column; align-items: center; text-align: center;
-  gap: 0.4rem; padding: 1.5rem 1rem 1.25rem;
-  border: 1px solid var(--rule); border-radius: 14px;
+  gap: 0.4rem; padding: 1.6rem 1rem 1.3rem;
+  border: 1px solid var(--rule); border-radius: 16px;
   background: var(--paper-2); color: var(--ink); text-decoration: none;
   transition: border-color 140ms, transform 140ms, box-shadow 140ms;
@@ -110 +121 @@
 .roster-card:hover {
   border-color: var(--accent); transform: translateY(-3px);
-  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--accent) 50%, transparent);
+  box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--accent) 55%, transparent);
 }
 .roster-avatar {
-  width: 84px; height: 84px; border-radius: 50%; margin-bottom: 0.4rem;
-  background-size: cover; background-position: center; background-color: var(--paper);
+  width: 88px; height: 88px; border-radius: 50%; margin-bottom: 0.45rem;
+  background-size: cover; background-position: center;
   display: inline-flex; align-items: center; justify-content: center;
-  font-family: var(--font-display, serif); font-size: 2rem; font-weight: 600; color: var(--accent);
-  border: 2px solid color-mix(in srgb, var(--accent) 30%, var(--rule));
+  font-family: var(--font-display, serif); font-size: 2.1rem; font-weight: 700; color: #fff;
+  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
 }
-.roster-name { font-weight: 700; font-size: 1.08rem; }
+.roster-name { font-weight: 700; font-size: 1.1rem; }
 .roster-tag { color: var(--ink-muted); font-size: 0.82rem; }
 .roster-count {
-  margin-top: 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
+  margin-top: 0.35rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
   color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
   padding: 0.15rem 0.6rem; border-radius: 99px;
@@ -151 +162 @@
 
 @media (max-width: 560px) {
-  .hub-hero-inner { padding: 2.75rem 1rem 2.25rem; }
+  .hub-hero-inner { padding: 2.5rem 1rem; }
   .feed-cover { width: 52px; height: 52px; }
   .feed-arrow { display: none; }

src/views/shell.ejs

@@ -239 +239 @@
 <body class="<%= bodyClass || 'on-home' %> has-bottom-tab" data-feed-view="<%= _e(safeSite.feed_view_default || 'timeline') %>" data-grid-cols="3">
 
-<%- include('partials/topnav') %>
-
-<%- include('partials/profile-header') %>
+<%# Hub-overview is een standalone landing: geen masthead/profile-header/
+    view-switcher — die horen bij een PrutFolio (en verschijnen dus op /user/-
+    pagina's). De landing begint meteen met de hero. %>
+<% var isHubLanding = (typeof bodyClass === 'string' && bodyClass.indexOf('on-hub') >= 0); %>
+
+<% if (!isHubLanding) { %>
+  <%- include('partials/topnav') %>
+  <%- include('partials/profile-header') %>
+<% } %>
 
 <%# View switcher — visible on every non-admin page. On feed pages
@@ -247 +253 @@
     on non-feed pages (post, account, search, auth) it navigates to /
     in the chosen view. Click logic is in shell.ejs at the bottom. %>
-<% if (!isAdminPage) { %>
+<% if (!isAdminPage && !isHubLanding) { %>
   <%- include('partials/view-switcher') %>
 <% } %>
@@ -262 +268 @@
 <%- include('partials/footer') %>
 
-<!-- Mobile bottom-tab navigation (auto-hidden ≥768px) -->
+<!-- Mobile bottom-tab navigation (auto-hidden ≥768px) — niet op de hub-landing -->
+<% if (!isHubLanding) { %>
 <%- include('partials/bottom-tab') %>
+<% } %>
 
 <!-- Mobile profile sheet (auto-hidden ≥768px; only rendered when logged in) -->