A Vue app that displays bluesky skeets in realtime as they are created.
1<script setup lang="ts">
2import AppHeader from './components/AppHeader.vue'
3import AppMain from './components/AppMain.vue'
4import AppFooter from './components/AppFooter.vue'
5</script>
6
7<template>
8 <div id="wrapper">
9 <AppHeader id="header" />
10 <AppMain id="main" />
11 <AppFooter id="footer" />
12 </div>
13</template>
14
15<style scoped>
16#wrapper {
17 display: flex;
18 flex-direction: column;
19 justify-content: space-between;
20}
21
22#header {
23 position: sticky;
24}
25
26#header,
27#footer {
28 background: var(--color-background);
29}
30
31#header {
32 top: 0;
33}
34
35#footer {
36 padding-top: 1rem;
37}
38
39#main {
40 overflow-y: scroll;
41}
42</style>