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

small improvments

Browse source
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

37
src/routes/DiscordProfilePicture.svelte → src/lib/components/DiscordProfilePicture.svelte Executable file → Normal file
View file

@ -2,7 +2,7 @@
import clsx from 'clsx' import clsx from 'clsx'
import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte' import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
import { spring } from 'svelte/motion' 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 { lerp } from '$lib/Helper.mjs'
import { inview } from 'svelte-inview' import { inview } from 'svelte-inview'
@ -22,6 +22,13 @@
export let contextId = ctxId export let contextId = ctxId
export let isAnimating = true 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 { biggestSize, getSectionElement } = getContext(contextId)
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -34,8 +41,6 @@
precision: 0.001 precision: 0.001
}) })
/** @type {HTMLImageElement}*/
let imageElement
let hasEnteredView = false let hasEnteredView = false
let hasImageLoaded = false let hasImageLoaded = false
@ -92,6 +97,7 @@
style:translate={coordinates.map((xy) => xy + 'px').join(' ')} style:translate={coordinates.map((xy) => xy + 'px').join(' ')}
style="width: {size}px; height: {size}px;--delay: {delay}ms;" style="width: {size}px; height: {size}px;--delay: {delay}ms;"
aria-hidden="true" aria-hidden="true"
bind:this={element}
> >
<div <div
class={clsx( class={clsx(
@ -103,17 +109,20 @@
class:_animate={isAnimating && hasEnteredView} class:_animate={isAnimating && hasEnteredView}
on:inview_enter={onViewEnter} on:inview_enter={onViewEnter}
> >
<img <div class="" bind:this={imageWrapper}>
class="group h-full w-full touch-none select-none rounded-[50%] object-cover outline outline-4 {$$restProps.class}" <img
bind:this={imageElement} class="group h-full w-full touch-none select-none rounded-[50%] object-cover outline outline-4 {$$restProps.class}"
on:load={() => (hasImageLoaded = true)} bind:this={imageElement}
src={image} on:load={() => (hasImageLoaded = true)}
alt="community profile picture" src={image}
aria-hidden="true" alt="community profile picture"
on:mouseenter={(event) => dispatch('hover', event)} aria-hidden="true"
class:hover:scale-125={!!quote} on:mouseenter={(event) => dispatch('hover', event)}
loading="lazy" class:hover:scale-125={!!quote}
/> loading="lazy"
/>
<slot />
</div>
{#if quote} {#if quote}
<div class="quote" aria-hidden="true"> <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 KiB

13
src/routes/CommunitySlice.svelte
View file

@ -5,10 +5,11 @@
<script> <script>
import Button from '$lib/components/Button.svelte' import Button from '$lib/components/Button.svelte'
import DiscordIcon from '~icons/prime/discord' import DiscordIcon from '~icons/prime/discord'
import DiscordProfilePicture from './DiscordProfilePicture.svelte' import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
import { setContext } from 'svelte' import { setContext } from 'svelte'
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title.svelte'
import background from '$lib/images/community-bg.webp' import background from '$lib/images/community-bg.webp'
import amongUsGreenImage from '$lib/images/amongus/green.webp'
let sectionElement let sectionElement
let isDraggingChan = false let isDraggingChan = false
@ -135,10 +136,10 @@
class: 'outline-green-500' class: 'outline-green-500'
}, },
{ {
image: '/imgs/profile_pictures/qwaranou.webp', image: amongUsGreenImage,
coordinates: [873, 224], coordinates: [873, 224],
size: 79, size: 79,
class: 'outline-slate-500' class: 'outline-green-500'
}, },
{ {
image: '/imgs/profile_pictures/SimplyKyle!.webp', image: '/imgs/profile_pictures/SimplyKyle!.webp',
@ -208,8 +209,8 @@
</a> </a>
</div> </div>
<div class="absolute w-[1024px]"> <div class="absolute w-[1024px] select-none">
<div class="flex h-full origin-bottom-right flex-wrap gap-4"> <div class="flex h-full origin-bottom-right select-none flex-wrap gap-4">
{#each profiles as { onDragEnd, onDragStart, onHover, ...props }} {#each profiles as { onDragEnd, onDragStart, onHover, ...props }}
<DiscordProfilePicture <DiscordProfilePicture
{...props} {...props}
@ -222,7 +223,7 @@
</div> </div>
<img <img
src={background} src={background}
class="absolute top-0 -z-10 min-w-[1400px]" class="absolute top-0 -z-10 min-w-[1400px] select-none"
alt="" alt=""
aria-hidden="true" aria-hidden="true"
loading="lazy" loading="lazy"

2
src/routes/Hypractive.svelte
View file

@ -20,7 +20,7 @@
import GitTile from '$lib/components/GitTile.svelte' import GitTile from '$lib/components/GitTile.svelte'
import { lerp } from '$lib/Helper.mjs' import { lerp } from '$lib/Helper.mjs'
import { cubicInOut, expoInOut } from 'svelte/easing' import { cubicInOut, expoInOut } from 'svelte/easing'
import DiscordProfilePicture from './DiscordProfilePicture.svelte' import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
import { setContext } from 'svelte' import { setContext } from 'svelte'
const click$ = new Subject() const click$ = new Subject()

2
src/routes/PreviewRiceSlice.svelte
View file

@ -43,7 +43,7 @@
use:inview={{ threshold: 0.5 }} use:inview={{ threshold: 0.5 }}
on:inview_enter={() => { on:inview_enter={() => {
isVisible = true isVisible = true
videoElement.play() !isPaused && videoElement.play()
}} }}
on:inview_leave={() => { on:inview_leave={() => {
isVisible = false 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