diff options
27 files changed, 47 insertions, 65 deletions
diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss index 157e0945..6daa9f0d 100644 --- a/assets/css/utils/_utility.scss +++ b/assets/css/utils/_utility.scss @@ -1,15 +1,3 @@ -.dark { - .invert-if-dark { - filter: invert(1) - } -} - -@media (prefers-color-scheme: dark) { - .invert-if-dark { - filter: invert(1) - } -} - .outbox { display: flex; justify-content: center; @@ -40,14 +28,6 @@ } } -.font-mono { - font-family: var(--mono-font-family); -} - -.font-secondary { - color: var(--secondary-text-color)!important; -} - .xerox { filter: url(#x); } diff --git a/assets/css/utils/_variables.scss b/assets/css/utils/_variables.scss index c557ed87..72b37563 100644 --- a/assets/css/utils/_variables.scss +++ b/assets/css/utils/_variables.scss @@ -10,9 +10,6 @@ --bright-background-color: #fafafa; /* fonts */ - --mono-font-family: - "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", - "Lucida Console", monospace; --serif-font-family: "Noto Serif", "Noto Serif SC", serif; --content-font-size: 16px; @media screen and (min-width: 768px) { diff --git a/content/posts/weekly/22.md b/content/posts/weekly/22.md index bfe7349c..fad88552 100644 --- a/content/posts/weekly/22.md +++ b/content/posts/weekly/22.md @@ -89,7 +89,7 @@ Git 是一个版本管理软件，常用于软件开发。Commit 是 Git 的一 而 Michael Lynch 在《[No Longer My Favorite Git Commit](https://mtlynch.io/no-longer-my-favorite-git-commit/)》中指出事无巨细地描述修改过程并不是好的软件工程，并展示了一个「倒金字塔」模型。 -<img src="https://image.guhub.cn//uPic/inverted-pyramid.png" class="invert-if-dark"> +<img src="https://image.guhub.cn//uPic/inverted-pyramid.png" class="dark:invert"> 倒金字塔顶端是「所有人都在乎的东西」，其次是「一些人会在乎的东西」，最次是「很少人在乎的东西」。倒金字塔既表示了顺序，也表示了占比。也就是说，所有人都在乎的东西应该放在最前面，且应该是最多的；很少有人在乎的东西应该放在最后，而且应该尽可能言简意赅。 diff --git a/content/posts/专家的直觉.md b/content/posts/专家的直觉.md index d9a3a6f7..2e023f2e 100644 --- a/content/posts/专家的直觉.md +++ b/content/posts/专家的直觉.md @@ -42,7 +42,7 @@ draft: false 久而久之，你就可以抛弃你原来的系统，按照相似的思想和决策方式行事。即使没有直接屏蔽干扰，也没有明确的路径，你仍然能够通过直觉找到方向。  -{.invert-if-dark} +{.dark:invert} 可以把先前践行的规则和使用的工具当作「引路人」的角色，当这条路走多了，即使引路人离开了你，你依然能在迷宫中找到正确的路径。 diff --git a/content/posts/扩张惯性.md b/content/posts/扩张惯性.md index a73020f5..06a6b402 100644 --- a/content/posts/扩张惯性.md +++ b/content/posts/扩张惯性.md @@ -8,7 +8,7 @@ tags: - 手写文章 --- -<div class="invert-if-dark"> +<div class="dark:invert">  @@ -16,7 +16,7 @@ tags: <!--more--> -<div class="invert-if-dark"> +<div class="dark:invert">  @@ -68,4 +68,4 @@ tags: --- -inspired by [SkyWrite](https://write.skywt.cn)
\ No newline at end of file +inspired by [SkyWrite](https://write.skywt.cn) diff --git a/content/posts/明确讨论的范围.md b/content/posts/明确讨论的范围.md index c1c3ac93..5ffb24d8 100644 --- a/content/posts/明确讨论的范围.md +++ b/content/posts/明确讨论的范围.md @@ -76,7 +76,7 @@ featured: true 允许了第二条「对目的本身的质疑和想法」存在，就允许讨论目的随着讨论的深入而发生改变。比如，人们已开始只是在讨论「怎么给自行车修棚」，当有人提出「为什么不给摩托车修棚？」并针对目的进行讨论之后，讨论的目的就可能变成「怎么给自行车和摩托车修棚」。这时候再严格地在范围内进行讨论，就不容易出错。  -{.invert-if-dark} +{.dark:invert} ## 讨论中词句的目的 diff --git a/content/posts/零JavaScript的博客统计图表.md b/content/posts/零JavaScript的博客统计图表.md index c6903101..7d36bbe8 100644 --- a/content/posts/零JavaScript的博客统计图表.md +++ b/content/posts/零JavaScript的博客统计图表.md @@ -28,7 +28,7 @@ slug: zero-js-chart <div class="time-chart-container"> <div class="time-chart-wrapper"> <div class="time-icon">☀️</div> - <div class="time-chart-bar invert-if-dark"> + <div class="time-chart-bar dark:invert"> <!-- for each time segement --> <div class="time-segment" style="width: {{$percentage}}"> @@ -38,10 +38,10 @@ slug: zero-js-chart </div> <div class="time-icon">🌙</div> </div> - + <div class="time-counts"> <!-- for each time segement --> - <div class="count-item" + <div class="count-item" style="width: {{$percentage}}"> <span class="count-number">{{$count}}</span> </div> diff --git a/layouts/_partials/components/logo.html b/layouts/_partials/components/logo.html index 1bb967a0..63f500c5 100644 --- a/layouts/_partials/components/logo.html +++ b/layouts/_partials/components/logo.html @@ -7,6 +7,6 @@ <a href="{{ .Site.LanguagePrefix }}/{{ $link }}" class="title-image-container {{ $class }}"> <img src="{{ $src }}" alt="Logo" - class="invert-if-dark title-image {{ $imageClass }}" + class="dark:invert title-image {{ $imageClass }}" style="view-transition-name: title-image" /> </a> diff --git a/layouts/_partials/components/tags.html b/layouts/_partials/components/tags.html index b08230d9..78d87f5b 100644 --- a/layouts/_partials/components/tags.html +++ b/layouts/_partials/components/tags.html @@ -1,3 +1,3 @@ {{ range .Params.tags }} -<a class="tag font-secondary no-underline!" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a> +<a class="tag text-secondary no-underline!" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a> {{ end }} diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html index baf79c06..38bedc12 100644 --- a/layouts/_partials/footer.html +++ b/layouts/_partials/footer.html @@ -11,7 +11,7 @@ <ul class="list-none flex gap-1 ps-0 my-2 mx-0 md:justify-end"> {{ range .Site.Params.footerInternalLinks }} <li><a href="{{ .link }}" title="{{ .name }}">{{ .name }}</a></li> - <li class="font-secondary last:hidden ml-1">/</li> + <li class="text-secondary last:hidden ml-1">/</li> {{ end }} <li class="inline-flex items-center"> {{ if eq .Site.Language.Lang "en" }} diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html index 554b1f58..754bbf2d 100644 --- a/layouts/_partials/header.html +++ b/layouts/_partials/header.html @@ -28,7 +28,7 @@ {{- $entry := index $switch $lang -}} <a href="{{ $entry.url }}" data-umami-event="🌍 Switch Language" class="no-swup" title="{{ $entry.label }}"> - <img src="/img/globe.svg" class="invert-if-dark block w-[1.2em] h-[1.2em]"> + <img src="/img/globe.svg" class="dark:invert block w-[1.2em] h-[1.2em]"> </a> </div> </header> diff --git a/layouts/_partials/home/home-nav.html b/layouts/_partials/home/home-nav.html index 4dea2222..2d8e539d 100644 --- a/layouts/_partials/home/home-nav.html +++ b/layouts/_partials/home/home-nav.html @@ -19,10 +19,10 @@ (strings.HasPrefix $.Page.RelPermalink "/tags/")) ) }} {{ end }} - <li id="search-instruction" class="text-size-sm font-secondary ml-2"> + <li id="search-instruction" class="text-size-sm text-secondary ml-2"> <span>{{ T "searchInstruction" }}</span> </li> - <li class="absolute right-0 invert-if-dark"> + <li class="absolute right-0 dark:invert"> <a href="{{ .Site.LanguagePrefix }}/stats" class="opacity-50 transition-opacity duration-300 hover:opacity-100 {{ if eq "/stats/" $.Page.RelPermalink }} opacity-100 font-bolder{{ end }}" diff --git a/layouts/_partials/items/post-small.html b/layouts/_partials/items/post-small.html index 30cbf60f..644cb106 100644 --- a/layouts/_partials/items/post-small.html +++ b/layouts/_partials/items/post-small.html @@ -1,9 +1,9 @@ <li class="flex justify-between text-size-lg"> <a href="{{ .RelPermalink }}" data-umami-event="🗃️ Click Post Link from Category Page"> - {{ .Title }}{{ with .Params.subtitle }}：<span class="font-secondary">{{. }}</span> + {{ .Title }}{{ with .Params.subtitle }}：<span class="text-secondary">{{. }}</span> {{ end }} </a> - <time class="text-size-sm font-mono font-secondary flex-shrink-0"> + <time class="text-size-sm font-mono text-secondary flex-shrink-0"> {{ .Date.Format "2006-1-2" }} </time> </li> diff --git a/layouts/_partials/items/post.html b/layouts/_partials/items/post.html index 8bbd68a8..3e426c56 100644 --- a/layouts/_partials/items/post.html +++ b/layouts/_partials/items/post.html @@ -4,7 +4,7 @@ style="view-transition-name: post-{{ .ctx.File.UniqueID }}"> <header class="w-full md:flex md:justify-between"> <div> - <p class="font-mono font-secondary"> + <p class="font-mono text-secondary"> <time>{{ .ctx.Date.Format "January 2" }},</time> <span>in <a href="/{{ .Section }}/">{{ .ctx.Section }}</a></span> </p> diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html index c1d4cd55..1bd639e9 100644 --- a/layouts/_partials/posts/action-menu.html +++ b/layouts/_partials/posts/action-menu.html @@ -2,7 +2,7 @@ <!-- 操作按钮组 --> <div class="flex justify-between items-center mb-6"> <div class="flex gap-2"> - <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论"> + <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论"> <img src="/img/comments.svg" width="20" height="20" alt="评论" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" /> <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="comment-count">...</span> <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">评论</div> @@ -10,7 +10,7 @@ <!-- 点赞按钮 --> <div class="relative" id="like-container-{{ .File.UniqueID | urlize }}"> - <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" + <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" onclick="sendLike('{{ .File.UniqueID | urlize }}')" id="like-btn-{{ .File.UniqueID | urlize }}" title="为这篇文章献上心脏" @@ -23,11 +23,11 @@ </div> <div class="flex gap-1"> - <a href="https://t.me/teaparty418" target="_blank" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs"> + <a href="https://t.me/teaparty418" target="_blank" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs"> <img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" /> <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">Telegram 群组</div> </a> - <a href="/sponsor" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs"> + <a href="/sponsor" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs"> <img src="/img/coffee.svg" width="16" height="16" alt="赞助" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" /> <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">赞助作者</div> </a> diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html index 2a0f1027..49638618 100644 --- a/layouts/_partials/posts/comment.html +++ b/layouts/_partials/posts/comment.html @@ -2,17 +2,17 @@ {{ with .Params.comments }} <!-- Static Comments --> <div class="my-8"> - <p class="font-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p> + <p class="text-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p> {{ range . }} <div class="text-xl border-b border-solid border-[#ccc] py-4 px-1"> <div class="mb-4 flex justify-between"> <span class="font-bold">{{ .name }}</span> - <span class="font-secondary">{{ .date }}</span> + <span class="text-secondary">{{ .date }}</span> </div> <div> {{ .content | safeHTML }} </div> - <div class="text-4 text-right font-secondary"> + <div class="text-4 text-right text-secondary"> {{ with .source }} <p class="font-mono">{{ T "postPage.originallyPostedOn" . }}</p> {{ end }} diff --git a/layouts/_partials/posts/endnotes.html b/layouts/_partials/posts/endnotes.html index 83004f0f..364becab 100644 --- a/layouts/_partials/posts/endnotes.html +++ b/layouts/_partials/posts/endnotes.html @@ -1,6 +1,6 @@ {{ if .Params.endnotes }} <hr> -<div id="post-endnotes" class="font-secondary text-4"> +<div id="post-endnotes" class="text-secondary text-4"> <ul class="list-none"> {{ range .Params.endnotes }} <li class="flex gap-4 pl-4"><span>→</span> {{ . | markdownify }}</li> diff --git a/layouts/_partials/posts/now-read-this.html b/layouts/_partials/posts/now-read-this.html index 8a9be489..dae3aca0 100644 --- a/layouts/_partials/posts/now-read-this.html +++ b/layouts/_partials/posts/now-read-this.html @@ -6,10 +6,10 @@ <a class="font-800" href="{{ .RelPermalink }}" data-umami-event="🤔 Click Related Post"> {{ .LinkTitle }} {{ with .Params.subtitle }} - <span class="font-secondary font-normal">：{{ . }}</span> + <span class="text-secondary font-normal">：{{ . }}</span> {{ end }} </a> - <span class="font-secondary">⏱️ {{ .ReadingTime }}min </span> + <span class="text-secondary">⏱️ {{ .ReadingTime }}min </span> </div> <div class="font-light"> <p>{{ .Summary | plainify }}</p> diff --git a/layouts/_partials/stats/external-link-rank.html b/layouts/_partials/stats/external-link-rank.html index 0bf32c5a..70286b30 100644 --- a/layouts/_partials/stats/external-link-rank.html +++ b/layouts/_partials/stats/external-link-rank.html @@ -20,7 +20,7 @@ class="w-4 h-4"/> {{ $label }} </a> - <span class="font-secondary font-mono">{{ $count }}</span> + <span class="text-secondary font-mono">{{ $count }}</span> </div> <div class="bg-gray-200 absolute top-0 left-0 right-0 bottom-0 -z-1" style="width:{{ $percent }}%"></div> </li> diff --git a/layouts/_partials/stats/publish-time-chart.html b/layouts/_partials/stats/publish-time-chart.html index 795ecf25..3fa35078 100644 --- a/layouts/_partials/stats/publish-time-chart.html +++ b/layouts/_partials/stats/publish-time-chart.html @@ -41,7 +41,7 @@ <div class="w-full max-w-[700px] my-4"> <div class="flex items-center gap-4 mb-4"> <div class="text-size-2xl flex-shrink-0">☀️</div> - <div class="flex gap-2 w-full h-6 invert-if-dark"> + <div class="flex gap-2 w-full h-6 dark:invert"> {{ range $fuzzyTimes }} {{ $count := index $timeCounts .label }} {{ if gt $total 0 }} @@ -68,7 +68,7 @@ {{ if gt $count 0 }} {{ $percentage := div (mul $count 100.0) $total }} <div class="flex flex-col items-center text-size-xs - font-secondary font-mono" + text-secondary font-mono" style="width: {{ printf "%.1f" $percentage }}%;"> <span class="font-600 text-[var(--primary-text-color)]">{{ $count }}</span> </div> diff --git a/layouts/_partials/stats/word-count-chart.html b/layouts/_partials/stats/word-count-chart.html index ad7347db..835ecbda 100644 --- a/layouts/_partials/stats/word-count-chart.html +++ b/layouts/_partials/stats/word-count-chart.html @@ -35,7 +35,7 @@ w-4 gap-1 h-[200px] relative"> <div class="text-size-[0.65rem]" style="writing-mode: vertical-rl;">{{ $val }}</div> - <div class="w-full bg-gray-900 flex-shrink-0 transition invert-if-dark" + <div class="w-full bg-gray-900 flex-shrink-0 transition dark:invert" style="height: {{ printf "%.1f" $height }}%; background-color: rgba(20,20,20,{{ printf "%.2f" $opacity }});"></div> </div> diff --git a/layouts/cards/page.html b/layouts/cards/page.html index 551b69de..232c9593 100644 --- a/layouts/cards/page.html +++ b/layouts/cards/page.html @@ -20,7 +20,7 @@ {{- /* 如果有文章引用这个卡片，就显示它们 */ -}} {{ if gt (len $referencedBy) 0 }} <section class="related-posts post-content my-5"> - <h2 class="text-5 font-secondary m-0">引用了本卡片的文章</h2> + <h2 class="text-5 text-secondary m-0">引用了本卡片的文章</h2> <ul class="my-4"> {{- range $referencedBy }} <li> diff --git a/layouts/fictions/page.html b/layouts/fictions/page.html index d7724f89..dda4e884 100644 --- a/layouts/fictions/page.html +++ b/layouts/fictions/page.html @@ -12,7 +12,7 @@ class="xerox text-4xl font-900" data-pagefind-meta="title" ><span style="view-transition-name: post-{{ .File.UniqueID }}">{{ .Title }}</span></h1> - <div class="font-secondary">{{ partial "components/date" . }}</div> + <div class="text-secondary">{{ partial "components/date" . }}</div> </header> <!-- Post Content --> diff --git a/layouts/library/page.html b/layouts/library/page.html index 7c125eb6..57007f04 100644 --- a/layouts/library/page.html +++ b/layouts/library/page.html @@ -32,7 +32,7 @@ </div> <!-- Endnotes --> {{ partial "posts/endnotes" . }} - <div class="text-size-base font-secondary"> + <div class="text-size-base text-secondary"> <p>于 {{ partial "components/date" . }} 读完</p> </div> </div> diff --git a/layouts/posts/page.html b/layouts/posts/page.html index f965f0bb..470a00c1 100644 --- a/layouts/posts/page.html +++ b/layouts/posts/page.html @@ -22,12 +22,12 @@ <h1 class="text-size-3xl font-900 xerox"> <span data-pagefind-meta="title">{{ .Title }}</span> {{ with .Params.subtitle }} - <small class="block font-secondary font-italic text-size-xl">{{ . }}</small> + <small class="block text-secondary font-italic text-size-xl">{{ . }}</small> {{ end }} </h1> <!-- Post Meta --> <div class="flex flex-wrap items-center gap-2"> - <span class="font-secondary">{{ partial "components/date" . }}</span> + <span class="text-secondary">{{ partial "components/date" . }}</span> {{ if or .Params.categories .Params.tags }}<span>·</span>{{ end }} {{ partial "components/category-pill" . }} {{ partial "components/tags" . }} diff --git a/layouts/section.html b/layouts/section.html index 47ece146..7cb4681a 100644 --- a/layouts/section.html +++ b/layouts/section.html @@ -10,7 +10,7 @@ py-2 text-6 sticky top-0 bg-[var(--background-color)] z-1 flex justify-between items-center"> {{ .Key }} - <small class="font-mono font-secondary text-3">{{ T "archivePage.postCountAnnual" (len .Pages) }}</small> + <small class="font-mono text-secondary text-3">{{ T "archivePage.postCountAnnual" (len .Pages) }}</small> </h1> {{ range .Pages.GroupByDate "January" }} @@ -19,7 +19,7 @@ <h2 class="text-size-lg inline-block w-full m-0 flex justify-between items-center"> {{ .Key }} - <small class="font-mono font-secondary text-3">{{ T "archivePage.postCountMonthly" (len .Pages) }}</small> + <small class="font-mono text-secondary text-3">{{ T "archivePage.postCountMonthly" (len .Pages) }}</small> </h2> </summary> <ul class="ps-0 flex flex-col gap-2 list-none leading-relaxed"> diff --git a/uno.config.js b/uno.config.js index 53f2ec13..c7a6c1d8 100644 --- a/uno.config.js +++ b/uno.config.js @@ -1,4 +1,4 @@ -import { defineConfig, presetWind3, presetAttributify } from 'unocss' +import { defineConfig, presetWind3, presetAttributify, presetWebFonts } from 'unocss' const range = (n, fn) => Array.from({ length: n }, (_, i) => fn(i)); @@ -16,13 +16,18 @@ export default defineConfig({ presetAttributify(), presetWind3({ dark: 'media' - }), + }) ], theme: { colors: { blockBg: 'var(--block-background-color)', bg: 'var(--background-color)', - textColor: 'var(--text-color)' + textColor: 'var(--text-color)', + secondary: 'var(--secondary-text-color)' + }, + fontFamily: { + mono: ["Courier New", "Courier", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Lucida Console"], + serif: ["Noto Serif", "Noto Serif SC", "serif"], } }, shortcuts: { |