BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 🎨 Make the game component look cleaner

Browse source
This commit is contained in:
Bradley Shellnut 2022-11-01 12:10:25 -05:00
parent b2e34606fe
commit c1d4e5a2d9
1 changed files with 70 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/lib/components/game/index.svelte
View file

@ -28,12 +28,12 @@
</script>
<article class="game-container" transition:fade>
<div class="game-info">
<!-- <div class="game-info"> -->
<h2>{game.name}</h2>
<a class="thumbnail" href={`/game/${game.id}`}>
<img src={game.thumb_url} alt={`Image of ${game.name}`} />
</a>
</div>
<!-- </div> -->
{#if !minimal && game?.players && game?.playtime}
<div class="game-details">
@ -49,6 +49,7 @@
{/if}
</div>
{/if}
<div class="game-buttons">
{#if existsInCollection}
<button
aria-label="Remove from collection"
@ -93,6 +94,7 @@
}}>Add to wishlist <PlusCircleIcon width="24" height="24" /></button
>
{/if}
</div>
</article>
<style lang="scss">
@ -112,9 +114,10 @@
}
.game-container {
display: flex;
place-content: center;
flex-wrap: wrap;
display: grid;
grid-template-rows: repeat(auto-fill, 1fr);
place-items: center;
text-align: center;
@media (max-width: 650px) {
max-width: none;
@ -129,12 +132,12 @@
background-color: hsla(222, 9%, 65%, 1);
}
.game-info {
/* .game-info {
display: grid;
place-items: center;
gap: 0.75rem;
margin: 0.2rem;
}
} */
.game-details {
p,
@ -143,6 +146,10 @@
}
}
.game-buttons {
display: grid;
gap: 1rem;
.btn {
max-height: 100px;
}
@ -155,4 +162,5 @@
}
}
}
}
</style>