:art:

7 files changed, 88 insertions, 65 deletions

diff --git a/src/client/components/global/header.vue b/src/client/components/global/header.vue
index 176a1b47ea..a283e1656c 100644
--- a/src/client/components/global/header.vue
+++ b/src/client/components/global/header.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick" ref="el">
+<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
 	<template v-if="info">
 		<div class="titleContainer" @click="showTabsPopup">
 			<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue';
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject } from 'vue';
 import * as tinycolor from 'tinycolor2';
 import { popupMenu } from '@client/os';
 import { url } from '@client/config';
@@ -182,6 +182,7 @@ export default defineComponent({
 			showTabsPopup,
 			preventDrag,
 			onClick,
+			thin_: props.thin || inject('shouldHeaderThin', false)
 		};
 	},
 });
diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue
index c20e2b3087..cea92b9cb3 100644
--- a/src/client/components/modal-page-window.vue
+++ b/src/client/components/modal-page-window.vue
@@ -44,7 +44,8 @@ export default defineComponent({
 		return {
 			navHook: (path) => {
 				this.navigate(path);
-			}
+			},
+			shouldHeaderThin: true,
 		};
 	},
 
diff --git a/src/client/components/page-window.vue b/src/client/components/page-window.vue
index ec4c03c3d8..620d288b14 100644
--- a/src/client/components/page-window.vue
+++ b/src/client/components/page-window.vue
@@ -46,7 +46,8 @@ export default defineComponent({
 		return {
 			navHook: (path) => {
 				this.navigate(path);
-			}
+			},
+			shouldHeaderThin: true,
 		};
 	},
 
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 4ec09e76db..3ff1dfe0df 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="gafaadew" :class="{ modal, _popup: modal }"
-	v-size="{ max: [500] }"
+	v-size="{ max: [310, 500] }"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
@@ -914,5 +914,17 @@ export default defineComponent({
 			}
 		}
 	}
+
+	&.max-width_310px {
+		> .form {
+			> footer {
+				> button {
+					font-size: 14px;
+					width: 44px;
+				height: 44px;
+				}
+			}
+		}
+	}
 }
 </style>
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 47a458df9c..b8d7507363 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -1,61 +1,65 @@
 <template>
-<div class="_root">
-	<transition name="fade" mode="out-in">
-		<div v-if="page" class="xcukqgmh" :key="page.id" v-size="{ max: [450] }">
-			<div class="_block main">
-				<!--
-				<div class="header">
-					<h1>{{ page.title }}</h1>
-				</div>
-				-->
-				<div class="banner">
-					<img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
-				</div>
-				<div class="content">
-					<XPage :page="page"/>
-				</div>
-				<div class="actions">
-					<div class="like">
-						<MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><i class="fas fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
-						<MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><i class="far fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+<div>
+	<MkHeader :info="header"/>
+
+	<div class="_root">
+		<transition name="fade" mode="out-in">
+			<div v-if="page" class="xcukqgmh" :key="page.id" v-size="{ max: [450] }">
+				<div class="_block main">
+					<!--
+					<div class="header">
+						<h1>{{ page.title }}</h1>
 					</div>
-					<div class="other">
-						<button class="_button" @click="shareWithNote" v-tooltip="$ts.shareWithNote" v-click-anime><i class="fas fa-retweet fa-fw"></i></button>
-						<button class="_button" @click="share" v-tooltip="$ts.share" v-click-anime><i class="fas fa-share-alt fa-fw"></i></button>
+					-->
+					<div class="banner">
+						<img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
 					</div>
-				</div>
-				<div class="user">
-					<MkAvatar :user="page.user" class="avatar"/>
-					<div class="name">
-						<MkUserName :user="page.user" style="display: block;"/>
-						<MkAcct :user="page.user"/>
+					<div class="content">
+						<XPage :page="page"/>
+					</div>
+					<div class="actions">
+						<div class="like">
+							<MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><i class="fas fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+							<MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><i class="far fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+						</div>
+						<div class="other">
+							<button class="_button" @click="shareWithNote" v-tooltip="$ts.shareWithNote" v-click-anime><i class="fas fa-retweet fa-fw"></i></button>
+							<button class="_button" @click="share" v-tooltip="$ts.share" v-click-anime><i class="fas fa-share-alt fa-fw"></i></button>
+						</div>
+					</div>
+					<div class="user">
+						<MkAvatar :user="page.user" class="avatar"/>
+						<div class="name">
+							<MkUserName :user="page.user" style="display: block;"/>
+							<MkAcct :user="page.user"/>
+						</div>
+						<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
+					</div>
+					<div class="links">
+						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
+						<template v-if="$i && $i.id === page.userId">
+							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
+							<button v-if="$i.pinnedPageId === page.id" @click="pin(false)" class="link _textButton">{{ $ts.unpin }}</button>
+							<button v-else @click="pin(true)" class="link _textButton">{{ $ts.pin }}</button>
+						</template>
 					</div>
-					<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
 				</div>
-				<div class="links">
-					<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
-					<template v-if="$i && $i.id === page.userId">
-						<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
-						<button v-if="$i.pinnedPageId === page.id" @click="pin(false)" class="link _textButton">{{ $ts.unpin }}</button>
-						<button v-else @click="pin(true)" class="link _textButton">{{ $ts.pin }}</button>
-					</template>
+				<div class="footer">
+					<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+					<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 				</div>
+				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
+				<MkContainer :max-height="300" :foldable="true" class="other">
+					<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
+					<MkPagination :pagination="otherPostsPagination" #default="{items}">
+						<MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_gap"/>
+					</MkPagination>
+				</MkContainer>
 			</div>
-			<div class="footer">
-				<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-				<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
-			</div>
-			<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-			<MkContainer :max-height="300" :foldable="true" class="other">
-				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
-				<MkPagination :pagination="otherPostsPagination" #default="{items}">
-					<MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_gap"/>
-				</MkPagination>
-			</MkContainer>
-		</div>
-		<MkError v-else-if="error" @retry="fetch()"/>
-		<MkLoading v-else/>
-	</transition>
+			<MkError v-else-if="error" @retry="fetch()"/>
+			<MkLoading v-else/>
+		</transition>
+	</div>
 </div>
 </template>
 
@@ -97,6 +101,10 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: computed(() => this.page ? {
 				title: computed(() => this.page.title || this.page.name),
 				avatar: this.page.user,
+			} : null),
+			header: computed(() => this.page ? {
+				title: computed(() => this.page.title || this.page.name),
+				avatar: this.page.user,
 				path: `/@${this.page.user.username}/pages/${this.page.name}`,
 				share: {
 					title: this.page.title || this.page.name,
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index abe9ccd7e0..dfabcbf84b 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -215,6 +215,10 @@ export default defineComponent({
 		}
 	}
 
+	> .post-form {
+		border-radius: var(--radius);
+	}
+
 	> .tl {
 		background: var(--bg);
 		border-radius: var(--radius);
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index 842a6ff59f..59729e09f7 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -37,6 +37,10 @@ import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownCo
 import { deckStore } from './deck-store';
 
 export default defineComponent({
+	provide: {
+		shouldHeaderThin: true
+	},
+
 	props: {
 		column: {
 			type: Object,
@@ -267,6 +271,7 @@ export default defineComponent({
 	height: 100%;
 	overflow: hidden;
 	contain: content;
+	box-shadow: 0 0 8px 0 var(--shadow);
 
 	&.draghover {
 		box-shadow: 0 0 0 2px var(--focus);
@@ -320,15 +325,6 @@ export default defineComponent({
 
 	&.paged {
 		background: var(--bg) !important;
-		
-		> header {
-			background: transparent;
-			box-shadow: none;
-
-			> button {
-				color: var(--fg);
-			}
-		}
 	}
 
 	> header {