This commit is contained in:
@ -7,13 +7,21 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--color-bg-n: light-dark(oklch(100% 0 0), oklch(35% 0.02 270));
|
||||
--color-bg-0: light-dark(oklch(95% 0 0), oklch(30% 0.02 270));
|
||||
--color-fg-0: light-dark(oklch(25% 0.02 270), oklch(90% 0.02 270));
|
||||
--color-bg-1: light-dark(oklch(90% 0 0), oklch(25% 0.02 270));
|
||||
|
||||
--color-link: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
|
||||
--color-blue: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
|
||||
--color-green: light-dark(oklch(50% 0.1 150), oklch(80% 0.15 150));
|
||||
--color-link: var(--color-blue);
|
||||
}
|
||||
|
||||
/* == 页面设置 == */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
@ -52,4 +52,46 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={click}>没用的按钮 | {clicks + clicksPending}</button>
|
||||
<button class="useless-button" onclick={click}>
|
||||
<span class="name">到此一游</span>
|
||||
<span class="number">{clicks + clicksPending}</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.useless-button {
|
||||
display: block;
|
||||
background-color: var(--color-bg-n);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
|
||||
overflow: hidden;
|
||||
transition: transform ease 0.1s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
& > .name {
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
padding-inline-start: 1rem;
|
||||
padding-inline-end: 0.5rem;
|
||||
padding-block: 0.5rem;
|
||||
}
|
||||
|
||||
& > .number {
|
||||
display: inline-block;
|
||||
padding-inline-start: 0.75rem;
|
||||
padding-inline-end: 0.75rem;
|
||||
padding-block: 0.5rem;
|
||||
background-color: var(--color-green);
|
||||
color: var(--color-bg-n);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
244
src/components/MainpageTypewriter.svelte
Normal file
244
src/components/MainpageTypewriter.svelte
Normal file
@ -0,0 +1,244 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
// 基础定义部分
|
||||
type WriterStage = { text: string; editing: string[] } | string
|
||||
type WriterWord = { stages: WriterStage[] }
|
||||
|
||||
// 辅助函数
|
||||
const typeCharacters = (base: string, chars: string) => [
|
||||
base,
|
||||
...chars.split('').map((_, i) => base + chars.slice(0, i + 1)),
|
||||
]
|
||||
|
||||
const words: WriterWord[] = [
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['x', 'xi', 'xih', "xi'hr"] },
|
||||
{ text: '喜欢', editing: ['y', 'yb', 'ybl'] },
|
||||
...typeCharacters('喜欢音', 'MAD'),
|
||||
],
|
||||
},
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['x', 'xi', 'xih', "xi'hr"] },
|
||||
...typeCharacters('喜欢', 'YTPMV'),
|
||||
],
|
||||
},
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['x', 'xi', 'xih', "xi'hr"] },
|
||||
{ text: '喜欢', editing: ['u', 'ui', 'uij', "ui'jt"] },
|
||||
{ text: '喜欢视觉', editing: ['y', 'yi', 'yiu', "yi'uu"] },
|
||||
'喜欢视觉艺术',
|
||||
],
|
||||
},
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['x', 'xt', 'xtx', "xt'xi"] },
|
||||
{ text: '学习', editing: ['q', 'qm', 'qmd', "qm'dr"] },
|
||||
{ text: '学习前端', editing: ['k', 'kd', 'kdf', "kd'fa"] },
|
||||
'学习前端开发',
|
||||
],
|
||||
},
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['x', 'xt', 'xtx', "xt'xi"] },
|
||||
{ text: '学习', editing: ['h', 'hz', "hz'd", "hz'dr"] },
|
||||
{ text: '学习后端', editing: ['k', 'kd', 'kdf', "kd'fa"] },
|
||||
'学习后端开发',
|
||||
],
|
||||
},
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['x', 'xt', 'xtx', "xt'xi"] },
|
||||
{
|
||||
text: '学习',
|
||||
editing: ['q', 'qm', 'qmr', "qm'ru", "qm'ru'u", "qm'ru'ui"],
|
||||
},
|
||||
'学习嵌入式',
|
||||
],
|
||||
},
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['x', 'xt', 'xtx', "xt'xi"] },
|
||||
...typeCharacters('学习', 'DevOps'),
|
||||
],
|
||||
},
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['z', 'zr', "zr'y", "zr'yj"] },
|
||||
{ text: '钻研', editing: ['h', 'hy', 'hyd'] },
|
||||
{ text: '钻研混', editing: ['m', 'mu'] },
|
||||
'钻研混母',
|
||||
],
|
||||
},
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['z', 'zr', "zr'y", "zr'yj"] },
|
||||
{ text: '钻研', editing: ['u', 'uz', "uz'g", "uz'gs"] },
|
||||
{ text: '钻研手工', editing: ['k', 'kd', 'kdf', "kd'fa"] },
|
||||
'钻研手工开发',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
// 状态机定义
|
||||
type StatusMachine = {
|
||||
wipWord: number
|
||||
wipStage: number
|
||||
wipEditing: number
|
||||
countdown: number
|
||||
}
|
||||
let status = $state<StatusMachine>({
|
||||
wipWord: 0,
|
||||
wipStage: 0,
|
||||
wipEditing: 0,
|
||||
countdown: 0,
|
||||
})
|
||||
|
||||
// 显示
|
||||
let wipWord = $derived(words[status.wipWord])
|
||||
let wipStage = $derived(
|
||||
wipWord.stages[Math.min(status.wipStage, wipWord.stages.length - 1)],
|
||||
)
|
||||
let currentText = $derived(
|
||||
typeof wipStage == 'string' ? wipStage : wipStage.text,
|
||||
)
|
||||
let currentTextSliced = $derived(
|
||||
status.wipStage >= wipWord.stages.length
|
||||
? currentText.slice(0, currentText.length - status.wipEditing)
|
||||
: currentText,
|
||||
)
|
||||
let currentEditing = $derived(
|
||||
typeof wipStage == 'string' || status.wipEditing <= 0
|
||||
? ''
|
||||
: wipStage.editing[status.wipEditing - 1],
|
||||
)
|
||||
|
||||
// 主要的状态更新逻辑
|
||||
const DELAY_STEP_WORD = 250
|
||||
const DELAY_STEP_STAGE = 80
|
||||
const DELAY_STEP_EDIT = 80
|
||||
const DELAY_STEP_DELETE = 50
|
||||
const DELAY_DISPLAY_HOLD = 3000
|
||||
|
||||
// 调试用，如果发现动画有问题，可以在这里调慢动画
|
||||
const DELAY_GLOBAL_FACTOR = 1
|
||||
|
||||
function step(status: StatusMachine, dt: number): StatusMachine {
|
||||
if (status.countdown > 0) {
|
||||
return {
|
||||
...status,
|
||||
countdown: status.countdown - dt / DELAY_GLOBAL_FACTOR,
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof wipStage == 'object') {
|
||||
if (status.wipEditing < wipStage.editing.length) {
|
||||
return {
|
||||
...status,
|
||||
wipEditing: status.wipEditing + 1,
|
||||
countdown: status.countdown + DELAY_STEP_EDIT,
|
||||
}
|
||||
}
|
||||
} else if (status.wipStage >= wipWord.stages.length) {
|
||||
// 此时执行删除操作
|
||||
if (status.wipEditing < currentText.length) {
|
||||
return {
|
||||
...status,
|
||||
wipEditing: status.wipEditing + 1,
|
||||
countdown: status.countdown + DELAY_STEP_DELETE,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (status.wipStage < wipWord.stages.length) {
|
||||
return {
|
||||
...status,
|
||||
wipStage: status.wipStage + 1,
|
||||
wipEditing: 0,
|
||||
countdown:
|
||||
status.wipStage == wipWord.stages.length - 1
|
||||
? DELAY_DISPLAY_HOLD
|
||||
: DELAY_STEP_STAGE,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...status,
|
||||
wipWord: (status.wipWord + 1) % words.length,
|
||||
wipStage: 0,
|
||||
wipEditing: 0,
|
||||
countdown: DELAY_STEP_WORD,
|
||||
}
|
||||
}
|
||||
|
||||
// 时间循环
|
||||
onMount(() => {
|
||||
let enabled = true
|
||||
let lastTime = Date.now()
|
||||
|
||||
function _step() {
|
||||
if (!enabled) return
|
||||
|
||||
let currentTime = Date.now()
|
||||
|
||||
status = step(status, currentTime - lastTime)
|
||||
lastTime = currentTime
|
||||
|
||||
requestAnimationFrame(_step)
|
||||
}
|
||||
|
||||
_step()
|
||||
|
||||
return () => {
|
||||
enabled = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<span class="typewriter"
|
||||
><span style="user-select: none;"></span><span class="text"
|
||||
>{currentTextSliced}</span
|
||||
><span class="edit">{currentEditing}</span></span
|
||||
>
|
||||
|
||||
<style>
|
||||
@keyframes blink {
|
||||
from,
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.typewriter {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background-color: var(--color-bg-1);
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
& > .edit {
|
||||
text-decoration: underline;
|
||||
/* font-family: var(--font-mono); */
|
||||
}
|
||||
|
||||
&::after {
|
||||
--gap-ud: 0.5rem;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline-end: 0.5rem;
|
||||
inset-block-start: var(--gap-ud);
|
||||
block-size: calc(100% - var(--gap-ud) * 2);
|
||||
inline-size: 2px;
|
||||
background-color: var(--color-fg-0);
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,6 +2,7 @@
|
||||
import '../assets/style.css'
|
||||
import '../assets/fonts.css'
|
||||
import 'katex/dist/katex.min.css'
|
||||
import '@unocss/reset/tailwind-v4.css'
|
||||
|
||||
interface Props {
|
||||
title?: string
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
/* 在博客翻新时期使用的占位 Layout，讲究的就是极简 */
|
||||
|
||||
import BaseLayout from '../layout/BaseLayout.astro'
|
||||
import FullLayoutV1 from './FullLayoutV1.astro'
|
||||
|
||||
interface Props {
|
||||
title?: string
|
||||
@ -10,11 +10,11 @@ interface Props {
|
||||
const { title = '小帕的小窝' } = Astro.props
|
||||
---
|
||||
|
||||
<BaseLayout title={title}>
|
||||
<FullLayoutV1 title={title}>
|
||||
<div class="main">
|
||||
<slot />
|
||||
</div>
|
||||
</BaseLayout>
|
||||
</FullLayoutV1>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
@ -29,6 +29,12 @@ const { title = '小帕的小窝' } = Astro.props
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
& :global(h1) {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
& :global(a) {
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
|
||||
104
src/layout/FullLayoutV1.astro
Normal file
104
src/layout/FullLayoutV1.astro
Normal file
@ -0,0 +1,104 @@
|
||||
---
|
||||
import BaseLayout from './BaseLayout.astro'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
|
||||
interface Props {
|
||||
title?: string
|
||||
}
|
||||
|
||||
const { title = '小帕的小窝' } = Astro.props
|
||||
---
|
||||
|
||||
<BaseLayout title={title}>
|
||||
<div class="nav-container">
|
||||
<nav>
|
||||
<ul class="left">
|
||||
<li class="website-logo">
|
||||
<a href="/">小帕的小窝</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://legacy.passthem.top"
|
||||
><Icon name="mdi:history" /> 旧博客系统*</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blogs"><Icon name="mdi:invoice-text-outline" />文章</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about"
|
||||
><Icon name="mdi:information-slab-circle-outline" />关于</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="right">Hello!</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.nav-container {
|
||||
width: 100dvw;
|
||||
height: 3rem;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(4px);
|
||||
background-color: rgb(from var(--color-bg-n) r g b / 0.5);
|
||||
|
||||
& > nav {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-inline: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1400px;
|
||||
margin-inline: auto;
|
||||
|
||||
font-weight: 400;
|
||||
|
||||
& > ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
& li {
|
||||
height: 2rem;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(from var(--color-fg-0) r g b / 0.1);
|
||||
}
|
||||
|
||||
& > a {
|
||||
padding-inline: 0.75rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
||||
& > svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .website-logo > a {
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
|
||||
/* & > .logo { */
|
||||
/* --size: 2.5rem; */
|
||||
/**/
|
||||
/* width: var(--size); */
|
||||
/* height: var(--size); */
|
||||
/* display: inline-block; */
|
||||
/* } */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
import BaseLayout from '../layout/BaseLayout.astro'
|
||||
|
||||
import FullLayoutV1 from '../layout/FullLayoutV1.astro'
|
||||
import { listBlogs } from '../lib/apis/legacy/blog'
|
||||
|
||||
export const prerender = false
|
||||
@ -11,12 +10,34 @@ const page = isNaN(_page) ? 1 : Math.max(1, _page)
|
||||
const blogs = await listBlogs({ page })
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
{
|
||||
blogs.map((blog) => (
|
||||
<div>
|
||||
<a href={`/blogs/${blog.id}`}>{blog.title}</a>
|
||||
</div>
|
||||
))
|
||||
<FullLayoutV1>
|
||||
<div class="__dev__caution">
|
||||
<h1>仍在开发中，界面会崩坏</h1>
|
||||
</div>
|
||||
<section>
|
||||
<ul>
|
||||
{
|
||||
blogs.map((blog) => (
|
||||
<li>
|
||||
<a href={`/blogs/${blog.id}`}>{blog.title}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</FullLayoutV1>
|
||||
|
||||
<style>
|
||||
.__dev__caution {
|
||||
width: 100dvw;
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > h1 {
|
||||
font-size: 72px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</BaseLayout>
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
---
|
||||
export const prerender = false
|
||||
|
||||
import BoringLayout from '../layout/BoringLayout.astro'
|
||||
// import BoringLayout from '../layout/BoringLayout.astro'
|
||||
import FullLayoutV1 from '../layout/FullLayoutV1.astro'
|
||||
import MainpageButton from '../components/MainpageButton.svelte'
|
||||
import MainpageTypewriter from '../components/MainpageTypewriter.svelte'
|
||||
import { Image } from 'astro:assets'
|
||||
|
||||
import { mainpageGetClick } from '../lib/apis/legacy/mainpage'
|
||||
|
||||
// 无用按钮的数字预注入
|
||||
// 常量定义
|
||||
const AVATAR_URL =
|
||||
'https://cdn.passthem.top/sharex/2026/03/%E6%93%A6%E6%B1%97%E5%90%8E_%E6%96%B9%E5%BD%A2.png.upscale.png'
|
||||
|
||||
// 无用按钮的数字预注入
|
||||
let initialClicks = 0
|
||||
|
||||
try {
|
||||
@ -18,10 +24,220 @@ try {
|
||||
}
|
||||
---
|
||||
|
||||
<BoringLayout>
|
||||
<!--<BoringLayout>
|
||||
<h1>博客系统翻新中...</h1>
|
||||
<p>点击 <a href="https://legacy.passthem.top">这里</a> 查看旧版博客</p>
|
||||
<p>或者了解更多 <a href="/about">关于这里</a></p>
|
||||
<p>也欢迎你来 <a href="/contact">联络我</a></p>
|
||||
<p><MainpageButton initialClicks={initialClicks} client:load /></p>
|
||||
</BoringLayout>
|
||||
</BoringLayout>-->
|
||||
<FullLayoutV1 title="首页 - 小帕的小窝">
|
||||
<!-- 就像写幻灯片一样的逻辑写它吧！ -->
|
||||
<section class="slide">
|
||||
<!-- 自我介绍部分 -->
|
||||
<div class="self-introduction">
|
||||
<figure class="avatar">
|
||||
<Image
|
||||
src={AVATAR_URL}
|
||||
alt="passthem 的头像，一个戴眼镜的男孩"
|
||||
loading="eager"
|
||||
width={240}
|
||||
height={240}
|
||||
/>
|
||||
</figure>
|
||||
<div class="descriptions">
|
||||
<div class="motto">
|
||||
<p>passthem¹</p>
|
||||
<p>一个<MainpageTypewriter client:load />的</p>
|
||||
<p>个人势创作者</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<MainpageButton initialClicks={initialClicks} client:load />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notation">
|
||||
<p>¹我在各个平台的惯用 ID，开头字母大小写无所谓</p>
|
||||
<p>
|
||||
²头像由 <a href="https://space.bilibili.com/2017869">Yscao@bilibili</a> 绘制
|
||||
</p>
|
||||
<p>
|
||||
³有人说这个配色像 <a
|
||||
href="https://www.bilibili.com/video/av383664698/"
|
||||
class="thsx">涂黑书信</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide" style="background-color: var(--color-bg-1);">
|
||||
<div class="slide-title-design1">
|
||||
<svg aria-hidden="true" width="800" height="240" viewBox="0 0 800 240">
|
||||
<text x="10" y="220" class="stroke-layer">留言</text>
|
||||
<text x="0" y="210" class="main-layer">留言</text>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>当前页面还在开发中......</h1>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<div class="slide-title-design1">
|
||||
<svg aria-hidden="true" width="800" height="240" viewBox="0 0 800 240">
|
||||
<text x="10" y="220" class="stroke-layer">友链</text>
|
||||
<text x="0" y="210" class="main-layer">友链</text>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>当前页面还在开发中......</h1>
|
||||
</section>
|
||||
</FullLayoutV1>
|
||||
|
||||
<style>
|
||||
.slide {
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
& > .notation {
|
||||
position: absolute;
|
||||
width: 100dvw;
|
||||
padding-inline-start: 2rem;
|
||||
padding-block-end: 2rem;
|
||||
inset-inline-start: 0;
|
||||
inset-block-end: 0;
|
||||
font-size: smaller;
|
||||
color: var(--color-fg-0);
|
||||
opacity: 0.3;
|
||||
|
||||
& a {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fg-0);
|
||||
color: var(--color-bg-0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 自我介绍部分 */
|
||||
.self-introduction {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row-reverse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& > .avatar {
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
width: clamp(160px, 30vw, 240px);
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& > .descriptions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
|
||||
& > .motto {
|
||||
font-size: clamp(2rem, 4vw, 4rem);
|
||||
font-weight: 800;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
align-items: center;
|
||||
width: 11em;
|
||||
|
||||
& > p {
|
||||
margin: 0;
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
& > .buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thsx {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.motto > p {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: var(--color-fg-0);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
inset-inline-start: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
section:has(.thsx:hover) .motto > p {
|
||||
&:nth-child(1)::before {
|
||||
transition-delay: 0;
|
||||
}
|
||||
&:nth-child(2)::before {
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
&:nth-child(3)::before {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transition: inset-inline-start cubic-bezier(0.2, 1, 0.17, 1) 1s;
|
||||
inset-inline-start: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
section:has(.thsx:hover) .buttons {
|
||||
transition: filter cubic-bezier(0.2, 1, 0.17, 1) 1s;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.slide-title-design1 {
|
||||
position: absolute;
|
||||
inset-inline-start: -1rem;
|
||||
inset-block-start: -5rem;
|
||||
opacity: 0.6;
|
||||
|
||||
& > svg {
|
||||
font-weight: 900;
|
||||
font-size: 10rem;
|
||||
|
||||
& > .stroke-layer {
|
||||
fill: none;
|
||||
stroke: var(--color-fg-0);
|
||||
stroke-width: 1px;
|
||||
stroke-linejoin: round;
|
||||
user-select: none;
|
||||
}
|
||||
& > .main-layer {
|
||||
fill: var(--color-fg-0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user