diff --git a/assets/built/broadsheet-hybrid.css b/assets/built/broadsheet-hybrid.css index d63908c..dadd53e 100644 --- a/assets/built/broadsheet-hybrid.css +++ b/assets/built/broadsheet-hybrid.css @@ -716,3 +716,481 @@ body { .ft-ribbon-card:last-child { border-bottom: none; } .ft-ribbon-thumb { height: 170px; } } + +/* ============================================================ + ARTICLE SINGLE (POST) BROADSHEET STYLING + ============================================================ */ + +/* Reading progress bar */ +.ft-reading-progress { + position: fixed; + top: 0; + left: 0; + height: 3px; + background: var(--ft-accent-green); + width: 0%; + z-index: 9999; + transition: width 0.1s ease; +} + +/* Article Header */ +.ft-article-header { + border-bottom: 1px solid var(--ft-border-hairline); + padding: 36px 0 24px; +} +.ft-header-inner { + max-width: 820px; + margin: 0 auto; + padding: 0 24px; +} +.ft-article-category-row { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 12px; +} +.ft-article-kicker { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 11.5px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--ft-accent-green); + text-decoration: none; +} +.ft-article-kicker:hover { text-decoration: underline; } +.ft-dot-divider { color: var(--ft-ink-muted); font-size: 10px; } +.ft-article-edition { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--ft-ink-muted); +} +.ft-article-main-title { + font-family: 'Newsreader', 'Source Serif 4', Georgia, serif; + font-size: 42px; + line-height: 1.15; + font-weight: 700; + letter-spacing: -0.015em; + color: var(--ft-ink-primary); + margin-bottom: 18px; +} +.ft-article-deck { + font-size: 20px; + line-height: 1.5; + color: var(--ft-ink-secondary); + font-style: normal; + margin-bottom: 24px; + font-weight: 400; +} + +/* Byline and Tools Strip */ +.ft-article-byline-bar { + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid var(--ft-border-bold); + border-bottom: 1px solid var(--ft-border-hairline); + padding: 12px 0; + margin-bottom: 16px; +} +.ft-author-meta-block { + display: flex; + align-items: center; + gap: 12px; +} +.ft-author-badge-frame { + width: 44px; + height: 44px; + border-radius: 50%; + overflow: hidden; + border: 1px solid var(--ft-border-hairline); + background: #E8D8C8; +} +.ft-author-badge-frame img { + width: 100%; + height: 100%; + object-fit: cover; +} +.ft-author-text { + display: flex; + flex-direction: column; + gap: 2px; +} +.ft-byline-name { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 13px; + font-weight: 700; + color: var(--ft-ink-primary); +} +.ft-byline-name a { color: inherit; text-decoration: none; } +.ft-byline-name a:hover { color: var(--ft-accent-green); } +.ft-byline-loc { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 11px; + color: var(--ft-ink-muted); +} + +.ft-article-tools-block { + display: flex; + align-items: center; + gap: 14px; +} +.ft-read-pill { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 11px; + font-weight: 600; + color: var(--ft-ink-muted); + background: var(--ft-bg-card); + padding: 4px 8px; + border-radius: 2px; +} +.ft-article-share-strip { + display: flex; + gap: 8px; +} +.ft-share-icon { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 2px; + border: 1px solid var(--ft-border-hairline); + color: var(--ft-ink-secondary); + background: #fff; + text-decoration: none; + transition: all 0.15s ease; +} +.ft-share-icon svg { width: 14px; height: 14px; } +.ft-share-icon:hover { + color: var(--ft-accent-green); + border-color: var(--ft-accent-green); +} + +/* Audio Player Console */ +.ft-article-audio-box { + margin-top: 14px; +} + +/* Feature Image Viewport */ +.ft-article-hero-viewport { + max-width: 1040px; + margin: 28px auto 0; + padding: 0 24px; +} +.ft-hero-img-container { + width: 100%; + max-height: 520px; + overflow: hidden; + border-radius: 2px; + border: 1px solid var(--ft-border-hairline); + background: #E8D8C8; +} +.ft-hero-img-container img { + width: 100%; + height: 100%; + object-fit: cover; +} +.ft-hero-caption { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 12px; + color: var(--ft-ink-muted); + line-height: 1.45; + margin-top: 8px; + padding: 0 4px; +} + +/* 2. Prose Body & Typography */ +.ft-article-prose-column { + max-width: 720px; + margin: 36px auto 0; + padding: 0 24px; +} + +/* Semafor Article Takeaways */ +.ft-article-takeaways { + background: var(--ft-bg-card); + border: 1px solid var(--ft-border-hairline); + border-left: 4px solid var(--ft-accent-green); + padding: 18px 20px; + margin-bottom: 36px; + border-radius: 2px; +} +.ft-takeaway-header { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--ft-border-hairline); + padding-bottom: 8px; + margin-bottom: 12px; +} +.ft-takeaway-label { + font-family: 'Cinzel', serif; + font-size: 12.5px; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--ft-ink-primary); +} +.ft-takeaway-sub { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 10.5px; + color: var(--ft-ink-muted); + text-transform: uppercase; +} +.ft-takeaway-item { + display: grid; + grid-template-columns: 110px 1fr; + gap: 14px; + padding: 6px 0; + line-height: 1.5; +} +.ft-takeaway-tag { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 10.5px; + font-weight: 700; + text-transform: uppercase; + color: var(--ft-accent-green); + letter-spacing: 0.05em; +} +.ft-takeaway-text { + font-size: 14px; + color: var(--ft-ink-secondary); +} + +/* Gh-content typography rules */ +.ft-prose-body { + font-family: 'Source Serif 4', Georgia, serif; + font-size: 18.5px; + line-height: 1.68; + color: #1A1816; +} +.ft-prose-body p { + margin-bottom: 24px; +} +.ft-prose-body > p:first-of-type::first-letter { + font-family: 'Newsreader', serif; + float: left; + font-size: 64px; + line-height: 52px; + padding-top: 4px; + padding-right: 8px; + padding-bottom: 0; + color: var(--ft-ink-primary); + font-weight: 700; +} +.ft-prose-body h2 { + font-family: 'Newsreader', serif; + font-size: 28px; + line-height: 1.25; + font-weight: 700; + margin: 44px 0 16px; + color: var(--ft-ink-primary); + border-bottom: 1px solid var(--ft-border-hairline); + padding-bottom: 6px; +} +.ft-prose-body h3 { + font-family: 'Newsreader', serif; + font-size: 22px; + line-height: 1.3; + font-weight: 600; + margin: 32px 0 12px; + color: var(--ft-ink-primary); +} +.ft-prose-body blockquote { + margin: 32px 0; + padding: 16px 24px; + border-left: 3px solid var(--ft-border-bold); + background: var(--ft-bg-card); + font-family: 'Newsreader', serif; + font-style: italic; + font-size: 21px; + line-height: 1.5; + color: var(--ft-ink-primary); +} +.ft-prose-body ul, .ft-prose-body ol { + margin: 0 0 24px 28px; +} +.ft-prose-body li { + margin-bottom: 8px; +} + +/* Tags row */ +.ft-article-tags-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + padding: 24px 0; + border-top: 1px solid var(--ft-border-hairline); + margin-top: 36px; +} +.ft-tags-label { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + color: var(--ft-ink-muted); + letter-spacing: 0.08em; + margin-right: 6px; +} +.ft-tag-pill { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 11.5px; + font-weight: 600; + color: var(--ft-ink-secondary); + background: #fff; + border: 1px solid var(--ft-border-hairline); + padding: 4px 10px; + border-radius: 2px; + text-decoration: none; + transition: all 0.15s ease; +} +.ft-tag-pill:hover { + color: var(--ft-accent-green); + border-color: var(--ft-accent-green); +} + +/* Author Signature Card */ +.ft-author-broadsheet-card { + background: #fff; + border: 1px solid var(--ft-border-hairline); + border-top: 3px solid var(--ft-accent-green); + padding: 24px; + display: grid; + grid-template-columns: 72px 1fr; + gap: 20px; + margin: 36px 0; + border-radius: 2px; +} +.ft-card-avatar { + width: 72px; + height: 72px; + border-radius: 50%; + overflow: hidden; + border: 1px solid var(--ft-border-hairline); + background: #E8D8C8; +} +.ft-card-avatar img { width: 100%; height: 100%; object-fit: cover; } +.ft-card-bio-body { display: flex; flex-direction: column; gap: 4px; } +.ft-card-author-title { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 10.5px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--ft-accent-green); +} +.ft-card-author-name { + font-family: 'Newsreader', serif; + font-size: 20px; + font-weight: 700; +} +.ft-card-author-name a { color: inherit; text-decoration: none; } +.ft-card-author-bio { + font-size: 14px; + color: var(--ft-ink-secondary); + line-height: 1.5; + margin-top: 4px; +} +.ft-card-author-links { margin-top: 8px; } +.ft-author-archive-link { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 11px; + font-weight: 700; + color: var(--ft-accent-green); + text-decoration: none; +} +.ft-author-archive-link:hover { text-decoration: underline; } + +/* 3. Related Broadsheet Section */ +.ft-related-broadsheet-section { + background: var(--ft-bg-card); + border-top: 2px solid var(--ft-border-bold); + padding: 40px 0 56px; + margin-top: 56px; +} +.ft-related-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 32px; +} +.ft-related-bar { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--ft-border-hairline); + padding-bottom: 12px; + margin-bottom: 24px; +} +.ft-related-title { + font-family: 'Cinzel', serif; + font-size: 20px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; +} +.ft-related-all { + font-family: 'Inter', -apple-system, sans-serif; + font-size: 11px; + font-weight: 700; + color: var(--ft-accent-green); + text-decoration: none; + text-transform: uppercase; +} +.ft-related-broadsheet-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 28px; +} +.ft-related-col-card { + display: flex; + flex-direction: column; + gap: 8px; + padding-right: 20px; + border-right: 1px solid var(--ft-border-hairline); +} +.ft-related-col-card:last-child { border-right: none; padding-right: 0; } +.ft-related-thumb { + width: 100%; + height: 160px; + background: #E8D8C8; + border-radius: 2px; + overflow: hidden; + margin-bottom: 6px; +} +.ft-related-thumb img { width: 100%; height: 100%; object-fit: cover; } +.ft-related-card-title { + font-family: 'Newsreader', serif; + font-size: 18px; + line-height: 1.25; + font-weight: 700; +} +.ft-related-card-title a { color: inherit; text-decoration: none; } +.ft-related-card-title a:hover { color: var(--ft-accent-green); } +.ft-related-card-excerpt { + font-size: 13.5px; + color: var(--ft-ink-secondary); + line-height: 1.45; +} + +/* Responsive Rules for Post Template */ +@media (max-width: 768px) { + .ft-article-header { padding: 24px 0 16px; } + .ft-header-inner, .ft-article-hero-viewport, .ft-article-prose-column { padding: 0 16px; } + .ft-article-main-title { font-size: 28px; line-height: 1.2; } + .ft-article-deck { font-size: 17px; } + .ft-article-byline-bar { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + .ft-article-tools-block { width: 100%; justify-content: space-between; } + .ft-takeaway-item { grid-template-columns: 1fr; gap: 4px; } + .ft-author-broadsheet-card { grid-template-columns: 1fr; } + .ft-related-broadsheet-grid { grid-template-columns: 1fr; gap: 20px; } + .ft-related-col-card { border-right: none; padding-right: 0; border-bottom: 1px solid var(--ft-border-hairline); padding-bottom: 16px; } + .ft-related-col-card:last-child { border-bottom: none; } +} diff --git a/post.hbs b/post.hbs new file mode 100644 index 0000000..d30e143 --- /dev/null +++ b/post.hbs @@ -0,0 +1,198 @@ +{{!-- FT & NYT Hybrid Broadsheet — Article Single Template --}} +{{!< default}} + +{{#post}} +
+ + {{!-- Sticky Reading Progress Bar --}} + + + {{!-- 1. BROADSHEET ARTICLE HEADER --}} +
+
+ + +

{{title}}

+ + {{#if custom_excerpt}} +

{{custom_excerpt}}

+ {{/if}} + + {{!-- Metaline / Byline Bar --}} + + + {{!-- TTS Narration Console --}} +
+ {{> "ft-tts-player"}} +
+
+ + {{!-- Hero Photographic Anchor --}} + {{#if feature_image}} +
+
+ {{title}} +
+ {{#if feature_image_caption}} +
{{feature_image_caption}}
+ {{/if}} +
+ {{/if}} +
+ + {{!-- 2. EDITORIAL PROSE COLUMN --}} +
+ + {{!-- SEMAFOR-STYLE STRUCTURED TAKEAWAY DRAWER --}} +
+
+ Key Dispatches + Structured Editorial Intelligence +
+
+ The Core Insight +
Bridging authentic classical wisdom with contemporary empirical evidence and rigorous Shariah governance.
+
+
+ Actionable Protocol +
Practical implementation rules designed for family stewardship, clinical wellness, and capital resilience.
+
+
+ The Exposure +
Critical structural vulnerabilities to avoid under changing regional laws and modern lifestyle stress.
+
+
+ + {{!-- Ghost Post Content --}} +
+ {{content}} +
+ + {{!-- Article Tags Strip --}} + {{#if tags}} + + {{/if}} + + {{!-- Author Signature Broadsheet Card --}} + {{#if primary_author}} +
+
+ {{#if primary_author.profile_image}} + {{primary_author.name}} + {{/if}} +
+
+
Editorial Board Contributor
+

{{primary_author.name}}

+ {{#if primary_author.bio}} +

{{primary_author.bio}}

+ {{/if}} + +
+
+ {{/if}} + + {{!-- Inline Product CTA / Curricula --}} + {{> "ft-product-cta"}} + + {{!-- Newsletter Inset --}} + {{> "ft-newsletter"}} + +
+ + {{!-- 3. RELATED BROADSHEET INVESTIGATIONS --}} + {{#get "posts" filter="id:-{{id}}+status:published" limit="3" include="tags,authors"}} + {{#if posts.length}} + + {{/if}} + {{/get}} + +
+ +{{!-- Reading Progress Script --}} + +{{/post}} + +{{#contentFor "body_class"}}ft-broadsheet-post-template{{/contentFor}}