✨ Feat: add about layout and add simple transition for link

bambooom · Feb 5, 2024 · 4ae8b19 · 4ae8b19
1 parent 92956f8
commit 4ae8b19
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 10 deletions.
diff --git a/assets/css/extended/about.css b/assets/css/extended/about.css
@@ -1,11 +1,6 @@
-.about-page .post-content a {
-  box-shadow: none;
-  color: rgb(167 139 250);
-  transition: all 0.2s cubic-bezier(.4,0,.2,1);
-}
-
-.about-page .post-content a:hover {
-  color: rgb(139 92 246);
+.about-page .post-content a:not(.anchor) {
+  border-bottom: solid 2px var(--purple);
+  background-image: linear-gradient(to top, var(--purple), var(--purple));
 }
 
 .about-page .post-content ul {

diff --git a/content/about.md b/content/about.md
@@ -1,7 +1,10 @@
 ---
 title: "About"
+layout: "about"
+date: 2024-02-04
 url: "/about/"
-pageClass: "about-page"
+comments: true
+ShowReadingTime: false
 ---
 
 
@@ -51,6 +54,7 @@ pageClass: "about-page"
 
 ### Changelog
 
+- 2024.2: Change to use Hugo to build as it's super fast. Using [PaperMod](https://github.com/adityatelange/hugo-PaperMod) template with my modifications
 - 2023.10: Change to use Astro.build, and using [MaeWolff's template](https://github.com/MaeWolff/astro-portfolio-template) with adjustments
 - 2021.7:  Import diaries from douban for backup reason
 - 2017.2:  Switched to [KAGAMI theme](https://github.com/kamikat/jekyll-theme-kagami) with adjustments

diff --git a/themes/PaperMod/assets/css/common/header.css b/themes/PaperMod/assets/css/common/header.css
@@ -38,6 +38,11 @@
 
 .logo a, .logo button {
     color: var(--nav-text);
+    transition: all 0.3s ease-in-out;
+}
+
+.logo a:hover {
+    color: var(--red);
 }
 
 button#theme-toggle {

diff --git a/themes/PaperMod/assets/css/common/post-single.css b/themes/PaperMod/assets/css/common/post-single.css
@@ -75,12 +75,16 @@
 .post-content a:not(.anchor) {
     border-bottom: solid 2px var(--pink);
     transition: all 0.2s cubic-bezier(.4,0,.2,1);
+    background-image: linear-gradient(to top, var(--pink), var(--pink));
+    background-size: 100% 0;
+    background-position: 0 101%;
+    background-repeat: no-repeat;
 }
 
 
 .post-content a:not(.anchor):hover {
-    background: var(--pink);
     color: var(--entry);
+    background-size: 100% 100%;
 }
 
 .toc a:hover {

diff --git a/themes/PaperMod/assets/css/core/theme-vars.css b/themes/PaperMod/assets/css/core/theme-vars.css
@@ -21,6 +21,7 @@
     --nav-text: #444;
     --red: rgb(236 72 153);
     --pink: rgb(249 168 212);
+    --purple: rgb(167 139 250);
 }
 
 .dark {

diff --git a/themes/PaperMod/layouts/_default/about.html b/themes/PaperMod/layouts/_default/about.html
@@ -0,0 +1,29 @@
+{{- define "main" }}
+
+{{- if .Title }}
+<header class="page-header">
+    <h1>{{ .Title }}</h1>
+</header>
+{{- end }}
+
+<article class="post-single about-page">
+  <header class="post-header">
+    <div class="post-meta">
+      {{- partial "post_meta.html" . -}}
+    </div>
+  </header>
+  {{- $isHidden := (.Param "cover.hiddenInSingle") | default (.Param "cover.hidden") | default false }}
+  {{- partial "cover.html" (dict "cxt" . "IsSingle" true "isHidden" $isHidden) }}
+
+  {{- if .Content }}
+  <div class="post-content">
+    {{- if not (.Param "disableAnchoredHeadings") }}
+    {{- partial "anchored_headings.html" .Content -}}
+    {{- else }}{{ .Content }}{{ end }}
+  </div>
+  {{- end }}
+
+</article>
+
+
+{{- end }}{{/* end main */}}