Amolith created
themes/secluded/assets/scss/_list.scss | 10
themes/secluded/assets/scss/_main.scss | 18
themes/secluded/assets/scss/_single.scss | 261 +++++++++++----------
themes/secluded/layouts/_default/list.html | 4
themes/secluded/layouts/_default/single.html | 8
5 files changed, 160 insertions(+), 141 deletions(-)
@@ -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;
}
}
@@ -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;
+}
@@ -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 {
- 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;
- }
+ 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;
+ }
}
-
- .post-title {
- margin: 10px 0;
- a {
- text-decoration: none;
- background-image: none;
- &::after {
- content: "";
- }
- &:hover {
- background-size: 0 0;
- color: $dark;
- }
- }
+ &::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;
}
- p {
- margin: 0 0;
+ }
+
+ .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;
+ }
}
.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;
}
+ }
+ &::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;
+ }
}
- .footnote-ref {
- background-size: 100% 1.5px;
- background-position: 0 90%;
- &::after {
- content: "";
- }
- &:hover {
- background-size: 100% 100%;
- color: $light;
- }
+ }
+ .footnote-ref {
+ background-size: 100% 1.5px;
+ background-position: 0 90%;
+ &::after {
+ content: "";
}
- .footnote-backref {
- background-size: 100% 1.5px;
- background-position: 0 90%;
- &::after {
- content: "";
- }
- &:hover {
- background-size: 100% 100%;
- color: $light;
- }
+ &:hover {
+ background-size: 100% 100%;
+ color: $light;
}
- .highlight {
- a {
- background-image: none;
- &::after {
- content: "";
- }
- }
+ }
+ .footnote-backref {
+ background-size: 100% 1.5px;
+ background-position: 0 90%;
+ &::after {
+ content: "";
}
- .anchor-tag {
- font-size: 70%;
- position: relative;
- bottom: 2.6px;
- background-size: 100% 0;
- background-position: 0 150%;
- &::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;
+}
@@ -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 }}
@@ -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>