Amolith
/
secluded
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve tags display everywhere

This commit is contained in:
Amolith 2023-05-31 13:27:20 -04:00
parent 6cc1941ac4
commit b72014384c
Signed by: Amolith
GPG Key ID: 8AE30347CE28D101
5 changed files with 163 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
themes/secluded/assets/scss/_list.scss
View File

@ -48,14 +48,6 @@
}
&-meta {
margin: 5px 0px 13px 0px;
}
&-tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
margin: 5px 0px 13px 0px;
margin: 5px 0px 10px 0px;
}
}

18
themes/secluded/assets/scss/_main.scss
View File

@ -75,8 +75,7 @@ pre {
border: 2px solid unset;
border-radius: 7px;
}
code,
pre {
code, pre {
font-size: 16px;
font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
color: $dark;
@ -113,11 +112,8 @@ input[type="text"]:focus {
}
.content {
h2,
p,
li,
td {
a {
h2, p, li, td {
a:not(.button) {
color: $dark;
text-decoration: none;
background-image: linear-gradient(
@ -233,3 +229,11 @@ footer {
font-style: italic;
}
}
.tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
margin: 10px 0px 13px 0px !important;
}

267
themes/secluded/assets/scss/_single.scss
View File

@ -1,144 +1,157 @@
.toc {
padding-bottom: 5px;
border-bottom: 2px solid $dark;
a {
color: $dark;
text-decoration: underline;
}
padding-bottom: 5px;
border-bottom: 2px solid $dark;
a {
color: $dark;
text-decoration: underline;
}
}
.frontmatter {
padding: 15px 0;
border-bottom: 2px solid $dark;
padding: 15px 0px 7px 0px;
border-bottom: 2px solid $dark;
a:not(.button) {
color: $dark;
text-decoration: none;
background-image: linear-gradient(
120deg,
$gradient-left 0%,
$gradient-right 100%
);
background-repeat: no-repeat;
background-size: 0 0;
background-position: 100% 21%;
transition: 0.15s ease-out;
border-radius: 5px;
padding-left: 4px;
margin-left: -3px;
&:hover {
background-size: 100% 100%;
color: $light;
&:after {
color: $gradient-right;
}
}
&::after {
position: relative;
content: "\FEFF°";
margin-left: 0.1em;
font-size: 90%;
top: -0.1em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;
}
}
.post-title {
margin: 10px 0;
a {
color: $dark;
text-decoration: none;
background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
background-repeat: no-repeat;
text-decoration: none;
background-image: none;
&::after {
content: "";
}
&:hover {
background-size: 0 0;
background-position: 100% 21%;
transition: .15s ease-out;
border-radius: 5px;
padding-left: 4px;
margin-left: -3px;
&:hover {
background-size: 100% 100%;
color: $light;
&:after {
color: $gradient-right;
}
}
&::after {
position: relative;
content: "\FEFF°";
margin-left: 0.10em;
font-size: 90%;
top: -0.10em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;
}
}
.post-title {
margin: 10px 0;
a {
text-decoration: none;
background-image: none;
&::after {
content: "";
}
&:hover {
background-size: 0 0;
color: $dark;
}
}
}
p {
margin: 0 0;
color: $dark;
}
}
}
p {
margin: 0 0;
}
}
.content {
h2, h3 {
margin-top: 20px;
margin-bottom: -10px;
}
h2, h3, p, li, td {
a {
color: $dark;
text-decoration: none;
background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
background-repeat: no-repeat;
background-size: 0 0;
background-position: 100% 21%;
transition: .15s ease-out;
border-radius: 5px;
padding-left: 4px;
margin-left: -3px;
&:hover {
background-size: 100% 100%;
color: $light;
&:after {
color: $gradient-right;
}
}
&::after {
position: relative;
content: "\FEFF°";
margin-left: 0.10em;
font-size: 90%;
top: -0.10em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;
}
h2,
h3 {
margin-top: 20px;
margin-bottom: -10px;
}
h2,
h3,
p,
li,
td {
a {
color: $dark;
text-decoration: none;
background-image: linear-gradient(
120deg,
$gradient-left 0%,
$gradient-right 100%
);
background-repeat: no-repeat;
background-size: 0 0;
background-position: 100% 21%;
transition: 0.15s ease-out;
border-radius: 5px;
padding-left: 4px;
margin-left: -3px;
&:hover {
background-size: 100% 100%;
color: $light;
&:after {
color: $gradient-right;
}
}
.footnote-ref {
background-size: 100% 1.5px;
background-position: 0 90%;
&::after {
content: "";
}
&:hover {
background-size: 100% 100%;
color: $light;
}
}
.footnote-backref {
background-size: 100% 1.5px;
background-position: 0 90%;
&::after {
content: "";
}
&:hover {
background-size: 100% 100%;
color: $light;
}
}
.highlight {
a {
background-image: none;
&::after {
content: "";
}
}
}
.anchor-tag {
font-size: 70%;
}
&::after {
position: relative;
bottom: 2.6px;
background-size: 100% 0;
background-position: 0 150%;
&::after {
content: "";
}
content: "\FEFF°";
margin-left: 0.1em;
font-size: 90%;
top: -0.1em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;
}
}
}
.footnote-ref {
background-size: 100% 1.5px;
background-position: 0 90%;
&::after {
content: "";
}
&:hover {
background-size: 100% 100%;
color: $light;
}
}
.footnote-backref {
background-size: 100% 1.5px;
background-position: 0 90%;
&::after {
content: "";
}
&:hover {
background-size: 100% 100%;
color: $light;
}
}
.highlight {
a {
background-image: none;
&::after {
content: "";
}
}
}
.anchor-tag {
font-size: 70%;
position: relative;
bottom: 2.6px;
background-size: 100% 0;
background-position: 0 150%;
&::after {
content: "";
}
}
}
.commento-root-font * {
font-family: Heliotrope !important;
font-family: Heliotrope !important;
}
.commento-footer {
display: none;
}
display: none;
}

4
themes/secluded/layouts/_default/list.html
View File

@ -28,12 +28,14 @@
<p class="posts-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{.Permalink}}">{{.Title}}</a></p>
<p class="posts-summary" style="view-transition-name: post-summary-{{ .Title | urlize }}">{{ .Summary | truncate 140 }}</p>
<p class="posts-meta"><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }}</p>
<p class="posts-tags">
{{- if .Params.tags }}
<p class="tags">
{{ $title := .Title }}
{{- range (.GetTerms "tags") }}
<a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a>
{{- end }}
</p>
{{- end }}
</li>
{{- end }}
{{- end }}

8
themes/secluded/layouts/_default/single.html
View File

@ -5,6 +5,14 @@
<h1 class="post-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
<p><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}</a></p>
<p><strong>Download this post as:</strong> <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.pdf">PDF,</a> <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.epub">EPUB,</a> or <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.txt">plaintext</a></p>
{{- if .Params.tags }}
<p class="tags">
{{ $title := .Title }}
{{- range (.GetTerms "tags") }}
<a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a>
{{- end }}
</p>
{{- end }}
{{- if .Params.rss_only }}
<aside class="admonition note">
<p><strong>Note:</strong> this is an RSS-only post; it's exclusively publicised through <a href="/posts/index.xml">my RSS feed.</a> Read about <a href="https://daverupert.com/2018/01/welcome-to-rss-club/">RSS Club</a> for more information.</p>