[WIP] Update welcome page

src/client/app/desktop/views/pages/welcome.vue

@@ -9,6 +9,7 @@
 
 	<div class="body">
 		<div class="main block">
+			<div>
 				<h1 v-if="name != 'Misskey'">{{ name }}</h1>
 				<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
 
@@ -28,22 +29,45 @@
 					<span class="signin" @click="signin">%i18n:@signin%</span>
 				</p>
 			</div>
+		</div>
 
-		<div class="broadcasts block">
+		<div class="announcements block">
+			<header>%fa:broadcast-tower% %i18n:@announcements%</header>
+			<div>
 				<div v-for="broadcast in broadcasts">
 					<h1 v-html="broadcast.title"></h1>
 					<div v-html="broadcast.text"></div>
 				</div>
 			</div>
+		</div>
+
+		<div class="photos block">
+			<header>%fa:images% %i18n:@photos%</header>
+			<div>
+				<div v-for="photo in photos">
+				</div>
+			</div>
+		</div>
 
 		<div class="nav block">
+			<div>
 				<mk-nav class="nav"/>
 			</div>
+		</div>
 
 		<div class="side">
-			<mk-trends class="trends block"/>
+			<div class="trends block">
+				<div>
+					<mk-trends/>
+				</div>
+			</div>
 
-			<mk-welcome-timeline class="tl block" :max="20"/>
+			<div class="tl block">
+				<header>%fa:comment-alt R% %i18n:@timeline%</header>
+				<div>
+					<mk-welcome-timeline class="tl" :max="20"/>
+				</div>
+			</div>
 		</div>
 	</div>
 
@@ -71,7 +95,8 @@ export default Vue.extend({
 			host,
 			name: 'Misskey',
 			description: '',
-			broadcasts: []
+			broadcasts: [],
+			photos: []
 		};
 	},
 	created() {
@@ -166,8 +191,8 @@ root(isDark)
 
 	> .body
 		display grid
-		grid-template-rows 0.5fr 0.5fr 64px
+		grid-template-rows 1fr 1fr 64px
-		grid-template-columns 1fr 350px
+		grid-template-columns 1fr 1fr 350px
 		gap 16px
 		width 100%
 		max-width 1200px
@@ -178,17 +203,30 @@ root(isDark)
 
 		.block
 			color isDark ? #fff : #444
-			background isDark ? #313543 : #fff
+			background isDark ? #282C37 : #fff
 			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 			//border-radius 8px
 			overflow auto
 
+			> header
+				padding 0 16px
+				line-height 48px
+				background isDark ? #313543 : #fff
+
+				& + div
+					max-height calc(100% - 48px)
+
+			> div
+				overflow auto
+
 		> .main
 			grid-row 1
-			grid-column 1
+			grid-column 1 / 3
-			padding 32px
 			border-top solid 5px $theme-color
 
+			> div
+				padding 32px
+
 				> h1
 					margin 0
 
@@ -222,20 +260,11 @@ root(isDark)
 						&:hover
 							color $theme-color
 
-			> .hashtags
+		> .announcements
-				margin 16px auto
-				width $width
-				font-size 14px
-				background rgba(#000, 0.3)
-				border-radius 8px
-
-				> *
-					display inline-block
-					margin 14px
-
-		> .broadcasts
 			grid-row 2
 			grid-column 1
+
+			> div
 				padding 32px
 
 				> div
@@ -245,20 +274,24 @@ root(isDark)
 
 					> h1
 						margin 0
-					font-size 1.5em
+						font-size 1.25em
+
+		> .photos
+			grid-row 2
+			grid-column 2
 
 		> .nav
 			display flex
 			justify-content center
 			align-items center
 			grid-row 3
-			grid-column 1
+			grid-column 1 / 3
 			font-size 14px
 
 		> .side
 			display grid
 			grid-row 1 / 4
-			grid-column 2
+			grid-column 3
 			grid-template-rows 1fr 350px
 			grid-template-columns 1fr
 			gap 16px
@@ -266,8 +299,6 @@ root(isDark)
 			> .tl
 				grid-row 1
 				grid-column 1
-				text-align left
-				max-height 100%
 				overflow auto
 
 			> .trends