:sparkles: creating rudimentary card component

src/App.vue

@@ -1,10 +1,37 @@
 <template lang="pug">
-img(alt="Vue logo" src="./assets/logo.png")
+.cards.f-row
+    card(v-for="card in cards" :card="card" @remove="remove")
 hello-world(msg="Hello Vue 3 + Vite")
 </template>
 
-<script setup>
+<script>
+import { ref } from 'vue'
+
 import helloWorld from '@/components/HelloWorld.vue'
+import card from '@/components/card.vue'
+
+export default {
+    components: { card, helloWorld },
+    setup() {
+    
+        const cards = ref([
+            { name: 'jwick' },
+            { name: 'hwick' },
+            { name: 'kwick' },
+        ])
+
+        const remove = card => {
+            const i = cards.value.indexOf(card)
+            cards.value.splice(i, 1)
+            console.log(cards.value)
+        }
+
+        return { 
+            cards,
+            remove
+        }
+    }
+}
 </script>
 
 <style lang="postcss">

src/components/HelloWorld.vue

@@ -40,7 +40,7 @@ api.removeAll()
 api.put(state.profile).then(p => {
     state.loaded = true
     console.log(p)
-    api.sync()
+    // api.sync()
 })
 </script>
 

src/components/card.vue

@@ -0,0 +1,60 @@
+<template lang="pug">
+.card
+    header
+        p {{ card.name }}
+
+    main
+        section
+            img(alt="Vue logo" style="width: 100%;" src="@/assets/logo.png")
+
+    footer
+        button(@click="state.count++") {{ state.count }}
+        button(@click="close") close
+
+</template>
+
+<script setup>
+import { defineProps, reactive, getCurrentInstance } from 'vue'
+
+const instance = getCurrentInstance()
+
+const props = defineProps({
+    msg: String,
+    card: Object
+})
+
+const state = reactive({
+    count: 0,
+    loaded: false,
+    profile: null
+})
+
+const close = e => {
+    instance.emit('remove', props.card)
+}
+
+</script>
+
+<style lang="postcss">
+
+$pad: 0.5vw
+
+.card
+    background-color: rebeccapurple
+    opacity: 0.8
+    width: calc($pad * 20)
+    height: calc($pad * 40)
+    border-radius: $pad
+    margin-bottom: -5vh
+    display: flex
+    border: 1px solid black
+    flex-direction: column
+    header, main, footer
+        text-align: left
+        padding: 0 $pad
+    header
+        padding-top: $pad
+    footer
+        padding-bottom: $pad
+
+</style>

src/sss/index.js

@@ -1,9 +1,9 @@
-import './partials/_reset.sss'
-import './partials/_helpers.sss'
-import './partials/_typography.sss'
+import '@/sss/partials/_helpers.sss'
+import '@/sss/partials/_typography.sss'
+import '@/sss/partials/_reset.sss'
 
-import layoutVars from './variables.sss'
-import themeVars from './theme.sss'
+import layoutVars from '@/sss/variables.sss'
+import themeVars from '@/sss/theme.sss'
 
 const splitVars = varsFromSSS => {
     return varsFromSSS.split('\n').map(line => line.split(':')).reduce((vars, pair) => {

src/sss/partials/_reset.sss

@@ -1,5 +1,3 @@
-@import '../variables.sss'
-@import '../theme.sss'
 
 *
     margin: 0
@@ -18,13 +16,12 @@
 html
     cursor: default
     font-family: system-ui
-    line-height: $ms-0
+    line-height: 1vh
     tab-size: 4
 
 body
     margin: 0
-    font-size: $ms-1
-    font-family: $sans
+    font-size: 1em
 
 nav
     ol, ul

src/sss/partials/_typography.sss

@@ -1,5 +1,5 @@
-@import '../variables.sss'
-@import '../theme.sss'
+import '../variables.sss'
+import '../theme.sss'
 
 h1
     font-size: $ms-5