true-gray, rss icon, only show non-zero amount of replies

assets/dist/_colors.css

@@ -1,20 +1,18 @@
 
 :root {
-	--white1: #fafaff;
+	--white1: #fff;
-	--white2: #b3b5c6;
+	--white2: #777;
-	--gray1: #2a2b2f;
+	--gray1: #111;
-	--gray2: #35363b;
+	--gray2: #222;
-	--gray3: #3a3b41;
+	--gray3: #333;
-	--gray4: #45464e;
+	--gray4: #444;
-	--gray5: #4d4e56;
+	--gray5: #555;
-	--gray6: #575861;
+	--gray6: #666;
-	--gray7: #5d5e67;
-	--gray8: #696a75;
 	--orange1: #fd6a00;
 	--orange2: #ff853e;
 	--blue1: #3a9fde;
 	--blue2: #66befe;
-	--blue3: #89caff;
+	--blue3: #82d8fd;
 	--error1: #860000;
 	--error2: #ff9796;
 	--error3: #dd2c2c;
@@ -24,16 +22,16 @@
 	--info-bg: #b3ddff;
 	--info-link: var(--error-link);
 	--fg: var(--white1);
-	--bg: var(--gray1);
+	--bg: var(--gray2);
 	--bg-trans: rgba(77, 78, 86, 0.62);
-	--bg-accent: var(--gray5);
+	--bg-accent: var(--gray3);
 	--fg-accent: var(--blue3);
 	--fg-reduced: var(--white2);
 	--border-accent: var(--orange2);
 	--link-fg: var(--fg-accent);
 	--role-admin: var(--orange2);
 	--role-mod: var(--blue2);
-	--profile-bg: var(--gray4);
+	--profile-bg: var(--gray3);
 	--button-bg: var(--blue2);
 	--button-fg: var(--gray1);
 	--button-hover-bg: var(--blue3);
@@ -42,15 +40,15 @@
 	--button-danger-hover-bg: var(--error2);
 	--toot-bg: var(--gray3);
 	--toot-info-bg: var(--gray2);
-	--toot-focus-bg: var(--gray5);
+	--toot-focus-bg: var(--gray3);
-	--toot-focus-info-bg: var(--gray4);
+	--toot-focus-info-bg: var(--gray3);
 	--no-img-desc-bg: var(--orange1);
 	--no-img-desc-fg: var(--gray1);
 	--bg-sensitive: var(--gray1);
 	--boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
 	--boxshadow-border: 0.08rem solid var(--gray1);
 	--avatar-border: var(gray);
-	--input-bg: var(--gray4);
+	--input-bg: var(--gray3);
 	--input-disabled-bg: var(--gray2);
 	--input-border: var(--blue1);
 	--input-error-border: var(--error3);
@@ -66,14 +64,14 @@
 	--error-bg: var(--error2);
 	--list-entry-bg: var(--gray2);
 	--list-entry-alternate-bg: var(--gray3);
-	--list-entry-hover-bg: var(--gray4);
+	--list-entry-hover-bg: var(--gray3);
 	--plyr-color-main: var(--orange2);
 	--plyr-video-background: var(--bg-accent);
 	--plyr-badge-background: var(--bg-accent);
 	--plyr-video-controls-background: var(--bg-accent);
 	--plyr-badge-text-color: var(--fg);
 	--plyr-badge-border-radius: var(--br);
-	--plyr-video-progress-buffered-background: var(--gray8)
+	--plyr-video-progress-buffered-background: var(--gray6)
 }
 
 /*

assets/dist/base.css

@@ -323,24 +323,12 @@ summary {
 	display: list-item;
 }
 
-/* noto-sans-regular - latin */
-
-/* standard border radius for nice squircles */
-
-/* border radius for items that are framed/bordered
-   inside something with $br, eg avatar, header img */
-
-/* Fork-Awesome 'fa-fw' fixed icon width 
-   keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50
-*/
-
 html, body {
 	padding: 0;
 	margin: 0;
 	background: var(--bg);
 	color: var(--fg);
 	font-family: "Noto Sans", sans-serif;
-	scrollbar-color: var(--orange1) var(--gray3);
 }
 
 body {
@@ -567,7 +555,7 @@ section.error pre {
 	}
 
 section.oob-token code {
-		background: var(--gray1);
+		background: var(--gray2);
 		padding: 0.5rem;
 		margin: 0;
 		border-radius: 0.3rem;
@@ -683,7 +671,7 @@ footer a {
 		padding: .6rem;
 		font-weight: bold;
 		background-color: var(--border-accent);
-		color: var(--gray1);
+		color: var(--gray2);
 	}
 
 label {
@@ -714,7 +702,7 @@ label {
 
 .list .header {
 		border: 0.1rem solid transparent !important; /* for alignment with .entry border padding */
-		background: var(--gray1) !important;
+		background: var(--gray2) !important;
 		display: flex;
 		font-weight: bold;
 	}

assets/dist/profile.css

@@ -126,18 +126,16 @@
 .profile .header .basic-info .role {
 			background: var(--bg);
 			color: var(--fg);
-			border: 0.13rem solid var(--bg);
 
+		  border: 0.1rem solid var(--bg);
 		  grid-area: role;
 		  align-self: center;
 		  justify-self: start;
 		  border-radius: var(--br);
-			padding: 0.3rem;
+		  padding: 0.25rem 0.5rem 0.35rem 0.5rem;
-
+		  line-height: 0.75rem;
-			line-height: 1.1rem;
+		  font-size: 0.75rem;
-			font-size: 0.9rem;
 		  font-variant: small-caps;
-			font-weight: bold;
 		}
 
 .profile .header .basic-info .role.admin {
@@ -202,12 +200,7 @@
 			justify-self: end;
 		}
 
-.profile .toots .col-header .rss-icon {
+.profile .rss-icon .fa {
-			display: block;
-			margin: -0.25rem 0;
-		}
-
-.profile .toots .col-header .rss-icon .fa {
 				font-size: 2rem;
 				-o-object-fit: contain;
 				   object-fit: contain;
@@ -272,7 +265,7 @@
 .profile .about-user .fields > span {
 			}
 .profile .about-user .fields > span + b {
-				border-top: 0.1rem solid var(--gray2);
+				border-top: 0.1rem solid var(--gray1);
 			}
 
 .profile .about-user .bio {
@@ -292,10 +285,17 @@
 .profile .accountstats > * {
 		padding: 0.5rem;
 		justify-self: center;
+	}
+
+.profile .accountstats > *,
+.profile .accountstats > * > * {
 		justify-content: center;
 		text-align: center;
+		display: flex;
+		gap: 0.25rem;
+		line-height: 20px;
 	}
 
 .profile .accountstats > b {
-	border-bottom: 0.1rem solid var(--gray2);
+	border-bottom: 0.1rem solid var(--gray1);
 }

assets/dist/settings-style.css

@@ -221,7 +221,7 @@ nav.menu-tree li.nested a.title {
 			padding-left: 1rem;
 			font-weight: normal;
 			color: var(--fg);
-			background: var(--gray4);
+			background: var(--gray3);
 		}
 
 nav.menu-tree li.nested a.title:focus {

assets/dist/status.css

@@ -738,7 +738,7 @@ main {
 				background-color: var(--gray2);
 			}
 .toot .text .content code {
-				padding: 0.25rem;
+				padding: 0.25rem 0.5rem;
 				border-radius: var(--br-inner);
 			}
 .toot .text .content pre {
@@ -945,3 +945,5 @@ main {
 .pswp__content .plyr {
 		max-height: 100%;
 	}
+
+

readme.md

@@ -2,5 +2,6 @@
 
 > custom templates for GoToSocial
 
-as seen on my fediverse profile:
+as seen on my fediverse profile ( https://dym.sh/@dym ):
-- https://dym.sh/@dym
+
+![screenshot](./screenshot.png)

template/about.tmpl

@@ -26,23 +26,22 @@
 		</div>
 
 		<div>
-			<h2>contacts</h2>
+			<h2>social profiles</h2>
-			{{if .instance.ContactAccount}}
+
 			<div class="account-card">
 				<img class="avatar" src="{{.instance.ContactAccount.Avatar}}" alt="" />
 				<h3>
 					{{if .instance.ContactAccount.DisplayName}}{{emojify .instance.ContactAccount.Emojis (escape .instance.ContactAccount.DisplayName)}}{{else}}{{.instance.ContactAccount.Username}}{{end}}
 				</h3>
-				<span>
+				<span><a href="{{.instance.ContactAccount.URL}}">@{{.instance.ContactAccount.Username}}</a></span>
-				<a href="{{.instance.ContactAccount.URL}}">@{{.instance.ContactAccount.Username}}</a>
-
-				{{if .instance.Email}}
-					| &lt;<a href="mailto:{{.instance.Email}}">{{.instance.Email}}</a>&gt;
-				{{end}}
-				</span>
-
 			</div>
-			{{end}}
+
+			<ul>
+				<li><a href="https://figma.com/@dym_sh">figma</a></li>
+				<li><a href="https://codepen.io/dym-sh">codepen</a></li>
+				<li><a href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
+				<li><a href="mailto:re@dym.sh">email</a></li>
+			</ul>
 		</div>
 
 		<div>
@@ -50,7 +49,7 @@
 			<ul>
 				<li><a href="https://gotosocial.org" target="_blank">GoToSocial</a></li>
 				<li>official <a href="https://github.com/superseriousbusiness/gotosocial" target="_blank">source code</a></li>
-				<li>my <a href="https://source.garden/styles/gts-web" target="_blank">custom templates</a></li>
+				<li>my <a href="https://source.garden/config/gts-web" target="_blank">custom templates</a></li>
 			</ul>
 		</div>
 
@@ -96,7 +95,7 @@
 		</div>
 
 		<div>
-			<h2>statis</h2>
+			<h2>stats</h2>
 				<ul>
 					<li>Users: <span class="count">{{.instance.Stats.user_count}}</span></li>
 					<li>Posts: <span class="count">{{.instance.Stats.status_count}}</span></li>

template/header.tmpl

@@ -25,6 +25,7 @@
 */ -}}
 {{ define "thumbnailType" }}{{ if .instance.ThumbnailType }}{{ .instance.ThumbnailType }}{{ else }}image/png{{ end }}{{ end }}
 {{ define "instanceTitle" }}{{ if .ogMeta }}{{ .ogMeta.Title }}{{ else }}{{ .instance.Title }} - GoToSocial{{ end }}{{ end }}
+
 {{- /*
 		BOILERPLATE GOES HERE
 */ -}}
@@ -34,7 +35,7 @@
 <head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="robots" content="{{ if .robotsMeta }}{{ .robotsMeta }}{{ else }}noindex, nofollow{{ end }}">
 	{{ if .ogMeta }}{{ if .ogMeta.Locale }}
 	<meta name="og:locale" content="{{ .ogMeta.Locale }}">

template/profile.tmpl

@@ -51,7 +51,14 @@
 
 			<div class="accountstats">
 				<b>joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
-				<b>posts</b><span>{{.account.StatusesCount}}</span>
+				<b>posts</b><span>
+					{{ if .rssFeed }}
+					<a href="{{ .rssFeed }}" class="rss-icon" aria-label="RSS feed">
+						<img src="/rss.svg" width="20" height="20">
+					</a>
+					{{ end }}
+					<span>{{.account.StatusesCount}}</span>
+				</span>
 				<b>followers</b><span>{{.account.FollowersCount}}</span>
 				<b>follows</b><span>{{.account.FollowingCount}}</span>
 			</div>
@@ -95,15 +102,6 @@
 			</section>
 			{{ end }}
 
-			<div class="col-header">
-				<h2 id="recent" tabindex="-1">Recent posts</h2>
-				{{ if .rssFeed }}
-				<a href="{{ .rssFeed }}" class="rss-icon" aria-label="RSS feed">
-					<img src="/rss.svg" width="24" height="24">
-				</a>
-				{{ end }}
-			</div>
-
 			<section class="thread">
 				{{ if not .statuses }}
 				<div data-nosnippet class="nothinghere">Nothing here!</div>

template/status_profile.tmpl

@@ -83,15 +83,11 @@
 <aside class="info">
 	<time datetime="{{.CreatedAt}}" title="{{.CreatedAt}}">{{.CreatedAt | timestampPrecise}}</time>
 	<div class="stats" role="group">
+		{{if .RepliesCount | eq 0 | not}}
 		<div>
 			<span>{{.RepliesCount}} {{if .RepliesCount | eq 1}}reply{{else}}replies{{end}}</span>
 		</div>
-		<div>
+		{{end}}
-			<span>{{.FavouritesCount}} favourite{{if .FavouritesCount | eq 1 | not}}s{{end}}</span>
-		</div>
-		<div>
-			<span>{{.ReblogsCount}} boost{{if .ReblogsCount | eq 1 | not}}s{{end}}</span>
-		</div>
 		{{if .Pinned}}
 		<div>
 			<span>pinned</span>