dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-19 04:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

small visual changes for home page

Browse source
This commit is contained in:
Daniel Bulant 2023-03-04 19:24:23 +01:00
parent f98832f7e3
commit 68f44f90f7
3 changed files with 30 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/lib/components/hero.svelte
View file

@ -18,11 +18,18 @@
</script>
<div class="hero">
<div class="bg">
<div class="bg z-0">
<img class="bg1" style="right: {(current - 3) * 100}%;" src="/screenshots/heaventaker/heaventaker.webp" alt="">
<img class="bg2" style="right: {(current - 2) * 100}%;" src="/screenshots/animasher.webp" alt="">
<img class="bg3" style="right: {(current - 1) * 100}%;" src="/screenshots/ignibg.webp" alt="">
<img class="bg4" style="right: {(current - 0) * 100}%;" src="/screenshots/mangadex.webp" alt="">
<img class="bg4" style="right: {(current - 0) * 100}%;" src="/screenshots/mangadex.png" alt="">
</div>
<div class="blur z-1"></div>
<div class="bg z-2">
<img class="bg1" style="right: {(current - 3) * 100}%;" src="/screenshots/heaventaker/heaventaker.webp" alt="">
<img class="bg2" style="right: {(current - 2) * 100}%;" src="/screenshots/animasher.webp" alt="">
<img class="bg3" style="right: {(current - 1) * 100}%;" src="/screenshots/ignibg.webp" alt="">
<img class="bg4" style="right: {(current - 0) * 100}%;" src="/screenshots/mangadex.png" alt="">
</div>
<slot />
</div>
@ -60,6 +67,23 @@
border-radius: 5px;
transition: right .4s;
}
.blur {
position: absolute;
top: -4rem;
left: -4rem;
width: calc(100% + 8rem);
height: calc(100% + 8rem);
backdrop-filter: blur(20px);
}
.z-0 {
z-index: -3;
}
.z-1 {
z-index: -2;
}
.z-2 {
z-index: -1;
}
@media (prefers-reduced-motion) {
.bg img {
transition: none;

5
src/lib/components/posts.svelte
View file

@ -39,11 +39,10 @@
margin: 50px auto 30px;
}
.hero {
width: calc(60% - 5px);
margin-right: 5px;
@apply mr-2 mb-4;
width: calc(60% - 0.5rem);
min-width: 620px;
flex-shrink: 0;
margin-bottom: 15px;
}
.posts {
width: calc(40% - 5px);

4
src/lib/components/project.svelte
View file

@ -90,7 +90,7 @@
filter: blur(35px);
}
.desc {
@apply absolute top-0 left-0 w-full h-full rounded-lg opacity-0 select-none flex flex-col py-10px px-15px;
@apply absolute top-0 left-0 w-full h-full rounded-lg opacity-0 select-none flex flex-col py-2rem px-2rem;
transition: background-color 0.3s, opacity 0.3s;
background-color: rgba(0, 0, 0, 0.2);
color: rgb(214, 214, 214);
@ -114,7 +114,7 @@
filter: blur(0px) grayscale(0);
}
img.grayscale {
filter: grayscale(100%);
filter: blur(0px) grayscale(100%);
}
h3 {
@apply font-normal text-xl;