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

Working on CSS for game component.

Browse source
This commit is contained in:
Bradley Shellnut 2022-07-25 19:04:05 -07:00
parent 0d10bd8787
commit 0fcf8cd858
1 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,22 +15,19 @@
</div> </div>
<div class="game-details"> <div class="game-details">
<div class="game"> <p>{game.year_published}</p>
<div class="content"> <p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
<p>{game.year_published}</p> <p>{game.playtime} minutes</p>
<p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p> <p>Minimum Age: {game.min_age}</p>
<p>{game.playtime} minutes</p> <a href={`/game/${game.id}`}>View Game</a>
<p>Minimum Age: {game.min_age}</p> {#if detailed}
<a href={`/game/${game.id}`}>View Game</a> <div class="description">{@html game.description}</div>
{#if detailed} {/if}
<div class="description">{@html game.description}</div>
{/if}
</div>
</div>
</div> </div>
</article> </article>
<style lang="scss"> <style lang="scss">
h2
.thumbnail { .thumbnail {
align-self: start; align-self: start;
} }
@ -40,9 +37,11 @@
} }
.game-container { .game-container {
display: grid; display: flex;
/* grid-template-columns: min-content 1fr; */ flex-wrap: wrap;
grid-template-columns: 1fr 1fr; /* grid-template-columns: repeat(minmax(100px, 1fr), 3); */
/* grid-template-columns: 1fr 1fr; */
max-width: 300px;
gap: var(--spacing-16); gap: var(--spacing-16);
padding: var(--spacing-16) var(--spacing-16); padding: var(--spacing-16) var(--spacing-16);
transition: all 0.3s; transition: all 0.3s;
@ -53,9 +52,15 @@
} }
.game-info { .game-info {
margin: 0.2rem;
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
margin: 0.2rem;
}
.game-details {
p, a {
padding: 0.25rem;
}
} }
} }
</style> </style>