improve tags display everywhere
This commit is contained in:
parent
6cc1941ac4
commit
b72014384c
GPG Key ID:
8AE30347CE28D101
|
|
@ -48,14 +48,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-meta {
|
&-meta {
|
||||||
margin: 5px 0px 13px 0px;
|
margin: 5px 0px 10px 0px;
|
||||||
}
|
|
||||||
|
|
||||||
&-tags {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 5px;
|
|
||||||
margin: 5px 0px 13px 0px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -75,8 +75,7 @@ pre {
|
||||||
border: 2px solid unset;
|
border: 2px solid unset;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
}
|
}
|
||||||
code,
|
code, pre {
|
||||||
pre {
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||||
color: $dark;
|
color: $dark;
|
||||||
|
|
@ -113,11 +112,8 @@ input[type="text"]:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
h2,
|
h2, p, li, td {
|
||||||
p,
|
a:not(.button) {
|
||||||
li,
|
|
||||||
td {
|
|
||||||
a {
|
|
||||||
color: $dark;
|
color: $dark;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
|
|
@ -233,3 +229,11 @@ footer {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 5px;
|
||||||
|
margin: 10px 0px 13px 0px !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,144 +1,157 @@
|
||||||
.toc {
|
.toc {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
border-bottom: 2px solid $dark;
|
border-bottom: 2px solid $dark;
|
||||||
a {
|
a {
|
||||||
color: $dark;
|
color: $dark;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.frontmatter {
|
.frontmatter {
|
||||||
padding: 15px 0;
|
padding: 15px 0px 7px 0px;
|
||||||
border-bottom: 2px solid $dark;
|
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 {
|
a {
|
||||||
color: $dark;
|
text-decoration: none;
|
||||||
text-decoration: none;
|
background-image: none;
|
||||||
background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
|
&::after {
|
||||||
background-repeat: no-repeat;
|
content: "";
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
background-size: 0 0;
|
background-size: 0 0;
|
||||||
background-position: 100% 21%;
|
color: $dark;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
h2, h3 {
|
h2,
|
||||||
margin-top: 20px;
|
h3 {
|
||||||
margin-bottom: -10px;
|
margin-top: 20px;
|
||||||
}
|
margin-bottom: -10px;
|
||||||
h2, h3, p, li, td {
|
}
|
||||||
a {
|
h2,
|
||||||
color: $dark;
|
h3,
|
||||||
text-decoration: none;
|
p,
|
||||||
background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
|
li,
|
||||||
background-repeat: no-repeat;
|
td {
|
||||||
background-size: 0 0;
|
a {
|
||||||
background-position: 100% 21%;
|
color: $dark;
|
||||||
transition: .15s ease-out;
|
text-decoration: none;
|
||||||
border-radius: 5px;
|
background-image: linear-gradient(
|
||||||
padding-left: 4px;
|
120deg,
|
||||||
margin-left: -3px;
|
$gradient-left 0%,
|
||||||
&:hover {
|
$gradient-right 100%
|
||||||
background-size: 100% 100%;
|
);
|
||||||
color: $light;
|
background-repeat: no-repeat;
|
||||||
&:after {
|
background-size: 0 0;
|
||||||
color: $gradient-right;
|
background-position: 100% 21%;
|
||||||
}
|
transition: 0.15s ease-out;
|
||||||
}
|
border-radius: 5px;
|
||||||
&::after {
|
padding-left: 4px;
|
||||||
position: relative;
|
margin-left: -3px;
|
||||||
content: "\FEFF°";
|
&:hover {
|
||||||
margin-left: 0.10em;
|
background-size: 100% 100%;
|
||||||
font-size: 90%;
|
color: $light;
|
||||||
top: -0.10em;
|
&:after {
|
||||||
color: $light-highlight;
|
color: $gradient-right;
|
||||||
font-feature-settings: "caps";
|
|
||||||
font-variant-numeric: normal;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.footnote-ref {
|
&::after {
|
||||||
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;
|
position: relative;
|
||||||
bottom: 2.6px;
|
content: "\FEFF°";
|
||||||
background-size: 100% 0;
|
margin-left: 0.1em;
|
||||||
background-position: 0 150%;
|
font-size: 90%;
|
||||||
&::after {
|
top: -0.1em;
|
||||||
content: "";
|
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 * {
|
.commento-root-font * {
|
||||||
font-family: Heliotrope !important;
|
font-family: Heliotrope !important;
|
||||||
}
|
}
|
||||||
.commento-footer {
|
.commento-footer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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-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-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-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 }}
|
{{ $title := .Title }}
|
||||||
{{- range (.GetTerms "tags") }}
|
{{- range (.GetTerms "tags") }}
|
||||||
<a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a>
|
<a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</p>
|
</p>
|
||||||
|
{{- end }}
|
||||||
</li>
|
</li>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,14 @@
|
||||||
<h1 class="post-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
<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>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>
|
<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 }}
|
{{- if .Params.rss_only }}
|
||||||
<aside class="admonition note">
|
<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>
|
<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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue