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

.

Browse source
This commit is contained in:
Christofer 2023-09-05 23:09:18 +04:00
parent c99abd6823
commit 620e61842a
5 changed files with 89 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/routes/DiscordProfilePicture.svelte
View file

@ -75,22 +75,22 @@
</script>
<div
class={clsx('absolute top-0 left-0 select-none touch-none ', containerClass)}
class={clsx('absolute left-0 top-0 touch-none select-none ', containerClass)}
style:translate={coordinates.map((xy) => xy + 'px').join(' ')}
style="width: {size}px; height: {size}px;--delay: {delay}ms;"
>
<div
class={clsx(
'absolute inset-0 w-full h-full group select-none touch-none',
'group absolute inset-0 h-full w-full touch-none select-none',
isAnimating && 'opacity-0'
)}
style:translate={`calc( ${$dragCoordinates[0]}px ) ${$dragCoordinates[1]}px`}
use:inview={{ unobserveOnEnter: true, threshold: 0.4 }}
class:_animate={isAnimating && hasEnteredView}
on:inview_enter={() => setTimeout(() => (hasEnteredView = true), 750)}
on:inview_enter={() => setTimeout(() => (hasEnteredView = true), 550)}
>
<img
class="w-full h-full group select-none touch-none outline-4 outline rounded-[50%] {$$restProps.class}"
class="group h-full w-full touch-none select-none rounded-[50%] outline outline-4 {$$restProps.class}"
bind:this={imageElement}
src={image}
alt={'community profile picture'}
@ -101,7 +101,7 @@
{#if quote}
<div
class="absolute tracking-wide opacity-0 -top-6 px-2 py-1 rounded left-1/2 -translate-x-1/2 bg-slate-800/50 pointer-events-none font-medium text-sm group-hover:opacity-100 select-none duration-150"
class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 select-none rounded bg-slate-800/50 px-2 py-1 text-sm font-medium tracking-wide opacity-0 duration-150 group-hover:opacity-100"
>
{quote}
</div>

32
src/routes/Hero.svelte
View file

@ -23,25 +23,27 @@
}}
>
<!-- Hero text and logo -->
<div class="x z-10 flex h-screen min-h-max flex-col items-center justify-center">
<div
class="pointer-events-none z-10 flex h-screen min-h-max flex-col items-center justify-center"
>
<div class="-mt-20 mb-8 flex flex-col items-center gap-6 text-center">
<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-48 fill-mode-backwards" />
<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
<h1
class="hyprgradient bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest"
class="hyprgradient pointer-events-auto bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest"
>
Hyprland
</h1>
</div>
</div>
<h2
class="ani-in mb-10 text-center text-2xl font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms]"
class="ani-in pointer-events-auto mb-10 text-center text-2xl font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms]"
>
Dynamic tiling Wayland compositor<br />with the looks
</h2>
<div
class="flex items-center gap-6 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
class="pointer-events-auto flex items-center gap-6 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
>
<a href="https://wiki.hyprland.org/Getting-Started/Installation/">
<Button size="lg">Install</Button>
@ -68,31 +70,9 @@
{/each}
</div>
{/if} -->
<!-- Gradient background -->
<div
class="max-w-screen absolute right-0 top-0 -z-50 h-full min-h-screen w-screen overflow-hidden"
>
<div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
<div
class="bg bg-gradient-radial from-sky-400/20 via-emerald-300/0 to-emerald-200/0"
style="--seed: 20;"
/>
</div>
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<div
class="bg bg-gradient-radial from-blue-500/10 to-cyan-400/0"
style="--offset: -3s; --seed: 4; --duration:102s"
/>
</div>
</div>
</section>
<style lang="postcss">
.bg {
width: calc(120vw + 500px);
height: calc(120vh + 500px);
}
@keyframes slidein {
from {

121
src/routes/HeroBackground.svelte
View file

@ -1,15 +1,16 @@
<script>
import baseColors from 'tailwindcss/colors'
const amountTiles = 4 // Has to be an even number as the tiles get "mirrored"
const workspaceHeight = 150
const gapLength = 24
const workspacesPerRow = 4
const workspaceHeight = 240
const gapLength = 32
const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]]
const leftColumns = Array.from({ length: 3 }, () => generateRow(amountTiles))
const rightColumns = Array.from({ length: 3 }, () => generateRow(amountTiles))
const leftTotalLength = leftColumns
.slice(0, leftColumns.length / 2)
.reduce((total, current, index, array) => total + workspaceHeight + gapLength, 0)
const leftColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
const rightColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
/** Used to transform the rows by their own lenght*/
const height = workspacesPerRow * (workspaceHeight + gapLength)
let wrapperElement, mouseX, mouseY
function generateRow(amount) {
const base = Array.from({ length: amount }).map(generateWorkspace)
@ -36,12 +37,15 @@
}
</script>
<div class="wrapper" aria-hidden="true">
<div class="wrapper" aria-hidden="true" bind:this={wrapperElement}>
<div
class="inner-wrapper"
style={`--amount: ${amountTiles}; --workspace-gap: ${gapLength}px;--workspace-height: ${workspaceHeight}px;`}
style={`--amount: ${workspacesPerRow}; --workspace-gap: ${gapLength}px;--workspace-height: ${workspaceHeight}px; --length: ${height}px;`}
>
<div class="columns left" style={`--length: ${leftTotalLength}; `}>
<!-- Gradient background -->
<div class="top-light" />
<div class="columns left" aria-hidden="true">
{#each leftColumns as column}
<div class="column">
{#each column as workspace}
@ -59,7 +63,7 @@
{/each}
</div>
<div class="columns right" style={`--length: ${leftTotalLength}; `}>
<div class="columns right" aria-hidden="true">
{#each rightColumns as column}
<div class="column">
{#each column as workspace}
@ -81,13 +85,10 @@
<style lang="postcss">
.left {
transform: rotateY(10deg);
mask-image: linear-gradient(to right, black, transparent);
/* margin-left: -2200px; */
transform: rotateY(10deg) rotateZ(90deg);
}
.right {
transform: rotateY(-10deg);
/* margin-left: -2200px; */
transform: rotateY(-10deg) rotateZ(-90deg);
}
.wrapper {
@ -95,47 +96,66 @@
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/* margin-top: -200px; */
height: calc(100vh - 48px);
contain: strict;
@apply max-sm:hidden;
}
.inner-wrapper {
position: absolute;
perspective: 100px;
height: 100%;
width: max(100vw, 1100px);
/* translate: -50% 0px; */
/* overflow: visible; */
width: max(100vw, 2200px);
contain: strict;
display: flex;
border: red solid 1px;
mask-image: radial-gradient(circle, transparent 10%, black 50%);
mask-image: linear-gradient(to top, transparent 0%, black 20%);
&::after {
content: ' ';
background: radial-gradient(80% 250%, theme(colors.black) 10%, transparent 50%);
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
z-index: -10;
pointer-events: none;
}
}
.columns {
display: flex;
gap: 2rem;
flex-grow: 1;
mask-image: linear-gradient(to top, transparent 10%, black);
/* border: cyan solid 1px; */
mask-image: linear-gradient(to top, transparent 0%, black 30%);
z-index: -10;
height: var(--length);
min-height: var(--length);
max-height: var(--length);
}
.column {
display: flex;
flex-direction: column;
height: 100%;
height: 200%;
width: 100%;
animation: loop 20s infinite linear;
gap: var(--workspace-gap);
/* width: 400px; */
z-index: -50;
animation: loop 98s infinite linear;
@media (prefers-reduced-motion) {
animation: none;
}
}
.workspace {
display: flex;
gap: 8px;
height: var(--workspace-height);
min-height: var(--workspace-height);
max-height: var(--workspace-height);
width: 100%;
/* border: red solid 1px; */
}
.tiles {
@ -143,35 +163,44 @@
flex-direction: column;
gap: 8px;
flex-grow: 1;
/* border: blue 1px solid; */
}
.tile {
border: var(--color) 1px solid;
border: var(--color) 2px solid;
flex-grow: 1;
height: var(--height);
border-radius: 12px;
pointer-events: auto;
transition: all 140ms ease-in-out;
transition: all 280ms ease-in-out;
&:hover {
animation: flicker infinite 800ms;
background: color-mix(in hsl, var(--color), transparent 20%);
box-shadow:
0px 0px 10px var(--color),
0px 0px 40px var(--color);
}
}
.top-light {
background: radial-gradient(
100% 80% at top,
theme(colors.cyan.500 / 60%) 0%,
theme(colors.sky.500 / 20%),
transparent
);
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
top: 0;
left: 0;
pointer-events: none;
}
@keyframes loop {
100% {
translate: 0px calc(-1px * var(--length));
}
}
@keyframes flicker {
0% {
background: mix-color(var(--color), transparent 0%);
}
100% {
background: var(--color);
box-shadow: 0px 0px 10px var(--color);
translate: 0px calc(-1 * var(--length));
/* translate: 0px -50%; */
}
}
</style>

2
src/routes/Navbar.svelte
View file

@ -25,7 +25,7 @@
class="flex items-center gap-4 rounded-full py-1 font-london text-sm font-bold tracking-wider text-white lg:bg-black/50 lg:px-4 lg:py-2 lg:backdrop-blur"
>
<img src={logo} alt="Hyprland Logo" class="w-6" /><span
class="hidden text-xl tracking-widest lg:mt-1 lg:block">Hyprland</span
class="hidden text-lg tracking-widest lg:mt-1 lg:block">Hyprland</span
></a
>

3
src/routes/PreviewRiceSlice.svelte
View file

@ -40,7 +40,7 @@
</script>
<section
class="relative -mb-4 -mt-8 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] lg:px-8 {$$restProps.class}"
class="relative -mb-4 -mt-8 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] lg:px-8 z-10{$$restProps.class}"
class:isVisible
>
<div
@ -78,6 +78,7 @@
isShowingControls ? 'opacity-100' : 'pointer-events-none'
)}
>
<!-- Currently there is no audio. Component might get refractored into a stand-alone player, so lets leave that here -->
<!-- <button
class="absolute bottom-4 right-4 h-10 w-10 rounded-full bg-black/5 p-2 opacity-70 hover:opacity-100"
on:click|stopPropagation={toggleMute}