ezal-theme-example 0.0.1

package/assets/styles/_index/contact.styl

@@ -0,0 +1,20 @@
+.contact
+	display flex
+	flex-wrap wrap
+	gap 8px
+	a
+		all unset
+		display block
+		width 32px
+		height 32px
+		border-radius 100%
+		text-align center
+		font 20px / 32px 'icon'
+		transition .1s background, .1s color
+		&:hover
+			background var(--color)
+			color #fff
+		&:focus-visible
+			outline 2px solid
+			background var(--color)
+			color #fff

package/assets/styles/_index/footer.styl

@@ -0,0 +1,5 @@
+footer
+	padding 32px 16px
+	.wrap
+		margin auto
+		inset 0

package/assets/styles/_index/header.styl

@@ -0,0 +1,40 @@
+@keyframes grid
+	0%
+		background-position 16px 16px
+	100%
+		background-position 48px 80px
+
+header
+	position relative
+	overflow hidden
+	padding 128px 0
+	background:
+		linear-gradient(var(--color) 2%, #0000 0%) 0 16px / 1px 32px,
+		linear-gradient(to right, var(--color) 2%, #0000 0%) 16px / 32px
+	animation grid 10s infinite linear
+	--color s('color-mix(in srgb, var(--text), var(--bg) 90%)')
+	&:after
+		position absolute
+		bottom 0
+		left 0
+		width 100%
+		height s('max(10%, 64px)')
+		background linear-gradient(to bottom, #0000, var(--bg))
+		content ''
+		pointer-events none
+	&>*:not(picture)
+		position relative
+		margin auto
+		inset 0
+	img
+		position absolute
+		width 100%
+		height 100%
+		opacity .5
+		inset 0
+		object-fit cover
+
+h1
+	margin 0
+	font-size s('clamp(42px, 5vw, 63px)')
+	line-height 1.2

package/assets/styles/_index/nav.styl

@@ -0,0 +1,59 @@
+nav
+	position fixed
+	top 8px
+	right 0
+	left 0
+	z-index 100
+	display flex
+	overflow hidden
+	margin auto
+	padding 4px
+	width s('min(1000px, calc(100vw - 8px))')
+	height 32px + 8px
+	border 1px solid #0000
+	border-radius 12px
+	line-height 1
+	transition .1s
+
+#search
+#nav
+	width 32px
+	height 32px
+	border none
+	background #0000
+	font-size 16px
+
+#nav
+	display none
+
+.nav
+	display flex
+	margin 0
+	padding 0
+	li
+		display block
+		padding 0
+	a
+		display block
+		padding 8px
+
+.site
+	padding 0 8px
+	height 32px
+	font-weight bold
+	font-family var(--font-title)
+	line-height 32px
+
+.nav-hide
+	top -42px
+
+@media (max-width 700px)
+	#nav
+		display block
+	.nav
+		position absolute
+		top 8px + 32px
+	.nav-show
+		height 8px + 32px + 32px + 8px
+		&.nav-toc
+			height calc(100vh - 16px)

package/assets/styles/_index/search.styl

@@ -0,0 +1,64 @@
+html:has(.search[open])
+	overflow hidden
+
+.search
+	margin 128px auto 16px
+	padding 0
+	width s('min(calc(100vw - 32px), 600px)')
+	border 1px solid var(--border)
+	background var(--bg)
+	&::backdrop
+		backdrop-filter blur(4px)
+
+.search-bar
+	display flex
+	button
+		width 67px
+		border 0
+		background #0000
+		font-size 20px
+
+.search-input
+	all unset
+	display block
+	flex 1
+	box-sizing border-box
+	padding 16px
+	color var(--text)
+	font 24px / 1 var(--font)
+
+.search-result
+	overflow hidden auto
+	max-height calc(100vh - 300px)
+	a
+		display block
+		padding 16px
+		border-left 4px solid #0000
+		color var(--text)
+		text-decoration none
+		&:hover
+		&:focus-visible
+		&.active
+			border-color var(--theme)
+			background var(--panel)
+
+.search-title
+	font-size 20px
+
+.search-excerpt
+	opacity .8
+	mark
+		background var(--theme-a2)
+		color var(--theme)
+
+@media (max-width 700px), (max-height 700px)
+	.search
+		margin 0
+		max-width 100vw
+		max-height 100vh
+		max-height 100svh
+		width 100vw
+		height 100vh
+	.search-result
+		max-height calc(100vh - 68px)
+		max-height calc(100svh - 68px)

package/assets/styles/_index.styl

@@ -0,0 +1,91 @@
+@import '_var'
+
+*
+	box-sizing border-box
+
+body
+	margin 0
+	background var(--bg)
+	color var(--text)
+	font 16px / 1.5 var(--font)
+
+::selection
+	background var(--theme-a8)
+
+a
+	color var(--theme)
+	word-wrap break-word
+	transition .1s color
+	&:hover
+		color var(--text)
+
+code
+	font-family var(--font-mono)
+	font-feature-settings 'calt', 'cv01', 'cv03', 'cv61', 'cv96', 'cv97', 'cv98', 'ss08'
+
+.wrap
+	padding 0 16px
+	max-width 1000px
+
+.rounded
+	border-radius 8px
+	.rounded
+		border-radius 7px
+
+.flex
+	flex 1
+
+.glass
+	border 1px solid var(--glass-border)
+	background var(--glass)
+	--glass s('color-mix(in srgb, var(--bg), #0000)')
+	--glass-border s('color-mix(in srgb, var(--text), #0000 90%)')
+	backdrop-filter blur(8px)
+
+.link
+	position relative
+	color var(--text)
+	text-decoration none
+	transition .2s
+	&>*
+		position relative
+	&:after
+		position absolute
+		z-index -1
+		background var(--theme)
+		content ''
+		opacity 0
+		filter blur(32px)
+		transition .5s
+		pointer-events none
+		inset 0
+	&:hover
+		color var(--theme)
+		&:after
+			opacity 1
+	&:active
+		opacity .6
+
+main
+	@extend .wrap
+	position relative
+	margin auto
+	inset 0
+
+@import './_index/**/*'
+
+if config('waline')
+	#waline
+		margin auto
+		--waline-theme-color var(--theme)
+		--waline-active-color var(--theme-ad)
+		--waline-color var(--text)
+		--waline-bg-color var(--bg)
+		--waline-bg-color-light var(--panel)
+		--waline-bg-color-hover var(--text-a2)
+		--waline-border 1px solid var(--text-a8)
+		--waline-border-color var(--text-a2)
+		--waline-code-bg-color #2d2d2d
+		--waline-info-bg-color var(--panel)
+		textarea
+			font-family var(--font-mono)

package/assets/styles/_var.styl

@@ -0,0 +1,96 @@
+@font-face
+	font-family 'maple mono'
+	src:
+		url('https://unpkg.com/@fontsource/maple-mono@5.2.4/files/maple-mono-latin-400-normal.woff2') format('woff2'),
+		url('https://unpkg.com/@fontsource/maple-mono@5.2.4/files/maple-mono-latin-400-normal.woff') format('woff')
+	font-display swap
+
+:root
+	--font:
+		'Noto Sans SC',
+		'WenQuanYi Micro Hei',
+		'Noto Sans',
+		'Microsoft YaHei UI',
+		'Microsoft YaHei',
+		'HarmonyOS Sans SC',
+		'MiSans',
+		'PingFang SC',
+		'Hiragino Sans GB',
+		ui-sans-serif,
+		system-ui,
+		sans-serif
+	--font-mono:
+		'Maple Mono NF CN',
+		'Maple Mono SC NF',
+		'Sarasa Term SC',
+		'LXGW WenKai Mono',
+		'JetBrains Mono',
+		'Fira Code',
+		'Cascadia Code',
+		'Source Code Pro',
+		'Monaco',
+		'SF Mono',
+		Menlo,
+		Consolas,
+		'DejaVu Sans Mono',
+		'Liberation Mono',
+		'Courier New',
+		monospace
+	--font-title 'maple mono', var(--font-mono)
+
+$colorLight = config('color.light') ? convert(config('color.light')) : #F00
+$colorDark = config('color.dark') ? convert(config('color.dark')) : #F44
+SchemeLight =
+	--theme $colorLight
+	--theme-a2 alpha($colorLight, .125)
+	--theme-a4 alpha($colorLight, .25)
+	--theme-a8 alpha($colorLight, .5)
+	--theme-ad alpha($colorLight, .8125)
+	--theme-text dark($colorLight) ? #fff : #000
+	--bg #fff
+	--text #000
+	--code #800
+	--code-bg #f001
+	--border #444
+	--text-a1 #00000010
+	--text-a2 #00000020
+	--text-a8 #00000080
+	--panel #0001
+	--note #1d80d2
+	--note-tip #01a501
+	--note-warn #b17700
+	--note-danger #bc0000
+SchemeDark =
+	--theme $colorDark
+	--theme-a2 alpha($colorDark, .125)
+	--theme-a4 alpha($colorDark, .25)
+	--theme-a8 alpha($colorDark, .5)
+	--theme-ad alpha($colorDark, .8125)
+	--theme-text dark($colorDark) ? #fff : #000
+	--bg #101010
+	--text #f0f0f0
+	--code #f88
+	--code-bg #f001
+	--border #444
+	--text-a1 #f0f0f010
+	--text-a2 #f0f0f020
+	--text-a8 #f0f0f080
+	--panel #fff1
+	--note #69bbff
+	--note-tip #4ac94a
+	--note-warn #e0e059
+	--note-danger #ec3e3e
+	// [ui-scheme='light']
+	// {SchemeLight}
+	// [ui-scheme='dark']
+	// {SchemeDark}
+	// [ui-scheme='system']
+
+:root
+	// @extend [ui-scheme='light']
+	{SchemeLight}
+
+@media (prefers-color-scheme dark)
+	// [ui-scheme='system']
+	:root
+		{SchemeDark}

package/assets/styles/archive.styl

@@ -0,0 +1,35 @@
+@import '_index'
+
+.ready
+	position relative
+	overflow hidden
+	padding 0
+	line-height 1
+	transition .3s height
+	*
+		list-style none
+	a
+		position absolute
+		text-decoration none
+		transition .3s
+
+.tags.ready
+	a
+		translate -50% -50%
+
+.categories.ready
+	a
+		display block
+		padding 8px
+		border 1px solid var(--border)
+		border-radius 8px
+		background var(--panel)
+		color var(--text)
+		&:hover
+			border-color var(--theme)
+			color var(--theme)
+			&:after
+				opacity .2
+
+.archive a
+	margin-left 1ch

package/assets/styles/article.styl

@@ -0,0 +1,138 @@
+@import '_index'
+
+// MARK: Header
+header
+	img
+		filter blur(4px)
+		scale 1.05
+
+.cates
+	display flex
+	flex-wrap wrap
+	font-weight bold
+	gap 4px 16px
+
+.tag
+	&:before
+		content '#'
+		opacity .5
+
+.article-info
+	display flex
+	flex-wrap wrap
+	gap 8px
+	:before
+		margin-right 4px
+
+// MARK: Pagination & Related
+// .related
+// .related-title
+.pagination
+	@extend main
+
+.pagination
+	display flex
+	gap 4px
+	a
+		display flex
+		align-items center
+		padding 16px
+		border 1px solid var(--border)
+		border-radius 8px
+		color var(--text)
+		text-decoration none
+		text-wrap balance
+		transition .1s color, .1s border
+		gap 8px
+		&:hover
+			border-color var(--theme)
+			color var(--theme)
+	i
+		display inline-block
+	.next
+		justify-content right
+		text-align right
+
+// MARK: Main
+main
+	display flex
+	flex-direction row-reverse
+
+article
+	flex 1
+	padding 8px
+	width 0
+	text-wrap pretty
+	word-break break-all
+	word-break break-word
+
+aside
+	position sticky
+	top 32px
+	flex 0 0 auto
+	overflow hidden auto
+	max-height calc(100vh - 32px)
+	width 250px
+	height max-content
+
+.toc
+	li
+		list-style none
+	ol
+		position relative
+		&:before
+			position absolute
+			top 0
+			left 10px
+			display block
+			width 1px
+			height 100%
+			background var(--text-a2)
+			content ''
+	a
+		display block
+		display -webkit-box
+		overflow hidden
+		padding 5px
+		color var(--text)
+		text-decoration none
+		text-overflow ellipsis
+		line-height 1.5
+		-webkit-line-clamp 3
+		-webkit-box-orient vertical
+	a:hover
+	.active
+		color var(--theme)
+
+@import '_article/other'
+@import '_article/heading'
+@import '_article/image'
+@import '_article/table'
+@import '_article/list'
+@import '_article/footnote'
+@import '_article/tabs'
+@import '_article/note'
+@import '_article/fold'
+@import '_article/kbd'
+@import '_article/links'
+
+// MARK: Mobile
+nav .toc
+	position absolute
+	top 8px + 32px + 32px + 8px
+	display none
+	overflow hidden auto
+	margin-top 0
+	max-height calc(100vh - 96px)
+	width 100%
+	overscroll-behavior contain
+
+@media (max-width 700px)
+	aside
+		display none
+	nav .toc
+		display block
+	.nav-show
+		height calc(100vh - 16px)
+	.pagination
+		flex-direction column

package/assets/styles/category.styl

@@ -0,0 +1,4 @@
+@import '_index'
+
+.archive a
+	margin-left 1ch

package/assets/styles/home.styl

@@ -0,0 +1,124 @@
+@import '_index'
+
+header
+	padding 0
+
+.home
+	display flex
+	justify-content space-between
+	align-items center
+	height 100vh
+
+.home-title
+	font 28px var(--font-title)
+
+.home-logo
+	max-width 350px
+
+@keyframes indicator
+	0%
+	100%
+		bottom 32px
+	50%
+		bottom 16px
+
+.home-indicator
+	position absolute
+	top unset
+	right 0
+	bottom 32px
+	left 0
+	z-index 1
+	margin 0 auto
+	width max-content
+	height max-content
+	animation indicator 2s ease-in-out infinite
+
+.article-list
+	display flex
+	flex-wrap wrap
+	gap 16px
+	a
+		color var(--text)
+		text-decoration none
+
+.article
+	position relative
+	display flex
+	flex-direction column
+	overflow hidden
+	width calc(50% - 8px)
+	border 1px solid var(--border)
+	background var(--panel)
+	transition .2s border
+	&>*
+		position relative
+	img
+		width 100%
+		height 200px
+		object-fit cover
+	h2
+		overflow hidden
+		margin 0 0 16px 0
+		height 36px * 2
+		text-wrap pretty
+		transition .2s color
+	time
+		float right
+	&:hover:not(:has(a:hover))
+	&:focus-visible:not(:has(a:focus-visible))
+		border-color var(--theme)
+		h2
+			color var(--theme)
+		.bloom
+			opacity .5
+	object>a
+		margin-right 8px
+
+.article-info
+	padding 16px
+
+.tag:before
+	content '#'
+	opacity .5
+
+.bloom
+	position absolute
+	opacity 0
+	filter blur(32px) brightness(1.5)
+	transition .1s
+	inset 0
+	scale 1.5
+	translate 0 25%
+
+.pages
+	display flex
+	justify-content center
+	margin-top 16px
+
+.page
+	display block
+	width 32px
+	height 32px
+	color var(--text)
+	text-align center
+	text-decoration none
+	line-height 32px
+
+a.page
+	background var(--text-a2)
+	transition .1s
+	&:hover
+		background var(--theme)
+		color var(--theme-text)
+
+@media (max-width 700px)
+	.article
+		width 100%
+	.home
+	.contact
+		justify-content center
+	.home
+		flex-direction column-reverse
+	.home-title
+		text-align center