diff options
Diffstat (limited to 'src/lib/Events')
| -rw-r--r-- | src/lib/Events/Event.svelte | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/src/lib/Events/Event.svelte b/src/lib/Events/Event.svelte new file mode 100644 index 00000000..986db071 --- /dev/null +++ b/src/lib/Events/Event.svelte @@ -0,0 +1,63 @@ +<script lang="ts"> + import type { Event } from '$lib/Database/events'; + import locale from '$stores/locale'; + + export let event: Event; +</script> + +<a href={event.anilist_url} target="_blank"> + <div + class="card" + id="user-grid" + style={`background-image: ${event.banner ? `url(${event.banner})` : 'none'}; padding: 0;`} + > + {#if event} + <img src={event.banner} alt="" id="cover-image" /> + {/if} + + <div class="card" id="user-grid-content"> + <div id="user-grid-content-text"> + <p> + <a href={event.anilist_url} target="_blank" class="title-text"> + {event.title} + </a> + <br /> + {$locale().dateFormatter(new Date(event.created_at))} + </p> + + <p>{event.description}</p> + </div> + </div> + </div> +</a> + +<style> + #user-grid-content { + display: flex; + flex-wrap: wrap; + column-gap: 1.5em; + background-color: rgba(0, 0, 0, 0.468); + color: #d8d8d8; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + /* .click-item { + margin: 0 0.625rem; + } */ + + #user-grid { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + } + + #cover-image { + visibility: hidden; + height: 4.5em; + } + + .title-text { + font-size: 1.1em; + } +</style> |