From e5cff1cefd4f5eb878299b2ff33d1450e0dbd2a1 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Thu, 2 Jan 2025 15:09:39 +0000
Subject: [PATCH] Add color customization in accordance with #100
Signed-off-by: GitHub Action <action@github.com>
---
assets/scss/_colors.scss | 162 ++++++++++++++++++++++++++------
assets/scss/_mixins.scss | 7 +-
assets/scss/_scrolltotop.scss | 16 +---
assets/scss/_socialshare.scss | 6 +-
assets/scss/_syntax.scss | 2 +-
assets/scss/style.scss | 138 ++++++++++++++++++---------
hugo.toml.example | 1 +
layouts/partials/site-meta.html | 2 +-
layouts/partials/svg.html | 4 +-
layouts/posts/single.html | 12 +--
10 files changed, 248 insertions(+), 102 deletions(-)
diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
index 760338d3..57d7053a 100644
--- a/assets/scss/_colors.scss
+++ b/assets/scss/_colors.scss
@@ -1,38 +1,142 @@
-// Default Colors
-$theme: hsl(172, 99%, 26%) !default;
-$text: hsl(204, 28%, 93%) !default;
-$light-grey: #494f5c !default;
-$dark-grey: #3b3e48 !default;
-$highlight-grey: #7d828a !default;
-$midnightblue: #2c3e50 !default;
-$typewriter: hsl(172, 100%, 36%) !default;
-$codebackground: #272822 !default;
-$pagescrollbar-thumb: hsl(0, 0%, 53%) !default;
+// Default Colors for site
+$pine-green: #018472;
+$bright-grey: #eeeeee;
+$white: #ffffff;
+$davys-grey : #494f5c;
+$granite-grey: #666666;
+$sonic-silver: #777777;
+$arsenic: #3b3e48;
+$css-grey: #7d828a;
+$japanese-indigo: #2c3e50;
+$pine-tree: #272822;
+$taupe-grey: #878787;
+$chinese-silver: #cccccc;
+$anti-flash-white: #f1f1f1;
+$lapis-lazuli: #21759b;
+
+// Default Colors and Opacity for Admonition
+$blueberry: #448aff;
+$turquoise-surf: #00b8d4;
+$caribbean-green: #00bfa5;
+$malachite: #00c853;
+$dark-orange: #ff9100;
+$crayola: #ff5252;
+$awesome: #ff1744;
+$folly: #f50057;
+$admonition-background-opacity : 0.1;
+
+// Default dimmed value
+$dimmed-opacity: 0.6 !default;
+
+// Background color
+$html-background: $davys-grey !default;
+
+// Site Navigation color
+$site-nav-children-border-right:$css-grey !default;
+
+// Posts seperator in list view
+$post-item-border-bottom: $css-grey !default;
+
+// Pinned posts group seperator in list view
+$pinned-posts-group-border-bottom: $css-grey !default;
+
+// Elements of the site which are expected to follow accent color
+// In this current form, `accentColor` in hugo.toml will have higher precedence than these declarations
+$aTag-mixin-a-box-shadow: $pine-green !default; // Box shadow for Mixin "aTag" used by figure element
+$aTag-mixin-a-hover-box-shadow: $pine-green !default; // Box shadow on hover for Mixin "aTag" used by figure element
+$content-anchor-hover: $pine-green !default; // Anchor text hover color
+$post-description-a-hover-border-bottom: $pine-green !default; // Anchor text on hover for post description in list
+$tableofcontents-a-hover-border-bottom: $pine-green !default; // Table of Contents on hover
+$scrolltotop-arrow: $pine-green !default; // Scroll yo Top arrow color
+$typewriter: $pine-green !default; // Typewriter carat color
+$footnote-ref-hover-background: $pine-green !default; // Footnote reference on hover
+$marked-background: $pine-green !default; // Marked text background color
+$inserted-text-underline: $pine-green !default; // Inserted text underline color
+
+// Footnote
+$footnote-ref-background: $japanese-indigo !default;
// Scroll to Top Default colors
-$stt-stroke: #ccc !default;
-$stt-circle: #3b3e48 !default;
-$stt-arrow: #018574 !default;
+// Scroll to Top "Up arrow" color is defined as : $scrolltotop-arrow
+$scrolltotop-ring: $chinese-silver !default;
+$scrolltotop-circle: $arsenic !default;
+
+// Page Scrollbar
+$pagescrollbar-background: $japanese-indigo !default;
+$pagescrollbar-thumb: $taupe-grey !default;
+$pagescrollbar-thumb-hover: $bright-grey !default;
+
+// Table of Contents
+$tableofcontents-background: transparent;
+
+// Table of Contents Scrollbar
+$tableofcontents-scrollbar-track: darken($pagescrollbar-thumb, 10%) !default;
+$tableofcontents-scrollbar-thumb: $japanese-indigo !default;
+$tableofcontents-scrollbar-thumb-hover: lighten($japanese-indigo, 10%) !default;
+
+// Text color
+$text: $bright-grey !default;
+
+// Text selection color
+$text-select: $css-grey !default;
+
+// Marked text color
+$marked-text:$bright-grey !default;
+
+// Link text color on hover
+$a-hover: $white !default;
+
+// 404 Page
+$btn-404-a-border: $bright-grey !default;
+$btn-404-a-hover: $white !default;
+
+// Social Share links pane
+$share-links-background: $japanese-indigo !default;
+$share-links-a: $css-grey !default;
+$share-links-a-hover-active-focus: $bright-grey !default;
+
+// Code block, Mermaid block color
+$pre-code: $bright-grey !default;
+$pre-code-background: transparent !default;
+$code-background:$arsenic !default;
+$syntax-background: $japanese-indigo !default;
+$pre-background: $japanese-indigo !default;
+$mermaid-background: $pine-tree !default;
+
+// Code copy button
+$highlight-copy-btn: $white !default;
+$highlight-copy-btn-hover: $sonic-silver !default;
+$highlight-copy-btn-background: $granite-grey !default;
+
+// Site Header color
+$site-header-background:$arsenic !default;
+
+// Mobile menu color
+$mobile-menu-background: $arsenic !default;
+
+// Accessibility - Screen reader
+$screen-reader-text: $lapis-lazuli !default;
+$screen-reader-text-background: $anti-flash-white !default;
//Admonition colors
$admonition-background: (
- "note": rgba(68, 138, 255, 0.1),
- "info": rgba(0, 184, 212, 0.1),
- "tip": rgba(0, 191, 165, 0.1),
- "success": rgba(0, 200, 83, 0.1),
- "warning": rgba(255, 145, 0, 0.1),
- "failure": rgba(255, 82, 82, 0.1),
- "danger": rgba(255, 23, 68, 0.1),
- "bug": rgba(245, 0, 87, 0.1),
+ "note": rgba($blueberry, $admonition-background-opacity),
+ "info": rgba($turquoise-surf, $admonition-background-opacity),
+ "tip": rgba($caribbean-green, $admonition-background-opacity),
+ "success": rgba($malachite, $admonition-background-opacity),
+ "warning": rgba($dark-orange, $admonition-background-opacity),
+ "failure": rgba($crayola, $admonition-background-opacity),
+ "danger": rgba($awesome, $admonition-background-opacity),
+ "bug": rgba($folly, $admonition-background-opacity),
) !default;
$admonition-color: (
- "note": #448aff,
- "info": #00b8d4,
- "tip": #00bfa5,
- "success": #00c853,
- "warning": #ff9100,
- "failure": #ff5252,
- "danger": #ff1744,
- "bug": #f50057,
+ "note": $blueberry,
+ "info": $turquoise-surf,
+ "tip": $caribbean-green,
+ "success": $malachite,
+ "warning": $dark-orange,
+ "failure": $crayola,
+ "danger": $awesome,
+ "bug": $folly,
) !default;
\ No newline at end of file
diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss
index 1fe225e0..3753e9c4 100644
--- a/assets/scss/_mixins.scss
+++ b/assets/scss/_mixins.scss
@@ -1,3 +1,6 @@
+// These are default SCSS mixins
+// This mixin is used to provide darkish effect in
+// #home-footer, .post-year (in list), .post-day (in list), .post-description (in list), .post-date, .post-description, #TableOfContents
@mixin dimmed {
opacity: $dimmed-opacity;
}
@@ -6,12 +9,12 @@
a {
word-wrap: break-word;
border: none;
- box-shadow: inset 0 -4px 0 $theme;
+ box-shadow: inset 0 -4px 0 $aTag-mixin-a-box-shadow;
transition-property: box-shadow;
transition-duration: 0.1s;
&:hover {
- box-shadow: inset 0 -1em 0 $theme;
+ box-shadow: inset 0 -1em 0 $aTag-mixin-a-hover-box-shadow;
}
}
}
diff --git a/assets/scss/_scrolltotop.scss b/assets/scss/_scrolltotop.scss
index 2cb6a05f..407091a4 100644
--- a/assets/scss/_scrolltotop.scss
+++ b/assets/scss/_scrolltotop.scss
@@ -1,18 +1,4 @@
.scroll-up {
- .scroll {
- #st-ring {
- stroke: $stt-stroke;
- }
-
- #st-circle {
- fill: $stt-circle;
- }
-
- #st-arrow {
- fill: $stt-arrow;
- }
- }
-
position: fixed;
bottom: 10%;
right: 2%;
@@ -29,4 +15,4 @@
.show {
opacity: 1;
transform: translateY(0);
-}
+}
\ No newline at end of file
diff --git a/assets/scss/_socialshare.scss b/assets/scss/_socialshare.scss
index c55f30dd..3ec8311a 100644
--- a/assets/scss/_socialshare.scss
+++ b/assets/scss/_socialshare.scss
@@ -7,7 +7,7 @@
z-index: 1;
box-sizing: border-box;
box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45);
- background-color: $midnightblue;
+ background-color: $share-links-background;
ul {
list-style: none;
@@ -16,11 +16,11 @@
line-height: 2;
font-size: 1.2em;
a {
- color: $highlight-grey;
+ color: $share-links-a;
&:hover,
&:active,
&:focus {
- color: $text;
+ color: $share-links-a-hover-active-focus;
}
}
}
diff --git a/assets/scss/_syntax.scss b/assets/scss/_syntax.scss
index a8fee3d5..a5943e29 100644
--- a/assets/scss/_syntax.scss
+++ b/assets/scss/_syntax.scss
@@ -1,4 +1,4 @@
-/* Background */ .chroma { color: #eee; background-color: $midnightblue }
+/* Background */ .chroma { color: #eee; background-color: $syntax-background; }
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 22266468..c3488800 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,4 +1,7 @@
-@import "predefined.scss";
+@import "colors";
+@import "fonts";
+@import "admonition";
+@import "mixins";
@import "normalize.scss";
@import "syntax.scss";
{{ if ne false .Site.Params.usesAnimation }}
@@ -6,36 +9,68 @@
{{ end }}
@import "scrolltotop.scss";
@import "socialshare.scss";
-{{ if (fileExists "assets/scss/userstyles.scss") }}
+{{- if (fileExists "assets/scss/userstyles.scss") }}
@import "userstyles.scss";
-{{ end }}
+{{ end -}}
+
+// Default Accent Color (accentColor) taken from hugo.toml
+// If accentColor is not present, it will fallback to declarations in _colors.scss
+{{- with .Site.Params.accentColor }}
+$aTag-mixin-a-box-shadow: {{.}};
+$aTag-mixin-a-hover-box-shadow: {{.}};
+$content-anchor-hover: {{.}};
+$footnote-ref-hover-background: {{.}};
+$post-description-a-hover-border-bottom: {{.}};
+$tableofcontents-a-hover-border-bottom: {{.}};
+$scrolltotop-arrow: {{.}};
+$typewriter: {{.}};
+$marked-background: {{.}};
+$inserted-text-underline: {{.}};
+{{ end -}}
+
+// Scroll to Top color defination
+.scroll-up {
+ .scroll {
+ #st-ring {
+ stroke: $scrolltotop-ring;
+ }
+
+ #st-circle {
+ fill: $scrolltotop-circle;
+ }
+
+ #st-arrow {
+ fill: $scrolltotop-arrow;
+ }
+ }
+}
/* text selection */
::-moz-selection {
- background: $highlight-grey;
+ background: $text-select;
}
::selection {
- background: $highlight-grey;
+ background: $text-select;
}
/* Webkit Scrollbar Customize */
::-webkit-scrollbar {
width: 8px;
height: 8px;
- background: $midnightblue;
+ background: $pagescrollbar-background;
}
::-webkit-scrollbar-thumb {
background: $pagescrollbar-thumb;
&:hover {
- background: $text;
+ background: $pagescrollbar-thumb-hover;
}
}
html {
- background: $light-grey;
+ background: $html-background;
line-height: 1.6;
letter-spacing: .06em;
scroll-behavior: smooth;
@@ -45,8 +80,15 @@ body,
button,
input,
select,
-textarea {
+textarea,
+a {
color: $text;
+}
+body,
+button,
+input,
+select,
+textarea {
font-family: $fonts;
}
@@ -55,6 +97,15 @@ code,
pre tt {
font-family: $code-fonts;
}
+mark {
+ color: $marked-text;
+ background-color: $marked-background;
+}
+ins {
+ text-decoration: underline;
+ -webkit-text-decoration-color: $inserted-text-underline;
+ text-decoration-color: $inserted-text-underline;
+}
pre {
padding: .7em 1.1em;
@@ -62,24 +113,24 @@ pre {
line-height: 1.5;
letter-spacing: normal;
white-space: pre;
- color: #eee;
- background: $midnightblue;
+ color: $pre-code;
+ background: $pre-background;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
&.mermaid {
- background: $codebackground;
+ background: $mermaid-background;
}
code {
padding: 0;
margin: 0;
- color: #eee;
- background: transparent;
+ color: $pre-code;
+ background: $pre-code-background;
}
}
code {
color: hsl(0, 1%, 67%);
- background: $dark-grey;
+ background: $code-background;
border-radius: 3px;
padding: 0 3px;
margin: 0 4px;
@@ -104,7 +155,6 @@ blockquote {
}
a {
- color: $text;
text-decoration: none;
border: none;
transition-property: color;
@@ -112,8 +162,8 @@ a {
transition-timing-function: ease-out;
&:hover {
- color: #fff;
- text-shadow: 0 0 1px #fff;
+ color: $a-hover;
+ text-shadow: 0 0 1px $a-hover;
}
}
@@ -135,7 +185,7 @@ table {
th,
td {
- padding: 0.5rem;
+ padding: 1.5%;
border: 1px solid;
}
@@ -194,15 +244,15 @@ table {
padding: 1px;
font-size: 0.7em;
line-height: 1.8;
- color: #fff;
- background-color: #777;
+ color: $highlight-copy-btn;
+ background-color: $highlight-copy-btn-background;
opacity: 0.6;
min-width: 55px;
text-align: center;
}
.highlight-copy-btn:hover {
- background-color: #666;
+ background-color: $highlight-copy-btn-hover;
}
// Accessibility
@@ -221,12 +271,12 @@ table {
}
.screen-reader-text:focus {
- background-color: #f1f1f1;
+ background-color: $screen-reader-text-background;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
- color: #21759b;
+ color: $screen-reader-text;
display: block;
font-size: 0.875rem;
font-weight: bold;
@@ -249,7 +299,7 @@ table {
width: 100%;
box-sizing: border-box;
box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.45);
- background-color: $dark-grey;
+ background-color: $site-header-background;
animation-duration: .3s;
animation-fill-mode: forwards;
}
@@ -274,7 +324,7 @@ table {
.has-children {
padding-right: .5em;
- border-right: 2px solid $highlight-grey;
+ border-right: 2px solid $site-nav-children-border-right;
}
.sub-menu > a{
@@ -323,7 +373,7 @@ table {
z-index: 1;
box-sizing: border-box;
box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45);
- background-color: $dark-grey;
+ background-color: $mobile-menu-background;
ul {
list-style: none;
@@ -390,7 +440,7 @@ p.img-404 {
a {
display: inline-block;
- border: 2px solid $text;
+ border: 2px solid $btn-404-a-border;
border-radius: 5px;
padding: 5px;
transition-property: color, border-color;
@@ -400,7 +450,7 @@ p.img-404 {
}
&:hover {
- border-color: #fff;
+ border-color: $btn-404-a-hover;
}
svg {
@@ -489,7 +539,7 @@ p.img-404 {
}
.post-item {
- border-bottom: 1px $highlight-grey dashed;
+ border-bottom: 1px $post-item-border-bottom dashed;
a {
display: flex;
@@ -515,7 +565,7 @@ p.img-404 {
display: flex;
margin-bottom: 1.9em;
line-height: normal;
- border-bottom: 2px $highlight-grey solid;
+ border-bottom: 2px $pinned-posts-group-border-bottom solid;
.pinned-posts-list {
flex-grow: 1;
@@ -562,7 +612,7 @@ p.img-404 {
margin-top: 1.2em;
line-height: normal;
- .post-meta {
+ .post-date {
font-size: .9em;
letter-spacing: normal;
@include dimmed;
@@ -641,7 +691,7 @@ hr.post-end {
opacity: .8;
&:hover {
background: none;
- color: $theme;
+ color: $content-anchor-hover;
opacity: 1;
}
@@ -694,16 +744,16 @@ a.footnote-ref {
text-decoration: none;
padding: 2px;
border-radius: 2px;
- background-color: $midnightblue;
+ background-color: $footnote-ref-background;
&:hover{
box-shadow: none;
- background-color: $theme;
+ background-color: $footnote-ref-hover-background;
transition-property: background-color;
}
}
-.post-info {
+.post-description {
font-size: .8rem;
line-height: normal;
@include dimmed;
@@ -713,7 +763,7 @@ a.footnote-ref {
}
a:hover {
- border-bottom: 1px solid $theme;
+ border-bottom: 1px solid $post-description-a-hover-border-bottom;
}
svg {
@@ -741,6 +791,7 @@ a.footnote-ref {
left: 50%;
top: 0;
display: none;
+ background-color: $tableofcontents-background;
}
.toc-title {
@@ -768,17 +819,17 @@ a.footnote-ref {
/* Track */
&>::-webkit-scrollbar-track {
- background: darken($pagescrollbar-thumb, 10%);
+ background: $tableofcontents-scrollbar-track;
}
/* Handle */
&>::-webkit-scrollbar-thumb {
- background: $midnightblue ;
+ background: $tableofcontents-scrollbar-thumb ;
}
/* Handle on hover */
&>::-webkit-scrollbar-thumb:hover {
- background: lighten($midnightblue, 10%);
+ background: $tableofcontents-scrollbar-thumb-hover;
}
&>ul {
@@ -792,11 +843,10 @@ a.footnote-ref {
}
a:hover {
- border-bottom: $theme 1px solid;
+ border-bottom: $tableofcontents-a-hover-border-bottom 1px solid;
}
}
-
.post-nav {
display: flex;
justify-content: space-between;
@@ -999,7 +1049,7 @@ a.footnote-ref {
}
// If homeSubtitlePrinter is true
-{{ if .Site.Params.homeSubtitlePrinter }}
+{{- if .Site.Params.homeSubtitlePrinter }}
#home-subtitle{
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .5em solid $typewriter; /* The typwriter cursor */
@@ -1020,4 +1070,4 @@ a.footnote-ref {
from, to { border-color: transparent }
50% { border-color: $typewriter}
}
-{{ end }}
+{{ end -}}
diff --git a/hugo.toml.example b/hugo.toml.example
index 955aba52..f0676f1c 100644
--- a/hugo.toml.example
+++ b/hugo.toml.example
@@ -88,6 +88,7 @@ expiryDate = ["expiryDate"]
# description = "CHANGE ME SITE DESCRIPTION"
# images = [""]
themeColor = "#494f5c"
+ accentColor = "#018472"
#homeSubtitle = "CHANGE ME HOME SUBTITLE"
footerCopyright = "CHANGE ME FOOTER COPYRIGHT"
diff --git a/layouts/partials/site-meta.html b/layouts/partials/site-meta.html
index 4fce7cd0..65eb77f1 100644
--- a/layouts/partials/site-meta.html
+++ b/layouts/partials/site-meta.html
@@ -24,7 +24,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="{{"favicon-16x16.png" | relURL}}">
<link rel="manifest" href="{{"site.webmanifest" | relURL}}">
<meta name="msapplication-TileImage" content="{{"mstile-144x144.png" | relURL}}">
-{{ with .Site.Params.themeColor -}}
+{{ with $themeColor := .Site.Params.themeColor | default "#494f5c" -}}
<meta name="theme-color" content="{{.}}">
<meta name="msapplication-TileColor" content="{{.}}">
<link rel="mask-icon" href="{{"safari-pinned-tab.svg" | relURL}}" color="{{.}}">
diff --git a/layouts/partials/svg.html b/layouts/partials/svg.html
index 3937a2b8..93ae4982 100644
--- a/layouts/partials/svg.html
+++ b/layouts/partials/svg.html
@@ -499,10 +499,12 @@
</svg>
{{- else if (eq .name "threads") -}}
<svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a14 14 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32l-1.757-1.18c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388q.163.07.321.142c1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69q-.362 0-.739.021c-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221"/></svg>
+ {{- else if (eq .name "content-link") -}}
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
{{- else -}}
<svg xmlns="http://www.w3.org/2000/svg" class="feather feather-link" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
- {{- end -}}
\ No newline at end of file
+ {{- end -}}
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index e3133250..fdd2f77f 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -20,28 +20,28 @@
{{- if and (not (eq .Site.Params.legacyLayout nil)) (.Site.Params.legacyLayout) -}}
<article class="thin">
<header class="post-header">
- <div class="post-meta"><span>{{ .Date.Format .Site.Params.dateform }}</span></div>
+ <div class="post-date"><span>{{ .Date.Format .Site.Params.dateform }}</span></div>
<h1>{{ .Title }}</h1>
</header>
<div class="content">
- {{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
+ {{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true">{{- partial "svg.html" (dict "context" . "name" "content-link") }}</a>${3}` | safeHTML }}
</div>
{{- if .Site.Params.relatedPosts }}
{{- partial "related-posts.html" . -}}
{{- end }}
<hr class="post-end">
- <footer class="post-info">{{- partial "posts_single_info.html" . -}}</footer>
+ <footer class="post-description">{{- partial "posts_single_info.html" . -}}</footer>
</article>
{{- else -}}
<article class="thin">
<header class="post-header">
- <div class="post-meta"><span>{{ .Date.Format .Site.Params.dateform }}</span></div>
+ <div class="post-date"><span>{{ .Date.Format .Site.Params.dateform }}</span></div>
<h1>{{ .Title }}</h1>
</header>
- <div class="post-info">{{- partial "posts_single_info.html" . -}}</div>
+ <div class="post-description">{{- partial "posts_single_info.html" . -}}</div>
<hr class="post-end">
<div class="content">
- {{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
+ {{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true">{{- partial "svg.html" (dict "context" . "name" "content-link") }}</a>${3}` | safeHTML }}
</div>
{{ partial "brainMade.html" . }}
{{- if .Site.Params.relatedPosts }}