hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2025-05-13 05:30:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor Title

Browse source 
refactor title component
This commit is contained in:
VDawg 2024-08-02 11:12:40 +03:00
parent 24b64047f6
commit 918f67d4bb
15 changed files with 92 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/lib/components/Title.svelte
View file

@ -1,26 +0,0 @@
<script>
import { animateIn } from '$lib/Helper.mjs'
</script>
<hgroup
use:animateIn={{ slide: 24, fade: 0 }}
class="z-10 flex flex-col items-center px-3 text-center {$$restProps.class}"
>
{#if $$slots.pre}
<p class="mb-3 font-extrabold text-slate-300">
<slot name="pre" />
</p>
{/if}
<h1 class="mb-12 text-center text-5xl font-bold md:text-7xl lg:text-8xl">
<slot name="title">No title given!!!</slot>
</h1>
{#if $$slots.subtitle}
<p class="-mt-4 mb-7 text-center font-extrabold text-slate-300 sm:text-lg">
<slot name="subtitle" />
</p>
{/if}
<slot />
</hgroup>

3
src/lib/components/Title/TitleHeading.svelte Executable file
View file

@ -0,0 +1,3 @@
<h1 class="mb-12 text-5xl font-bold md:text-7xl lg:text-8xl {$$restProps.class}">
<slot>No title given!!!</slot>
</h1>

3
src/lib/components/Title/TitlePre.svelte Normal file
View file

@ -0,0 +1,3 @@
<p class="mb-3 font-extrabold text-slate-300">
<slot />
</p>

3
src/lib/components/Title/TitleSubtile.svelte Normal file
View file

@ -0,0 +1,3 @@
<p class="-mt-4 mb-7 font-extrabold text-slate-300 sm:text-lg {$$restProps.class}">
<slot />
</p>

27
src/lib/components/Title/TitleWrapper.svelte Executable file
View file

@ -0,0 +1,27 @@
<script>
import { animateIn } from '$lib/Helper.mjs'
import clsx from 'clsx'
/** @type { 'left' | 'right' | 'center'} */
export let align = 'center'
$: alignClass =
align === 'center'
? 'text-center items-center'
: align === 'left'
? 'text-left items-start'
: 'text-right items-end'
</script>
<hgroup
use:animateIn={{ slide: 24, fade: 0 }}
class={clsx('z-10 flex flex-col px-3 ', alignClass, $$restProps.class)}
>
<slot name="pre" />
<slot name="title">No title given!!!</slot>
<slot name="subtitle" />
<slot />
</hgroup>

10
src/routes/hall_of_fame/+page.svelte
View file

@ -1,5 +1,7 @@
<script> <script>
import Title from '$lib/components/Title.svelte' import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
import Title from '$lib/components/Title/TitleWrapper.svelte'
import Contest from './Contest.svelte' import Contest from './Contest.svelte'
import FamedRice from './FamedRice.svelte' import FamedRice from './FamedRice.svelte'
@ -16,10 +18,10 @@
</div> </div>
<div class="gradient_" /> <div class="gradient_" />
<Title> <Title>
<span slot="title" class="title">Hall of fame</span> <TitleHeading slot="title" class="">Hall of Fame</TitleHeading>
<div slot="subtitle" class="max-w-[40ch]"> <TitleSubtile slot="subtitle" class="class-w-[40ch]">
The chronicles of the triumphant from bygone rice contests held within our Discord The chronicles of the triumphant from bygone rice contests held within our Discord
</div> </TitleSubtile>
</Title> </Title>
</div> </div>

11
src/routes/home-slices/CommunitySlice.svelte
View file

@ -7,7 +7,7 @@
import DiscordIcon from '~icons/prime/discord' import DiscordIcon from '~icons/prime/discord'
import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte' import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
import { onMount, setContext } from 'svelte' import { onMount, setContext } from 'svelte'
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title/TitleWrapper.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' import amongUsGreenImage from '$lib/images/amongus/green.webp'
import { discordLink } from '$lib/constants.mjs' import { discordLink } from '$lib/constants.mjs'
@ -16,6 +16,8 @@
import { writable } from 'svelte/store' import { writable } from 'svelte/store'
import { Observable } from 'rxjs' import { Observable } from 'rxjs'
import { writableObservable } from '$lib/Helper.mjs' import { writableObservable } from '$lib/Helper.mjs'
import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
let sectionElement let sectionElement
let isDraggingChan = false let isDraggingChan = false
@ -106,11 +108,10 @@
bind:this={sectionElement} bind:this={sectionElement}
> >
<Title> <Title>
<span slot="title">Join a great<br />community</span> <TitleHeading slot="title" class="">Join a great<br />community</TitleHeading>
<TitleSubtile slot="subtitle" class="class-w-[40ch]">
<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)
</span> </TitleSubtile>
</Title> </Title>
<div class="group mt-16 flex flex-col items-center"> <div class="group mt-16 flex flex-col items-center">

8
src/routes/home-slices/FeaturesSlice.svelte
View file

@ -6,7 +6,7 @@
import TabIcon from '~icons/gg/tab' import TabIcon from '~icons/gg/tab'
import IpcIcon from '~icons/gg/media-podcast' import IpcIcon from '~icons/gg/media-podcast'
import TouchpadIcon from '~icons/gg/touchpad' import TouchpadIcon from '~icons/gg/touchpad'
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title/TitleWrapper.svelte'
import Hypractive from './Hypractive.svelte' import Hypractive from './Hypractive.svelte'
import configDefaultImage from '$lib/images/features/config_default.webp' import configDefaultImage from '$lib/images/features/config_default.webp'
import configHoverImage from '$lib/images/features/config_hover.webp' import configHoverImage from '$lib/images/features/config_hover.webp'
@ -15,12 +15,14 @@
import tileDefaultImage from '$lib/images/features/tiling_default.webp' import tileDefaultImage from '$lib/images/features/tiling_default.webp'
import tileHoverImage from '$lib/images/features/tiling_hover.webp' import tileHoverImage from '$lib/images/features/tiling_hover.webp'
import CardsContainer from '$lib/components/CardsContainer.svelte' import CardsContainer from '$lib/components/CardsContainer.svelte'
import TitlePre from '$lib/components/Title/TitlePre.svelte'
import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
</script> </script>
<section class="relative flex flex-col items-center px-3 md:px-8"> <section class="relative flex flex-col items-center px-3 md:px-8">
<Title> <Title>
<span slot="pre">TLDR</span> <TitlePre slot="pre">TLDR</TitlePre>
<span slot="title">Features</span> <TitleHeading slot="title" class="">Features</TitleHeading>
</Title> </Title>
<CardsContainer <CardsContainer

8
src/routes/home-slices/HallOfFameSlice.svelte
View file

@ -1,15 +1,17 @@
<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 TitleHeading from '$lib/components/Title/TitleHeading.svelte'
import TitlePre from '$lib/components/Title/TitlePre.svelte'
import Title from '$lib/components/Title/TitleWrapper.svelte'
import FameRicePreview from './FameRicePreview.svelte' import FameRicePreview from './FameRicePreview.svelte'
</script> </script>
<section class="" use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}> <section class="" use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}>
<div class="z-20 -mb-40 px-4"> <div class="z-20 -mb-40 px-4">
<Title> <Title>
<span slot="pre"> Memorials of the ricing legends </span> <TitlePre>Memorials of the ricing legends</TitlePre>
<span slot="title">Hall of Fame</span> <TitleHeading slot="title" class="">Hall of Fame</TitleHeading>
</Title> </Title>
</div> </div>

9
src/routes/home-slices/InstallSlice.svelte
View file

@ -6,14 +6,17 @@
import suseLogo from '$lib/images/logos/opensuse.svg' import suseLogo from '$lib/images/logos/opensuse.svg'
import DistroOption from './DistroOption.svelte' import DistroOption from './DistroOption.svelte'
import Button from '$lib/components/Button.svelte' import Button from '$lib/components/Button.svelte'
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title/TitleWrapper.svelte'
import amongus from '$lib/images/amongus/green.webp' import amongus from '$lib/images/amongus/green.webp'
import CommandButton from '$lib/components/CommandButton.svelte' import CommandButton from '$lib/components/CommandButton.svelte'
import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
</script> </script>
<section class="pb-6"> <section class="pb-6">
<Title class="mb-8"> <Title>
<span slot="title">Install now</span><span slot="subtitle"> For your favourite distro </span> <TitleHeading slot="title" class="">Install now</TitleHeading>
<TitleSubtile slot="subtitle" class="">For yor favourite distro</TitleSubtile>
</Title> </Title>
<div class="flex flex-col items-center gap-12 md:gap-6" use:animateIn={{ slide: 24, fade: 0 }}> <div class="flex flex-col items-center gap-12 md:gap-6" use:animateIn={{ slide: 24, fade: 0 }}>

10
src/routes/home-slices/NewsSlice.svelte
View file

@ -1,14 +1,16 @@
<script> <script>
import NewsThumb from '$lib/components/news-thumb.svelte' import NewsThumb from '$lib/components/news-thumb.svelte'
import Title from '$lib/components/Title.svelte' import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
import TitlePre from '$lib/components/Title/TitlePre.svelte'
import Title from '$lib/components/Title/TitleWrapper.svelte'
export let news export let news
</script> </script>
<section class="relative mb-12 max-w-5xl px-8 md:mb-20"> <section class="relative mb-12 max-w-5xl px-8 md:mb-20">
<Title class="mb-8"> <Title>
<span slot="pre">Read while it's fresh</span> <TitlePre>Read while it's fresh!</TitlePre>
<span slot="title">Latest news</span> <TitleHeading slot="title" class="">Latest news</TitleHeading>
</Title> </Title>
<ul class="flex flex-col gap-12"> <ul class="flex flex-col gap-12">

13
src/routes/news/+page.svelte
View file

@ -1,8 +1,10 @@
<script> <script>
import LogoPng from '$lib/images/logos/HyprlandLogo.png' import LogoPng from '$lib/images/logos/HyprlandLogo.png'
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title/TitleWrapper.svelte'
import NewsThumb from '$lib/components/news-thumb.svelte' import NewsThumb from '$lib/components/news-thumb.svelte'
import { onDestroy, onMount } from 'svelte' import { onDestroy, onMount } from 'svelte'
import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
export let data export let data
@ -70,10 +72,9 @@
<header class="header"> <header class="header">
<pre class="spinner-wrapper" bind:this={asciiElement} /> <pre class="spinner-wrapper" bind:this={asciiElement} />
<Title class="mb-0 duration-1000 animate-in fade-in-0"> <Title>
<span slot="title">News</span><span slot="subtitle"> <TitleHeading slot="title" class="">News</TitleHeading>
Fresh updates straight from the oven <TitleSubtile>Fresh updates straight from the oven</TitleSubtile>
</span>
</Title> </Title>
</header> </header>
@ -106,7 +107,7 @@
} }
.spinner-wrapper { .spinner-wrapper {
@apply mb-4 flex items-center justify-center bg-gradient-to-tr from-blue-500/0 to-cyan-500 bg-clip-text text-transparent animate-in fade-in-0; @apply mb-4 flex items-center justify-center bg-gradient-to-tr from-blue-500/0 to-cyan-500 bg-clip-text text-transparent animate-in fade-in-0;
animation-duration: 2000ms; animation-duration: 2000ms;
font-size: min(1vh, 1rem); font-size: min(1vh, 1rem);
/* There are 36 rows */ /* There are 36 rows */

8
src/routes/news/[slug]/+page.svelte
View file

@ -1,6 +1,7 @@
<script> <script>
import { formatDate } from '$lib/Helper' import { formatDate } from '$lib/Helper'
import Title from '$lib/components/Title.svelte' import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
import Title from '$lib/components/Title/TitleWrapper.svelte'
import NewsThumb from '$lib/components/news-thumb.svelte' import NewsThumb from '$lib/components/news-thumb.svelte'
export let data export let data
@ -34,7 +35,10 @@
{#if data.other.length > 0} {#if data.other.length > 0}
<section class="mx-auto mt-72 max-w-screen-lg"> <section class="mx-auto mt-72 max-w-screen-lg">
<Title class="mb-6"><span slot="title">More news</span></Title> <Title class="mb-6">
<TitleHeading slot="title" class="">More news</TitleHeading>
</Title>
<ul class="grid grid-cols-2 gap-x-7 gap-y-16 overflow-auto"> <ul class="grid grid-cols-2 gap-x-7 gap-y-16 overflow-auto">
{#each data.other as entry} {#each data.other as entry}
<NewsThumb {entry} /> <NewsThumb {entry} />

14
src/routes/plugins/+page.svelte
View file

@ -1,10 +1,13 @@
<script> <script>
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title/TitleWrapper.svelte'
import CardsContainer from '$lib/components/CardsContainer.svelte' import CardsContainer from '$lib/components/CardsContainer.svelte'
import PluginCard from './PluginCard.svelte' import PluginCard from './PluginCard.svelte'
import clsx from 'clsx' import clsx from 'clsx'
import * as R from 'remeda' import * as R from 'remeda'
import { getGeneratedPath } from '$lib/Helper.mjs' import { getGeneratedPath } from '$lib/Helper.mjs'
import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
import TitlePre from '$lib/components/Title/TitlePre.svelte'
import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
export let data export let data
@ -40,11 +43,10 @@
<div class="top-light"></div> <div class="top-light"></div>
<header class="header mt-24 md:mt-32"> <header class="header mt-24 md:mt-32">
<Title class="mb-0 duration-1000 animate-in fade-in-0"> <Title>
<span slot="pre">Plugins</span> <TitlePre>Plugins</TitlePre>
<span slot="title">Unlock full power</span><span slot="subtitle"> <TitleHeading slot="title" class="">Unlock full power</TitleHeading>
Easily load up plugins and customize everything <TitleSubtile>Easily load up plugins and customize everything</TitleSubtile>
</span>
</Title> </Title>
<!-- <div class="absolute top-0"> <!-- <div class="absolute top-0">

2
src/routes/plugins/[slug]/+page.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import CardsContainer from '$lib/components/CardsContainer.svelte' import CardsContainer from '$lib/components/CardsContainer.svelte'
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title/TitleWrapper.svelte'
import clsx from 'clsx' import clsx from 'clsx'
import PluginCard from '../PluginCard.svelte' import PluginCard from '../PluginCard.svelte'
import Tag from '../Tag.svelte' import Tag from '../Tag.svelte'