wmj/falah-ft-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy FT & NYT Hybrid Broadsheet UI overhaul to production

Browse Source
This commit is contained in:
WMJ Ismail
2026-10-10 08:36:02 +02:00
parent 798c3b6068
commit d0808ed3a1
6 changed files with 1419 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
default.hbs
+321
View File
@@ -0,0 +1,321 @@
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>{{meta_title page=(t " (Page %)")}}</title>
{{!-- Critical CSS - Above the fold --}}
<style>
*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:'Source Serif 4',Georgia,serif;font-size:18px;line-height:1.5;color:#000;background:#fff}h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1.1;color:#000}h1{font-size:36px}h2{font-size:28px}h3{font-size:24px}a{color:#007A4D;text-decoration:none}a:hover{color:#006B42}.ft-container{max-width:1200px;margin:0 auto;padding:0 32px}.ft-container-article{max-width:800px;margin:0 auto;padding:0 32px}.ft-nav{position:sticky;top:0;z-index:300;background:#fff;border-bottom:1px solid #e0e0e0}.ft-nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:56px}.ft-nav-logo{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:700;color:#000;text-decoration:none}.ft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-family:'Source Serif 4',Georgia,serif;font-size:14px;font-weight:500;line-height:1;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:all 150ms ease;text-decoration:none;white-space:nowrap}.ft-btn-primary{background:#0d7680;color:#fff;border-color:#0d7680}.ft-btn-primary:hover{background:#005a63;border-color:#005a63;color:#fff}.ft-hero{position:relative;width:100%;min-height:50vh;display:flex;align-items:flex-end;background:#fff}.ft-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.ft-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 40%,transparent 100%);z-index:1}.ft-hero-content{position:relative;z-index:2;width:100%;max-width:800px;margin:0 auto;padding:48px 32px 72px;color:#fff}.ft-hero-title{font-size:48px;font-weight:700;line-height:1.1;margin-bottom:24px;color:#fff;max-width:90%}.ft-hero-excerpt{font-size:20px;line-height:1.6;color:rgba(255,255,255,0.95);margin-bottom:36px;max-width:70%}.ft-stream{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:1024px){.ft-stream{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.ft-stream{grid-template-columns:1fr}}.ft-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;transition:box-shadow 250ms ease,transform 250ms ease}.ft-card:hover{box-shadow:0 4px 6px rgba(0,0,0,0.07);transform:translateY(-2px)}.ft-card-image{width:100%;aspect-ratio:16/9;object-fit:cover}.ft-card-content{padding:16px;flex:1;display:flex;flex-direction:column}.ft-card-title{font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:700;line-height:1.3;margin-bottom:8px;color:#000}.ft-card-title a{color:inherit;text-decoration:none}.ft-card-title a:hover{color:#007A4D;text-decoration:underline}
html, body {
max-width: 100vw;
overflow-x: hidden;
position: relative;
}
.site {
max-width: 100%;
overflow-x: hidden;
}
*, *:before, *:after {
box-sizing: border-box;
}
.kg-card, .kg-audio-card, .kg-embed-card, iframe, video, audio {
max-width: 100% !important;
}
@media (max-width: 768px) {
.ft-calculator-tabs {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
display: flex;
gap: 8px;
}
.ft-tab-btn {
flex-shrink: 0;
margin-right: 0;
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.ft-share-bar {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.ft-share-label {
width: 100%;
}
.ft-share-progress {
width: 100%;
}
.ft-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
</style>
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
<link rel="stylesheet" href="{{asset "built/ft-search.css"}}">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{asset "built/broadsheet-hybrid.css"}}">
{{ghost_head}}
{{{block "meta_tags"}}}
<meta name="description" content="{{#if meta_description}}{{meta_description}}{{else}}{{@site.description}}{{/if}}">
<meta property="og:description" content="{{#if meta_description}}{{meta_description}}{{else}}{{@site.description}}{{/if}}">
<meta property="og:title" content="{{meta_title}}">
<meta property="og:image" content="{{#if @site.cover_image}}{{@site.cover_image}}{{else}}https://iqra.falahos.my/content/images/size/w256h256/2026/07/72961271-45ce-44d6-80cc-b57033d915d5.jpeg{{/if}}">
{{!-- Progressive Web App (PWA) & iOS Standalone Meta --}}
<link rel="manifest" href="{{asset "manifest.webmanifest"}}">
<meta name="theme-color" content="#0d7680">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Iqra">
<link rel="apple-touch-icon" sizes="180x180" href="{{asset "icons/apple-touch-icon.png"}}">
<link rel="stylesheet" href="{{asset "built/pwa.css"}}">
<link rel="stylesheet" href="{{asset "built/tools.css"}}">
</head>
<body class="{{body_class}}{{{block "body_class"}}}">
<a href="#main-content" class="skip-link">Skip to main content</a>
<div class="site">
{{> "ft-masthead-strip"}}
<!-- FT Navigation -->
<header class="ft-nav" role="banner">
<div class="ft-nav-inner">
<div class="ft-nav-brand">
<a class="ft-nav-logo" href="{{@site.url}}">
{{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
{{@site.title}}
{{/if}}
</a>
</div>
<nav class="ft-nav-menu" role="navigation" aria-label="Main navigation">
{{navigation}}
</nav>
<div class="ft-nav-actions">
<div class="ft-nav-search">
{{> "ft-search"}}
</div>
{{#if @site.members_enabled}}
<div class="ft-nav-members">
{{#unless @member}}
{{#unless @site.members_invite_only}}
<a class="ft-btn ft-btn-ghost ft-btn-sm" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
<a class="ft-btn ft-btn-primary ft-btn-sm" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
{{else}}
<a class="ft-btn ft-btn-primary ft-btn-sm" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
{{/unless}}
{{else}}
<a class="ft-btn ft-btn-secondary ft-btn-sm" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
{{/unless}}
</div>
{{/if}}
<button class="ft-nav-burger" aria-label="{{t "Toggle menu"}}" aria-expanded="false" aria-controls="mobile-menu">
{{> "icons/menu"}}
</button>
</div>
</div>
</header>
<!-- Mobile Menu -->
<nav class="ft-nav-menu ft-md:hidden" id="mobile-menu" role="navigation" aria-label="Mobile navigation">
{{navigation}}
{{#if @site.members_enabled}}
<div class="ft-nav-members ft-py-4 ft-border-t">
{{#unless @member}}
{{#unless @site.members_invite_only}}
<a class="ft-btn ft-btn-primary ft-w-full ft-mb-2" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
<a class="ft-btn ft-btn-outline ft-w-full" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
{{else}}
<a class="ft-btn ft-btn-primary ft-w-full" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
{{/unless}}
{{else}}
<a class="ft-btn ft-btn-secondary ft-w-full" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
{{/unless}}
</div>
{{/if}}
</nav>
<!-- Left Rail (Desktop) -->
<aside class="ft-left-rail ft-lg:hidden" role="complementary" aria-label="Sidebar navigation">
<div class="ft-left-rail-section">
<h3 class="ft-left-rail-title">Products</h3>
<a class="ft-left-rail-link" href="/products">Digital Products</a>
<a class="ft-left-rail-link" href="/tag/falah-cast/">Falah Cast</a>
<a class="ft-left-rail-link" href="/tag/learning-pack/">Learning Packs</a>
</div>
<div class="ft-left-rail-section">
<h3 class="ft-left-rail-title">Sections</h3>
{{navigation type="secondary"}}
</div>
<div class="ft-left-rail-section">
<h3 class="ft-left-rail-title">Newsletters</h3>
<a class="ft-left-rail-link" href="/newsletters/morning-brief">Morning Brief</a>
<a class="ft-left-rail-link" href="/newsletters/evening-brief">Evening Brief</a>
</div>
</aside>
<main id="main-content" class="site-content ft-lg:ml-[260px]">
{{#is "home"}}
{{> "ft-hero"}}
{{> "ft-editorial"}}
{{/is}}
{{{body}}}
</main>
<!-- Sticky Newsletter Banner -->
<div class="ft-newsletter-banner" id="newsletter-banner" role="region" aria-label="Newsletter signup">
<div class="ft-newsletter-banner-content">
<div class="ft-newsletter-banner-text">
<h3 class="ft-newsletter-banner-title">Get the best of Iqra Times</h3>
<p class="ft-newsletter-banner-desc">Daily Islamic insights, product updates, and exclusive content.</p>
</div>
<form class="ft-newsletter-banner-form" action="#/portal/signup" method="POST" data-members-form>
<input class="ft-newsletter-banner-input" type="email" name="email" placeholder="Your email address" required>
<button class="ft-btn ft-btn-primary" type="submit">Subscribe</button>
</form>
<button class="ft-newsletter-banner-close" aria-label="Dismiss newsletter banner">{{> "icons/x"}}</button>
</div>
</div>
<footer class="ft-footer" role="contentinfo">
<div class="ft-footer-inner">
<div class="ft-footer-brand">
<a class="ft-footer-logo" href="{{@site.url}}">{{@site.title}}</a>
<p class="ft-footer-tagline">{{@site.description}}</p>
<div class="ft-footer-social">
{{#each @site.social_links}}
<a class="ft-footer-social-link" href="{{href}}" target="_blank" rel="noopener" aria-label="{{name}}">
{{#> (concat "icons/" type)}}
<span>{{name}}</span>
{{/undefined}}
</a>
{{/each}}
</div>
</div>
{{#if @site.secondary_navigation}}
<nav class="ft-footer-section" aria-label="Footer navigation">
<h3 class="ft-footer-section-title">Sections</h3>
<ul class="ft-footer-links">
{{#foreach navigation type="secondary"}}
<li><a class="ft-footer-link" href="{{url}}">{{label}}</a></li>
{{/foreach}}
</ul>
</nav>
{{/if}}
<nav class="ft-footer-section" aria-label="About">
<h3 class="ft-footer-section-title">About</h3>
<ul class="ft-footer-links">
<li><a class="ft-footer-link" href="/about">About Iqra Times</a></li>
<li><a class="ft-footer-link" href="/contact">Contact</a></li>
<li><a class="ft-footer-link" href="/careers">Careers</a></li>
</ul>
</nav>
<nav class="ft-footer-section" aria-label="Products">
<h3 class="ft-footer-section-title">Products</h3>
<ul class="ft-footer-links">
<li><a class="ft-footer-link" href="/products">Digital Products</a></li>
<li><a class="ft-footer-link" href="/tag/falah-cast/">Falah Cast</a></li>
<li><a class="ft-footer-link" href="/tag/learning-pack/">Learning Packs</a></li>
</ul>
</nav>
<nav class="ft-footer-section" aria-label="Legal">
<h3 class="ft-footer-section-title">Legal</h3>
<ul class="ft-footer-links">
<li><a class="ft-footer-link" href="/privacy">Privacy Policy</a></li>
<li><a class="ft-footer-link" href="/terms">Terms of Service</a></li>
<li><a class="ft-footer-link" href="/refunds">Refund Policy</a></li>
</ul>
</nav>
<div class="ft-footer-bottom">
<p class="ft-footer-copyright">{{@site.title}} © {{date format="YYYY"}}</p>
<nav class="ft-footer-legal" aria-label="Legal links">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<a href="/cookies">Cookies</a>
</nav>
</div>
</div>
</footer>
</div>
{{#is "post, page"}}
{{> "pswp"}}
{{/is}}
{{!-- Fixes 100vh issue on mobile browsers with toolbar on the bottom --}}
<script>
if (document.body.classList.contains('with-full-cover') && (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
const cover = document.getElementsByClassName('ft-hero')[0] || document.getElementsByClassName('cover')[0];
if (cover) cover.style.height = window.innerHeight + 'px';
}
</script>
<script src="{{asset "built/tts.js"}}"></script>
<script src="{{asset "built/search.js"}}"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>
<script src="{{asset "built/pwa-app.js"}}" defer></script>
{{ghost_foot}}
<script>
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
const burger = document.querySelector('.ft-nav-burger');
const mobileMenu = document.getElementById('mobile-menu');
if (burger && mobileMenu) {
burger.addEventListener('click', function() {
mobileMenu.classList.toggle('open');
burger.setAttribute('aria-expanded', mobileMenu.classList.contains('open'));
});
}
// Newsletter banner
const banner = document.getElementById('newsletter-banner');
const closeBtn = banner?.querySelector('.ft-newsletter-banner-close');
if (banner && closeBtn) {
closeBtn.addEventListener('click', function() {
banner.style.display = 'none';
});
// Show banner after 30 seconds
setTimeout(function() {
if (!localStorage.getItem('newsletter_dismissed')) {
banner.classList.add('visible');
}
}, 30000);
}
});
</script>
</body>
</html>