Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Blog: 3x2 grid, feature-style area badges with unique colors, add derez-blog-update skill

Browse Source
This commit is contained in:
Oliver
2026-06-10 05:18:32 -03:00
parent 23503d8c97
commit 016e40aca6
1 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+23 -9
View File
@@ -1109,7 +1109,7 @@
} }
.blog-grid { .blog-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 20px; gap: 20px;
margin-bottom: 32px; margin-bottom: 32px;
} }
@@ -1129,16 +1129,20 @@
} }
.blog-card-area { .blog-card-area {
display: inline-block; display: inline-block;
background: rgba(0,245,255,0.08);
color: var(--accent);
font-size: 0.7rem; font-size: 0.7rem;
padding: 2px 10px; font-weight: 700;
border-radius: 20px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.06em;
padding: 3px 12px;
border-radius: 20px;
margin-bottom: 12px; margin-bottom: 12px;
align-self: flex-start; align-self: flex-start;
color: #000;
} }
.blog-card-area.area-howto { background: #00f5ff; }
.blog-card-area.area-news { background: #ffaa00; }
.blog-card-area.area-video-scripts { background: #00ff88; }
.blog-card-area.area-default { background: #a78bfa; }
.blog-card-date { .blog-card-date {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--text-muted); color: var(--text-muted);
@@ -1202,7 +1206,12 @@
color: var(--text-muted); color: var(--text-muted);
font-size: 0.95rem; font-size: 0.95rem;
} }
@media (max-width: 700px) { @media (max-width: 900px) {
.blog-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.blog-grid { .blog-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -2871,7 +2880,7 @@
document.getElementById('pricing-coupon').addEventListener('input', updateCouponBadges); document.getElementById('pricing-coupon').addEventListener('input', updateCouponBadges);
/* ── Blog ──────────────────────────────────────────────── */ /* ── Blog ──────────────────────────────────────────────── */
const BLOG_POSTS_PER_PAGE = 4; const BLOG_POSTS_PER_PAGE = 6;
let blogAllPosts = []; let blogAllPosts = [];
let blogFilteredPosts = []; let blogFilteredPosts = [];
let blogCurrentPage = 0; let blogCurrentPage = 0;
@@ -2882,6 +2891,11 @@
return months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear(); return months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
} }
function blogAreaClass(area) {
var map = { 'howto': 'area-howto', 'news': 'area-news', 'video-scripts': 'area-video-scripts' };
return map[area] || 'area-default';
}
function blogRender() { function blogRender() {
const start = blogCurrentPage * BLOG_POSTS_PER_PAGE; const start = blogCurrentPage * BLOG_POSTS_PER_PAGE;
const pagePosts = blogFilteredPosts.slice(start, start + BLOG_POSTS_PER_PAGE); const pagePosts = blogFilteredPosts.slice(start, start + BLOG_POSTS_PER_PAGE);
@@ -2898,7 +2912,7 @@
grid.innerHTML = pagePosts.map(function(p) { grid.innerHTML = pagePosts.map(function(p) {
return '<a href="' + p.link + '" class="blog-card" style="text-decoration:none">' + return '<a href="' + p.link + '" class="blog-card" style="text-decoration:none">' +
'<span class="blog-card-area">' + p.area + '</span>' + '<span class="blog-card-area ' + blogAreaClass(p.area) + '">' + p.area + '</span>' +
'<span class="blog-card-date">' + blogFormatDate(p.date) + '</span>' + '<span class="blog-card-date">' + blogFormatDate(p.date) + '</span>' +
'<h3>' + p.headline + '</h3>' + '<h3>' + p.headline + '</h3>' +
'<p>' + p.teaser + '</p>' + '<p>' + p.teaser + '</p>' +