<template>
    <div>
        <div class="top-container">
            <NoticeBoard class="notice-flex"/>
            <WelcomeCalendar class="calendar-flex"/>
        </div>
        <div class="post-container">
            <PostPage />
        </div>
    </div>
</template>

<script setup lang="js" name="MainPage">
import NoticeBoard from '@/components/NoticeBoard.vue';
import WelcomeCalendar from '@/components/WelcomeCalendar.vue';
import PostPage from '@/components/PostPage.vue';
</script>

<style scoped>
.top-container {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 1000px;
    height: 300px;
    margin: 0 auto;
}
.notice-flex, .calendar-flex {
    height: 100%;
}
.post-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
    box-sizing: border-box;
}
</style>