mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2025-01-03 15:39:48 +01:00
small improvments
This commit is contained in:
VDawg
parent
bcfd08b0d6
commit
7e247cfc16
8 changed files with 70 additions and 22 deletions
37
src/routes/DiscordProfilePicture.svelte → src/lib/components/DiscordProfilePicture.svelte
Executable file → Normal file
37
src/routes/DiscordProfilePicture.svelte → src/lib/components/DiscordProfilePicture.svelte
Executable file → Normal file
|
|
@ -2,7 +2,7 @@
|
|||
import clsx from 'clsx'
|
||||
import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
|
||||
import { spring } from 'svelte/motion'
|
||||
import { contextId as ctxId } from './CommunitySlice.svelte'
|
||||
import { contextId as ctxId } from '../../routes/CommunitySlice.svelte'
|
||||
import { lerp } from '$lib/Helper.mjs'
|
||||
import { inview } from 'svelte-inview'
|
||||
|
||||
|
|
@ -22,6 +22,13 @@
|
|||
export let contextId = ctxId
|
||||
export let isAnimating = true
|
||||
|
||||
/** @type {HTMLElement}*/
|
||||
export let element = undefined
|
||||
/** @type {HTMLImageElement}*/
|
||||
export let imageWrapper
|
||||
/** @type {HTMLImageElement}*/
|
||||
export let imageElement
|
||||
|
||||
const { biggestSize, getSectionElement } = getContext(contextId)
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
|
|
@ -34,8 +41,6 @@
|
|||
precision: 0.001
|
||||
})
|
||||
|
||||
/** @type {HTMLImageElement}*/
|
||||
let imageElement
|
||||
let hasEnteredView = false
|
||||
let hasImageLoaded = false
|
||||
|
||||
|
|
@ -92,6 +97,7 @@
|
|||
style:translate={coordinates.map((xy) => xy + 'px').join(' ')}
|
||||
style="width: {size}px; height: {size}px;--delay: {delay}ms;"
|
||||
aria-hidden="true"
|
||||
bind:this={element}
|
||||
>
|
||||
<div
|
||||
class={clsx(
|
||||
|
|
@ -103,17 +109,20 @@
|
|||
class:_animate={isAnimating && hasEnteredView}
|
||||
on:inview_enter={onViewEnter}
|
||||
>
|
||||
<img
|
||||
class="group h-full w-full touch-none select-none rounded-[50%] object-cover outline outline-4 {$$restProps.class}"
|
||||
bind:this={imageElement}
|
||||
on:load={() => (hasImageLoaded = true)}
|
||||
src={image}
|
||||
alt="community profile picture"
|
||||
aria-hidden="true"
|
||||
on:mouseenter={(event) => dispatch('hover', event)}
|
||||
class:hover:scale-125={!!quote}
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="" bind:this={imageWrapper}>
|
||||
<img
|
||||
class="group h-full w-full touch-none select-none rounded-[50%] object-cover outline outline-4 {$$restProps.class}"
|
||||
bind:this={imageElement}
|
||||
on:load={() => (hasImageLoaded = true)}
|
||||
src={image}
|
||||
alt="community profile picture"
|
||||
aria-hidden="true"
|
||||
on:mouseenter={(event) => dispatch('hover', event)}
|
||||
class:hover:scale-125={!!quote}
|
||||
loading="lazy"
|
||||
/>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
{#if quote}
|
||||
<div class="quote" aria-hidden="true">
|
||||
BIN
src/lib/images/amongus/green.webp
Normal file
BIN
src/lib/images/amongus/green.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/lib/images/amongus/gun.webp
Normal file
BIN
src/lib/images/amongus/gun.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/lib/images/amongus/red.webp
Normal file
BIN
src/lib/images/amongus/red.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
|
|
@ -5,10 +5,11 @@
|
|||
<script>
|
||||
import Button from '$lib/components/Button.svelte'
|
||||
import DiscordIcon from '~icons/prime/discord'
|
||||
import DiscordProfilePicture from './DiscordProfilePicture.svelte'
|
||||
import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
|
||||
import { setContext } from 'svelte'
|
||||
import Title from '$lib/components/Title.svelte'
|
||||
import background from '$lib/images/community-bg.webp'
|
||||
import amongUsGreenImage from '$lib/images/amongus/green.webp'
|
||||
|
||||
let sectionElement
|
||||
let isDraggingChan = false
|
||||
|
|
@ -135,10 +136,10 @@
|
|||
class: 'outline-green-500'
|
||||
},
|
||||
{
|
||||
image: '/imgs/profile_pictures/qwaranou.webp',
|
||||
image: amongUsGreenImage,
|
||||
coordinates: [873, 224],
|
||||
size: 79,
|
||||
class: 'outline-slate-500'
|
||||
class: 'outline-green-500'
|
||||
},
|
||||
{
|
||||
image: '/imgs/profile_pictures/SimplyKyle!.webp',
|
||||
|
|
@ -208,8 +209,8 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="absolute w-[1024px]">
|
||||
<div class="flex h-full origin-bottom-right flex-wrap gap-4">
|
||||
<div class="absolute w-[1024px] select-none">
|
||||
<div class="flex h-full origin-bottom-right select-none flex-wrap gap-4">
|
||||
{#each profiles as { onDragEnd, onDragStart, onHover, ...props }}
|
||||
<DiscordProfilePicture
|
||||
{...props}
|
||||
|
|
@ -222,7 +223,7 @@
|
|||
</div>
|
||||
<img
|
||||
src={background}
|
||||
class="absolute top-0 -z-10 min-w-[1400px]"
|
||||
class="absolute top-0 -z-10 min-w-[1400px] select-none"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
loading="lazy"
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
import GitTile from '$lib/components/GitTile.svelte'
|
||||
import { lerp } from '$lib/Helper.mjs'
|
||||
import { cubicInOut, expoInOut } from 'svelte/easing'
|
||||
import DiscordProfilePicture from './DiscordProfilePicture.svelte'
|
||||
import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
|
||||
import { setContext } from 'svelte'
|
||||
|
||||
const click$ = new Subject()
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
use:inview={{ threshold: 0.5 }}
|
||||
on:inview_enter={() => {
|
||||
isVisible = true
|
||||
videoElement.play()
|
||||
!isPaused && videoElement.play()
|
||||
}}
|
||||
on:inview_leave={() => {
|
||||
isVisible = false
|
||||
|
|
|
|||
38
static/imgs/square_pattern.svg
Normal file
38
static/imgs/square_pattern.svg
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="26.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="50.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="74.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="98.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="122.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="2.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="26.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="50.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="74.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="98.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="122.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="2.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="26.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="50.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="74.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="98.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="122.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="2.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="26.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="50.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="74.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="98.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="122.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="2.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="26.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="50.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="74.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="98.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="122.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="2.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="26.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="50.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="74.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="98.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
<rect x="122.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in a new issue