hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-23 02:39:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

improve performance features slice

Browse source
This commit is contained in:
Christofer 2023-08-28 10:16:17 +04:00
parent 3757c62185
commit a08e286dea
7 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/lib/images/features/config default.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 160 KiB

BIN
src/lib/images/features/config hover.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 169 KiB

BIN
src/lib/images/features/config_default.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
src/lib/images/features/config_hover.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
src/lib/images/features/tiling_default.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 190 KiB

BIN
src/lib/images/features/tiling_hover.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 200 KiB

23
src/routes/FeaturesSlice.svelte
View file

@ -12,9 +12,9 @@
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title.svelte'
import Hypractive from './Hypractive.svelte' import Hypractive from './Hypractive.svelte'
import { getIsMobile } from '$lib/Helper.mjs' import { getIsMobile } from '$lib/Helper.mjs'
import configDefaultImage from '$lib/images/features/config default.png' import configDefaultImage from '$lib/images/features/config_default.png'
import tileDefaultImage from '$lib/images/features/tiling_default.png' import tileDefaultImage from '$lib/images/features/tiling_default.png'
import configHoverImage from '$lib/images/features/config hover.png' import configHoverImage from '$lib/images/features/config_hover.png'
import tileHoverImage from '$lib/images/features/tiling_hover.png' import tileHoverImage from '$lib/images/features/tiling_hover.png'
let isMobile = false let isMobile = false
@ -72,8 +72,8 @@
<div class="absolute _wrapper inset-0 select-none" aria-hidden> <div class="absolute _wrapper inset-0 select-none" aria-hidden>
<div class="feature-image"> <div class="feature-image">
<img src={configDefaultImage} class="config-default" alt="" aria-hidden="true" /> <img src={configDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" />
<img src={configHoverImage} class="config-hover" alt="" aria-hidden="true" /> <img src={configHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" />
</div> </div>
</div> </div>
</FeatureCard> </FeatureCard>
@ -83,8 +83,8 @@
</p> </p>
<div class="absolute _wrapper inset-0 select-none" aria-hidden> <div class="absolute _wrapper inset-0 select-none" aria-hidden>
<div class="feature-image"> <div class="feature-image">
<img src={tileDefaultImage} class="config-default" alt="" aria-hidden="true" /> <img src={tileDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" />
<img src={tileHoverImage} class="config-hover" alt="" aria-hidden="true" /> <img src={tileHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" />
</div> </div>
</div> </div>
</FeatureCard> </FeatureCard>
@ -126,6 +126,11 @@
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
opacity: 0.5; opacity: 0.5;
z-index: -10;
._wrapper:hover & {
opacity: 1;
}
& img { & img {
width: 800px; width: 800px;
@ -137,14 +142,14 @@
pointer-events: none; pointer-events: none;
} }
} }
.config-hover { .feature-image_inner-hover {
opacity: 0; opacity: 0;
} }
._wrapper:hover { ._wrapper:hover {
& .config-default { & .feature-image_inner {
opacity: 0; opacity: 0;
} }
& .config-hover { & .feature-image_inner-hover {
opacity: 1 !important; opacity: 1 !important;
filter: saturate(1.5); filter: saturate(1.5);
} }