125 lines
No EOL
4 KiB
Svelte
125 lines
No EOL
4 KiB
Svelte
<script lang="ts">
|
||
import SocialButton from '$lib/components/SocialButton.svelte';
|
||
import { PUBLIC_TS_DISCORD } from '$env/static/public';
|
||
import BlogCard, { BlogCardSize } from '$src/lib/components/BlogCard.svelte';
|
||
import { page } from '$app/state';
|
||
import type { PageData } from './$types';
|
||
|
||
export let data: PageData;
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>Tea Sanctuary</title>
|
||
</svelte:head>
|
||
|
||
<section class="hero flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4">
|
||
<div
|
||
class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
|
||
>
|
||
<div
|
||
class="relative size-48 shrink-0 rounded-2xl bg-slate-50 shadow-[inset_0px_0px_0px_2px] shadow-slate-200"
|
||
>
|
||
<img
|
||
src="/common/dotted-line.svg"
|
||
class="absolute top-0 right-0 bottom-0 left-0"
|
||
alt="Пунктирная линия"
|
||
/>
|
||
<!-- В документации Tailwind советуют использовать "Inline SVG" -->
|
||
<svg
|
||
width="196"
|
||
height="196"
|
||
class="absolute top-0 right-0 bottom-0 left-0 stroke-slate-950"
|
||
fill="none"
|
||
><path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="6"
|
||
d="M48.996 95.53c-18.624 5.826-30.621 14.965-30.621 25.239 0 17.599 35.19 31.866 78.604 31.866s78.604-14.267 78.604-31.866c0-10.274-11.997-19.413-30.617-25.24"
|
||
/><path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="6"
|
||
d="M18.375 121.626c0 17.599 19.118 40.364 78.604 40.364 59.486 0 78.604-23.622 78.604-41.221"
|
||
/><path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="6"
|
||
d="M37.493 53.042c0 24.97 16.66 73.762 59.486 73.762 42.826 0 59.482-48.792 59.482-73.757"
|
||
/><path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="6"
|
||
d="M96.98 72.083c32.85 0 59.481-8.523 59.481-19.036 0-10.514-26.631-19.037-59.482-19.037-32.85 0-59.482 8.523-59.482 19.037 0 10.513 26.631 19.036 59.482 19.036Z"
|
||
/><path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="6"
|
||
d="M153.746 58.743c-6.958-7.938-29.739-13.757-56.767-13.757-27.027 0-49.808 5.819-56.77 13.76M147.6 90.349c24.664 4.41 30.025-9.625 30.025-20.184 0-10.56-4.051-17.117-13.377-17.117a10.125 10.125 0 0 0-7.913 3.854"
|
||
/></svg
|
||
>
|
||
</div>
|
||
|
||
<div class="text-center font-bold lg:text-left">
|
||
<h1>TEA</h1>
|
||
<h1>SANCTUARY</h1>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col items-center justify-start gap-4">
|
||
<div class="flex flex-row flex-wrap items-start justify-center gap-4">
|
||
<SocialButton class="w-60 shrink-0" href={PUBLIC_TS_DISCORD}>Сообщество</SocialButton>
|
||
<SocialButton class="w-60 shrink-0" href="https://github.com/TeaSanctuary/">
|
||
GitHub
|
||
</SocialButton>
|
||
<SocialButton class="w-60 shrink-0" href="https://git.teasanctuary.ru">
|
||
Наш Git
|
||
</SocialButton>
|
||
<SocialButton class="w-60 shrink-0" href="https://hl.teasanctuary.ru">
|
||
Сервер HLDM
|
||
</SocialButton>
|
||
</div>
|
||
<SocialButton class="w-60 opacity-5 hover:opacity-100" href="https://хамяк.рф">
|
||
хамяк)
|
||
</SocialButton>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="flex flex-col items-stretch bg-blue-900 pt-4 text-slate-50">
|
||
<h1 class="text-center">ПОСЛЕДНИЕ ПОСТЫ</h1>
|
||
|
||
<div class="flex flex-row items-stretch justify-evenly gap-4 overflow-x-auto p-4">
|
||
{#each page.data.posts as post, i}
|
||
<div class="aspect-3/2 w-80 shrink-0">
|
||
<BlogCard {post} size={BlogCardSize.Short} fullHeight />
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
</section>
|
||
|
||
<article
|
||
class="prose
|
||
sm:prose-xl
|
||
prose-slate
|
||
prose-code:break-words
|
||
prose-pre:drop-shadow-md
|
||
prose-headings:font-disket
|
||
prose-headings:my-4
|
||
prose-headings:font-bold
|
||
prose-headings:text-slate-950
|
||
prose-h1:text-2xl
|
||
prose-h1:sm:text-4xl
|
||
prose-h2:text-xl
|
||
prose-h2:sm:text-3xl
|
||
prose-p:text-justify
|
||
prose-p:mt-0
|
||
prose-p:mb-8
|
||
bg-slate-50
|
||
pt-8
|
||
pb-4
|
||
text-base
|
||
text-slate-950
|
||
px-2 sm:px-4 sm:text-xl"
|
||
>
|
||
<section class="flex max-w-5xl flex-col flex-nowrap mx-auto">
|
||
<svelte:component this={data.content} />
|
||
</section>
|
||
</article> |