generated from darkicewolf50/ssg-sveltekit-template
46 lines
788 B
Svelte
46 lines
788 B
Svelte
<script>
|
|
import TechCard from './techCard.svelte';
|
|
|
|
let { cat, tech_vec } = $props();
|
|
</script>
|
|
|
|
<div class="tech-cat">
|
|
<h3>{cat}</h3>
|
|
<div class="tech-row">
|
|
{#each tech_vec as tech}
|
|
<TechCard tech_props={tech} />
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
:root {
|
|
--tech-gap: 4svw;
|
|
}
|
|
|
|
h3 {
|
|
border-bottom: var(--underlineTitle);
|
|
border-radius: var(--underlineTitleBorderRadius);
|
|
display: flex;
|
|
margin: 2svh 2svw;
|
|
padding: 0svh 2svw;
|
|
padding-bottom: 1svh;
|
|
}
|
|
|
|
.tech-cat {
|
|
padding: 0px 1svw;
|
|
padding-bottom: 2svh;
|
|
margin-bottom: 3svh;
|
|
flex: 1 1 auto;
|
|
background-color: var(--card-background-color);
|
|
border-radius: var(--card-border-radius);
|
|
}
|
|
|
|
.tech-row {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-evenly;
|
|
row-gap: 1svh;
|
|
}
|
|
</style>
|