Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-04-18 20:52:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): pink-ish glow

Browse source
This commit is contained in:
ThaUnknown 2023-12-27 17:14:46 +01:00
parent cfc03593fa
commit 874d99e78f
3 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/lib/components/VideoShowcase.svelte
View file

@ -21,7 +21,7 @@
<span class='material-symbols-outlined filled text-white'>play_arrow</span>
</button>
<img src='app.webp' alt='app' class='mw-full px-20 w-full app-image' />
<div class='overlay-gradient position-absolute top-0 left-0 w-full h-full' />
<div class='overlay-gradient position-absolute px-20 top-0 left-0 w-full h-full' />
</div>
<style>

5
web/src/routes/+layout.svelte
View file

@ -11,12 +11,13 @@
const scrollPosition = writable(0)
setContext('scroll-position', scrollPosition)
/** @param {HTMLDivElement} t */
function smoothScroll (t, { speed = 120, smooth = 10 } = {}) {
let moving = false
let pos = t.scrollTop
let scrollTop = t.scrollTop
scrollPosition.value = t.scrollTop
let lastTime = null
let lastTime = 0
t.addEventListener('wheel', e => {
e.preventDefault()
console.log(e.deltaY)
@ -24,7 +25,7 @@
const spd = (e.deltaY !== (e.deltaY | 0) || e.wheelDelta % 10 !== 0) ? speed / 10 : speed
pos = Math.max(0, Math.min(pos - Math.max(-1, Math.min(1, e.deltaY * -1)) * spd, (t.scrollHeight - t.clientHeight) + (smooth * 2)))
if (!moving) {
lastTime = null
lastTime = 0
update()
}
}, { capture: true, passive: false })

23
web/src/routes/+page.svelte
View file

@ -17,7 +17,13 @@
<Hero />
<div class='container-xl'>
<VideoShowcase />
</div>
<div class='position-relative'>
<div class='glow top-0 right-0 position-absolute' />
</div>
<div class='container-xl'>
<div class='my-20 pb-20' id='about'>
<h1 class='font-weight-bold text-white content text-center'>Torrenting made simple.</h1>
<p class='text-muted font-size-18 content text-center pb-20'> Feature-rich yet wonderfully simple. Miru delivers what you want effortlessly.<br />No complex configurations or high entry barriers — Miru is functional out of the box.</p>
@ -53,7 +59,9 @@
</div>
<hr />
</div>
<div class='position-relative z-100'>
<div class='glow top-0 left-0 position-absolute z-100' />
</div>
<div class='overflow-hidden my-20 position-relative'>
<div class='container-xl'>
<div class='row'>
@ -68,7 +76,7 @@
</div>
<div class='col-md-5 col-12 overflow-hidden overflow-md-unset h-600 position-relative justify-content-center justify-content-md-end d-flex'>
<ShowcaseCards />
<div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-100 d-md-none' />
<div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50 d-md-none' />
</div>
</div>
</div>
@ -123,6 +131,17 @@
<Stargazers stargazers={data.stargazers} />
<style>
.glow {
background-image: radial-gradient(circle farthest-side,rgba(255,0,182,.05),hsla(0,0%,100%,0));
height: 100rem;
width: 100rem;
}
.glow.left-0 {
transform: translate(-70%, -20%);
}
.glow.right-0 {
transform: translate(70%, -60%);
}
.overlay-gradient-top-bottom {
background: linear-gradient(0deg, #101113ff 0%, #10111300 25%, #10111300 75%, #101113ff);
pointer-events: none;