clarity-theme 0.1.0 → 0.1.2

package/{app → src}/plugins/easter-egg.ts

@@ -1,23 +1,23 @@
-export default defineNuxtPlugin(() => {
-	const dir = useTextDirection()
-	const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA']
-	let currentStep = 0
-
-	function step(step: boolean, resetForward: boolean) {
-		if (step === false) {
-			currentStep = resetForward ? 1 : 0
-			return
-		}
-
-		currentStep++
-
-		if (currentStep === konamiCode.length) {
-			dir.value = dir.value === 'ltr' ? 'rtl' : 'ltr'
-			currentStep = 0
-		}
-	}
-
-	useEventListener('keydown', ({ code }) => {
-		step(code === konamiCode[currentStep], code === konamiCode[0])
-	})
-})
+export default defineNuxtPlugin(() => {
+	const dir = useTextDirection()
+	const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA']
+	let currentStep = 0
+
+	function step(step: boolean, resetForward: boolean) {
+		if (step === false) {
+			currentStep = resetForward ? 1 : 0
+			return
+		}
+
+		currentStep++
+
+		if (currentStep === konamiCode.length) {
+			dir.value = dir.value === 'ltr' ? 'rtl' : 'ltr'
+			currentStep = 0
+		}
+	}
+
+	useEventListener('keydown', ({ code }) => {
+		step(code === konamiCode[currentStep], code === konamiCode[0])
+	})
+})

package/{app → src}/plugins/init.ts

@@ -1,6 +1,6 @@
-export default defineNuxtPlugin(() => {
-	// 开发环境禁用 Umami 统计
-	if (import.meta.client && import.meta.dev) {
-		localStorage.setItem('umami.disabled', 'true')
-	}
-})
+export default defineNuxtPlugin(() => {
+	// 开发环境禁用 Umami 统计
+	if (import.meta.client && import.meta.dev) {
+		localStorage.setItem('umami.disabled', 'true')
+	}
+})

package/{app → src}/plugins/tippy.ts

@@ -1,22 +1,22 @@
-import type { directive, Tippy } from 'vue-tippy'
-import VueTippy, { roundArrow } from 'vue-tippy'
-import 'tippy.js/dist/svg-arrow.css'
-
-declare module 'vue' {
-	interface GlobalComponents {
-		Tooltip: typeof Tippy
-	}
-	interface GlobalDirectives {
-		vTip: typeof directive
-	}
-}
-
-export default defineNuxtPlugin((nuxtApp) => {
-	nuxtApp.vueApp.use(VueTippy, {
-		component: 'Tooltip',
-		directive: 'tip',
-		defaultProps: {
-			arrow: roundArrow,
-		},
-	})
-})
+import type { directive, Tippy } from 'vue-tippy'
+import VueTippy, { roundArrow } from 'vue-tippy'
+import 'tippy.js/dist/svg-arrow.css'
+
+declare module 'vue' {
+	interface GlobalComponents {
+		Tooltip: typeof Tippy
+	}
+	interface GlobalDirectives {
+		vTip: typeof directive
+	}
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+	nuxtApp.vueApp.use(VueTippy, {
+		component: 'Tooltip',
+		directive: 'tip',
+		defaultProps: {
+			arrow: roundArrow,
+		},
+	})
+})

package/{public → src/public}/assets/atom.css

@@ -1,274 +1,274 @@
-:root {
-	--xsl-bg-1: #F3F7F9;
-	--xsl-bg-alt: #FFF;
-	--xsl-text-1: #333;
-	--xsl-text-2: #666;
-	--xsl-text-3: #999;
-	--xsl-shadow-1: 0 0.1em 0.2em rgb(0 0 0 / 10%);
-	--xsl-shadow-2: 0 0.4em 0.5em rgb(0 0 0 / 15%);
-
-	background-color: var(--xsl-bg-1);
-	font-family: Inter, sans-serif;
-	line-height: 1.6;
-	text-autospace: normal;
-	color: var(--xsl-text-1);
-	color-scheme: light dark;
-	transition: background-color 0.3s, color 0.1s;
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--xsl-bg-1: #1E1E1E;
-		--xsl-bg-alt: #333;
-		--xsl-text-1: #EEE;
-		--xsl-text-2: #AAA;
-		--xsl-text-3: #666;
-		--xsl-shadow-1: 0 0.1em 0.2em rgb(255 255 255 / 10%);
-		--xsl-shadow-2: 0 0.4em 0.5em rgb(255 255 255 / 15%);
-
-		color-scheme: dark;
-	}
-}
-
-body {
-	max-width: 800px;
-	margin: 0 auto;
-	padding: 20px;
-}
-
-@font-face {
-	font-family: AlimamaFangYuanTi;
-	src: url("/fonts/AlimamaFangYuanTi.woff2");
-}
-
-* {
-	margin: 0;
-	padding: 0;
-}
-
-a {
-	text-decoration: none;
-	color: inherit;
-}
-
-p {
-	margin: 0.5em 0;
-}
-
-blockquote {
-	margin: 1em 0;
-	padding: 0 0.8em;
-	border-inline-start: 0.2em solid var(--xsl-text-3);
-}
-
-code, pre {
-	text-autospace: none;
-}
-
-.logo-header {
-	display: flex;
-	align-items: center;
-	gap: 0.5em;
-	margin: 0.5em 0;
-	font-size: clamp(1em, 5vw, 1.5em);
-	line-height: 1.4;
-}
-
-.logo {
-	height: 2.4em;
-	border-radius: 50%;
-	corner-shape: superellipse(1.2);
-	box-shadow: var(--xsl-shadow-1);
-}
-
-.title {
-	font-family: AlimamaFangYuanTi, sans-serif;
-	font-variation-settings: "wght" 600, "BEVL" 100;
-	font-size: 1.2em;
-}
-
-.subtitle {
-	font-size: 0.8em;
-	color: var(--xsl-text-2);
-}
-
-.entry {
-	contain: paint;
-	display: block;
-	margin: 1em 0;
-	border-radius: 0.8em;
-	box-shadow: var(--xsl-shadow-1);
-	background-color: var(--xsl-bg-alt);
-	transition: all 0.2s;
-}
-
-.entry > article {
-	display: grid;
-	gap: 0.5em;
-	padding: 1em;
-}
-
-.entry:hover {
-	box-shadow: var(--xsl-shadow-2);
-	transform: translateY(-0.1em);
-}
-
-.entry:hover > .entry-image {
-	opacity: 1;
-}
-
-.entry-title {
-	font-size: 1.2em;
-	color: var(--xsl-text-1);
-}
-
-.entry-meta {
-	font-size: 0.9em;
-	color: var(--xsl-text-2);
-}
-
-.entry-summary {
-	font-size: 0.9em;
-	color: var(--xsl-text-2);
-}
-
-.entry-summary:empty {
-	display: none;
-}
-
-.entry-image {
-	position: absolute;
-	opacity: 0.8;
-	top: 0;
-	right: 0;
-	width: min(320px, 50%);
-	height: 100%;
-	margin: 0;
-	mask-image: linear-gradient(to right, transparent, #FFF 50%);
-	transition: opacity 0.2s;
-	object-fit: cover;
-}
-
-img {
-	contain: layout;
-	display: inline-block;
-
-	&::before {
-		position: absolute;
-		inset: 0;
-	}
-
-	&::before {
-		content: attr(alt);
-		display: grid;
-		place-content: center;
-		overflow: visible;
-		padding: 0.5em;
-		background-color: var(--xsl-bg-alt);
-		font-size: 1.5em;
-		font-weight: bold;
-		line-height: 1.2;
-		word-break: normal;
-		text-align: center;
-		text-shadow: none;
-		color: var(--xsl-text-3);
-	}
-}
-
-.entry-image + article {
-	position: relative;
-	width: 60%;
-}
-
-@media (max-width: 600px) {
-	.entry-image {
-		position: revert;
-		width: 100%;
-		height: auto;
-		max-width: none;
-		max-height: 256px;
-		aspect-ratio: 2.4;
-		margin-bottom: -10%;
-		mask-image: linear-gradient(#FFF 50%, transparent);
-	}
-
-	.entry-image + article {
-		width: auto;
-	}
-}
-
-.entry-content-container {
-	display: none;
-}
-
-.entry-content-container:target {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: fixed;
-	inset: 0;
-	z-index: 1;
-}
-
-.entry-content {
-	position: relative;
-	overflow: auto;
-	max-width: min(80%, 50rem);
-	max-height: 80%;
-	padding: 1.5em 2em;
-	border-radius: 0.8em;
-	box-shadow: var(--xsl-shadow-2);
-	background-color: var(--xsl-bg-1);
-}
-
-.entry-content > figcaption {
-	margin-bottom: 1em;
-	font-size: 1.2em;
-	font-weight: bold;
-	text-align: center;
-}
-
-.entry-content img {
-	height: auto;
-	max-width: 100%;
-	border-radius: 0.2em;
-}
-
-.entry-content-close {
-	position: absolute;
-	top: 1em;
-	right: 1em;
-	font-size: 2em;
-	line-height: 1;
-	color: white;
-}
-
-.entry-content-close::before {
-	content: "";
-	position: fixed;
-	inset: 0;
-	background-color: rgb(0 0 0 / 70%);
-	cursor: default;
-	z-index: -2;
-}
-
-.view-full {
-	position: fixed;
-	bottom: 1em;
-	left: 50%;
-	padding: 0.5em 1em;
-	border-radius: 0.8em;
-	background-color: var(--xsl-bg-alt);
-	font-size: 1.2em;
-	font-weight: bold;
-	text-align: center;
-	color: var(--xsl-text-1);
-	transform: translateX(-50%);
-}
-
-footer {
-	margin-top: 2em;
-	font-size: 0.8em;
-	text-align: center;
-	color: var(--xsl-text-2);
-}
+:root {
+	--xsl-bg-1: #F3F7F9;
+	--xsl-bg-alt: #FFF;
+	--xsl-text-1: #333;
+	--xsl-text-2: #666;
+	--xsl-text-3: #999;
+	--xsl-shadow-1: 0 0.1em 0.2em rgb(0 0 0 / 10%);
+	--xsl-shadow-2: 0 0.4em 0.5em rgb(0 0 0 / 15%);
+
+	background-color: var(--xsl-bg-1);
+	font-family: Inter, sans-serif;
+	line-height: 1.6;
+	text-autospace: normal;
+	color: var(--xsl-text-1);
+	color-scheme: light dark;
+	transition: background-color 0.3s, color 0.1s;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--xsl-bg-1: #1E1E1E;
+		--xsl-bg-alt: #333;
+		--xsl-text-1: #EEE;
+		--xsl-text-2: #AAA;
+		--xsl-text-3: #666;
+		--xsl-shadow-1: 0 0.1em 0.2em rgb(255 255 255 / 10%);
+		--xsl-shadow-2: 0 0.4em 0.5em rgb(255 255 255 / 15%);
+
+		color-scheme: dark;
+	}
+}
+
+body {
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 20px;
+}
+
+@font-face {
+	font-family: AlimamaFangYuanTi;
+	src: url("/fonts/AlimamaFangYuanTi.woff2");
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+p {
+	margin: 0.5em 0;
+}
+
+blockquote {
+	margin: 1em 0;
+	padding: 0 0.8em;
+	border-inline-start: 0.2em solid var(--xsl-text-3);
+}
+
+code, pre {
+	text-autospace: none;
+}
+
+.logo-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	margin: 0.5em 0;
+	font-size: clamp(1em, 5vw, 1.5em);
+	line-height: 1.4;
+}
+
+.logo {
+	height: 2.4em;
+	border-radius: 50%;
+	corner-shape: superellipse(1.2);
+	box-shadow: var(--xsl-shadow-1);
+}
+
+.title {
+	font-family: AlimamaFangYuanTi, sans-serif;
+	font-variation-settings: "wght" 600, "BEVL" 100;
+	font-size: 1.2em;
+}
+
+.subtitle {
+	font-size: 0.8em;
+	color: var(--xsl-text-2);
+}
+
+.entry {
+	contain: paint;
+	display: block;
+	margin: 1em 0;
+	border-radius: 0.8em;
+	box-shadow: var(--xsl-shadow-1);
+	background-color: var(--xsl-bg-alt);
+	transition: all 0.2s;
+}
+
+.entry > article {
+	display: grid;
+	gap: 0.5em;
+	padding: 1em;
+}
+
+.entry:hover {
+	box-shadow: var(--xsl-shadow-2);
+	transform: translateY(-0.1em);
+}
+
+.entry:hover > .entry-image {
+	opacity: 1;
+}
+
+.entry-title {
+	font-size: 1.2em;
+	color: var(--xsl-text-1);
+}
+
+.entry-meta {
+	font-size: 0.9em;
+	color: var(--xsl-text-2);
+}
+
+.entry-summary {
+	font-size: 0.9em;
+	color: var(--xsl-text-2);
+}
+
+.entry-summary:empty {
+	display: none;
+}
+
+.entry-image {
+	position: absolute;
+	opacity: 0.8;
+	top: 0;
+	right: 0;
+	width: min(320px, 50%);
+	height: 100%;
+	margin: 0;
+	mask-image: linear-gradient(to right, transparent, #FFF 50%);
+	transition: opacity 0.2s;
+	object-fit: cover;
+}
+
+img {
+	contain: layout;
+	display: inline-block;
+
+	&::before {
+		position: absolute;
+		inset: 0;
+	}
+
+	&::before {
+		content: attr(alt);
+		display: grid;
+		place-content: center;
+		overflow: visible;
+		padding: 0.5em;
+		background-color: var(--xsl-bg-alt);
+		font-size: 1.5em;
+		font-weight: bold;
+		line-height: 1.2;
+		word-break: normal;
+		text-align: center;
+		text-shadow: none;
+		color: var(--xsl-text-3);
+	}
+}
+
+.entry-image + article {
+	position: relative;
+	width: 60%;
+}
+
+@media (max-width: 600px) {
+	.entry-image {
+		position: revert;
+		width: 100%;
+		height: auto;
+		max-width: none;
+		max-height: 256px;
+		aspect-ratio: 2.4;
+		margin-bottom: -10%;
+		mask-image: linear-gradient(#FFF 50%, transparent);
+	}
+
+	.entry-image + article {
+		width: auto;
+	}
+}
+
+.entry-content-container {
+	display: none;
+}
+
+.entry-content-container:target {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	inset: 0;
+	z-index: 1;
+}
+
+.entry-content {
+	position: relative;
+	overflow: auto;
+	max-width: min(80%, 50rem);
+	max-height: 80%;
+	padding: 1.5em 2em;
+	border-radius: 0.8em;
+	box-shadow: var(--xsl-shadow-2);
+	background-color: var(--xsl-bg-1);
+}
+
+.entry-content > figcaption {
+	margin-bottom: 1em;
+	font-size: 1.2em;
+	font-weight: bold;
+	text-align: center;
+}
+
+.entry-content img {
+	height: auto;
+	max-width: 100%;
+	border-radius: 0.2em;
+}
+
+.entry-content-close {
+	position: absolute;
+	top: 1em;
+	right: 1em;
+	font-size: 2em;
+	line-height: 1;
+	color: white;
+}
+
+.entry-content-close::before {
+	content: "";
+	position: fixed;
+	inset: 0;
+	background-color: rgb(0 0 0 / 70%);
+	cursor: default;
+	z-index: -2;
+}
+
+.view-full {
+	position: fixed;
+	bottom: 1em;
+	left: 50%;
+	padding: 0.5em 1em;
+	border-radius: 0.8em;
+	background-color: var(--xsl-bg-alt);
+	font-size: 1.2em;
+	font-weight: bold;
+	text-align: center;
+	color: var(--xsl-text-1);
+	transform: translateX(-50%);
+}
+
+footer {
+	margin-top: 2em;
+	font-size: 0.8em;
+	text-align: center;
+	color: var(--xsl-text-2);
+}