diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..5fc2b38 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +## 1.3.2 (2024-04-24) + +### Features + +- **spoiler:** Provide a way to show spoilers while blurring the text \ No newline at end of file diff --git a/package.json b/package.json index 3ac0487..dd7a25a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aplos", - "version": "1.3.1", + "version": "1.3.2", "description": "A sleek, contemporary, and purposefully designed VitePress theme", "main": "index.ts", "keywords": [ diff --git a/styles/common.scss b/styles/common.scss index efc66e6..a30e862 100644 --- a/styles/common.scss +++ b/styles/common.scss @@ -243,6 +243,7 @@ time { from { opacity: 1; } + to { opacity: 0.5; } @@ -260,6 +261,52 @@ time { } } +.spoiler { + font-weight: 600; + + span { + filter: blur(4px); + transition: filter 0.3s ease; + font-weight: normal; + animation: glow 1.5s infinite linear alternate-reverse; + + &:hover { + filter: none; + animation: none; + } + + &:active { + font-style: italic; + } + } + + @keyframes glow { + 0% { + text-shadow: 0 0 0 var(--color-accent); + } + + 20% { + text-shadow: 0 0 4px var(--color-accent); + } + + 40% { + text-shadow: 0 0 6px var(--color-accent); + } + + 60% { + text-shadow: 0 0 8px var(--color-accent); + } + + 80% { + text-shadow: 0 0 10px var(--color-accent); + } + + 100% { + text-shadow: 0 0 15px var(--color-accent); + } + } +} + mark { background-color: var(--color-background-second); color: var(--color-accent); @@ -346,4 +393,4 @@ button { abbr { cursor: help; text-decoration: 1px dotted underline; -} +} \ No newline at end of file