モバイル版のダークモード

など

src/client/app/mobile/views/pages/note.vue

@@ -2,11 +2,13 @@
 <mk-ui>
 	<span slot="header">%fa:R sticky-note%%i18n:@title%</span>
 	<main v-if="!fetching">
-		<a v-if="note.next" :href="note.next">%fa:angle-up%%i18n:@next%</a>
 		<div>
 			<mk-note-detail :note="note"/>
 		</div>
-		<a v-if="note.prev" :href="note.prev">%fa:angle-down%%i18n:@prev%</a>
+		<footer>
+			<a v-if="note.prev" :href="note.prev">%fa:angle-left% %i18n:@prev%</a>
+			<a v-if="note.next" :href="note.next">%i18n:@next% %fa:angle-right%</a>
+		</footer>
 	</main>
 </mk-ui>
 </template>
@@ -52,33 +54,24 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 main
 	text-align center
+	padding 8px
+
+	@media (min-width 500px)
+		padding 16px
+
+	@media (min-width 600px)
+		padding 32px
 
 	> div
-		margin 8px auto
+		margin 0 auto
 		padding 0
-		max-width 500px
-		width calc(100% - 16px)
+		max-width 600px
 
-		@media (min-width 500px)
-			margin 16px auto
-			width calc(100% - 32px)
+	> footer
+		margin-top 16px
 
-	> a
-		display inline-block
-
-		&:first-child
-			margin-top 8px
-
-			@media (min-width 500px)
-				margin-top 16px
-
-		&:last-child
-			margin-bottom 8px
-
-			@media (min-width 500px)
-				margin-bottom 16px
-
-		> [data-fa]
-			margin-right 4px
+		> a
+			display inline-block
+			margin 0 16px
 
 </style>

src/client/app/mobile/views/pages/user.vue

@@ -135,7 +135,7 @@ root(isDark)
 
 		> .banner
 			padding-bottom 33.3%
-			background-color isDark ? #0e0e0e : #cacaca
+			background-color isDark ? #5f7273 : #cacaca
 			background-size cover
 			background-position center
 
@@ -162,6 +162,7 @@ root(isDark)
 						left -2px
 						bottom -2px
 						width 100%
+						background isDark ? #191b22 : #ececed
 						border 3px solid isDark ? #191b22 : #ececed
 						border-radius 6px
 
@@ -195,8 +196,8 @@ root(isDark)
 					margin-left 8px
 					padding 2px 4px
 					font-size 12px
-					color #657786
-					background #f8f8f8
+					color isDark ? #657786 : #fff
+					background isDark ? #f8f8f8 : #a7bec7
 					border-radius 4px
 
 			> .description

src/client/app/mobile/views/pages/user/home.vue

@@ -61,6 +61,9 @@ export default Vue.extend({
 	> .mk-note-detail
 		margin 0 0 8px 0
 
+		@media (min-width 500px)
+			margin 0 0 16px 0
+
 	> section
 		background #eee
 		border-radius 8px