true-gray, rss icon, only show non-zero amount of replies
This commit is contained in:
parent
3a128b2b84
commit
7fde90bc7e
|
@ -1,20 +1,18 @@
|
|||
|
||||
:root {
|
||||
--white1: #fafaff;
|
||||
--white2: #b3b5c6;
|
||||
--gray1: #2a2b2f;
|
||||
--gray2: #35363b;
|
||||
--gray3: #3a3b41;
|
||||
--gray4: #45464e;
|
||||
--gray5: #4d4e56;
|
||||
--gray6: #575861;
|
||||
--gray7: #5d5e67;
|
||||
--gray8: #696a75;
|
||||
--white1: #fff;
|
||||
--white2: #777;
|
||||
--gray1: #111;
|
||||
--gray2: #222;
|
||||
--gray3: #333;
|
||||
--gray4: #444;
|
||||
--gray5: #555;
|
||||
--gray6: #666;
|
||||
--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-info-bg: var(--gray4);
|
||||
--toot-focus-bg: var(--gray3);
|
||||
--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)
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -126,18 +126,16 @@
|
|||
.profile .header .basic-info .role {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border: 0.13rem solid var(--bg);
|
||||
|
||||
grid-area: role;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
border-radius: var(--br);
|
||||
padding: 0.3rem;
|
||||
|
||||
line-height: 1.1rem;
|
||||
font-size: 0.9rem;
|
||||
font-variant: small-caps;
|
||||
font-weight: bold;
|
||||
border: 0.1rem solid var(--bg);
|
||||
grid-area: role;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
border-radius: var(--br);
|
||||
padding: 0.25rem 0.5rem 0.35rem 0.5rem;
|
||||
line-height: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.profile .header .basic-info .role.admin {
|
||||
|
@ -202,12 +200,7 @@
|
|||
justify-self: end;
|
||||
}
|
||||
|
||||
.profile .toots .col-header .rss-icon {
|
||||
display: block;
|
||||
margin: -0.25rem 0;
|
||||
}
|
||||
|
||||
.profile .toots .col-header .rss-icon .fa {
|
||||
.profile .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);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -2,5 +2,6 @@
|
|||
|
||||
> custom templates for GoToSocial
|
||||
|
||||
as seen on my fediverse profile:
|
||||
- https://dym.sh/@dym
|
||||
as seen on my fediverse profile ( https://dym.sh/@dym ):
|
||||
|
||||
![screenshot](./screenshot.png)
|
Binary file not shown.
After Width: | Height: | Size: 302 KiB |
|
@ -26,23 +26,22 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<h2>contacts</h2>
|
||||
{{if .instance.ContactAccount}}
|
||||
<h2>social profiles</h2>
|
||||
|
||||
<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>
|
||||
<a href="{{.instance.ContactAccount.URL}}">@{{.instance.ContactAccount.Username}}</a>
|
||||
|
||||
{{if .instance.Email}}
|
||||
| <<a href="mailto:{{.instance.Email}}">{{.instance.Email}}</a>>
|
||||
{{end}}
|
||||
</span>
|
||||
|
||||
<span><a href="{{.instance.ContactAccount.URL}}">@{{.instance.ContactAccount.Username}}</a></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>
|
||||
|
|
|
@ -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 }}">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
<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>
|
||||
{{end}}
|
||||
{{if .Pinned}}
|
||||
<div>
|
||||
<span>pinned</span>
|
||||
|
|
Reference in New Issue