101 lines
2.1 KiB
Svelte
101 lines
2.1 KiB
Svelte
<script>
|
|
import { getNamedId } from '$lib/util';
|
|
import Avatar from './avatar.svelte';
|
|
import GlowFX from './fx/glowfx.svelte';
|
|
import PerspectiveFX from './fx/perspectivefx.svelte';
|
|
import Mention from './mention.svelte';
|
|
import Rating from './rating.svelte';
|
|
import RatingVertical from './ratingvertical.svelte';
|
|
import Useritem from './useritem.svelte';
|
|
|
|
/**
|
|
* @type {import('$types/base').Post}
|
|
*/
|
|
export let post;
|
|
</script>
|
|
|
|
<style type="scss">
|
|
.postCardOutline {
|
|
|
|
border-radius: 18px;
|
|
padding: 2px;
|
|
|
|
position: relative;
|
|
|
|
background-size: 350vw;
|
|
background-position: 90% 0%;
|
|
background-image: linear-gradient(30deg, #7d65ff30 45%, white 50%, transparent 55%);
|
|
|
|
transition: ease-out 0.5s;
|
|
|
|
&:hover {
|
|
background-position: 0% 0%;
|
|
|
|
& .postCard {
|
|
background-position: 0% 0%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.postCard {
|
|
display: block;
|
|
|
|
text-decoration: none;
|
|
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
background: #12121b;
|
|
|
|
background-size: 300vw;
|
|
background-position: 100% 0%;
|
|
background-image: linear-gradient(30deg, #131320 40%, #373052 50%, #12121b 60%);
|
|
|
|
position: relative;
|
|
|
|
transition: ease-out 0.2s;
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.2rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.postContainer {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sidePad {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
padding: 18px 0px;
|
|
gap: 16px;
|
|
}
|
|
|
|
.mention {
|
|
text-decoration: none;
|
|
color: var(--accent);
|
|
padding: 0em 0.2em;
|
|
background: var(--accent-dim);
|
|
border-radius: 0.2em;
|
|
}
|
|
</style>
|
|
|
|
<div class="postContainer">
|
|
<div class="sidePad">
|
|
<Avatar size={32}></Avatar>
|
|
<RatingVertical rating={post.rating}></RatingVertical>
|
|
</div>
|
|
<GlowFX borderRadius={18} opacity={0.7} style="flex: 1;">
|
|
<div class="postCardOutline">
|
|
<a class="postCard" href="/posts/{getNamedId(post.id, post.name)}">
|
|
<Mention user={post.author}></Mention>
|
|
<h6 class="title taviraj-regular">{post.name}</h6>
|
|
<p>{post.category.name}</p>
|
|
<p>{post.content}</p>
|
|
</a>
|
|
</div>
|
|
</GlowFX>
|
|
</div>
|