clarity-theme 0.1.0

package/app/app.config.ts

@@ -0,0 +1,110 @@
+/**
+ * Clarity Theme UI 默认配置。
+ *
+ * 站点数据（标题、作者、文章分类等）来自根目录 clarity.config.ts，
+ * 由 modules/clarity-config 注入到 appConfig.clarity 中。
+ *
+ * 消费项目可在自己的 app/app.config.ts 中按需覆盖任意键。
+ */
+export default defineAppConfig({
+	clarity: {
+		// @keep-sorted
+		component: {
+			alert: {
+				/** 默认使用卡片风格还是扁平风格 */
+				defaultStyle: 'card' as 'card' | 'flat',
+			},
+
+			codeblock: {
+				/** 代码块触发折叠的行数 */
+				triggerRows: 32,
+				/** 代码块折叠后的行数 */
+				collapsedRows: 16,
+				/** 启用代码块缩进导航会关闭空格渲染 */
+				enableIndentGuide: true,
+				/** 代码块缩进导航竖线匹配空格数 */
+				indent: 4,
+				/** tab 渲染宽度 */
+				tabSize: 3,
+			},
+
+			/** 文章开头摘要 */
+			excerpt: {
+				animation: true,
+				caret: '_',
+			},
+
+			/** 精选文章 Slide */
+			slide: {
+				/** 适合封面图无字时启用 */
+				showTitle: true,
+			},
+
+			stats: {
+				/** 归档页面每年标题对应的年龄，无需展示时可留空 */
+				birthYear: undefined as number | undefined,
+			},
+		},
+
+		// @keep-sorted
+		footer: {
+			/** 侧边栏底部图标导航 */
+			iconNav: [] as { icon: string, text: string, url: string }[],
+			/** 页脚站点地图 */
+			nav: [] as {
+				title: string
+				items: { icon: string, text: string, url: string }[]
+			}[],
+		},
+
+		/** 左侧栏顶部 Logo */
+		header: {
+			/** 展示标题文本，否则展示纯 Logo */
+			showTitle: true,
+			emojiTail: [] as string[],
+		},
+
+		/** 友链页面 */
+		link: {
+			/** 无订阅源展示静音图标 */
+			remindNoFeed: true,
+			/** 友链分组内随机排序 */
+			randomInGroup: true,
+		},
+
+		/** 左侧栏导航 */
+		nav: [
+			{
+				title: '',
+				items: [
+					{ icon: 'tabler:files', text: '文章', url: '/' },
+					{ icon: 'tabler:link', text: '友链', url: '/link' },
+					{ icon: 'tabler:archive', text: '归档', url: '/archive' },
+				],
+			},
+		],
+
+		pagination: {
+			perPage: 10,
+			/** 默认排序方式，需要是 article.order 中的键名 */
+			sortOrder: 'date',
+			/** 允许（普通/预览/归档）文章列表正序，开启后排序方式左侧图标可切换顺序 */
+			allowAscending: false,
+		},
+
+		themes: {
+			light: {
+				icon: 'tabler:sun',
+				tip: '浅色模式',
+			},
+			system: {
+				icon: 'tabler:device-desktop',
+				tip: '跟随系统',
+			},
+			dark: {
+				icon: 'tabler:moon',
+				tip: '深色模式',
+			},
+		},
+	},
+})

package/app/app.vue

@@ -0,0 +1,5 @@
+<template>
+<NuxtLayout>
+	<NuxtPage />
+</NuxtLayout>
+</template>

package/app/assets/css/_variable.scss

@@ -0,0 +1,8 @@
+$breakpoint-phone: 528px;
+$breakpoint-mobile: 768px;
+$breakpoint-widescreen: 1080px;
+$breakpoints: (
+	phone: $breakpoint-phone,
+	mobile: $breakpoint-mobile,
+	widescreen: $breakpoint-widescreen,
+);

package/app/assets/css/animation.scss

@@ -0,0 +1,50 @@
+/* stylelint-disable declaration-no-important */
+:root {
+	--max-bezier-to-full: cubic-bezier(0.5, 0, 1, 0.5);
+	--max-bezier-to-collapse: cubic-bezier(0, 0.5, 0.5, 1);
+}
+
+@keyframes float-in {
+	0% {
+		opacity: 0;
+		transform: translateY(var(--float-distance, 10%));
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.float-in-enter-active,
+.float-in-leave-active {
+	transition: all var(--delay) !important;
+}
+
+.float-in-enter-from,
+.float-in-leave-to {
+	opacity: 0;
+	transform: translateY(var(--float-distance, 10%));
+}
+
+.float-in-move {
+	transition: transform var(--delay) !important;
+}
+
+.collapse-enter-active,
+.collapse-leave-active {
+	contain: paint;
+	transition: max-height 0.1s;
+}
+
+.collapse-enter-from,
+.collapse-leave-to {
+	max-height: 0;
+	transition-timing-function: var(--max-bezier-to-collapse);
+}
+
+.collapse-enter-to,
+.collapse-leave-from {
+	max-height: 50vh;
+	transition-timing-function: var(--max-bezier-to-full);
+}

package/app/assets/css/article.scss

@@ -0,0 +1,152 @@
+.article {
+	margin: 1rem;
+	line-height: 1.8;
+
+	p {
+		margin: 0.5em 0;
+	}
+
+	> *, > p {
+		margin: 1rem 0;
+	}
+
+	:target {
+		border-radius: 0.2rem;
+		animation: highlight 3s;
+
+		@keyframes highlight {
+			50% { background-color: var(--c-primary-soft); }
+		}
+	}
+
+	>:where(h1, h2, h3, h4, h5, h6) {
+		margin: 1.6em 0 0.8em;
+		font-family: var(--font-creative);
+		font-weight: 550;
+		color: var(--c-text);
+	}
+
+	:where(menu, ol, ul):not([class]) {
+		margin: 0.5em 0;
+		padding-inline-start: 1.5em;
+		font-size: 0.9rem;
+
+		&, ol ol ol {
+			list-style: revert;
+		}
+
+		ol, ol ol ol ol {
+			list-style-type: lower-alpha;
+		}
+
+		ol ol, ol ol ol ol ol {
+			list-style-type: lower-roman;
+		}
+
+		ol, ul {
+			margin-top: 0;
+		}
+
+		> li {
+			margin: 0.2em 0;
+
+			&::marker {
+				color: var(--c-primary);
+			}
+		}
+	}
+
+	blockquote {
+		padding: 0.2rem 0.8rem;
+		border-inline-start: 4px solid var(--c-border);
+		border-radius: 4px;
+		background-color: var(--c-bg-2);
+		font-size: 0.9rem;
+
+		> .z-codeblock {
+			margin: 0 -0.8rem;
+		}
+	}
+
+	img {
+		height: auto;
+		max-width: 100%;
+
+		&.icon {
+			height: 1.4em;
+			vertical-align: middle;
+			transform: translateY(-0.1em);
+		}
+
+		&:not([class]), &.image {
+			display: block;
+			margin: 1rem auto;
+			border-radius: 0.5rem;
+		}
+	}
+
+	hr {
+		margin: 3em 0;
+		border-top: 0.4em dashed var(--c-border);
+	}
+
+	strong {
+		background: linear-gradient(var(--c-primary-soft), var(--c-primary-soft)) no-repeat center bottom / 100% 30%;
+	}
+
+	del {
+		opacity: 0.5;
+	}
+
+	&.md-tech > h2 > a::before {
+		content: "#";
+		color: white;
+	}
+
+	&.md-tech > :where(h2, h3, h4, h5, h6) > a::before {
+		content: "";
+		margin-inline-end: 0.5em;
+		padding: 0 2px;
+		border-radius: 0.2rem;
+		background-color: var(--c-primary);
+		text-autospace: no-autospace;
+	}
+
+	&.md-story {
+		h1, h2, h3, h4, h5, h6, .title-like {
+			position: relative;
+			font-family: var(--font-serif);
+			font-weight: bolder;
+			text-align: center;
+			text-wrap: balance;
+		}
+
+		> h2::before {
+			content: "";
+			position: absolute;
+			width: 2.5em;
+			height: 2.5em;
+			margin: -0.4em 0 0 -0.7em;
+			border-radius: 50%;
+			background-image: linear-gradient(var(--c-primary-soft), transparent);
+			z-index: -1;
+		}
+
+		> h3::after {
+			content: "";
+			position: absolute;
+			bottom: 0;
+			width: 0.4em;
+			height: 0.7em;
+			background-color: var(--c-primary-soft);
+		}
+
+		> p, :not([class]) > p {
+			text-indent: 2em;
+
+			> [class] {
+				text-indent: 0;
+			}
+		}
+	}
+}

package/app/assets/css/color.scss

@@ -0,0 +1,58 @@
+@mixin dark-theme {
+	--c-text: hsl(var(--hue-theme) 0% 100%);
+	--c-text-1: hsl(var(--hue-theme) 0% 90%);
+	--c-text-2: hsl(var(--hue-theme) 0% 70%);
+	--c-text-3: hsl(var(--hue-theme) 0% 50%);
+	--c-bg: hsl(var(--hue-theme) 0% 7%);
+	--c-bg-1: hsl(var(--hue-theme) 10% 10%);
+	--c-bg-2: hsl(var(--hue-theme) 10% 14%);
+	--c-bg-3: hsl(var(--hue-theme) 10% 18%);
+	--c-bg-soft: hsl(var(--hue-theme) 100% 95% / 15%);
+	--c-border: hsl(var(--hue-theme) 10% 20%);
+	--c-bg-a50: hsl(var(--hue-theme) 10% 10% / 50%);
+	--c-bg-a80: hsl(var(--hue-theme) 10% 10% / 80%);
+	--c-primary: hsl(var(--hue-theme) 100% 70%);
+	--c-primary-soft: hsl(var(--hue-theme) 100% 60% / 20%);
+	--ld-bg-blur: var(--c-bg-a80);
+	--ld-bg-card: var(--c-bg-3);
+	--ld-bg-active: var(--c-primary-soft);
+	--ld-shadow: var(--c-bg-a50);
+}
+
+:root,
+.light {
+	--hue-theme: 220deg;
+	--c-text: hsl(var(--hue-theme) 0% 0%);
+	--c-text-1: hsl(var(--hue-theme) 0% 20%);
+	--c-text-2: hsl(var(--hue-theme) 0% 40%);
+	--c-text-3: hsl(var(--hue-theme) 0% 70%);
+	--c-bg: hsl(var(--hue-theme) 0% 100%);
+	--c-bg-1: hsl(var(--hue-theme) 20% 98%);
+	--c-bg-2: hsl(var(--hue-theme) 10% 95%);
+	--c-bg-3: hsl(var(--hue-theme) 10% 92%);
+	--c-bg-soft: hsl(var(--hue-theme) 20% 20% / 10%);
+	--c-border: hsl(var(--hue-theme) 10% 91%);
+	--c-bg-a50: hsl(var(--hue-theme) 20% 98% / 50%);
+	--c-bg-a80: hsl(var(--hue-theme) 20% 98% / 80%);
+	--c-primary: hsl(var(--hue-theme) 100% 55%);
+	--c-primary-soft: hsl(var(--hue-theme) 100% 60% / 15%);
+	--c-accent: hsl(180deg 70% 60%);
+	--ld-bg-blur: var(--c-bg-1);
+	--ld-bg-card: var(--c-bg);
+	--ld-bg-active: var(--c-bg);
+	--ld-shadow: var(--c-bg-soft);
+	--c-success: #5A5;
+	--c-success-soft: #3F32;
+	--c-warning: #D85;
+	--c-warning-soft: #F932;
+	--c-error: #D55;
+	--c-error-soft: #F332;
+
+	color-scheme: only light;
+}
+
+.dark {
+	@include dark-theme;
+
+	color-scheme: dark;
+}

package/app/assets/css/font.scss

@@ -0,0 +1,35 @@
+:root {
+	--font-basic: "InterVariable", /* Android/Linux */ "sans-serif", /* Firefox */ "Noto Sans SC", sans-serif;
+	--font-serif: /* Windows */ "Noto Serif SC-Local", "Noto Serif SC", serif;
+	--font-creative: "DOUYINSANSBOLD-GB", "InterVariable", sans-serif;
+	--font-stroke-free: "DOUYINSANSBOLD-GB", "Inter", /* macOS */ "Lantinghei SC", /* Windows */ "Microsoft YaHei", sans-serif;
+	--font-monospace: "JetBrains Mono", /* Android/Linux */ "monospace", /* Windows */ "Cascadia Code", /* Windows */ "Consolas", /* Apple */ "Monaco", var(--font-basic), monospace;
+
+	@media (max-resolution: 1.2dppx) {
+		--font-basic: "InterVariable", system-ui, sans-serif;
+	}
+}
+
+@font-feature-values "InterVariable", "Inter" {
+	@styleset {
+		open-digits: 1;
+		disambiguation: 2;
+		round-quotes-and-commas: 3;
+		disambiguation-except-zero: 4;
+		circled-characters: 5;
+		squared-characters: 6;
+		square-punctuation: 7;
+		square-quotes: 8;
+	}
+}
+
+/* 仅在 Chrome 130+ 启用本地可变字体 */
+
+/* autoprefixer: ignore next */
+@supports (box-decoration-break: clone) {
+	@font-face {
+		font-family: "Noto Serif SC-Local";
+		font-weight: 100 900;
+		src: local("Noto Serif SC");
+	}
+}

package/app/assets/css/main.scss

@@ -0,0 +1,230 @@
+:root {
+	--start: left;
+	--end: right;
+	--transform-start-far: translateX(-100%);
+	--transform-end-far: translateX(100%);
+	--delay: 0.2s;
+	--z-index-popover: 100;
+	--text-shadow-black: 0 0.1em 0.1em #0003, 0 0.1em 0.2em #0003;
+	--box-shadow-1: 0 0.1em 0.2em var(--ld-shadow);
+	--box-shadow-2: 0 0.2em 0.5em var(--ld-shadow);
+	--box-shadow-3: 0 0.5em 1em var(--ld-shadow);
+
+	overflow-wrap: break-word;
+	background-color: var(--c-bg-1);
+	font-family: sans-serif;
+	font-family: var(--font-basic);
+	font-synthesis: style;
+	line-height: 1.4;
+	text-autospace: normal;
+	text-size-adjust: none;
+	color: var(--c-text-1);
+	transition: color 0.1s, background-color 0.2s;
+	scroll-behavior: smooth;
+	scroll-padding: 2rem;
+	scrollbar-color: var(--c-text-3) transparent;
+	font-variant-alternates: styleset(open-digits, disambiguation, round-quotes-and-commas);
+	-webkit-tap-highlight-color: var(--c-primary-soft);
+
+	&:dir(rtl) {
+		--start: right;
+		--end: left;
+		--transform-start-far: translateX(100%);
+		--transform-end-far: translateX(-100%);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+		scroll-behavior: auto;
+	}
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+
+*, ::before, ::after {
+	box-sizing: border-box;
+}
+
+::selection {
+	background-color: var(--c-primary-soft);
+}
+
+a {
+	text-decoration: none;
+	color: currentcolor;
+}
+
+code, pre {
+	font-family: var(--font-monospace);
+	text-autospace: no-autospace;
+}
+
+menu, ol, ul {
+	list-style: none;
+}
+
+mark {
+	background-color: var(--c-primary-soft);
+	color: var(--c-primary);
+}
+
+button {
+	cursor: pointer;
+
+	> .iconify:only-child {
+		display: block;
+	}
+
+	&:disabled {
+		cursor: auto;
+	}
+}
+
+button, input, textarea {
+	background: none;
+	font: inherit;
+	color: currentcolor;
+}
+
+// Iconify 图标复用了此类
+:where(.iconify) {
+	display: inline-block;
+	flex-shrink: 0;
+	font-size: 1.2em;
+	vertical-align: sub;
+}
+
+.rtl-flip:dir(rtl) {
+	transform: scaleX(-1);
+}
+
+.light .iconify[class*="i-catppuccin:"] {
+	filter: invert(0.7) hue-rotate(180deg) saturate(4);
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.i-simple-icons\:mdnwebdocs {
+	transform: scale(0.8);
+}
+
+// 图片加载失败 fallback
+img {
+	contain: paint;
+	display: inline-block;
+
+	&::before {
+		all: initial;
+		content: attr(alt); // Firefox 的 ::before content 仅在 alt 不为空时展示且值为 attr(alt) 无法修改
+		display: grid;
+		place-content: center;
+		position: absolute;
+		inset: 0;
+		padding: 0.5em;
+		background-color: var(--c-border);
+		font: bold 1.5rem/1.2 var(--font-serif);
+		text-align: center;
+		color: var(--c-bg-soft);
+		cursor: inherit;
+	}
+}
+
+.katex-display, article > .katex {
+	display: block; // ```math 不会包裹 .katex-display
+	overflow: auto hidden;
+	padding: 1px 0;
+	scrollbar-width: thin;
+}
+
+.bikariya-overlay {
+	position: fixed;
+	inset: 0;
+	background-color: #0003;
+	backdrop-filter: blur(4px);
+
+	&.v-enter-from,
+	&.v-leave-to {
+		opacity: 0;
+	}
+
+	&.v-enter-active,
+	&.v-leave-active {
+		transition: all var(--delay);
+	}
+}
+
+.tippy-box {
+	padding: 0.3em 0.6em;
+	border-radius: 0.5em;
+	box-shadow: var(--box-shadow-3);
+	background-color: var(--ld-bg-card);
+	font-size: 0.8rem;
+	line-height: 1.4;
+	color: var(--c-text-2);
+	animation: float-in 0.2s;
+
+	&[data-state="hidden"] {
+		opacity: 0;
+	}
+
+	> .tippy-svg-arrow {
+		fill: var(--ld-bg-card);
+		pointer-events: none;
+	}
+}
+
+.shiki > .line > span,
+.shiki > span[style] {
+	font-style: var(--shiki-light-font-style);
+
+	.dark & {
+		background-color: var(--shiki-dark-bg) !important; /* stylelint-disable-line declaration-no-important */
+		font-style: var(--shiki-dark-font-style);
+		color: var(--shiki-dark) !important; /* stylelint-disable-line declaration-no-important */
+	}
+}
+
+.shiki > .line {
+	.indent {
+		display: inline-block;
+		position: relative;
+		left: var(--indent-offset);
+	}
+
+	.indent:empty {
+		height: 1.4em;
+		height: 1lh;
+		vertical-align: bottom;
+	}
+
+	.indent::before {
+		content: "";
+		position: absolute;
+		opacity: 0.15;
+		height: 100%;
+		border-inline-start: 1px solid currentcolor;
+		background-color: currentcolor;
+		pointer-events: none;
+	}
+
+	> .space::before,
+	>.tab::before {
+		display: inline-block;
+		opacity: 0.3;
+		width: 0;
+		pointer-events: none;
+	}
+
+	> .space:is(:first-child, :last-child)::before,
+	> :not(.space) + .space:has(+ .space)::before,
+	> .space + .space::before {
+		content: "·";
+	}
+
+	>.tab::before {
+		content: "⇥";
+	}
+}