From fa86b2944f226f2caea9785b6d8d524901403506 Mon Sep 17 00:00:00 2001 From: patelscripts Date: Sun, 21 Jun 2026 02:36:57 +0530 Subject: [PATCH] feat(ui): improve blog layout and styling - Refactored blog list and blog post layout - Improved navbar alignment and responsiveness - Enhanced spacing and visual hierarchy - Updated CSS for blog, nav, and search - Fixed image rendering issues --- theme/blog-list.html | 2 +- theme/blog-post.html | 2 +- theme/css/blog.css | 105 ++++++++++++++++++++++++++++++++----------- theme/css/nav.css | 29 ++++++++++-- theme/css/search.css | 13 ++++++ 5 files changed, 120 insertions(+), 31 deletions(-) diff --git a/theme/blog-list.html b/theme/blog-list.html index 4afb0e36..8bbcf3f9 100644 --- a/theme/blog-list.html +++ b/theme/blog-list.html @@ -32,7 +32,7 @@

{% endif %} diff --git a/theme/blog-post.html b/theme/blog-post.html index f19f50d6..beea33d9 100644 --- a/theme/blog-post.html +++ b/theme/blog-post.html @@ -23,7 +23,7 @@

{{ title }}

{% endif %} diff --git a/theme/css/blog.css b/theme/css/blog.css index 4ca50a9c..237ad438 100644 --- a/theme/css/blog.css +++ b/theme/css/blog.css @@ -20,7 +20,6 @@ /* ===== Grid ===== */ .post-grid{ - /* responsive grid; tweak min width to taste */ --card-min: 320px; --gap: 1rem; @@ -32,7 +31,7 @@ gap: var(--gap); } -/* (Extra bullet-killers for stubborn user-agent / legacy styles) */ +/* Bullet killers */ .post-grid > li { list-style: none; } .post-grid *::marker { content: ''; } @@ -40,7 +39,7 @@ .post-card{ display: block; } .excerpt{ - display: flex; /* keep thumbnail on top, body below */ + display: flex; flex-direction: column; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: var(--radius, 16px); @@ -48,6 +47,7 @@ box-shadow: var(--shadow-card, 0 10px 30px rgba(0,0,0,.25)); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; + height: 100%; /* ← cards equal height in same row */ } .excerpt:hover{ transform: translateY(-2px); @@ -55,25 +55,44 @@ background: var(--surface-solid, rgba(255,255,255,.05)); } -/* Thumbnail */ -.post-thumb{ +/* ── Thumbnail ──────────────────────────────────────────────── */ +/* .post-thumb is an tag in HTML */ +a.post-thumb, +.post-card .post-thumb, +.excerpt .post-thumb { display: block; - position: relative; + width: 100%; aspect-ratio: 16 / 9; background: var(--surface-muted); + overflow: hidden; + flex-shrink: 0; + line-height: 0; } -.post-thumb img{ + +/* base.css sets img { height: auto } which breaks our 100% height. + We beat it with a slightly more specific selector — no !important needed. */ +a.post-thumb img, +.post-card .post-thumb img, +.excerpt .post-thumb img { width: 100%; - height: 100%; - object-fit: cover; + height: 100%; /* overrides base.css "height: auto" */ + object-fit: contain; /* KEY FIX: logos won't get cropped */ + object-position: center; display: block; + padding: .75rem; /* breathing room around logos */ + box-sizing: border-box; + max-width: 100%; + margin: 0; + border-radius: 0; + box-shadow: none; } -/* Body */ +/* ── Body ───────────────────────────────────────────────────── */ .excerpt_body{ padding: 1rem 1rem 1.05rem; display: grid; gap: .6rem; + flex: 1; /* pushes actions to bottom of card */ } /* Title */ @@ -82,7 +101,7 @@ color: var(--fg); text-decoration: none; display: -webkit-box; - -webkit-line-clamp: 2; /* clamp long titles */ + -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @@ -117,13 +136,13 @@ border-color: var(--border-strong, rgba(255,255,255,.22)); } -/* Description (clamp to keep cards even-ish) */ +/* Description */ .post_desc{ margin: 0; color: var(--fg); opacity: .92; display: -webkit-box; - -webkit-line-clamp: 5; /* adjust to taste */ + -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } @@ -151,10 +170,22 @@ .post_share a:hover{ background: rgba(255,255,255,.08); } .post_share .share_label{ margin-right: .25rem; } -/* Narrow screens: single column */ +/* ── Responsive ─────────────────────────────────────────────── */ +@media (max-width: 1024px){ + .post-grid{ --card-min: 280px; } +} + @media (max-width: 640px){ .post-grid{ --card-min: 100%; --gap: .85rem; } .excerpt_body{ padding: .9rem; } + + /* On mobile: slightly taller thumb so portrait logos don't look tiny */ + .post-thumb{ aspect-ratio: 4 / 3; } +} + +@media (max-width: 400px){ + .post-grid{ --card-min: 100%; --gap: .6rem; } + .post_meta{ font-size: .8rem; } } /* ===== Blog post page ===== */ @@ -242,21 +273,34 @@ margin-top: 1rem; } +/* .blog-hero__media is a
tag — reset browser defaults */ .blog-hero__media{ + display: block; overflow: hidden; - min-height: 100%; - margin: 0; + margin: 0; /* browser adds margin to
by default */ + padding: 0; border-radius: 1.45rem; background: var(--surface-muted); + align-self: stretch; + min-height: 260px; } .blog-hero__media img{ display: block; width: 100%; height: 100%; - min-height: 320px; + min-height: 260px; margin: 0; + object-fit: contain; + object-position: center; + padding: 1rem; + box-sizing: border-box; +} + +/* Real photo? Add class="cover" on the
*/ +.blog-hero__media.cover img{ object-fit: cover; + padding: 0; } .blog-article__shell{ @@ -320,7 +364,6 @@ margin-bottom: 1rem; } -/* Small, consistent icons only in the blog areas */ .blog-article .post_meta .icon, .blog-article .post_share .icon, .posts .icon, @@ -332,7 +375,6 @@ opacity: .9; } -/* Meta “chips” */ .blog-article .meta_item { display: inline-flex; align-items: center; @@ -340,7 +382,6 @@ font-size: .95rem; } -/* Share row */ .blog-article .post_share { display: inline-flex; align-items: center; @@ -358,35 +399,36 @@ } .blog-article .post_share a:hover { color: var(--brand); } -/* Tags below meta */ .blog-article .post_tags { display: inline-flex; flex-wrap: wrap; gap: .35rem; } -/* Thumbnail spacing fix */ .blog-article .excerpt_thumbnail figure { margin: 0; } -/* Safety: never allow gigantic SVGs inside blog content */ .blog-article .post_body svg.icon { width: 1em; height: 1em; } -/* Responsive images in blog content (LCP / defer offscreen images) */ .blog-article .post_body img { max-width: 100%; height: auto; display: block; } .blog-article .post_body img:not([width]):not([height]) { - /* Reserve space to reduce CLS when dimensions unknown */ min-height: 1px; } +/* ── Responsive: blog post page ─────────────────────────────── */ @media (max-width: 900px){ .blog-hero{ grid-template-columns: 1fr; } + .blog-hero__media{ + min-height: 220px; + aspect-ratio: 16 / 9; + } + .blog-article__shell{ grid-template-columns: 1fr; } @@ -404,7 +446,17 @@ } } -/* Editorial redesign: sharper blog and index presentation */ +@media (max-width: 600px){ + .blog-hero h1{ + font-size: clamp(1.6rem, 7vw, 2.4rem); + } + + .blog-hero__media{ + aspect-ratio: 4 / 3; + } +} + +/* ── Editorial overrides (original design decisions kept) ────── */ .blog-hero{ border: 0; border-radius: 0; @@ -437,3 +489,4 @@ .excerpt_more.button{ border-radius: 0; } + diff --git a/theme/css/nav.css b/theme/css/nav.css index ce8fad18..67312258 100644 --- a/theme/css/nav.css +++ b/theme/css/nav.css @@ -184,9 +184,8 @@ color: var(--nav-link); /* inherits your theme */ } -/* Size + feel of the field */ .navbar .searchbar .form-control { - min-width: 20rem; /* adjust as you like */ + min-width: 24rem; /* increased minimum width */ box-shadow: none !important; color: var(--nav-link); } @@ -213,7 +212,31 @@ .navbar .searchbar { flex-wrap: nowrap; align-items: center; - width: clamp(12rem, 22vw, 18rem); /* doesn’t push nav items */ + width: clamp(16rem, 28vw, 24rem); /* increased width */ +} + +/* Place the icon visually inside the input field */ +.navbar .searchbar { position: relative; } +.navbar .searchbar .input-group-text { + position: absolute; + left: .6rem; + top: 50%; + transform: translateY(-50%); + background: transparent; + border: 0; + padding: 0; + width: 1.2rem; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + color: var(--nav-link); +} +.navbar .searchbar .form-control { + padding-left: calc(1.2rem + .9rem); /* allow space for icon */ +} +@media (max-width: 1200px){ + .navbar .searchbar .form-control { padding-left: calc(1.2rem + .6rem); } } /* Icon inside the input group (independent of your global .icon rules) */ diff --git a/theme/css/search.css b/theme/css/search.css index 119a69da..88de40c5 100644 --- a/theme/css/search.css +++ b/theme/css/search.css @@ -6,6 +6,11 @@ top: calc(100% + .25rem); z-index: 1050; + min-width: 260px; + width: max(100%, min(38rem, 100vw)); + max-width: min(100vw, 38rem); + box-sizing: border-box; + background: var(--dd-bg, rgba(16,18,27,.98)); border: 1px solid var(--dd-border, rgba(255,255,255,.12)); backdrop-filter: blur(10px); @@ -17,6 +22,14 @@ max-height: min(60vh, 520px); overflow: auto; } + +@media (max-width: 1200px) { + .search-popover { left: auto; right: 0; width: min(100vw, 30rem); } +} + +@media (max-width: 768px) { + .search-popover { width: min(100vw, 24rem); } +} .search-popover.open{ display: block; } .sr-item{