mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 03:32:51 +02:00
✨ feat: add github repository card extension feature
- remove astro-compress to improve build speed - add target and rel attributes to footer links - rename unocss opacity utility from 'opacity' to 'op' - update PostList component's page logic from 'isTag' to 'isHome' - create extend.css file for markdown extended features - reorganize and sort styles in heti.css - fix inline code wrapping issue
This commit is contained in:
radishzzz
parent
266e5833e6
commit
2ddae5631e
15 changed files with 407 additions and 479 deletions
|
|
@ -30,7 +30,7 @@ const links = socialLinks.map((link) => {
|
|||
<p>
|
||||
{links.map((link, index) => (
|
||||
<>
|
||||
<a class="transition-colors hover:c-primary" href={link.url}>
|
||||
<a class="transition-colors hover:c-primary" href={link.url} target="_blank" rel="noopener noreferrer">
|
||||
{link.name}
|
||||
</a>
|
||||
{index < links.length - 1 && ' / '}
|
||||
|
|
@ -39,7 +39,7 @@ const links = socialLinks.map((link) => {
|
|||
</p>
|
||||
|
||||
<p>
|
||||
Powered by <a class="transition-colors hover:c-primary" href="https://astro.build/">Astro</a> and <a class="transition-colors hover:c-primary" href="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
|
||||
Powered by <a class="transition-colors hover:c-primary" href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> and <a class="transition-colors hover:c-primary" href="https://github.com/radishzzz/astro-theme-retypeset" target="_blank" rel="noopener noreferrer">Retypeset</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const SubtitleTag = isPost ? 'div' : 'h2'
|
|||
<SubtitleTag
|
||||
class:list={[
|
||||
isPost
|
||||
? `opacity-0 lg:opacity-100`
|
||||
? `op-0 lg:op-100`
|
||||
: 'w-75% lg:w-full',
|
||||
'c-secondary font-navbar text-3.5 lg:text-4',
|
||||
]}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import type { CollectionEntry } from 'astro:content'
|
|||
import PostDate from '@/components/PostDate.astro'
|
||||
import { defaultLocale } from '@/config'
|
||||
import { generateDescription } from '@/utils/description'
|
||||
import { isTagPage } from '@/utils/page'
|
||||
import { isHomePage } from '@/utils/page'
|
||||
|
||||
type Post = CollectionEntry<'posts'> & {
|
||||
remarkPluginFrontmatter: {
|
||||
|
|
@ -12,7 +12,7 @@ type Post = CollectionEntry<'posts'> & {
|
|||
}
|
||||
|
||||
const { posts, lang, pinned = false } = Astro.props
|
||||
const isTag = isTagPage(Astro.url.pathname)
|
||||
const isHome = isHomePage(Astro.url.pathname)
|
||||
|
||||
export interface Props {
|
||||
posts: Post[]
|
||||
|
|
@ -32,14 +32,14 @@ function getPostPath(post: Post) {
|
|||
{posts.map(post => (
|
||||
<li
|
||||
class="mb-5.5"
|
||||
lg={isTag ? '' : 'mb-10'}
|
||||
lg={isHome ? 'mb-10' : ''}
|
||||
>
|
||||
|
||||
{/* post title */}
|
||||
<h3 class="inline">
|
||||
<a
|
||||
class="hover:c-primary"
|
||||
lg={isTag ? '' : 'font-medium text-4.5'}
|
||||
lg={isHome ? 'font-medium text-4.5' : ''}
|
||||
href={getPostPath(post)}
|
||||
transition:name={`post-${post.data.abbrlink || post.id}-${lang}`}
|
||||
data-disable-transition-on-theme
|
||||
|
|
@ -82,7 +82,7 @@ function getPostPath(post: Post) {
|
|||
</div>
|
||||
|
||||
{/* desktop post description */}
|
||||
{!isTag && (
|
||||
{isHome && (
|
||||
<div
|
||||
class="heti hidden"
|
||||
lg="mt-2 block"
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@ function initBackToTop() {
|
|||
observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
backToTopButton?.classList.add('opacity-0', 'pointer-events-none', 'translate-y-4')
|
||||
backToTopButton?.classList.add('op-0', 'pointer-events-none', 'translate-y-4')
|
||||
}
|
||||
else {
|
||||
backToTopButton?.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-4')
|
||||
backToTopButton?.classList.remove('op-0', 'pointer-events-none', 'translate-y-4')
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
59
src/components/Widgets/GithubCard.astro
Normal file
59
src/components/Widgets/GithubCard.astro
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<script>
|
||||
function setupGithubCards() {
|
||||
const githubCards = document.querySelectorAll('.gc-container')
|
||||
if (githubCards.length === 0)
|
||||
return
|
||||
|
||||
githubCards.forEach(async (card) => {
|
||||
const repo = (card as HTMLElement).dataset.repo
|
||||
if (!repo)
|
||||
return
|
||||
|
||||
const avatarEl = card.querySelector('.gc-owner-avatar') as HTMLElement
|
||||
const descEl = card.querySelector('.gc-repo-description') as HTMLElement
|
||||
const starsEl = card.querySelector('.gc-stars-count') as HTMLElement
|
||||
const forksEl = card.querySelector('.gc-forks-count') as HTMLElement
|
||||
const licenseEl = card.querySelector('.gc-license-info') as HTMLElement
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://api.github.com/repos/${repo}`)
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
|
||||
if (avatarEl && data.owner?.avatar_url)
|
||||
avatarEl.style.backgroundImage = `url(${data.owner.avatar_url})`
|
||||
|
||||
if (descEl && data.description)
|
||||
descEl.textContent = data.description
|
||||
|
||||
if (starsEl) {
|
||||
starsEl.textContent = new Intl.NumberFormat('en', {
|
||||
notation: 'compact',
|
||||
maximumFractionDigits: 1,
|
||||
}).format(data.stargazers_count)
|
||||
}
|
||||
|
||||
if (forksEl) {
|
||||
forksEl.textContent = new Intl.NumberFormat('en', {
|
||||
notation: 'compact',
|
||||
maximumFractionDigits: 1,
|
||||
}).format(data.forks_count)
|
||||
}
|
||||
|
||||
if (licenseEl)
|
||||
licenseEl.textContent = data.license?.spdx_id || 'No License'
|
||||
}
|
||||
else {
|
||||
if (descEl)
|
||||
descEl.textContent = 'Loading failed.'
|
||||
}
|
||||
}
|
||||
catch {
|
||||
console.error(`Failed to fetch ${repo}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
setupGithubCards()
|
||||
document.addEventListener('astro:page-load', setupGithubCards)
|
||||
</script>
|
||||
|
|
@ -3,17 +3,48 @@ title: Markdown 扩展功能
|
|||
published: 2025-04-25
|
||||
tags:
|
||||
- 指南
|
||||
draft: true
|
||||
toc: false
|
||||
lang: zh
|
||||
abbrlink: markdown-extended-features
|
||||
---
|
||||
|
||||
以下是 Retypeset 主题的 Markdown 扩展功能，包括语法示例与样式效果。
|
||||
本文介绍 Retypeset 主题支持的 Markdown 扩展功能，包括语法示例与效果展示。
|
||||
|
||||
## 图注
|
||||
|
||||
使用标准的 Markdown 图像语法 ``，即可自动生成图注。在 `alt` 前添加下划线 `_` 或留空 `alt`，即可隐藏图注。
|
||||
|
||||
### 语法
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
### 效果
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Github 仓库卡片
|
||||
|
||||
使用双冒号语法 `::github{repo="owner/repo"}`，即可创建 Github 仓库卡片。在页面加载后，从 GitHub API 中实时获取仓库数据。
|
||||
|
||||
### 语法
|
||||
|
||||
```
|
||||
::github{repo="radishzzz/astro-theme-retypeset"}
|
||||
```
|
||||
|
||||
### 效果
|
||||
|
||||
::github{repo="radishzzz/astro-theme-retypeset"}
|
||||
|
||||
## 提示块
|
||||
|
||||
使用容器指令 `:::type` 或 GitHub 语法 `> [!TYPE]`，即可创建提示块。支持以下五种类型：`note`、`tip`、`important`、`warning` 和 `caution`。
|
||||
使用三冒号语法 `:::type` 或 GitHub 语法 `> [!TYPE]`，即可创建提示块。支持 `note`、`tip`、`important`、`warning` 和 `caution` 五种类型。
|
||||
|
||||
### 语法
|
||||
|
||||
|
|
@ -53,22 +84,14 @@ Advises about risks or negative outcomes of certain actions.
|
|||
This is a note with a custom title.
|
||||
:::
|
||||
|
||||
## 图注
|
||||
<!-- <details>
|
||||
<summary>
|
||||
我有钥匙却无门，有空间却无房间。你能进入却无法离开。我是什么？
|
||||
</summary>
|
||||
键盘。
|
||||
</details>
|
||||
|
||||
使用 Markdown 图像语法 ``，**且上下均为空行**，即可自动生成图注。在 `alt` 前添加下划线 `_` 或留空 alt，即可隐藏图注。
|
||||
|
||||
### 显示图注
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
### 隐藏图注
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
```
|
||||
<figure>
|
||||
<img src="https://image.radishzz.cc/picsmaller/03.webp">
|
||||
<figcaption text-center="">Node 模块检查器 - 概览</figcaption>
|
||||
</figure> -->
|
||||
|
|
|
|||
|
|
@ -258,16 +258,4 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
|||
|
||||
按下 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd> 以结束会话。
|
||||
|
||||
大多数<mark>蝾螈</mark>昼伏夜出，以昆虫、蠕虫等小生物为食。
|
||||
|
||||
<!-- <details>
|
||||
<summary>
|
||||
我有钥匙却无门，有空间却无房间。你能进入却无法离开。我是什么？
|
||||
</summary>
|
||||
键盘。
|
||||
</details>
|
||||
|
||||
<figure>
|
||||
<img src="https://image.radishzz.cc/picsmaller/03.webp">
|
||||
<figcaption text-center="">Node 模块检查器 - 概览</figcaption>
|
||||
</figure> -->
|
||||
大多数<mark>蝾螈</mark>昼伏夜出，以昆虫、蠕虫等小生物为食。
|
||||
|
|
@ -3,14 +3,16 @@ import Button from '@/components/Button.astro'
|
|||
import Footer from '@/components/Footer.astro'
|
||||
import Header from '@/components/Header.astro'
|
||||
import Navbar from '@/components/Navbar.astro'
|
||||
import GithubCard from '@/components/Widgets/GithubCard.astro'
|
||||
import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
|
||||
import Scrollbar from '@/components/Widgets/Scrollbar.astro'
|
||||
import themeConfig from '@/config'
|
||||
import Head from '@/layouts/Head.astro'
|
||||
import { getPageInfo } from '@/utils/page'
|
||||
import '@/styles/font.css'
|
||||
import '@/styles/global.css'
|
||||
import '@/styles/font.css'
|
||||
import '@/styles/heti.css'
|
||||
import '@/styles/extend.css'
|
||||
|
||||
interface Props {
|
||||
postTitle?: string
|
||||
|
|
@ -20,7 +22,7 @@ interface Props {
|
|||
}
|
||||
|
||||
const { postTitle, postDescription, postSlug, supportedLangs = [] } = Astro.props
|
||||
const { isPost } = getPageInfo(Astro.url.pathname)
|
||||
const { isPost, isAbout } = getPageInfo(Astro.url.pathname)
|
||||
const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
|
||||
const MarginBottom = isPost && themeConfig.comment?.enabled
|
||||
? 'mb-10' // Post page with comment system
|
||||
|
|
@ -47,6 +49,7 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
|
|||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- {(isPost || isAbout) && <GithubCard />} -->
|
||||
<Scrollbar />
|
||||
<Button supportedLangs={supportedLangs} />
|
||||
<PhotoSwipe />
|
||||
|
|
|
|||
54
src/plugins/remark-github-card.mjs
Normal file
54
src/plugins/remark-github-card.mjs
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { visit } from 'unist-util-visit'
|
||||
|
||||
export function remarkGithubCard() {
|
||||
return (tree) => {
|
||||
visit(tree, 'leafDirective', (node) => {
|
||||
if (node.name !== 'github')
|
||||
return
|
||||
|
||||
const repo = node.attributes?.repo || ''
|
||||
if (!repo)
|
||||
return
|
||||
|
||||
const [owner, name] = repo.split('/')
|
||||
if (!owner || !name) {
|
||||
console.warn(`Invalid GitHub repository format: "${repo}"`)
|
||||
return
|
||||
}
|
||||
|
||||
node.type = 'html'
|
||||
node.value = `
|
||||
<a href="https://github.com/${repo}" class="gc-container" target="_blank" rel="noopener noreferrer" data-repo="${repo}">
|
||||
<div class="gc-title-bar">
|
||||
<div class="gc-owner-avatar" style="background-size: cover; background-position: center;" aria-hidden="true"></div>
|
||||
<span class="gc-repo-title">
|
||||
<span>${owner}<span class="gc-slash" aria-hidden="true">/</span><strong>${name}</strong></span>
|
||||
</span>
|
||||
<svg class="gc-github-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M12 1C5.9225 1 1 5.9225 1 12C1 16.8675 4.14875 20.9787 8.52125 22.4362C9.07125 22.5325 9.2775 22.2025 9.2775 21.9137C9.2775 21.6525 9.26375 20.7862 9.26375 19.865C6.5 20.3737 5.785 19.1912 5.565 18.5725C5.44125 18.2562 4.905 17.28 4.4375 17.0187C4.0525 16.8125 3.5025 16.3037 4.42375 16.29C5.29 16.2762 5.90875 17.0875 6.115 17.4175C7.105 19.0812 8.68625 18.6137 9.31875 18.325C9.415 17.61 9.70375 17.1287 10.02 16.8537C7.5725 16.5787 5.015 15.63 5.015 11.4225C5.015 10.2262 5.44125 9.23625 6.1425 8.46625C6.0325 8.19125 5.6475 7.06375 6.2525 5.55125C6.2525 5.55125 7.17375 5.2625 9.2775 6.67875C10.1575 6.43125 11.0925 6.3075 12.0275 6.3075C12.9625 6.3075 13.8975 6.43125 14.7775 6.67875C16.8813 5.24875 17.8025 5.55125 17.8025 5.55125C18.4075 7.06375 18.0225 8.19125 17.9125 8.46625C18.6138 9.23625 19.04 10.2125 19.04 11.4225C19.04 15.6437 16.4688 16.5787 14.0213 16.8537C14.42 17.1975 14.7638 17.8575 14.7638 18.8887C14.7638 20.36 14.75 21.5425 14.75 21.9137C14.75 22.2025 14.9563 22.5462 15.5063 22.4362C19.8513 20.9787 23 16.8537 23 12C23 5.9225 18.0775 1 12 1Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="gc-repo-description">Loading repository data...</p>
|
||||
<div class="gc-info-bar">
|
||||
<svg class="gc-info-icon" height="16" width="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path>
|
||||
</svg>
|
||||
<span class="gc-stars-count" aria-label="Stars count">--</span>
|
||||
<svg class="gc-info-icon" height="16" width="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path>
|
||||
</svg>
|
||||
<span class="gc-forks-count" aria-label="Forks count">--</span>
|
||||
<svg class="gc-info-icon" height="16" width="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path>
|
||||
</svg>
|
||||
<span class="gc-license-info" aria-label="License">--</span>
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
|
||||
delete node.name
|
||||
delete node.attributes
|
||||
delete node.children
|
||||
})
|
||||
}
|
||||
}
|
||||
139
src/styles/extend.css
Normal file
139
src/styles/extend.css
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
/*!
|
||||
* Markdown Extended Features
|
||||
* 1. Admonition
|
||||
* 2. GitHub Card
|
||||
*/
|
||||
|
||||
/* Admonition */
|
||||
.admonition-title {
|
||||
--at-apply: 'flex items-center font-semibold';
|
||||
}
|
||||
.admonition-title::before {
|
||||
--at-apply: 'inline-block aspect-square w-4 mr-2 align-text-bottom content-[""]';
|
||||
}
|
||||
|
||||
/* Note */
|
||||
.admonition-note {
|
||||
--at-apply: 'border-note';
|
||||
}
|
||||
.admonition-note .admonition-title {
|
||||
--at-apply: 'c-note';
|
||||
}
|
||||
.admonition-note .admonition-title::before {
|
||||
--at-apply: 'bg-note';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Tip */
|
||||
.admonition-tip {
|
||||
--at-apply: 'border-tip';
|
||||
}
|
||||
.admonition-tip .admonition-title {
|
||||
--at-apply: 'c-tip';
|
||||
}
|
||||
.admonition-tip .admonition-title::before {
|
||||
--at-apply: 'bg-tip';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Important */
|
||||
.admonition-important {
|
||||
--at-apply: 'border-important';
|
||||
}
|
||||
.admonition-important .admonition-title {
|
||||
--at-apply: 'c-important';
|
||||
}
|
||||
.admonition-important .admonition-title::before {
|
||||
--at-apply: 'bg-important';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.admonition-warning {
|
||||
--at-apply: 'border-warning';
|
||||
}
|
||||
.admonition-warning .admonition-title {
|
||||
--at-apply: 'c-warning';
|
||||
}
|
||||
.admonition-warning .admonition-title::before {
|
||||
--at-apply: 'bg-warning';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Caution */
|
||||
.admonition-caution {
|
||||
--at-apply: 'border-caution';
|
||||
}
|
||||
.admonition-caution .admonition-title {
|
||||
--at-apply: 'c-caution';
|
||||
}
|
||||
.admonition-caution .admonition-title::before {
|
||||
--at-apply: 'bg-caution';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* GitHub Card >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
.gc-container {
|
||||
--at-apply: 'block mt-3 mb-6 rounded border border-solid border-secondary/5 bg-secondary/5 px-5 py-4';
|
||||
--at-apply: 'transition-colors lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
|
||||
}
|
||||
|
||||
/* Title Bar */
|
||||
.gc-title-bar {
|
||||
--at-apply: 'flex items-center gap-3';
|
||||
}
|
||||
.gc-owner-avatar {
|
||||
--at-apply: 'flex-shrink-0 aspect-square w-5.5 rounded-full bg-secondary/20';
|
||||
}
|
||||
.gc-repo-title {
|
||||
--at-apply: 'flex items-center text-lg leading-normal';
|
||||
}
|
||||
.gc-slash {
|
||||
--at-apply: 'mx-2 op-40';
|
||||
}
|
||||
.gc-github-icon {
|
||||
--at-apply: 'flex-shrink-0 w-6 ml-auto';
|
||||
}
|
||||
|
||||
/* Repo Description */
|
||||
.gc-repo-description {
|
||||
--at-apply: 'mt-2.8 mb-4';
|
||||
}
|
||||
|
||||
/* Info Bar */
|
||||
.gc-info-bar {
|
||||
--at-apply: 'flex items-center gap-2 text-sm';
|
||||
}
|
||||
.gc-info-icon {
|
||||
--at-apply: 'flex-shrink-0';
|
||||
}
|
||||
.gc-stars-count {
|
||||
--at-apply: 'mr-4';
|
||||
}
|
||||
.gc-forks-count {
|
||||
--at-apply: 'mr-5';
|
||||
}
|
||||
.gc-license-info {
|
||||
--at-apply: 'ml-0.5 mr-4';
|
||||
}
|
||||
|
||||
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
/* :where(details) {
|
||||
--at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
|
||||
}
|
||||
details :where(summary) {
|
||||
--at-apply: 'cursor-pointer';
|
||||
}
|
||||
details[open] :where(summary) {
|
||||
--at-apply: 'border-b border-solid border-secondary/25 mb-3 pb-3';
|
||||
} */
|
||||
|
||||
/* details :where(summary) {
|
||||
list-style: none;
|
||||
}
|
||||
details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
details summary::marker {
|
||||
content: '';
|
||||
} */
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
/*!
|
||||
* Project: Heti
|
||||
* URL: https://github.com/sivan/heti
|
||||
* Author: Sivan [sun.sivan@gmail.com]
|
||||
* Source: https://unpkg.com/heti/umd/heti.min.css
|
||||
* Customized for Astro Theme Retypeset
|
||||
*/
|
||||
|
||||
/* Global Styles */
|
||||
|
|
@ -12,23 +13,17 @@
|
|||
--at-apply: 'tracking-0';
|
||||
}
|
||||
|
||||
/* Article Title */
|
||||
/* Customized Post Title */
|
||||
.heti .post-title {
|
||||
--at-apply: 'mb-2 text-8.6 leading-12 font-bold c-primary lg:text-9';
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.heti :where(a) {
|
||||
--at-apply: 'break-all font-medium tracking-0 underline decoration-secondary/40 underline-0.075em underline-offset-0.14em';
|
||||
--at-apply: 'transition-colors hover:(c-primary decoration-secondary/80) lg:underline-0.1em';
|
||||
/* KaTeX Formula Overflow Fix */
|
||||
.heti .katex-display {
|
||||
--at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
.heti :where(p) {
|
||||
--at-apply: 'mt-3 mb-6 text-justify text-pretty';
|
||||
}
|
||||
.heti :where(p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
|
||||
--at-apply: 'text-start';
|
||||
.heti .katex-display::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
|
|
@ -76,6 +71,20 @@
|
|||
--at-apply: 'mt-3';
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
.heti :where(p) {
|
||||
--at-apply: 'mt-3 mb-6 text-justify text-pretty';
|
||||
}
|
||||
.heti :where(p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
|
||||
--at-apply: 'text-start';
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.heti :where(a:not(.gc-container)) {
|
||||
--at-apply: 'break-all font-medium tracking-0 underline decoration-secondary/40 underline-0.075em underline-offset-0.14em';
|
||||
--at-apply: 'transition-colors hover:(c-primary decoration-secondary/80) lg:underline-0.1em';
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.heti :where(img) {
|
||||
--at-apply: 'mx-auto cursor-zoom-in force-gpu';
|
||||
|
|
@ -83,7 +92,7 @@
|
|||
.heti :where(figure) {
|
||||
--at-apply: 'mx-auto mt-3 mb-6';
|
||||
}
|
||||
.heti figure > :where(figcaption) {
|
||||
.heti :where(figcaption) {
|
||||
--at-apply: 'text-center text-sm mt-3 text-secondary/80';
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +112,9 @@ html.dark .heti pre :where(span) {
|
|||
--at-apply: 'px-0.4em py-0.2em text-0.85em tracking-0 whitespace-pre-wrap rounded bg-secondary/5 border border-solid border-secondary/5';
|
||||
counter-reset: line;
|
||||
}
|
||||
.heti :where(code:is(:lang(zh), :lang(ja), :lang(ko))) {
|
||||
--at-apply: 'break-all';
|
||||
}
|
||||
.heti :where(code) span.line {
|
||||
--at-apply: 'relative pl-8';
|
||||
}
|
||||
|
|
@ -207,7 +219,7 @@ html.dark .heti :where(u) {
|
|||
/* Keyboard Input */
|
||||
.heti :where(kbd) {
|
||||
--at-apply: 'inline-block px-0.4em py-0.3em text-0.85em font-bold leading-none tracking-0 whitespace-nowrap';
|
||||
--at-apply: 'rounded border border-solid border-secondary/25 text-secondary';
|
||||
--at-apply: 'rounded border border-solid border-secondary/40 text-secondary';
|
||||
}
|
||||
|
||||
/* Highlighted Text */
|
||||
|
|
@ -260,101 +272,3 @@ html.dark .heti sup a:target {
|
|||
--at-apply: 'mt-6 mb-3 border-t-2 border-secondary/5';
|
||||
}
|
||||
|
||||
/* KaTeX Mathematical */
|
||||
.heti .katex-display {
|
||||
--at-apply: 'block max-w-full overflow-x-auto overflow-y-hidden scrollbar-hidden';
|
||||
}
|
||||
.heti .katex-display::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Markdown Extended Features >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
.heti .admonition-title {
|
||||
--at-apply: 'flex items-center font-semibold';
|
||||
}
|
||||
.heti .admonition-title::before {
|
||||
--at-apply: 'inline-block aspect-square w-4 mr-2 align-text-bottom content-[""]';
|
||||
}
|
||||
|
||||
/* Note */
|
||||
.heti .admonition-note {
|
||||
--at-apply: 'border-note';
|
||||
}
|
||||
.heti .admonition-note .admonition-title {
|
||||
--at-apply: 'c-note';
|
||||
}
|
||||
.heti .admonition-note .admonition-title::before {
|
||||
--at-apply: 'bg-note';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Tip */
|
||||
.heti .admonition-tip {
|
||||
--at-apply: 'border-tip';
|
||||
}
|
||||
.heti .admonition-tip .admonition-title {
|
||||
--at-apply: 'c-tip';
|
||||
}
|
||||
.heti .admonition-tip .admonition-title::before {
|
||||
--at-apply: 'bg-tip';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Important */
|
||||
.heti .admonition-important {
|
||||
--at-apply: 'border-important';
|
||||
}
|
||||
.heti .admonition-important .admonition-title {
|
||||
--at-apply: 'c-important';
|
||||
}
|
||||
.heti .admonition-important .admonition-title::before {
|
||||
--at-apply: 'bg-important';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.heti .admonition-warning {
|
||||
--at-apply: 'border-warning';
|
||||
}
|
||||
.heti .admonition-warning .admonition-title {
|
||||
--at-apply: 'c-warning';
|
||||
}
|
||||
.heti .admonition-warning .admonition-title::before {
|
||||
--at-apply: 'bg-warning';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Caution */
|
||||
.heti .admonition-caution {
|
||||
--at-apply: 'border-caution';
|
||||
}
|
||||
.heti .admonition-caution .admonition-title {
|
||||
--at-apply: 'c-caution';
|
||||
}
|
||||
.heti .admonition-caution .admonition-title::before {
|
||||
--at-apply: 'bg-caution';
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* .heti :where(details) {
|
||||
--at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
|
||||
}
|
||||
.heti details :where(summary) {
|
||||
--at-apply: 'cursor-pointer';
|
||||
}
|
||||
.heti details[open] :where(summary) {
|
||||
--at-apply: 'border-b border-solid border-secondary/25 mb-3 pb-3';
|
||||
} */
|
||||
|
||||
/* .heti details :where(summary) {
|
||||
list-style: none;
|
||||
}
|
||||
.heti details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.heti details summary::marker {
|
||||
content: '';
|
||||
} */
|
||||
|
||||
/* 为所有admonition-title添加基础样式 */
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue