hyprwm
/
hyprland-website
mirror of https://github.com/hyprwm/hyprland-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

small improvments

This commit is contained in:
VDawg 2023-11-02 16:20:05 +02:00
parent bcfd08b0d6
commit 7e247cfc16
8 changed files with 70 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/routes/DiscordProfilePicture.svelte → src/lib/components/DiscordProfilePicture.svelte Executable file → Normal file
View 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,6 +109,7 @@
class:_animate={isAnimating && hasEnteredView}
on:inview_enter={onViewEnter}
>
<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}
@ -114,6 +121,8 @@
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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/lib/images/amongus/gun.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/lib/images/amongus/red.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

13
src/routes/CommunitySlice.svelte
View File

@ -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"

2
src/routes/Hypractive.svelte
View File

@ -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()

2
src/routes/PreviewRiceSlice.svelte
View File

@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB