From 8fa4ed1b0d5d78cc93b9a374398dc8769f645f5d Mon Sep 17 00:00:00 2001 From: passthem Date: Wed, 1 Apr 2026 22:54:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=A6=96=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/style.css | 1 + src/components/MainpageTypewriter.svelte | 7 + src/pages/index.astro | 314 ++++++++++++++++++++++- 3 files changed, 320 insertions(+), 2 deletions(-) diff --git a/src/assets/style.css b/src/assets/style.css index de25035..bb634ea 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -11,6 +11,7 @@ --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-bg-2: light-dark(oklch(85% 0 0), oklch(20% 0.02 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)); diff --git a/src/components/MainpageTypewriter.svelte b/src/components/MainpageTypewriter.svelte index b0b8bb0..0c4bccb 100644 --- a/src/components/MainpageTypewriter.svelte +++ b/src/components/MainpageTypewriter.svelte @@ -81,6 +81,13 @@ '钻研手工开发', ], }, + { + stages: [ + { text: '', editing: ['b', 'bw', "bw'v", "bw'vj"] }, + { text: '备战', editing: ['k', 'kc', "kc'y", "kc'yj"] }, + '备战考研', + ], + }, ] // 状态机定义 diff --git a/src/pages/index.astro b/src/pages/index.astro index adb094c..02fab58 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -97,7 +97,40 @@ try { -

当前页面还在开发中......

+
+

联系我

+ + + + + + + + + + + + + + + + + + + + + + + +
Githubpassthem-desu
Youtube@Passthem183
OtoSite@passthem
Emailpassthem183@gmail.com
Bilibilipassthem
+
@@ -110,7 +143,57 @@ try { -

当前页面还在开发中......

+

友情链接

+
+ { + [ + [ + 'https://omega98.top/images/blog_avatar.jpg', + 'https://omega98.top', + '核子的博客', + ], + ['https://www.tnot.top/logo.png', 'https://tnot.top', 'TNOT 的博客'], + [ + 'https://ruusuge.top/img/logo_hu_cc283ac364b1bc0b.png', + 'https://ruusuge.top', + 'ルース毛的博客', + ], + [ + 'https://cdn.jsdelivr.net/gh/TransparentLC/transparentlc.github.io/img/avatar.jpg', + 'https://akarin.dev', + '存在感消失的地方', + ], + [ + 'https://wzq02.top/assets/icons/favicon-96x96.png', + 'https://wzq02.top', + 'wzq02 的博客', + ], + [ + 'https://pics.r1kka.one/file/1738764637932_-305500c1acccdf39.jpg', + 'https://r1kka.one/', + "Rikka's Blog", + ], + [ + 'https://legacy.passthem.top/assets/ydt-DIeb2Djx.png', + 'https://qm.qq.com/q/nDnHUy9KQo', + '有顶天变电站 (QQ)' + ], + [ + 'https://legacy.passthem.top/assets/lfxdxy-BogfTZvz.png', + 'https://qm.qq.com/q/QOpCVZcvyS', + '六方相的新月 (QQ)' + ] + ].map(b => +
+ `网站「${b[2]}」的图标` +
+
+ {b[2]} +
+ + ) + } +
@@ -131,6 +214,11 @@ try { document.querySelectorAll('section.slide').forEach((ele) => { observer.observe(ele) + ;(ele as HTMLElement).addEventListener('focusin', () => { + ele.scrollIntoView({ + block: 'start', + }) + }) }) } @@ -437,4 +525,226 @@ try { } } } + + /* 联络页 */ + @keyframes bg-contact-roll { + 0% { + background-position: 0 0; + } + 100% { + background-position: var(--bg-width) 0; + } + } + + .contact-container { + & > h1 { + --height: 1.5em; + --skew-angle: 15deg; + --col1: var(--color-fg-0); + --bg-width: 2rem; + + height: var(--height); + line-height: var(--height); + display: grid; + grid-template-columns: auto 1fr; + color: var(--color-bg-0); + margin-block-end: 0.5em; + + & > .text { + background-color: var(--color-fg-0); + position: relative; + + &::after { + content: ''; + display: block; + position: absolute; + inset-inline-end: calc(tan(var(--skew-angle)) * var(--height) * -1); + inset-block-start: 0; + height: 100%; + width: calc(tan(var(--skew-angle)) * var(--height)); + background-image: linear-gradient( + to left bottom, + transparent 50%, + var(--col1) 50% + ); + } + } + + & > .animation { + content: ''; + display: block; + background-image: linear-gradient( + 90deg, + transparent 0, + transparent 25%, + var(--col1) 25%, + var(--col1) 75%, + transparent 75%, + transparent 100% + ); + background-repeat: repeat; + background-size: var(--bg-width) 100%; + animation: bg-contact-roll infinite linear 2s; + transform: skewX(var(--skew-angle)) + translateX(calc(0.5 * tan(var(--skew-angle)) * var(--height) - 1px)); + } + } + + & > table { + font-family: var(--font-mono); + + & caption { + text-align: center; + } + + & tr { + text-align: left; + display: grid; + grid-template-columns: 6em 16em; + gap: 1em; + line-height: 2em; + + @media (max-width: 767px) { + grid-template-columns: 18em; + gap: 0; + line-height: 1.8em; + margin-block: 1em; + } + + & th:nth-child(1) { + display: flex; + justify-content: space-between; + + @media (max-width: 767px) { + justify-content: left; + } + + &::after { + content: ':'; + } + } + + & th:nth-child(2) { + display: flex; + justify-content: space-between; + + @media (max-width: 767px) { + justify-content: end; + } + + &::before { + content: '['; + } + + &::after { + content: ']'; + } + + &:hover, + &:has(a:focus) { + background-color: var(--color-fg-0); + color: var(--color-bg-0); + } + + & > a { + text-align: center; + margin-inline: 1em; + + &:focus { + outline: none; + } + } + } + } + } + } + + /* 友链页 */ + .slide:has(>.friends) { + flex-direction: column; + gap: 1rem; + } + + .friends { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 1rem; + max-width: 50rem; + max-height: 30rem; + padding-block: 3rem; + overflow-y: scroll; + margin-inline: 1rem; + background-color: rgb(from var(--color-bg-0) r g b / .3); + border-radius: 2rem; + backdrop-filter: blur(5px); + + & > .friend { + background-color: var(--color-bg-0); + display: grid; + align-items: center; + border-radius: 30px; + overflow: hidden; + width: 14rem; + height: 60px; + grid-template-columns: 60px 1fr; + position: relative; + isolation: isolate; + + & > .avatar { + border-radius: 30px; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + background-color: var(--color-bg-n); + /* box-shadow: 0 0 0 10px var(--color-bg-2); */ + transition: all cubic-bezier(0.2, 1, 0.4, 1) 0.5s; + } + + & > .description { + text-align: center; + } + + &::before { + content: ''; + display: block; + border-radius: 30px; + background-color: var(--color-bg-n); + position: absolute; + z-index: -1; + width: 100%; + height: 100%; + + inset-inline-start: calc(-100% + 30px); + box-shadow: 0 0 0 10px var(--color-blue); + transition: inset-inline-start cubic-bezier(0.2, 1, 0.4, 1) 0.5s; + } + + outline: solid 0px transparent; + outline-offset: 0px; + transition: all cubic-bezier(0.2, 1, 0.4, 1) 0.5s; + + &:focus { + outline: solid 3px var(--color-blue); + outline-offset: 3px; + } + + &:hover, &:focus { + transform: scale(1.1); + } + + &:hover::before, + &:focus::before { + inset-inline-start: 0; + } + + &:hover .avatar, + &:focus .avatar { + /* transform: rotate(360deg); */ + } + } + }