nodebb-theme-harmony 1.0.0-beta.90 → 1.0.0-beta.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.90",
+  "version": "1.0.0-beta.92",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/scss/common.scss

@@ -14,6 +14,11 @@ body * {
 	-moz-text-size-adjust: none;
 }
 
+hr {
+    border-top-color: $border-color;
+	opacity: 1;
+}
+
 .ff-base {
 	font-family: $font-family-base !important;
 }
@@ -23,7 +28,7 @@ body * {
 .ff-secondary {
 	font-family: $font-family-secondary;
 }
-.tracking-tight { letter-spacing: -0.025em; }
+.tracking-tight { letter-spacing: -0.02em; }
 
 .caret {
 	&::after {

package/scss/modules/topics-list.scss

@@ -1,168 +1,35 @@
-ul.topics-list {
-	position: relative;
-
+ul.topics-list, ul.categories-list {
 	li {
-		display: flex;
-		gap: 1rem;
-		border-bottom: 1px solid $border-color;
-		padding: 0.75rem 0;
-
-		@include media-breakpoint-up(sm) { padding: 1.5rem 0; }
-
 		&.deleted {
 			opacity: 0.6;
 			.meta { display: none!important; }
 		}
 
 		&.selected {
-			border-color: $primary;
-
+			outline: 1px solid $primary;
 			[component="topic/select"] {
 				color: $primary!important;
 			}
 		}
-
-		> .thumb-avatar-box {
-			flex: none;
-			display: none;
-			@include media-breakpoint-up(sm) { display: flex; }
-		}
-
-		> .wrapper {
-			flex: 1 1 auto;
-			display: grid;
-			align-items: start;
-			gap: 0.5rem;
-
-			@include media-breakpoint-up(sm) { gap: 1rem; }
-			@include media-breakpoint-up(xl) { display: flex; }
-			// @container (min-width: 799px) { display: flex; }
-
-			> .wrapper2 {
-				flex: 1 1 auto;
-				display: flex;
-				gap: 0.5rem;
-
-				@include media-breakpoint-up(sm) { gap: 1rem; }
-
-				> .title_badges {
-					flex: 1 1 auto;
-					display: flex;
-					flex-direction: column;
-					gap: 0.25rem;
-
-					@include media-breakpoint-up(sm) { gap: 0.5rem; }
-
-					> h2 {
-						font-size: 1rem !important;
-						@include media-breakpoint-up(sm) {
-							font-size: 1.125rem !important;
-						}
-					}
-
-					> .info {
-						display: flex;
-						flex-wrap: wrap;
-						gap: 0.25rem;
-						align-items: center;
-					}
-				}
-
-				> .stats {
-					flex: none;
-					display: none;
-					gap: 0.25rem;
-					align-items: start;
-					grid-auto-rows: min-content;
-					@include media-breakpoint-up(md) { display: grid; }
-					@include media-breakpoint-up(xl) {
-						grid-auto-columns: minmax(0, 1fr);
-						grid-auto-flow: column;
-					 }
-
-					> .card {
-						display: flex;
-						flex-direction: row;
-						gap: 0.5rem;
-						flex-wrap: nowrap;
-						align-items: center;
-						padding: 0.25rem 0.5rem;
-						border: none;
-						border-radius: 4px;
-						color: $text-muted;
-						@include media-breakpoint-up(xl) {
-							flex-direction: column;
-							padding: 0.5rem;
-							gap: 0;
-							min-width: 4.4rem;
-							min-height:3.4rem;
-						}
-
-						> i.fa {
-							display: flex;
-							font-size: 0.75rem;
-							@include media-breakpoint-up(xl) { display: none; }
-						}
-						> .human-readable-number {
-							line-height: 1;
-							font-size: 0.875rem;
-							@include media-breakpoint-up(xl) { font-size: 1.25rem; }
-						}
-						> .text-lowercase {
-							display: none;
-							@include media-breakpoint-up(xl) { display: flex; }
-						}
-					}
-				}
-			}
-
-			> .teaser {
-				flex: none;
-				overflow: hidden;
-
-				@include media-breakpoint-up(xl) {
-					width:12rem;
-				}
-
-				> .lastpost {
-					@include media-breakpoint-up(xl) {
-						min-height: 3.4rem;
-					}
-				}
-
-				.post-content {
-					@include line-clamp(1);
-					@include media-breakpoint-up(xl) {
-						@include line-clamp(2);
-					}
-				}
-			}
+		p {
+			margin: 0 !important;
 		}
 
-		> .checkbox {
-			flex: none;
+		// all other skins use link-color for unread titles
+		&.unread .title {
+			color: $link-color;
 		}
 
 		.ui-sortable-handle {
 			cursor: move;
 		}
-	}
-
-	&.narrow {
-		li {
-			.wrapper {
-				display: grid !important;
 
-				.teaser {
-					width: auto !important;
-
-					.post-content {
-						-webkit-line-clamp: 1 !important;
-					}
-				}
-			}
-		}
+		// if only one thumb don't display
+		[data-numthumbs="1"] { display: none; }
 	}
+}
 
-
+// on default skin use primary color for unread titles
+.skin-noskin ul.topics-list li.unread .title {
+	color: $primary;
 }

package/templates/account/categories.tpl

@@ -13,24 +13,24 @@
 			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end">
 				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/watching" data-state="watching">
 						<div class="d-flex align-items-center gap-2">
-							<i class="fa fa-fw fa-inbox"></i>
-							<span class="flex-1 fw-semibold">[[category:watching]]</span>
+							<i class="flex-shrink-0 fa fa-fw fa-inbox"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:watching]]</span>
 						</div>
 						<div class="help-text text-muted text-xs">[[category:watching.description]]</div>
 					</a>
 				</li>
 				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/notwatching" data-state="notwatching">
 						<div class="d-flex align-items-center gap-2">
-							<i class="fa fa-fw fa-clock-o"></i>
-							<span class="flex-1 fw-semibold">[[category:not-watching]]</span>
+							<i class="flex-shrink-0 fa fa-fw fa-clock-o"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:not-watching]]</span>
 						</div>
 						<div class="help-text text-muted text-xs">[[category:not-watching.description]]</div>
 					</a>
 				</li>
 				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/ignoring" data-state="ignoring">
 						<div class="d-flex align-items-center gap-2">
-							<i class="fa fa-fw fa-eye-slash"></i>
-							<span class="flex-1 fw-semibold">[[category:ignoring]]</span>
+							<i class="flex-shrink-0 fa fa-fw fa-eye-slash"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:ignoring]]</span>
 						</div>
 						<div class="help-text text-muted text-xs">[[category:ignoring.description]]</div>
 					</a>

package/templates/account/topics.tpl

@@ -9,8 +9,8 @@
 			<ul class="dropdown-menu p-1 text-sm">
 				{{{each sortOptions }}}
 				<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{config.relative_path}{./url}">
-					<div class="flex-1">{./name}</div>
-					<i class="fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>
+					<div class="flex-grow-1">{./name}</div>
+					<i class="flex-shrink-0 fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>
 				</a></li>
 				{{{end}}}
 			</ul>

package/templates/categories.tpl

@@ -8,11 +8,8 @@
 		{{{ if pagination.pages.length }}}
 		<div><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 		{{{ end }}}
-		<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+		<ul class="categories-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
 			{{{ each categories }}}
-			{{{ if !@first }}}
-			<hr class="text-muted opacity-25"/>
-			{{{ end }}}
 			<!-- IMPORT partials/categories/item.tpl -->
 			{{{ end }}}
 		</ul>

package/templates/chats.tpl

@@ -1,5 +1,5 @@
 <div class="chats-full d-flex gap-1 h-100 mt-3 mt-md-0 py-md-3">
-	<div class="d-flex flex-column h-100" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
+	<div class="flex-shrink-0 d-flex flex-column h-100" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
 		<div class="chat-search dropdown mb-2">
 			<label class="text-xs text-muted">[[users:search-user-for-chat]]</label>
 
@@ -13,14 +13,14 @@
 				</button>
 			</div>
 		</div>
-		<hr class="text-muted opacity-25 my-1">
+		<hr class="my-1">
 		<div component="chat/recent" class="chats-list overflow-auto mb-0 pe-1" data-nextstart="{nextStart}">
 			{{{each rooms}}}
 			<!-- IMPORT partials/chats/recent_room.tpl -->
 			{{{end}}}
 		</div>
 	</div>
-	<div class="flex-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" component="chat/main-wrapper">
+	<div class="flex-grow-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" component="chat/main-wrapper">
 		<!-- IMPORT partials/chats/message-window.tpl -->
 	</div>
 	<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>

package/templates/flags/detail.tpl

@@ -1,7 +1,7 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
 <div class="d-flex flex-column flex-md-row">
-	<div class="d-flex flex-column gap-3 flex-0 border-end-md text-sm mb-3 pe-4" style="flex-basis: 240px !important;">
+	<div class="flex-shrink-0 d-flex flex-column gap-3 border-end-md text-sm mb-3 pe-4" style="flex-basis: 240px !important;">
 		<div class="d-grid gap-1">
 			<a class="btn btn-ghost border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{targetId}">
 				<i class="fa fa-fw fa-external-link text-primary"></i>
@@ -106,7 +106,7 @@
 			{{{ end }}}
 		</div>
 	</div>
-	<div class="flex-1 ps-md-2 ps-lg-5" style="min-width:0;">
+	<div class="flex-grow-1 ps-md-2 ps-lg-5" style="min-width:0;">
 		<div class="d-flex flex-column gap-4">
 			<h2 class="h6 fw-bold">
 				{target_readable}

package/templates/groups/details.tpl

@@ -44,7 +44,7 @@
 		</div>
 		<!-- IMPORT partials/groups/sidebar-left.tpl -->
 
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width:0;">
+		<div class="flex-grow-1 ps-md-2 ps-lg-5" style="min-width:0;">
 			<div class="tab-content">
 				<div class="tab-pane fade show active" id="groups-posts" role="tabpanel">
 					<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>

package/templates/login.tpl

@@ -78,10 +78,10 @@
 								{{{ if ./icons.svg }}}
 								{./icons.svg}
 								{{{ else }}}
-								<i class="{./icons.normal}" style="color:{./color};"></i>
+								<i class="flex-shrink-0 {./icons.normal}" style="color:{./color};"></i>
 								{{{ end }}}
 								{{{ if ./labels.login }}}
-								<div class="flex-1 text-body text-sm">{./labels.login}</div>
+								<div class="flex-grow-1 text-body text-sm">{./labels.login}</div>
 								{{{ end }}}
 							</a></li>
 						{{{ end }}}

package/templates/notifications.tpl

@@ -6,21 +6,21 @@
 	<hr class="text-muted opacity-25"/>
 
 	<div class="d-flex flex-column flex-md-row">
-		<div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
+		<div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 			<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
 				{{{ each filters }}}
 				{{{ if ./separator }}}
 				<hr/>
 				{{{ else }}}
 				<a class="btn-ghost fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
-					<div class="flex-1">{filters.name}</div>
-					<span class="text-xs human-readable-number" title="{./count}">{./count}</span>
+					<div class="flex-grow-1">{filters.name}</div>
+					<span class="flex-shrink-0 text-xs human-readable-number" title="{./count}">{./count}</span>
 				</a>
 				{{{ end }}}
 				{{{ end }}}
 			</div>
 		</div>
-		<div class="flex-1 ps-md-2 ps-lg-5">
+		<div class="flex-grow-1 ps-md-2 ps-lg-5">
 			<ul component="notifications/list" class="notifications-list list-unstyled" data-nextstart="{nextStart}">
 				<!-- IMPORT partials/notifications_list.tpl -->
 			</ul>

package/templates/partials/account/category-item.tpl

@@ -1,7 +1,7 @@
 <li component="categories/category" data-cid="{./cid}" data-parent-cid="{../parentCid}" class="category-{./cid}">
 	<meta itemprop="name" content="{./name}">
 	<div class="content depth-{./depth} d-flex gap-2">
-		<div class="flex-1 align-items-start d-flex gap-2">
+		<div class="flex-grow-1 align-items-start d-flex gap-2">
 			<div>
 				{buildCategoryIcon(@value, "24px", "rounded-1")}
 			</div>
@@ -10,13 +10,13 @@
 					<!-- IMPORT partials/categories/link.tpl -->
 				</div>
 				{{{ if ./descriptionParsed }}}
-				<div class="description text-muted text-xs">{./descriptionParsed}</div>
+				<div class="description text-muted text-xs w-100">{./descriptionParsed}</div>
 				{{{ end }}}
 			</div>
 		</div>
-		<div class="flex-grow-0 flex-shrink-0">
+		<div class="flex-shrink-0">
 			<!-- IMPORT partials/category/watch.tpl -->
 		</div>
 	</div>
-	<hr class="text-muted opacity-25"/>
+	<hr />
 </li>

package/templates/partials/account/header.tpl

@@ -32,7 +32,7 @@
 		</div>
 
 		<div class="d-flex flex-column flex-md-row mt-1 justify-content-between w-100 gap-2">
-			<div class="d-flex flex-1 flex-row gap-2">
+			<div class="d-flex flex-grow-1 flex-row gap-2">
 				<div class="d-flex flex-column">
 					<h2 class="fullname fw-semibold fs-2 tracking-tight mb-0">{{{ if fullname }}}{fullname}{{{ else }}}{username}{{{ end }}}</h2>
 					<div class="d-flex flex-wrap gap-1 text-sm align-items-center">
@@ -62,7 +62,7 @@
 				</div>
 			</div>
 
-			<div class="d-flex gap-1 align-self-stretch align-self-md-start justify-content-end">
+			<div class="flex-shrink-0 d-flex gap-1 align-self-stretch align-self-md-start justify-content-end">
 				{{{ if loggedIn }}}
 				{{{ if !isSelf }}}
 				<a component="account/unfollow" href="#" class="btn btn-info flex-fill{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
@@ -94,5 +94,5 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="account-content flex-1 ps-md-2 ps-lg-3 ps-xl-4" style="min-width: 0;">
+		<div class="account-content flex-grow-1 ps-md-2 ps-lg-3 ps-xl-4" style="min-width: 0;">
 

package/templates/partials/account/sidebar-left.tpl

@@ -1,7 +1,7 @@
-<div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
+<div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 	<div class="sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem;z-index: 1;">
 		<a href="{config.relative_path}/user/{userslug}" class="btn-ghost fw-semibold {{{ if template.account/profile }}}active{{{ end }}}">
-			<div class="flex-1">[[global:about]]</div>
+			<div class="flex-grow-1">[[global:about]]</div>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/posts"class="btn-ghost fw-semibold
 			{{{ if template.account/posts }}}active{{{ end }}}
@@ -10,67 +10,67 @@
 			{{{ if template.account/upvoted }}}active{{{ end }}}
 			{{{ if template.account/downvoted }}}active{{{ end }}}
 			{{{ if template.account/bookmarks }}}active{{{ end }}}">
-			<div class="flex-1">[[global:posts]]</div>
-			<span class="text-xs human-readable-number" title="{counts.posts}">{counts.posts}</span>
+			<div class="flex-grow-1">[[global:posts]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.posts}">{counts.posts}</span>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost fw-semibold
 			{{{ if template.account/topics }}}active{{{ end }}}
 			{{{ if template.account/watched }}}active{{{ end }}}
 			{{{ if template.account/ignored }}}active{{{ end }}}">
-			<div class="flex-1">[[global:topics]]</div>
-			<span class="text-xs human-readable-number" title="{counts.topics}">{counts.topics}</span>
+			<div class="flex-grow-1">[[global:topics]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.topics}">{counts.topics}</span>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/groups" class="btn-ghost fw-semibold
 			{{{ if template.account/groups }}}active{{{ end }}}">
-			<div class="flex-1">[[global:header.groups]]</div>
-			<span class="text-xs human-readable-number" title="{counts.groups}">{counts.groups}</span>
+			<div class="flex-grow-1">[[global:header.groups]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.groups}">{counts.groups}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/followers" class="btn-ghost fw-semibold
 			{{{ if template.account/followers }}}active{{{ end }}}">
-			<div class="flex-1">[[user:followers]]</div>
-			<span class="text-xs human-readable-number" title="{counts.followers}">{counts.followers}</span>
+			<div class="flex-grow-1">[[user:followers]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.followers}">{counts.followers}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/following" class="btn-ghost fw-semibold
 			{{{ if template.account/following }}}active{{{ end }}}">
-			<div class="flex-1">[[user:following]]</div>
-			<span class="text-xs human-readable-number" title="{counts.following}">{counts.following}</span>
+			<div class="flex-grow-1">[[user:following]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.following}">{counts.following}</span>
 		</a>
 
 		{{{ if canEdit }}}
 		<a href="{config.relative_path}/user/{userslug}/categories" class="btn-ghost fw-semibold
 			{{{ if template.account/categories }}}active{{{ end }}}">
-			<div class="flex-1">[[user:watched_categories]]</div>
-			<span class="text-xs human-readable-number" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
+			<div class="flex-grow-1">[[user:watched_categories]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn-ghost fw-semibold
 			{{{ if template.account/blocks }}}active{{{ end }}}">
-			<div class="flex-1">[[user:blocked-users]]</div>
-			<span class="text-xs human-readable-number" title="{counts.blocks}">{counts.blocks}</span>
+			<div class="flex-grow-1">[[user:blocked-users]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.blocks}">{counts.blocks}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn-ghost fw-semibold
 			{{{ if template.account/uploads }}}active{{{ end }}}">
-			<div class="flex-1">[[global:uploads]]</div>
-			<span class="text-xs human-readable-number" title="{counts.uploaded}">{counts.uploaded}</span>
+			<div class="flex-grow-1">[[global:uploads]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.uploaded}">{counts.uploaded}</span>
 		</a>
 		{{{ end }}}
 
 		<hr class="w-100 my-2"/>
 		{{{ if (loggedIn && (!isSelf && !banned)) }}}
 		<a href="#" component="account/flag" class="btn-ghost-sm">
-			<i class="fa-solid fa-flag text-danger"></i>
-			<div class="flex-1 text-nowrap">[[user:flag-profile]]</div>
+			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:flag-profile]]</div>
 		</a>
 		<a href="#" component="account/block" class="btn-ghost-sm {{{ if isBlocked }}}hidden{{{ end }}}">
-			<i class="fa-solid fa-ban text-danger"></i>
-			<div class="flex-1 text-nowrap">[[user:block_user]]</div>
+			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:block_user]]</div>
 		</a>
 		<a href="#" component="account/unblock" class="btn-ghost-sm {{{ if !isBlocked }}}hidden{{{ end }}}">
-			<i class="fa-solid fa-ban text-danger"></i>
-			<div class="flex-1 text-nowrap">[[user:unblock_user]]</div>
+			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:unblock_user]]</div>
 		</a>
 		<hr class="w-100 my-2"/>
 		{{{ end }}}
@@ -78,17 +78,17 @@
 		{{{ if canEdit }}}
 		<a href="{config.relative_path}/user/{userslug}/edit" class="btn-ghost-sm text-xs
 		{{{ if template.account/edit }}}active{{{ end }}}">
-			<div class="flex-1">[[user:edit-profile]]</div>
+			<div class="flex-grow-1">[[user:edit-profile]]</div>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/settings" class="btn-ghost-sm text-xs
 			{{{ if template.account/settings }}}active{{{ end }}}">
-			<div class="flex-1">[[user:settings]]</div>
+			<div class="flex-grow-1">[[user:settings]]</div>
 		</a>
 		{{{ end }}}
 
 		{{{ each profile_links }}}
 		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn-ghost-sm text-xs plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
-			<div class="flex-1">{./name}</div>
+			<div class="flex-grow-1">{./name}</div>
 		</a>
 		{{{end}}}
 	</div>

package/templates/partials/categories/item.tpl

@@ -1,22 +1,22 @@
-<li component="categories/category" data-cid="{./cid}" class="row clearfix category-{./cid}">
+<li component="categories/category" data-cid="{./cid}" class="w-100 border-bottom py-3 py-lg-4 gap-1 d-flex flex-column flex-lg-row align-items-start category-{./cid}">
 	<meta itemprop="name" content="{./name}">
-
-	<div class="d-flex gap-3 col-12 {{{ if config.hideCategoryLastPost }}}col-md-10 col-sm-12{{{ else }}}col-md-7 col-sm-9{{{ end }}}">
-		<div class="">
+	
+	<div class="d-flex col-lg-7 gap-2 gap-lg-3">
+		<div class="flex-shrink-0">
 		{buildCategoryIcon(@value, "40px", "rounded-1")}
 		</div>
-		<div class="d-flex flex-column gap-1 flex-1">
-			<h2 class="title fw-semibold fs-4 m-0 tracking-tight">
+		<div class="flex-grow-1 d-flex flex-wrap gap-1">
+			<h2 class="title text-break fs-4 fw-semibold m-0 tracking-tight w-100">
 				<!-- IMPORT partials/categories/link.tpl -->
 			</h2>
 			{{{ if ./descriptionParsed }}}
-			<div class="description text-muted text-xs">
+			<div class="description text-muted text-xs w-100">
 				{./descriptionParsed}
 			</div>
 			{{{ end }}}
 			{{{ if !config.hideSubCategories }}}
 			{{{ if ./children.length }}}
-			<div class="category-children row row-cols-2 g-2">
+			<div class="category-children row row-cols-2 g-2 my-1 w-100">
 				{{{ each ./children }}}
 				{{{ if !./isSection }}}
 				<span class="category-children-item small">
@@ -39,28 +39,25 @@
 			{{{ end }}}
 		</div>
 	</div>
-	<div class="row col-md-5 col-sm-3 d-none d-md-flex align-self-start">
-		{{{ if !./link }}}
-		<div class="col-md-5 d-none d-lg-flex stats text-muted gap-2 px-0">
-			<div class="w-50">
-				<div class="card card-header align-items-center px-0 py-2 border-0 rounded-1">
-					<span class="{./unread-class} human-readable-number fs-5 ff-secondary" title="{./totalTopicCount}">{./totalTopicCount}</span>
-					<span class="text-lowercase text-xs">[[global:topics]]</span>
+	{{{ if !./link }}}
+		<div class="d-flex col-lg-5 align-content-stretch">
+			<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr;">
+				<div class="card card-header border-0 p-1 overflow-hidden rounded-1 d-flex flex-column gap-1 align-items-center">
+					<span class="{./unread-class} human-readable-number fs-5 ff-secondary lh-1" title="{./totalTopicCount}" data-toFixed="0">{./totalTopicCount}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:topics]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-list"></i>
 				</div>
-			</div>
-			<div class="w-50">
-				<div class="card card-header align-items-center px-0 py-2 border-0 rounded-1">
-					<span class="{./unread-class} human-readable-number fs-5 ff-secondary" title="{./totalPostCount}">{./totalPostCount}</span>
-					<span class="text-lowercase text-xs">[[global:posts]]</span>
+				<div class="card card-header border-0 p-1 overflow-hidden rounded-1 d-flex flex-column gap-1 align-items-center">
+					<span class="{./unread-class} human-readable-number fs-5 ff-secondary lh-1" title="{./totalPostCount}" data-toFixed="0">{./totalPostCount}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:posts]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-message"></i>
 				</div>
 			</div>
+			{{{ if !config.hideCategoryLastPost }}}
+			<div component="topic/teaser" class="teaser col-lg-6">
+				<!-- IMPORT partials/categories/lastpost.tpl -->
+			</div>
+			{{{ end }}}
 		</div>
-
-		{{{ if !config.hideCategoryLastPost }}}
-		<div class="col-md-7 col-sm-3 teaser d-none d-sm-block" component="topic/teaser">
-			<!-- IMPORT partials/categories/lastpost.tpl -->
-		</div>
-		{{{ end }}}
-		{{{ end }}}
-	</div>
+	{{{ end }}}
 </li>

package/templates/partials/categories/lastpost.tpl

@@ -1,15 +1,15 @@
-<div class="lastpost background-link-container border-start border-2 h-100" style="border-color: {./bgColor}!important;">
+<div class="lastpost background-link-container border-start border-2 lh-sm h-100" style="border-color: {./bgColor}!important;">
 	{{{ each ./posts }}}
 	{{{ if @first }}}
-	<div component="category/posts" class="ps-3">
+	<div component="category/posts" class="ps-2 text-xs">
 		<a class="background-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}"></a>
-		<p class="mb-0">
-			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true, "avatar-tooltip")}</a>
+		<div>
+			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "18px", true, "avatar-tooltip")}</a>
 			<a class="permalink text-muted" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">
 				<span class="timeago text-xs" title="{../timestampISO}"></span>
 			</a>
-		</p>
-		<div class="post-content overflow-hidden text-xs line-clamp-2">
+		</div>
+		<div class="post-content text-xs line-clamp-2 lh-sm">
 			{./content}
 		</div>
 	</div>
@@ -17,7 +17,7 @@
 	{{{ end }}}
 
 	{{{ if !./posts.length }}}
-	<div component="category/posts" class="ps-3">
+	<div component="category/posts" class="ps-2">
 		<div class="post-content overflow-hidden text-xs">
 			[[category:no_new_posts]]
 		</div>