init: frontend

src/components/general-xd.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const header = 'bio'
+const border_color = ref('#656565')
+const background_color = ref('#353535')
+const primary_color = ref('#FFFFFF')
+</script>
+
+<style scoped>
+.wrapper {
+  width: 300px;
+  height: 75px;
+  border: 3px solid v-bind(border_color);
+  padding: 10px;
+  margin: 10px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+
+h1 {
+  color: v-bind(border_color);
+  margin-top: -22px;
+  margin-left: -5px;
+  background-color: v-bind(background_color);
+  width: fit-content;
+  padding: 0 5px;
+  font-size: medium;
+  min-height: 1.4em;
+}
+
+p {
+  color: v-bind(primary_color);
+  margin: 0;
+  margin-top: -10px;
+}
+</style>
+
+<template>
+  <div class="wrapper">
+    <h1>{{ header }}</h1>
+    <div class="content">
+      <p>snusxd</p>
+      <p>:steamhappy:</p>
+    </div>
+  </div>
+</template>