🎨

src/client/pages/announcements.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="_section">
+<MkSpacer :content-max="800">
 	<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
-		<section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id">
+		<section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id">
 			<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
 			<div class="_content">
 				<Mfm :text="announcement.text"/>
@@ -12,7 +12,7 @@
 			</div>
 		</section>
 	</MkPagination>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -58,6 +58,10 @@ export default defineComponent({
 <style lang="scss" scoped>
 .ruryvtyk {
 	> .announcement {
+		&:not(:last-child) {
+			margin-bottom: var(--margin);
+		}
+
 		> ._content {
 			> img {
 				display: block;

src/client/pages/featured.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="_section">
+<MkSpacer :content-max="800">
-	<XNotes class="_content" ref="notes" :pagination="pagination" @before="before" @after="after"/>
+	<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">

src/client/pages/mentions.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="_section">
+<MkSpacer :content-max="800">
-	<XNotes class="_content" :pagination="pagination" @before="before()" @after="after()"/>
+	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">

src/client/pages/messages.vue

@@ -1,7 +1,7 @@
 <template>
-<div>
+<MkSpacer :content-max="800">
 	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">

src/client/style.scss

@@ -348,6 +348,7 @@ hr {
 	contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
 }
 
+// TODO: 廃止
 ._monolithic_ {
 	._section:not(:empty) {
 		box-sizing: border-box;