<template>
    <div id="wrapper" class="rowbox container">
        <Post class="markdown" id="post"/>
    </div>
</template>

<script setup lang="ts">
import Post from '@/md/about.md';
import '@/styles/markdown.css';
import anime from 'animejs';
import { onMounted } from 'vue';

onMounted(() => {
    anime({
        targets: '#post',
        translateY: [-50, 0],
        opacity: [0, 1],
    });
});
</script>

<style scoped>
#post {
    height:auto;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-top:0;
    padding:30px;
    border-radius:10px;
    width: 80%;
    border:solid 1px var(--bd-color);
    color:var(--text-color);
}

#wrapper {
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 20px;
    width: 100%;
    align-items: center;
    overflow: auto;
}
</style>