diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index 7ce5ead..bf62404 100755 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -6,8 +6,8 @@ let developers = [ ['Fufexan', 'Core Developer', 'cyan', 'https://github.com/fufexan'], ['NotAShelf', 'Core Member', 'teal', 'https://github.com/NotAShelf'], - ['VDawg', 'Webdesign-and dev', 'green', 'https://github.com/Visual-Dawg'], - ['System-x64', 'Webdev', 'lime', 'https://github.com/System-x64'] + ['VDawg', 'Webdesign-and dev', 'emerald', 'https://github.com/Visual-Dawg'], + ['System-x64', 'Webdev', 'green', 'https://github.com/System-x64'] ] function createRole(role, color) { return `[ ${role} ]` @@ -38,7 +38,7 @@ {/each}
  • and our fellow contributorsand our fellow contributors
    • diff --git a/src/lib/images/community-bg.png b/src/lib/images/community-bg.png new file mode 100755 index 0000000..d6ab4d6 Binary files /dev/null and b/src/lib/images/community-bg.png differ diff --git a/src/lib/images/features/config default.png b/src/lib/images/features/config default.png new file mode 100755 index 0000000..bb755a3 Binary files /dev/null and b/src/lib/images/features/config default.png differ diff --git a/src/lib/images/features/config hover.png b/src/lib/images/features/config hover.png new file mode 100755 index 0000000..1cf3b91 Binary files /dev/null and b/src/lib/images/features/config hover.png differ diff --git a/src/lib/images/features/tiling_default.png b/src/lib/images/features/tiling_default.png new file mode 100755 index 0000000..b998543 Binary files /dev/null and b/src/lib/images/features/tiling_default.png differ diff --git a/src/lib/images/features/tiling_hover.png b/src/lib/images/features/tiling_hover.png new file mode 100755 index 0000000..8300284 Binary files /dev/null and b/src/lib/images/features/tiling_hover.png differ diff --git a/src/lib/videos/end_4_rice_intro.mp4 b/src/lib/videos/end_4_rice_intro.mp4 index 9996ad5..b044de8 100755 Binary files a/src/lib/videos/end_4_rice_intro.mp4 and b/src/lib/videos/end_4_rice_intro.mp4 differ diff --git a/src/lib/videos/end_4_thumbnail.png b/src/lib/videos/end_4_thumbnail.png index ae8fa2c..66a6972 100755 Binary files a/src/lib/videos/end_4_thumbnail.png and b/src/lib/videos/end_4_thumbnail.png differ diff --git a/src/routes/CommunitySlice.svelte b/src/routes/CommunitySlice.svelte index 63f59cc..b3f0bcf 100755 --- a/src/routes/CommunitySlice.svelte +++ b/src/routes/CommunitySlice.svelte @@ -9,6 +9,7 @@ import { animateIn } from '$lib/Helper.mjs' import { setContext } from 'svelte' import Title from '$lib/components/Title.svelte' + import background from '$lib/images/community-bg.png' let sectionElement let isDraggingChan = false @@ -174,7 +175,7 @@
    @@ -211,23 +212,8 @@ /> {/each} </div> - - <div class=""> - <!-- Background color blobs --> - <div - class="_bg-color bg-yellow-500 top-[146px] right-[17px] w-[359px] h-[207px] opacity-20" - /> - <div class="_bg-color bg-orange-500 top-[411px] right-0 w-[400px] h-[300px] opacity-30" /> - <div - class="_bg-color bg-purple-500 opacity-30 w-[321px] h-[295px] top-[209px] left-[368px]" - /> - <div class="_bg-color bg-cyan-500 opacity-30 w-[363px] h-[250px] left-[402px] top-[462px]" /> - <div class="_bg-color bg-red-500 opacity-30 w-[323px] h-[482px] left-[53px] top-[179px]" /> - <div - class="_bg-color bg-fuchsia-500 opacity-30 w-[243px] h-[167px] left-[135px] top-[596px]" - /> - </div> </div> + <img src={background} class="absolute top-0 w-[1400px] -z-10" alt="" aria-hidden="true" /> </section> <style lang="postcss"> @@ -252,13 +238,4 @@ transition: scale 80ms; } } - - ._bg-color { - position: absolute; - pointer-events: none; - filter: blur(80px); - border-radius: 50%; - z-index: -50; - contain: strict; - } </style> diff --git a/src/routes/FeaturesSlice.svelte b/src/routes/FeaturesSlice.svelte index 8da4d1f..7a15ac1 100755 --- a/src/routes/FeaturesSlice.svelte +++ b/src/routes/FeaturesSlice.svelte @@ -8,10 +8,14 @@ import { writable } from 'svelte/store' import PluginsIcon from '~icons/gg/arrange-back' import ShortcutsIcon from '~icons/gg/push-chevron-right-o' - import BleedingEdgeIcon from '~icons/gg/controller' + import TouchpadIcon from '~icons/gg/touchpad' import Title from '$lib/components/Title.svelte' import Hypractive from './Hypractive.svelte' import { getIsMobile } from '$lib/Helper.mjs' + import configDefaultImage from '$lib/images/features/config default.png' + import tileDefaultImage from '$lib/images/features/tiling_default.png' + import configHoverImage from '$lib/images/features/config hover.png' + import tileHoverImage from '$lib/images/features/tiling_hover.png' let isMobile = false @@ -67,10 +71,9 @@ </p> <div class="absolute _wrapper inset-0 select-none" aria-hidden> - <div - class="absolute text-[440px] -bottom-10 text-slate-500 _configure -right-40 md:right-0 font-mono" - > - {'<>'} + <div class="feature-image"> + <img src={configDefaultImage} class="config-default" alt="" aria-hidden="true" /> + <img src={configHoverImage} class="config-hover" alt="" aria-hidden="true" /> </div> </div> </FeatureCard> @@ -79,10 +82,9 @@ Automatic tiling which just works. Supports multiple fine-tuneable layouts. </p> <div class="absolute _wrapper inset-0 select-none" aria-hidden> - <div - class="absolute text-[280px] text-slate-500 font-extrabold gap-y-4 [line-height:1] -z-10 bottom-[20px] tiling right-0 md:right-8 font-mono tiles" - > - <div class="tile" style={''}>[ ]</div> + <div class="feature-image"> + <img src={tileDefaultImage} class="config-default" alt="" aria-hidden="true" /> + <img src={tileHoverImage} class="config-hover" alt="" aria-hidden="true" /> </div> </div> </FeatureCard> @@ -106,9 +108,12 @@ <ShortcutsIcon class="h-8 w-8" /> Global shortcuts for apps </a> - <div class="icon-feature"> - <BleedingEdgeIcon class="h-8 w-8" />Bleeding edge tech - </div> + <a + href="https://wiki.hyprland.org/Configuring/Variables/#gestures" + class="icon-feature hover:underline" + > + <TouchpadIcon class="h-8 w-8" />Touchpad gestures + </a> </div> </section> @@ -117,69 +122,31 @@ @apply flex items-center justify-center gap-3 font-bold text-slate-400; } - ._configure { - @apply bg-gradient-to-tl from-pink-500 to-blue-500 bg-clip-text text-blue-700; - line-height: 1; - z-index: -1; - transition: all 850ms ease-in-out; - color: rgb(255, 121, 170); - opacity: 0.4; - color: transparent; - text-shadow: - 10px -10px 40px theme(colors.pink.700 / 20), - 5px 5px 20px cyan, - -10px 10px 40px theme(colors.blue.700 / 20); - filter: saturate(2) drop-shadow(8px 8px 20px theme(colors.pink.700)) - drop-shadow(-8px -8px 20px theme(colors.blue.700)); + .feature-image { + position: absolute; + inset: 0 0 0 0; + opacity: 0.5; - ._wrapper:hover & { - color: transparent; - opacity: 0.6; - filter: saturate(2) drop-shadow(8px 8px 12px theme(colors.pink.700)) - drop-shadow(-8px -8px 12px theme(colors.blue.700)); - text-shadow: - 15px -15px 40px theme(colors.pink.700 / 80), - 8px 8px 20px cyan, - -15px 15px 40px theme(colors.blue.700 / 40); + & img { + width: 800px; + height: 800px; + position: absolute; + right: -200px; + top: -209px; + transition: opacity 1500ms ease-in-out; + pointer-events: none; } } - - .tile { - /* Animate a pulse animation for the glow effect */ - /* Use different colors for the different windows */ - background: radial-gradient(ellipse, var(--color1, cyan) 50%, var(--color2, magenta)); - background-clip: text; - color: transparent; - letter-spacing: -55px; - text-shadow: - -5px 5px 8px color-mix(in srgb, var(--color1, magenta), transparent 90%), - 5px -5px 8px color-mix(in srgb, color-mix(in srgb, var(--color1, rgb(0, 187, 255)), black 20%), transparent - 10%), - 0px 0px 15px var(--color2, magenta); - - filter: saturate(1) drop-shadow(8px 8px 24px var(--color2, blue)) - drop-shadow( - -8px -8px 24px color-mix(in srgb, var(--color1, rgb(0, 187, 255)), rgba(0, 0, 0, 0.056) 80%) - ); - opacity: 0.4; - transition: all 850ms ease-in-out; - - ._wrapper:hover & { - opacity: 0.7; - text-shadow: - -15px 15px 0px color-mix(in srgb, var(--color1, cyan), transparent 60%), - 15px -15px 8px color-mix(in srgb, color-mix(in srgb, var(--colo1r, magenta), rgb(0, 0, 111) - 50%), transparent 30%), - 0px 0px 15px var(--color2, magenta); - - filter: saturate(2) drop-shadow(8px 8px 24px var(--color2, blue)) - drop-shadow( - -8px -8px 24px color-mix(in srgb, var(--color1, magenta), rgba(0, 0, 0, 0.056) 20%) - ); - } + .config-hover { + opacity: 0; } - - .tiles { - filter: drop-shadow(0px 0px 5px rgb(0, 191, 255)); + ._wrapper:hover { + & .config-default { + opacity: 0; + } + & .config-hover { + opacity: 1 !important; + filter: saturate(1.5); + } } </style> diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte index 8c489ff..3882751 100755 --- a/src/routes/Navbar.svelte +++ b/src/routes/Navbar.svelte @@ -11,6 +11,8 @@ function toggleExpanded() { isExpanded = !isExpanded } + + //! TODO close mobile menu on navigation </script> <header diff --git a/src/routes/PreviewRiceSlice.svelte b/src/routes/PreviewRiceSlice.svelte index 8eedc68..aa7df96 100755 --- a/src/routes/PreviewRiceSlice.svelte +++ b/src/routes/PreviewRiceSlice.svelte @@ -17,8 +17,6 @@ let isMuted = true let isPaused = false - $: console.log({ isVisible }) - function toggleMute() { isMuted = !isMuted } @@ -45,7 +43,7 @@ > <div class={clsx( - 'rounded-xl group relative overflow-hidden border-sky-400 border-2 transition-all [transition-duration:1460ms] mx-3 shadow-2xl shadow-cyan-400/40', + 'rounded-xl group relative border-sky-400 border-2 transition-all [transition-duration:1460ms] mx-3 shadow-2xl shadow-cyan-400/40', !isVisible && 'opacity-20 scale-90' )} role="banner" @@ -67,6 +65,7 @@ src={previewRice} disablepictureinpicture="true" disableremoteplayback="true" + class="rounded-xl" loop muted={isMuted} preload="auto" @@ -98,7 +97,13 @@ </div> {/if} </div> + + <a + class="px-3 pt-2 block absolute -bottom-7 left-0 max-w-max text-sm text-slate-100/70 hover:underline" + href="https://github.com/end-4/">Setup by @end_4</a + > </div> + <div class="preview-rice-bg overflow-x-hidden" aria="hidden" /> </section> diff --git a/src/routes/wall_of_fame/+page.svelte b/src/routes/wall_of_fame/+page.svelte index cb81f6a..29dba34 100755 --- a/src/routes/wall_of_fame/+page.svelte +++ b/src/routes/wall_of_fame/+page.svelte @@ -1,7 +1,76 @@ -<div class="h-screen flex items-center justify-center p-8 overflow-hidden"> - <img - src="https://i.giphy.com/media/H8w9SE95izloQ/giphy.webp" - alt="Under construction" - class="w-full max-w-4xl" - /> -</div> +<script lang="ts"> + import Title from '$lib/components/Title.svelte' + import Contest from './Contest.svelte' + import FamedRice from './FamedRice.svelte' +</script> + +<section class="min-h-screen flex flex-col gap-14 items-center justify-center p-8 overflow-hidden"> + <div class="h-[50vh] min-h-min flex flex-col items-center justify-center"> + <Title> + <h1 slot="title">Wall of fame</h1> + <div slot="subtitle"> + The chronicles of the triumphant<br /> from bygone rice contests held within our Discord + </div> + + + + + + + + + + + + + + +
    diff --git a/src/routes/wall_of_fame/Contest.svelte b/src/routes/wall_of_fame/Contest.svelte new file mode 100755 index 0000000..b002b77 --- /dev/null +++ b/src/routes/wall_of_fame/Contest.svelte @@ -0,0 +1,50 @@ + + +
    +
    +
    +
    Contest #{number}
    +

    {name}

    +
    + + +
    + +
    + +
    +
    + + diff --git a/src/routes/wall_of_fame/FamedRice.svelte b/src/routes/wall_of_fame/FamedRice.svelte new file mode 100755 index 0000000..1bc602b --- /dev/null +++ b/src/routes/wall_of_fame/FamedRice.svelte @@ -0,0 +1,51 @@ + + +
    +
    +
    {pretitel}
    +

    + {name} +

    + + {creator +
    + {creator} +
    +     +
    + +
    + + {`${name} + + +
    +
    diff --git a/static/imgs/404.png b/static/imgs/404.png deleted file mode 100755 index cb7e484..0000000 Binary files a/static/imgs/404.png and /dev/null differ diff --git a/static/imgs/env_4 novelknock-10.webp b/static/imgs/env_4 novelknock-10.webp new file mode 100755 index 0000000..70babc0 Binary files /dev/null and b/static/imgs/env_4 novelknock-10.webp differ diff --git a/static/imgs/hyprland.png b/static/imgs/hyprland.png deleted file mode 100755 index ea30745..0000000 Binary files a/static/imgs/hyprland.png and /dev/null differ diff --git a/static/imgs/img1.webp b/static/imgs/img1.webp new file mode 100755 index 0000000..4a96805 Binary files /dev/null and b/static/imgs/img1.webp differ diff --git a/static/imgs/img2.webp b/static/imgs/img2.webp new file mode 100755 index 0000000..20a9b36 Binary files /dev/null and b/static/imgs/img2.webp differ diff --git a/static/imgs/img3.webp b/static/imgs/img3.webp new file mode 100755 index 0000000..a844ce0 Binary files /dev/null and b/static/imgs/img3.webp differ diff --git a/static/imgs/img4.webp b/static/imgs/img4.webp new file mode 100755 index 0000000..1e7680b Binary files /dev/null and b/static/imgs/img4.webp differ diff --git a/static/imgs/img5.webp b/static/imgs/img5.webp new file mode 100755 index 0000000..0e11b50 Binary files /dev/null and b/static/imgs/img5.webp differ diff --git a/static/imgs/img6.webp b/static/imgs/img6.webp new file mode 100755 index 0000000..75d6732 Binary files /dev/null and b/static/imgs/img6.webp differ diff --git a/tailwind.config.js b/tailwind.config.js index 838b432..aadb0c9 100755 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -28,6 +28,8 @@ export default { 'text-cyan-600', 'text-green-500', 'text-green-600', + 'text-emerald-500', + 'text-emerald-600', 'text-lime-500', 'text-lime-600' ]