santhoshj/clawfort
1
0
Fork 0
Code Issues 64 Pull Requests Actions Packages Projects Releases Wiki Activity

p19-bug-fixes

Browse Source
This commit is contained in:
Santhosh Janardhanan
2026-02-13 16:57:45 -05:00
parent e2406bf978
commit f6beedd68f
75 changed files with 11989 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
frontend/index.html
View File

@@ -24,7 +24,7 @@
<link rel="icon" type="image/svg+xml" href="/static/images/favicon-ai.svg">
<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=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+Tamil:wght@400;500;600;700&family=Noto+Sans+Malayalam:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Baloo+2:wght@400;500;600;700&family=Baloo+Chettan+2:wght@400;500;600;700&family=Noto+Sans+Tamil:wght@400;500;600;700&family=Noto+Sans+Malayalam:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
@@ -38,7 +38,7 @@
}
},
fontFamily: {
sans: ['Inter', 'Noto Sans Tamil', 'Noto Sans Malayalam', 'system-ui', 'sans-serif']
sans: ['Inter', 'system-ui', 'sans-serif']
}
}
}
@@ -115,7 +115,7 @@
--cf-select-text: #ffffff;
--cf-select-border: rgba(255, 255, 255, 0.55);
}
.cf-body { background: var(--cf-bg); color: var(--cf-text); padding-bottom: 78px; }
.cf-body { background: var(--cf-bg); color: var(--cf-text); padding-bottom: 60px; }
.cf-header { background: var(--cf-header-bg); }
.cf-header-top { box-shadow: none; border-color: rgba(148, 163, 184, 0.12); }
.cf-header-scrolled {
@@ -248,6 +248,17 @@
html[data-lang='ml'] .hero-summary {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
/* Apply Baloo fonts specifically to Indic language content */
html[data-lang='ta'] body {
font-family: 'Baloo 2', 'Noto Sans Tamil', 'Inter', system-ui, sans-serif;
}
html[data-lang='ml'] body {
font-family: 'Baloo Chettan 2', 'Noto Sans Malayalam', 'Inter', system-ui, sans-serif;
}
/* Keep English text using Inter by default */
html[data-lang='en'] body {
font-family: 'Inter', system-ui, sans-serif;
}
.share-icon-btn {
width: 34px;
height: 34px;
@@ -291,8 +302,14 @@
}
.news-card:hover .news-card-title { color: var(--cf-link-hover); }
.site-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: color-mix(in srgb, var(--cf-bg) 92%, transparent);
backdrop-filter: blur(10px);
height: auto;
min-height: 44px;
}
.back-to-top-island {
position: fixed;
@@ -341,18 +358,40 @@
}
@media (max-width: 640px) {
.theme-btn { width: 26px; height: 26px; }
.cf-body { padding-bottom: 84px; }
.cf-body { padding-bottom: 60px; }
/* Mobile typography adjustments for Indic languages to prevent overflow */
html[data-lang='ta'] .hero-title,
html[data-lang='ml'] .hero-title {
font-size: 1.9rem;
line-height: 1.26;
font-size: 1.5rem;
line-height: 1.4;
letter-spacing: 0.01em;
margin-bottom: 0.5rem;
}
html[data-lang='ta'] .hero-summary,
html[data-lang='ml'] .hero-summary {
font-size: 1.08rem;
line-height: 1.86;
letter-spacing: 0.015em;
font-size: 0.9rem;
line-height: 1.5;
letter-spacing: 0.01em;
margin-bottom: 0.75rem;
}
/* Ensure hero pills are visible on mobile for Indic languages */
html[data-lang='ta'] .hero-latest-pill,
html[data-lang='ml'] .hero-latest-pill,
html[data-lang='ta'] .hero-time-pill,
html[data-lang='ml'] .hero-time-pill {
display: inline-flex;
font-size: 0.7rem;
padding: 2px 6px;
}
/* Reduce padding in hero content area for Indic languages */
html[data-lang='ta'] .hero-content,
html[data-lang='ml'] .hero-content {
padding: 1rem;
}
/* Increase hero image height on mobile for Indic languages to fit content */
html[data-lang='ta'] .hero-image,
html[data-lang='ml'] .hero-image {
height: 380px;
}
.back-to-top-island {
right: 10px;
@@ -422,7 +461,7 @@
<div x-show="heroImageLoading" class="absolute inset-0 skeleton"></div>
<img :src="preferredImage(item)" :alt="item.headline"
width="1200" height="480" decoding="async" fetchpriority="high"
class="w-full h-[300px] sm:h-[400px] lg:h-[480px] object-cover transition-transform duration-700 group-hover:scale-105"
class="hero-image w-full h-[300px] sm:h-[400px] lg:h-[480px] object-cover transition-transform duration-700 group-hover:scale-105"
@load="heroImageLoading = false"
@error="$el.src='/static/images/placeholder.png'; heroImageLoading = false">
<div class="absolute inset-0 hero-overlay"></div>
@@ -649,23 +688,36 @@
<svg viewBox="0 0 24 24" class="w-4 h-4" aria-hidden="true"><path fill="currentColor" d="M12 5 5 12h4v7h6v-7h4z"/></svg>
</button>
<footer x-data="footerEnhancements()" x-init="init()" class="site-footer sticky bottom-0 z-40 border-t border-white/10 py-3 text-center text-xs text-gray-500">
<div class="max-w-7xl mx-auto px-4 space-y-1.5">
<p>Powered by <a href="https://www.perplexity.ai" target="_blank" rel="noopener" class="powered-link transition-colors">Perplexity</a></p>
<p class="space-x-3">
<button type="button" class="footer-link" @click="window.dispatchEvent(new CustomEvent('open-policy-modal', { detail: { type: 'terms' } }))">Terms of Use</button>
<button type="button" class="footer-link" @click="window.dispatchEvent(new CustomEvent('open-policy-modal', { detail: { type: 'attribution' } }))">Attribution</button>
<a x-show="githubUrl" :href="githubUrl" target="_blank" rel="noopener" class="footer-link">GitHub</a>
<a x-show="contactEmail" :href="'mailto:' + contactEmail" class="footer-link"
aria-describedby="contact-hint"
@mouseenter="showHint($event)" @mousemove="moveHint($event)" @mouseleave="hideHint()"
@focus="showHint($event)" @blur="hideHint()"
x-text="contactEmail"></a>
</p>
<p>&copy; <span x-data x-text="new Date().getFullYear()"></span> ClawFort. All rights reserved.</p>
</div>
<!-- Footer wrapper with Alpine.js scope for tooltip -->
<div x-data="footerEnhancements()" x-init="init()">
<footer class="site-footer z-40 border-t border-white/10 py-2 text-xs text-gray-500">
<div class="max-w-7xl mx-auto px-4 flex items-center justify-between">
<!-- Left: Powered by -->
<div class="flex-shrink-0">
<span>Powered by <a href="https://www.perplexity.ai" target="_blank" rel="noopener" class="powered-link transition-colors">Perplexity</a></span>
</div>
<!-- Center: Copyright -->
<div class="flex-shrink-0 text-center">
<span>&copy; <span x-data x-text="new Date().getFullYear()"></span> ClawFort. All rights reserved.</span>
</div>
<!-- Right: Links -->
<div class="flex-shrink-0 flex items-center gap-3">
<button type="button" class="footer-link" @click="window.dispatchEvent(new CustomEvent('open-policy-modal', { detail: { type: 'terms' } }))">Terms of Use</button>
<button type="button" class="footer-link" @click="window.dispatchEvent(new CustomEvent('open-policy-modal', { detail: { type: 'attribution' } }))">Attribution</button>
<a x-show="githubUrl" :href="githubUrl" target="_blank" rel="noopener" class="footer-link">GitHub</a>
<a x-show="contactEmail" :href="'mailto:' + contactEmail" class="footer-link"
aria-describedby="contact-hint"
@mouseenter="showHint($event)" @mousemove="moveHint($event)" @mouseleave="hideHint()"
@focus="showHint($event)" @blur="hideHint()"
x-text="contactEmail"></a>
</div>
</div>
</footer>
<!-- Contact tooltip moved outside footer to prevent clipping -->
<div id="contact-hint" x-show="hintVisible" x-cloak class="contact-hint" :style="`left:${hintX}px; top:${hintY}px`" x-text="hintText"></div>
</footer>
</div>
<div id="cookie-consent-banner" class="hidden fixed bottom-4 left-1/2 -translate-x-1/2 w-[95%] max-w-3xl z-50 rounded-lg border border-white/15 bg-slate-900/95 backdrop-blur p-4 transition-opacity duration-700 opacity-100">
<p class="text-sm text-slate-200 mb-3">