Replace typewriter cursor with CSS blink animation for poet field

This commit is contained in:
2026-05-14 02:11:50 +08:00
parent 680f10b66a
commit e965204401
3 changed files with 43 additions and 29 deletions
+15 -2
View File
@@ -78,8 +78,18 @@ html.dark .theme-toggle-light {
display: none;
}
/* Typewriter cursor blink */
@keyframes tk-blink {
/* Vim-style block cursor via ::after */
#typewriter-text::after {
content: "";
display: inline-block;
width: 0.6em;
height: 1.1em;
background: #999;
vertical-align: text-bottom; transform: translateY(-2px);
margin-left: 1px;
animation: vim-blink 0.8s step-end infinite;
}
@keyframes vim-blink {
0%,
100% {
opacity: 1;
@@ -88,3 +98,6 @@ html.dark .theme-toggle-light {
opacity: 0;
}
}
.dark #typewriter-text::after {
background: #ccc;
}
+4 -2
View File
@@ -3,6 +3,10 @@ title: "极简主义的实用指南:少即是多"
date: 2026-05-12T17:00:00+08:00
draft: false
description: "极简不等于空无一物。从手机关通知、统一信息入口、减少收藏即学到,到物品的一年法则和精神层面的少承诺、少比较、少内耗,一套可立刻上手的实用方法。"
poet: "驾驶教练机拉杆起飞的那一刻
宇治城的小溪边被斜阳刺痛双眼的那一刻
在广汕国道上骑自行车听到路旁大爷大喊加油的那一刻
我清楚的感受到我是我自己"
tags:
- 极简
- 生活
@@ -41,5 +45,3 @@ tags:
- **少内耗** — 纠结 5 分钟还没决定的事,说明选哪个都行
---
极简不是目的,是手段。腾出空间和精力,才能放在真正重要的事情上。
+6 -7
View File
@@ -42,17 +42,14 @@
</div>
<div class="content">
{{ .Content }}
</div>
<div class="hx:mt-16 hx:py-8 hx:px-4 hx:border-t hx:border-neutral-200 hx:dark:border-neutral-800" id="typewriter-box" style="opacity:0;transition:opacity .6s">
<p class="hx:text-base hx:leading-8 hx:text-gray-500 hx:dark:text-gray-400 hx:whitespace-pre-wrap">
<span id="typewriter-text"></span><span id="typewriter-cursor" style="display:inline-block;width:2px;height:1.1em;background:#999;vertical-align:middle;margin-left:1px;animation:tk-blink .8s step-end infinite"></span>
</p>
{{- with .Params.poet }}
<div id="typewriter-box" style="opacity:0;transition:opacity .6s">
<p id="typewriter-text"></p>
</div>
<script>
(function(){
var p=["驾驶教练机拉杆起飞的那一刻","宇治城的小溪边被斜阳刺痛双眼的那一刻","在广汕国道上骑自行车听到路旁大爷大喊加油的那一刻","我清楚的感受到我是我自己"];
var all="";p.forEach(function(l,i){all+=l;if(i<p.length-1)all+="\n"});
var all=`{{ . }}`;
var i=0,del=false,dc=0;
var te=document.getElementById("typewriter-text");
var box=document.getElementById("typewriter-box");
@@ -69,6 +66,8 @@
},del?55+Math.random()*30:70+Math.random()*100)}
})();
</script>
{{- end }}
</div>
{{- partial "components/last-updated.html" . -}}
{{- if (site.Params.blog.article.displayPagination | default true) -}}