hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-11-17 02:45:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

mobile home

Browse source
This commit is contained in:
Christofer 2023-08-07 19:59:22 +02:00
parent 865fc54a04
commit aece97d4f1
16 changed files with 241 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.prettierrc
View file

@ -1,10 +0,0 @@
{
"useTabs": true,
"singleQuote": true,
"semi": false,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

1
package.json
View file

@ -54,6 +54,7 @@
"@fontsource/ibm-plex-mono": "^5.0.7", "@fontsource/ibm-plex-mono": "^5.0.7",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"interactjs": "^1.10.18", "interactjs": "^1.10.18",
"prettier-plugin-tailwindcss": "^0.4.1",
"remeda": "^1.24.0", "remeda": "^1.24.0",
"simplex-noise": "^4.0.1", "simplex-noise": "^4.0.1",
"svelte-inview": "^4.0.1", "svelte-inview": "^4.0.1",

61
pnpm-lock.yaml
View file

@ -20,6 +20,9 @@ dependencies:
interactjs: interactjs:
specifier: ^1.10.18 specifier: ^1.10.18
version: 1.10.18 version: 1.10.18
prettier-plugin-tailwindcss:
specifier: ^0.4.1
version: 0.4.1(prettier-plugin-svelte@3.0.3)(prettier@3.0.1)
remeda: remeda:
specifier: ^1.24.0 specifier: ^1.24.0
version: 1.24.0 version: 1.24.0
@ -1984,7 +1987,62 @@ packages:
dependencies: dependencies:
prettier: 3.0.1 prettier: 3.0.1
svelte: 4.1.2 svelte: 4.1.2
dev: true
/prettier-plugin-tailwindcss@0.4.1(prettier-plugin-svelte@3.0.3)(prettier@3.0.1):
resolution: {integrity: sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==}
engines: {node: '>=12.17.0'}
peerDependencies:
'@ianvs/prettier-plugin-sort-imports': '*'
'@prettier/plugin-pug': '*'
'@shopify/prettier-plugin-liquid': '*'
'@shufo/prettier-plugin-blade': '*'
'@trivago/prettier-plugin-sort-imports': '*'
prettier: ^2.2 || ^3.0
prettier-plugin-astro: '*'
prettier-plugin-css-order: '*'
prettier-plugin-import-sort: '*'
prettier-plugin-jsdoc: '*'
prettier-plugin-marko: '*'
prettier-plugin-organize-attributes: '*'
prettier-plugin-organize-imports: '*'
prettier-plugin-style-order: '*'
prettier-plugin-svelte: '*'
prettier-plugin-twig-melody: '*'
peerDependenciesMeta:
'@ianvs/prettier-plugin-sort-imports':
optional: true
'@prettier/plugin-pug':
optional: true
'@shopify/prettier-plugin-liquid':
optional: true
'@shufo/prettier-plugin-blade':
optional: true
'@trivago/prettier-plugin-sort-imports':
optional: true
prettier-plugin-astro:
optional: true
prettier-plugin-css-order:
optional: true
prettier-plugin-import-sort:
optional: true
prettier-plugin-jsdoc:
optional: true
prettier-plugin-marko:
optional: true
prettier-plugin-organize-attributes:
optional: true
prettier-plugin-organize-imports:
optional: true
prettier-plugin-style-order:
optional: true
prettier-plugin-svelte:
optional: true
prettier-plugin-twig-melody:
optional: true
dependencies:
prettier: 3.0.1
prettier-plugin-svelte: 3.0.3(prettier@3.0.1)(svelte@4.1.2)
dev: false
/prettier@2.8.8: /prettier@2.8.8:
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
@ -1996,7 +2054,6 @@ packages:
resolution: {integrity: sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==} resolution: {integrity: sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==}
engines: {node: '>=14'} engines: {node: '>=14'}
hasBin: true hasBin: true
dev: true
/prompts@2.4.2: /prompts@2.4.2:
resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}

10
prettier.config.cjs Normal file
View file

@ -0,0 +1,10 @@
module.exports = {
useTabs: true,
singleQuote: true,
semi: false,
trailingComma: 'none',
printWidth: 100,
plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
tailwindFunctions: ['clsx'],
overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
}

4
src/lib/components/Footer.svelte
View file

@ -15,10 +15,10 @@
</script> </script>
<footer <footer
class="bg-black/50 border-t border-blue-500 relative flex items-center justify-center w-screen _shadow" class="bg-black/50 mt-16 md:mt-24 lg:mt-32 border-t border-blue-500 relative flex items-center justify-center w-screen"
> >
<div <div
class=" flex flex-wrap gap-12 justify-between px-8 py-14 max-w-5xl text-slate-300 items-start" class="flex flex-wrap gap-12 justify-between px-8 py-14 max-w-5xl text-slate-300 items-start"
> >
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="text-cyan-600 text-sm uppercase font-bold">> Developers</div> <div class="text-cyan-600 text-sm uppercase font-bold">> Developers</div>

17
src/lib/components/Title.svelte Normal file
View file

@ -0,0 +1,17 @@
<script>
import { animateIn } from '$lib/Helper.mjs'
</script>
<div use:animateIn={{ slide: 24, fade: 0 }} class="text-center {$$restProps.class}">
<div class="font-extrabold mb-3 text-slate-300">
<slot name="pre" />
</div>
<h1 class="text-6xl md:text-8xl font-bold text-center mb-8">
<slot name="title">No title given!!!</slot>
</h1>
<div class="text-center text-lg font-extrabold text-slate-300"><slot name="subtitle" /></div>
<slot />
</div>

2
src/routes/+layout.svelte
View file

@ -6,7 +6,7 @@
import '@fontsource/ibm-plex-mono/500.css' import '@fontsource/ibm-plex-mono/500.css'
</script> </script>
<div class="flex flex-col min-h-screen"> <div class="flex flex-col min-h-screen overflow-x-hidden">
<Navbar /> <Navbar />
<main class="mx-auto w-full flex flex-col"> <main class="mx-auto w-full flex flex-col">

6
src/routes/+page.svelte
View file

@ -14,12 +14,10 @@
<Hero /> <Hero />
<div class="-mt-8 mx-auto gap-[16rem] flex flex-col items-center"> <div class="-mt-8 gap-20 md:gap-[16rem] flex flex-col items-center">
<div class="px-8 mx-auto flex flex-col items-center lg:px-32">
<PreviewRiceSlice class="mb-52" /> <PreviewRiceSlice class="mb-52" />
<FeaturesSlice /> <FeaturesSlice />
</div>
<HallOfFameSlice /> <HallOfFameSlice />
@ -28,7 +26,5 @@
<InstallSlice /> <InstallSlice />
</div> </div>
<div class="mt-[16rem]" />
<style> <style>
</style> </style>

12
src/routes/CommunitySlice.svelte
View file

@ -8,6 +8,7 @@
import DiscordProfilePicture from './DiscordProfilePicture.svelte' import DiscordProfilePicture from './DiscordProfilePicture.svelte'
import { animateIn } from '$lib/Helper.mjs' import { animateIn } from '$lib/Helper.mjs'
import { setContext } from 'svelte' import { setContext } from 'svelte'
import Title from '$lib/components/Title.svelte'
let sectionElement let sectionElement
let isDraggingChan = false let isDraggingChan = false
@ -176,12 +177,13 @@
class="relative flex flex-col items-center w-screen overflow-hidden min-h-max h-[1100px] -mb-[200px] max-w-[100vw]" class="relative flex flex-col items-center w-screen overflow-hidden min-h-max h-[1100px] -mb-[200px] max-w-[100vw]"
bind:this={sectionElement} bind:this={sectionElement}
> >
<div use:animateIn={{ slide: 24, fade: 0 }}> <Title>
<h1 class="text-8xl font-bold text-center mb-8">Join a great<br />community</h1> <span slot="title">Join a great<br />community</span>
<div class="text-center text-lg font-extrabold text-slate-300">
<span slot="subtitle">
Get help from Distro Hoppers, Haiku writers,<br />Hydrohomies and human_(probably) Get help from Distro Hoppers, Haiku writers,<br />Hydrohomies and human_(probably)
</div> </span>
</div> </Title>
<div class="flex flex-col items-center gap-2 group mt-16"> <div class="flex flex-col items-center gap-2 group mt-16">
<a <a

7
src/routes/FeatureCard.svelte
View file

@ -3,6 +3,7 @@
import { getContext } from 'svelte' import { getContext } from 'svelte'
import { mouseContext } from './FeaturesSlice.svelte' import { mouseContext } from './FeaturesSlice.svelte'
import { spring } from 'svelte/motion' import { spring } from 'svelte/motion'
import Title from '$lib/components/Title.svelte'
export let title export let title
export let color = 'cyan' export let color = 'cyan'
@ -69,7 +70,7 @@
class:purpleGradient={color === 'purple'} class:purpleGradient={color === 'purple'}
role="contentinfo" role="contentinfo"
> >
<div class="p-12 z-10 w-full h-full"> <div class="p-8 md:p-12 z-10 w-full h-full">
<h1 class="text-5xl font-bold mb-6 text-white">{title}</h1> <h1 class="text-5xl font-bold mb-6 text-white">{title}</h1>
<slot>Nothing in the slot here</slot> <slot>Nothing in the slot here</slot>
@ -81,7 +82,7 @@
<style lang="postcss"> <style lang="postcss">
.card { .card {
@apply rounded-3xl relative w-full h-full bg-slate-900 hover:bg-blue-900 duration-300 transition-colors flex items-center justify-center; @apply relative flex h-full w-full items-center justify-center rounded-3xl bg-slate-900 transition-colors duration-300 hover:bg-blue-900;
z-index: 2; z-index: 2;
contain: paint style layout; contain: paint style layout;
} }
@ -126,7 +127,7 @@
} }
.gradient { .gradient {
@apply absolute inset-0 pointer-events-none w-full h-full; @apply pointer-events-none absolute inset-0 h-full w-full;
width: calc(100% - 2px); width: calc(100% - 2px);
border-radius: inherit; border-radius: inherit;
height: calc(100% - 2px); height: calc(100% - 2px);

14
src/routes/FeaturesSlice.svelte
View file

@ -10,7 +10,7 @@
import ActiveGitIcon from '~icons/gg/git-branch' import ActiveGitIcon from '~icons/gg/git-branch'
import ShortcutsIcon from '~icons/gg/push-chevron-right-o' import ShortcutsIcon from '~icons/gg/push-chevron-right-o'
import BleedingEdgeIcon from '~icons/gg/controller' import BleedingEdgeIcon from '~icons/gg/controller'
import { animateIn } from '$lib/Helper.mjs' import Title from '$lib/components/Title.svelte'
/** /**
* type {{name: string, github: string}} * type {{name: string, github: string}}
@ -40,11 +40,11 @@
} }
</script> </script>
<section class="flex flex-col items-center"> <section class="px-3 md:px-8 flex flex-col items-center">
<div class="text-center" use:animateIn={{ fade: 0, slide: 24, duration: 1480, threshold: 0.4 }}> <Title>
<div class="font-extrabold mb-3 text-slate-300">TLDR</div> <span slot="pre">TLDR</span>
<h1 class="text-8xl font-bold mb-14">Features</h1> <span slot="title">Features</span>
</div> </Title>
<div <div
class="grid lg:grid-cols-2 lg:grid-rows-2 w-full gap-6 text-lg text-white/70 font-medium flex-wrap group" class="grid lg:grid-cols-2 lg:grid-rows-2 w-full gap-6 text-lg text-white/70 font-medium flex-wrap group"
@ -92,6 +92,6 @@
<style lang="postcss"> <style lang="postcss">
.icon-feature { .icon-feature {
@apply flex gap-3 items-center justify-center font-bold opacity-60; @apply flex items-center justify-center gap-3 font-bold opacity-60;
} }
</style> </style>

13
src/routes/HallOfFameSlice.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { animateIn } from '$lib/Helper.mjs' import { animateIn } from '$lib/Helper.mjs'
import Button from '$lib/components/Button.svelte' import Button from '$lib/components/Button.svelte'
import Title from '$lib/components/Title.svelte'
import FameRicePreview from './FameRicePreview.svelte' import FameRicePreview from './FameRicePreview.svelte'
</script> </script>
@ -8,15 +9,15 @@
class="w-full relative flex flex-col items-center" class="w-full relative flex flex-col items-center"
use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }} use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}
> >
<div class="absolute top-0 inset-x-0 z-30"> <div class="px-4 -mb-40 z-20">
<div class="text-center font-extrabold mb-3 text-slate-300"> <Title>
Memorials of the ricing legends <span slot="pre"> Memorials of the ricing legends </span>
</div> <span slot="title">Hall of Fame</span>
<h1 class="text-8xl font-bold text-center">Hall of Fame</h1> </Title>
</div> </div>
<div <div
class="w-full -mt-24 max-w-[1100px] flex relative flex-col gap-16 lg:gap-24 items-center justify-end overflow-hidden px-16 [perspective:100px]" class="w-full -mt-24 max-w-[1100px] flex relative flex-col gap-16 lg:gap-24 items-center justify-end overflow-hidden md:px-16 [perspective:100px]"
use:animateIn={{ slide: 24, fade: 0.5, duration: 800 }} use:animateIn={{ slide: 24, fade: 0.5, duration: 800 }}
> >
<a class="absolute bottom-24 left-1/2 z-20 -translate-x-1/2" href="/#"> <a class="absolute bottom-24 left-1/2 z-20 -translate-x-1/2" href="/#">

8
src/routes/InstallButton.svelte
View file

@ -23,14 +23,14 @@
}) })
</script> </script>
<div class="flex gap-4 items-center"> <div class="flex flex-col md:flex-row md:gap-4 gap-2 items-center">
<div <div
class="flex flex-col gap-1 justify-center items-center text-primary text-lg font-medium rounded-full w-32 h-32" class="flex flex-col gap-3 justify-center items-center text-primary text-lg font-medium rounded-full w-32 h-32"
> >
<img src={image} alt="Arch Logo" />{name} <img src={image} alt="Arch Logo" />{name}
</div> </div>
<div class="flex flex-col relative font-mono"> <div class="flex flex-col relative font-mono mb-2">
<button <button
class="flex text-base transition-all min-w-[18rem] items-center font-medium rounded-full border-primary border py-3 pl-6 pr-6 gap-4 justify-center group active:scale-[1.01]" class="flex text-base transition-all min-w-[18rem] items-center font-medium rounded-full border-primary border py-3 pl-6 pr-6 gap-4 justify-center group active:scale-[1.01]"
on:click={$$slots.default ? undefined : copyCommand} on:click={$$slots.default ? undefined : copyCommand}
@ -47,12 +47,14 @@
</div></slot </div></slot
> >
</button> </button>
<div <div
class="text-green-400 [translate:-50%_0px] select-none pointer-events-none absolute -top-8 w-full left-1/2 hidden max-w-max" class="text-green-400 [translate:-50%_0px] select-none pointer-events-none absolute -top-8 w-full left-1/2 hidden max-w-max"
class:copy={isShowingCopied} class:copy={isShowingCopied}
> >
Copied to clipboard ✔ Copied to clipboard ✔
</div> </div>
{#if $$slots.extra} {#if $$slots.extra}
<div class="text-xs font-sans opacity-80 absolute -bottom-6 w-full flex justify-center"> <div class="text-xs font-sans opacity-80 absolute -bottom-6 w-full flex justify-center">
<slot name="extra" /> <slot name="extra" />

12
src/routes/InstallSlice.svelte
View file

@ -7,17 +7,15 @@
import LinkOutIcon from '~icons/akar-icons/link-out' import LinkOutIcon from '~icons/akar-icons/link-out'
import InstallButton from './InstallButton.svelte' import InstallButton from './InstallButton.svelte'
import Button from '$lib/components/Button.svelte' import Button from '$lib/components/Button.svelte'
import Title from '$lib/components/Title.svelte'
</script> </script>
<section> <section>
<div use:animateIn={{ slide: 24, fade: 0 }}> <Title class="mb-8">
<h1 class="text-8xl mb-6 font-bold text-center">Install now</h1> <span slot="title">Install now</span><span slot="subtitle"> For your favourite distro </span>
<div class="text-center text-lg mb-20 font-extrabold text-slate-300"> </Title>
For your favourite distro
</div>
</div>
<div class="flex flex-col gap-6 items-center" use:animateIn={{ slide: 24, fade: 0 }}> <div class="flex flex-col md:gap-6 gap-12 items-center" use:animateIn={{ slide: 24, fade: 0 }}>
<InstallButton name="Arch" command="pacman -S hyprland" image={archLogo} <InstallButton name="Arch" command="pacman -S hyprland" image={archLogo}
><div slot="extra"> ><div slot="extra">
AUR git version: <a href="https://aur.archlinux.org/packages/hyprland-git/">hyprland-git</a> AUR git version: <a href="https://aur.archlinux.org/packages/hyprland-git/">hyprland-git</a>

86
src/routes/Navbar.svelte
View file

@ -3,39 +3,63 @@
import logo from '$lib/images/logo.png' import logo from '$lib/images/logo.png'
import GithubIcon from '~icons/ri/github-fill' import GithubIcon from '~icons/ri/github-fill'
import DiscordIcon from '~icons/prime/discord' import DiscordIcon from '~icons/prime/discord'
import MenuIcon from '~icons/mingcute/menu-line'
import CloseIcon from '~icons/mingcute/close-line'
let isExpanded = false
function toggleExpanded() {
isExpanded = !isExpanded
}
</script> </script>
<header <header
class="flex items-center z-30 justify-between fixed top-4 inset-x-6 rounded-full animate-in slide-in-from-top-1 [animation-delay:1250ms] fade-in-0 duration-1000 fill-mode-backwards" class="flex items-center z-50 justify-between fixed top-0 inset-x-0 rounded-full animate-in slide-in-from-top-1 [animation-delay:0ms] lg:[animation-delay:1250ms] fade-in-0 duration-1000 fill-mode-backwards pt-2 px-6"
> >
<a <a
href="/" href="/"
class="flex gap-2 font-london tracking-wider px-4 py-1 text-sm rounded-full bg-black/50 items-center font-bold text-white" class="flex gap-2 font-london tracking-wider lg:px-4 py-1 text-sm rounded-full lg:bg-black/50 items-center font-bold text-white"
> >
<img src={logo} alt="Hyprland Logo" class="w-6" />Hyprland</a <img src={logo} alt="Hyprland Logo" class="w-6" /><span class="lg:block hidden">Hyprland</span
></a
> >
<nav class="flex font-semibold items-center backdrop-blur pl-5 rounded-full bg-black/50"> <button
<ul class="flex gap-5 rounded-full items-center max-h-full h-full hover:[&_li]:text-cyan-300"> class="lg:hidden rounded-full p-2 bg-black/10 z-50 backdrop-blur"
on:click={toggleExpanded}
>
{#if isExpanded}
<CloseIcon class="h-6 w-6 text-slate-200" />
{:else}
<MenuIcon class="h-6 w-6 text-slate-200 " />
{/if}
</button>
<nav class="nav" class:!flex={isExpanded}>
<ul
class="flex lg:flex-row flex-col gap-5 rounded-full items-center lg:max-h-full lg:h-full hover:[&_li]:text-cyan-300"
>
<li> <li>
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get_started</a> <a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
</li> </li>
<li> <li>
<a href="https://wiki.hyprland.org">Wiki</a> <a href="https://wiki.hyprland.org">Wiki</a>
</li> </li>
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}> <li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<a href="/#">Wall_of_fame</a> <a href="/#">Wall of fame</a>
</li> </li>
</ul> </ul>
<ul class="border-purple-400 border mr-2 ml-4 rounded-full flex items-center gap-3 px-4"> <ul
class="lg:border-purple-400 lg:border lg:mr-2 lg:ml-4 lg:rounded-full flex items-center flex-row gap-3 px-4"
>
<li> <li>
<a href="https://discord.com/invite/hQ9XvMUjjr"> <a href="https://discord.com/invite/hQ9XvMUjjr" class="social-icon">
<DiscordIcon class="w-8 h-8 p-1 rounded-full hover:bg-purple-500 hover:text-white" /> <DiscordIcon class="w-full h-full" />
</a> </a>
</li> </li>
<li> <li>
<a href="https://github.com/hyprwm/Hyprland"> <a href="https://github.com/hyprwm/Hyprland" class="social-icon">
<GithubIcon class="w-8 h-8 p-1 hover:bg-purple-500 rounded-full hover:text-white" /> <GithubIcon class="w-full h-full" />
</a> </a>
</li> </li>
</ul> </ul>
@ -45,3 +69,41 @@
> >
</nav> </nav>
</header> </header>
<style lang="postcss">
.nav {
/* Base classes */
font-weight: 600;
/* Mobile classes */
position: absolute;
width: 100vw;
height: 100vh;
inset: 0 0 0 0;
background: rgba(0, 0, 0, 0.6);
flex-direction: column;
align-items: center;
gap: 1rem;
backdrop-filter: blur(8px);
padding: 3rem 1rem;
display: none;
/* Desktop classes */
@media screen(lg) {
@apply relative flex-row rounded-full p-6 pl-5;
}
}
.social-icon {
width: 2.5rem;
height: 2.5rem;
display: block;
@apply rounded-full p-1 hover:bg-purple-500 hover:text-white;
@media screen(lg) {
width: 2rem;
height: 2rem;
}
}
</style>

44
src/routes/PreviewRiceSlice.svelte
View file

@ -2,22 +2,38 @@
import { inview } from 'svelte-inview' import { inview } from 'svelte-inview'
import previewRice from '$lib/videos/end_4_rice_intro.mp4' import previewRice from '$lib/videos/end_4_rice_intro.mp4'
import previewRiceThumbnail from '$lib/videos/end_4_thumbnail.png' import previewRiceThumbnail from '$lib/videos/end_4_thumbnail.png'
import AudioIcon from '~icons/mingcute/volume-line'
import MuteIcon from '~icons/mingcute/volume-mute-line'
import clsx from 'clsx'
/** @type HTMLVideoElement */ /** @type HTMLVideoElement */
let videoElement let videoElement
let isShowingControls = false
let isMuted = true
function toggleMute() {
isMuted = !isMuted
}
function togglePlay() {
videoElement.paused ? videoElement.play() : videoElement.pause()
}
</script> </script>
<section <section
class="max-w-7xl relative animate-in [animation-delay:1700ms] fade-in-0 fill-mode-backwards [animation-duration:2000ms] slide-in-from-bottom-10 z-20 {$$restProps.class}" class="max-w-7xl px-1 -mb-4 lg:px-8 w-full relative animate-in [animation-delay:1700ms] fade-in-0 fill-mode-backwards [animation-duration:2000ms] slide-in-from-bottom-10 z-20 {$$restProps.class}"
> >
<div <div
class="rounded-xl opacity-20 overflow-hidden border-sky-400 border-2 scale-90 transition-all [transition-duration:1460ms]" class="rounded-xl group opacity-20 overflow-hidden border-sky-400 border-2 scale-90 transition-all [transition-duration:1460ms] mx-3"
role="banner"
use:inview={{ unobserveOnEnter: true, threshold: 0.8 }} use:inview={{ unobserveOnEnter: true, threshold: 0.8 }}
on:inview_enter={({ detail: { node } }) => { on:inview_enter={({ detail: { node } }) => {
node.classList.remove('opacity-20') node.classList.remove('opacity-20')
node.classList.remove('scale-90') node.classList.remove('scale-90')
videoElement.play() videoElement.play()
}} }}
on:mouseenter={() => (isShowingControls = true)}
on:mouseleave={() => (isShowingControls = false)}
> >
<video <video
bind:this={videoElement} bind:this={videoElement}
@ -25,18 +41,36 @@
disablepictureinpicture="true" disablepictureinpicture="true"
disableremoteplayback="true" disableremoteplayback="true"
loop loop
muted muted={isMuted}
preload="auto" preload="auto"
poster={previewRiceThumbnail} poster={previewRiceThumbnail}
on:click={togglePlay}
/> />
<div
class={clsx(
'opacity-0 transition-opacity z-20 ',
isShowingControls ? 'opacity-100' : 'pointer-events-none'
)}
>
<button
class="absolute p-2 h-10 bg-black/5 rounded-full w-10 bottom-4 right-8 opacity-70 hover:opacity-100"
on:click|stopPropagation={toggleMute}
>
{#if isMuted}
<MuteIcon class="h-full w-full" />
{:else}
<AudioIcon class="h-full w-full" />
{/if}
</button>
</div>
</div> </div>
<div class="preview-rice-bg" aria="hidden" /> <div class="preview-rice-bg" aria="hidden" />
</section> </section>
<style lang="postcss"> <style lang="postcss">
.preview-rice-bg { .preview-rice-bg {
@apply w-screen max-w-7xl h-full absolute -z-10 -top-20 left-1/2 -translate-x-1/2 opacity-50; @apply absolute inset-0 -top-20 -z-10 w-screen opacity-50;
/* background-color: red; */ /* background-color: red; */
background-image: radial-gradient(closest-side, theme(colors.sky.500), transparent); background-image: radial-gradient(min(150vw, 1400px) 50%, theme(colors.sky.500), transparent);
} }
</style> </style>