dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-24 12:23:57 +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> </script>
<div class="hero"> <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="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="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="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> </div>
<slot /> <slot />
</div> </div>
@ -60,6 +67,23 @@
border-radius: 5px; border-radius: 5px;
transition: right .4s; 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) { @media (prefers-reduced-motion) {
.bg img { .bg img {
transition: none; transition: none;

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

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

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

@ -90,7 +90,7 @@
filter: blur(35px); filter: blur(35px);
} }
.desc { .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; transition: background-color 0.3s, opacity 0.3s;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
color: rgb(214, 214, 214); color: rgb(214, 214, 214);
@ -114,7 +114,7 @@
filter: blur(0px) grayscale(0); filter: blur(0px) grayscale(0);
} }
img.grayscale { img.grayscale {
filter: grayscale(100%); filter: blur(0px) grayscale(100%);
} }
h3 { h3 {
@apply font-normal text-xl; @apply font-normal text-xl;