52 lines
885 B
Vue
52 lines
885 B
Vue
<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>
|