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

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;
}
}

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;
}

View File

@ -7,17 +7,21 @@
}
}
.frontmatter {
padding: 15px 0;
padding: 15px 0px 7px 0px;
border-bottom: 2px solid $dark;
a {
a:not(.button) {
color: $dark;
text-decoration: none;
background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
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;
transition: 0.15s ease-out;
border-radius: 5px;
padding-left: 4px;
margin-left: -3px;
@ -31,9 +35,9 @@
&::after {
position: relative;
content: "\FEFF°";
margin-left: 0.10em;
margin-left: 0.1em;
font-size: 90%;
top: -0.10em;
top: -0.1em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;
@ -60,19 +64,28 @@
}
.content {
h2, h3 {
h2,
h3 {
margin-top: 20px;
margin-bottom: -10px;
}
h2, h3, p, li, td {
h2,
h3,
p,
li,
td {
a {
color: $dark;
text-decoration: none;
background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
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;
transition: 0.15s ease-out;
border-radius: 5px;
padding-left: 4px;
margin-left: -3px;
@ -86,9 +99,9 @@
&::after {
position: relative;
content: "\FEFF°";
margin-left: 0.10em;
margin-left: 0.1em;
font-size: 90%;
top: -0.10em;
top: -0.1em;
color: $light-highlight;
font-feature-settings: "caps";
font-variant-numeric: normal;

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 }}

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>