完成首页
This commit is contained in:
@ -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));
|
||||
|
||||
@ -81,6 +81,13 @@
|
||||
'钻研手工开发',
|
||||
],
|
||||
},
|
||||
{
|
||||
stages: [
|
||||
{ text: '', editing: ['b', 'bw', "bw'v", "bw'vj"] },
|
||||
{ text: '备战', editing: ['k', 'kc', "kc'y", "kc'yj"] },
|
||||
'备战考研',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
// 状态机定义
|
||||
|
||||
@ -97,7 +97,40 @@ try {
|
||||
<div class="slide-title-design2" aria-hidden="true">
|
||||
<Icon name="mdi:email" />
|
||||
</div>
|
||||
<h1>当前页面还在开发中......</h1>
|
||||
<div class="contact-container">
|
||||
<h1><div class="text">联系我</div><div class="animation"></div></h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Github</th>
|
||||
<th><a href="https://github.com/passthem-desu">passthem-desu</a></th
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Youtube</th>
|
||||
<th
|
||||
><a href="https://www.youtube.com/@Passthem183">@Passthem183</a
|
||||
></th
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>OtoSite</th>
|
||||
<th><a href="https://otomad.site/@passthem">@passthem</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Email</th>
|
||||
<th
|
||||
><a href="mailto:passthem183@gmail.com">passthem183@gmail.com</a
|
||||
></th
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bilibili</th>
|
||||
<th><a href="https://space.bilibili.com/92852604">passthem</a></th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
@ -110,7 +143,57 @@ try {
|
||||
<div class="slide-title-design2" aria-hidden="true">
|
||||
<Icon name="mdi:link-variant" />
|
||||
</div>
|
||||
<h1>当前页面还在开发中......</h1>
|
||||
<h1>友情链接</h1>
|
||||
<div class="friends">
|
||||
{
|
||||
[
|
||||
[
|
||||
'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 => <a href={b[1]} class="friend">
|
||||
<div class="avatar">
|
||||
<Image src={b[0]} width={60} height={60} alt=`网站「${b[2]}」的图标` />
|
||||
</div>
|
||||
<div class="description">
|
||||
{b[2]}
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</FullLayoutV1>
|
||||
|
||||
@ -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); */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user