15308555518/ mirror-web
1
0
Fork 0
mirror of https://github.com/tuna/mirror-web.git synced 2025-12-25 20:32:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

WIP: meow

This commit is contained in:
Liu Xiaoyi 2025-03-31 22:22:57 +08:00
parent 51fc3b37d2
commit 885dbdd41d
6 changed files with 95 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
_includes/nav.html
View File

@ -1,3 +1,22 @@
<div class="vtuber-top">
<div class="vtuber-brand">
<picture>
<source srcset="/static/img/vtuber-dark.png 1x" media="(prefers-color-scheme: dark)"></source>
<img src="/static/img/vtuber-light.png"></img>
</picture>
<div class="vtuber-title">
清华大学开源软件镜像站
</div>
</div>
<div class="vtuber-backdrops">
<div class="vtuber-backdrop-1"></div>
<div class="vtuber-backdrop-2"></div>
<div class="vtuber-backdrop-3"></div>
<div class="vtuber-backdrop-4"></div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-default mt-3" role="navigation">
<div class="container-fluid container-xl">
<div class="navbar-header">

2
_layouts/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html {% if site.issue %}class="index-issue"{% endif %} lang="zh-Hans">
<html {% if site.issue %}class="index-issue"{% endif %} lang="zh-Hans" style="--scroll-top: 0">
{% include head.html notArticle=true %}
<body>
{% unless page.legacy or site.issue %}

4
_src/entrypoints/app.ts
View File

@ -21,3 +21,7 @@ createApp(IsoModal, {
}).mount(isoModalEl);
createApp(MainMirrorList).mount("#mirror-list");
window.addEventListener('scroll', (e) => {
document.body.style.setProperty('--scroll-top', (window.scrollY / window.innerHeight).toString());
});

71
_src/styles/global.scss
View File

@ -205,3 +205,74 @@ a {
margin-right: 5px;
}
}
.vtuber-top {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
.vtuber-brand {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
picture, img {
width: 50vw;
}
.vtuber-title {
margin-top: 10px;
font-size: 42px;
font-weight: 700;
text-align: center;
letter-spacing: 0.2em;
}
}
}
.vtuber-backdrops {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
height: 100vh;
z-index: -1;
overflow: hidden;
}
.vtuber-backdrop-1 {
position: absolute;
height: 100vh;
width: 100%;
background-color: var(--bs-body-bg);
}
.vtuber-backdrop-2 {
position: absolute;
height: 100vh;
width: 100%;
background-color: blue;
}
.vtuber-backdrop-3 {
position: absolute;
height: 100vh;
width: 100%;
background-color: green;
}
.vtuber-backdrop-4 {
position: absolute;
height: 100vh;
width: 200vw;
background-color: red;
box-shadow: rgba(0,0,0,.7) 0 -2px 6px;
transform: rotate(calc(var(--scroll-top) * 20deg + 10deg)) translateX(calc(var(--scroll-top) * 100vh - 10px))
}

BIN
static/img/vtuber-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
static/img/vtuber-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB