2022-07-30 15:08:20 +00:00
|
|
|
<template>
|
|
|
|
|
<header class="skeleton screen-header expanded">
|
2022-12-02 16:17:37 +00:00
|
|
|
<aside class="thumbnail-wrapper pulse" />
|
2022-07-30 15:08:20 +00:00
|
|
|
|
|
|
|
|
<main>
|
2022-12-02 16:17:37 +00:00
|
|
|
<h1 class="pulse" />
|
|
|
|
|
<p class="meta pulse" />
|
|
|
|
|
<p class="controls pulse" />
|
2022-07-30 15:08:20 +00:00
|
|
|
</main>
|
|
|
|
|
</header>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.skeleton {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
position: relative;
|
|
|
|
|
align-content: stretch;
|
|
|
|
|
padding: 1.8rem;
|
|
|
|
|
|
|
|
|
|
.thumbnail-wrapper {
|
|
|
|
|
margin-right: 1.5rem;
|
|
|
|
|
width: 192px;
|
|
|
|
|
aspect-ratio: 1/1;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: block !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
flex: 1;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
height: 4rem;
|
|
|
|
|
width: 80%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
height: 1.2rem;
|
|
|
|
|
width: 40%;
|
|
|
|
|
|
|
|
|
|
&.controls {
|
|
|
|
|
height: 2.5rem;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
width: 25%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
