Changeset ce8c8c2 in Klonkt for src/views/pages

Timestamp:

06/14/2026 06:46:13 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

74c2473

Parents:

a3169f5

Message:

feat: hub-home shows main/label account separately (not under Artists)

The main site (oldest = company/main account, e.g. Studio Noord) appeared
among the artists. Now it gets a highlighted "Main page" card above the roster
and is excluded from both the Artists roster and the /artiesten directory
(a label is not an artist).

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

File:

• src/views/pages/hub-home.ejs (modified) (2 diffs)

src/views/pages/hub-home.ejs

@@ -30 +30 @@
 
   <div class="container hub-body">
+
+    <%# ── HOOFDPAGINA (label-/hoofdaccount — geen artiest) ──────────── %>
+    <% if (mainSite) { %>
+    <section class="hub-sec hub-sec-main">
+      <a class="hub-main-card" href="/user/<%= mainSite.slug %>">
+        <% var _mAva = mainSite.profile_photo || mainSite.owner_avatar; %>
+        <span class="hub-main-avatar"<% if (_mAva) { %> style="background-image:url('<%= _mAva %>')"<% } else { %> style="background:<%= mainSite.accent || 'var(--accent)' %>;color:#fff"<% } %>>
+          <% if (!_mAva) { %><%= (mainSite.title || mainSite.slug).charAt(0).toUpperCase() %><% } %>
+        </span>
+        <span class="hub-main-info">
+          <span class="hub-main-badge">Hoofdpagina</span>
+          <span class="hub-main-name"><%= mainSite.title %></span>
+          <% if (mainSite.tagline) { %><span class="hub-main-tag"><%= mainSite.tagline %></span><% } %>
+        </span>
+        <span class="hub-main-cta">Bekijk de pagina <span aria-hidden="true">→</span></span>
+      </a>
+    </section>
+    <% } %>
 
     <%# ── ARTIESTEN-ROSTER ─────────────────────────────────────────── %>
@@ -155 +173 @@
 .hub-more-link:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--paper-2)); }
 
+/* ── Hoofdpagina-kaart (label-/hoofdaccount, apart van de artiesten) ── */
+.hub-sec-main { margin-top: 2.25rem; }
+.hub-main-card {
+  display: flex; align-items: center; gap: 1.25rem;
+  padding: 1.2rem 1.5rem;
+  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule));
+  border-radius: 18px;
+  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 11%, var(--paper-2)) 0%, var(--paper-2) 72%);
+  color: var(--ink); text-decoration: none;
+  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
+}
+.hub-main-card:hover {
+  border-color: var(--accent); transform: translateY(-2px);
+  box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--accent) 60%, transparent);
+}
+.hub-main-avatar {
+  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
+  background-size: cover; background-position: center;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-family: var(--font-display, serif); font-size: 1.8rem; font-weight: 700; color: #fff;
+  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
+}
+.hub-main-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
+.hub-main-badge {
+  align-self: flex-start; font-size: 0.65rem; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
+  padding: 0.12rem 0.55rem; border-radius: 99px;
+}
+.hub-main-name { font-family: var(--font-display, serif); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
+.hub-main-tag { color: var(--ink-muted); font-size: 0.9rem; }
+.hub-main-cta { color: var(--accent); font-weight: 600; font-size: 0.9rem; white-space: nowrap; flex-shrink: 0; }
+@media (max-width: 560px) {
+  .hub-main-card { flex-direction: column; text-align: center; }
+  .hub-main-info { align-items: center; }
+  .hub-main-badge { align-self: center; }
+  .hub-main-cta { display: none; }
+}
+
 /* ── Roster (artiesten) ───────────────────────────────────────────── */
 .roster {