fix layout

src/App.vue

@@ -30,8 +30,9 @@
 				<table>
 					<thead>
 						<tr>
-							<th scope="col">yui</th>
+							<th scope="col">manga</th>
-							<th scope="col">巻</th>
+							<th scope="col">ver</th>
+							<th scope="col">day</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -40,6 +41,7 @@
 								<a :href="this.url + this.s_a"><img :src="url + 'manga/' + this.s_a + '.webp'" v-on:click="page_run(s_a)"></a>
 							</th>
 							<td>0.0</td>
+							<td>2021-07-11</td>
 						</tr>
 					</tbody>
 					<tbody>
@@ -48,6 +50,7 @@
 								<a :href="this.url + this.s_b"><img :src="url + 'manga/' + this.s_b + '.webp'" v-on:click="page_run(s_a)"></a>
 							</th>
 							<td>0.1</td>
+							<td>2021-07-11</td>
 						</tr>
 					</tbody>
 				</table>
@@ -58,17 +61,24 @@
 		<div class="bsky_comment" v-if="comment_open == false">
 			<span class="comment">
 				<p class="comment-body" v-if="comment_first">
-					<img :src="'/icon/' + comment_first.did.replace('did:plc:', '') + '.jpg'" v-if="comment_first.avatar" class="comment"/>  <span class="comment-time" v-if="comment_first.updated_at">{{ moment(comment_first.updated_at) }}</span> <span class="comment-handle" v-if="comment_first.handle"><a :href="comment_first.bsky_url">@{{ comment_first.handle }}</a></span>
+					<img :src="'/icon/' + comment_first.did.replace('did:plc:', '') + '.jpg'" v-if="comment_first.avatar" class="comment"/>  <span class="comment-time" v-if="comment_first.updated_at"><a :href="comment_first.bsky_url">{{ moment(comment_first.updated_at) }}</a></span> <span class="comment-handle" v-if="comment_first.handle"><a :href="'https://' + comment_first.bsky_url.split('/').slice(2,5).join('/')">@{{ comment_first.handle }}</a></span>
 				<span class="comment-text" v-if="comment_first.text">{{ comment_first.text }}</span>
 			</p>
 		</span>
-		<div class="comment_open"><button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button></div>
+		<div class="comment_open">
+			<p>
+				<a :href="comment_first.bsky_url" target="_blank">post</a>
+			</p>
+			<p>
+				<button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button>
+			</p>
+		</div>
 	</div>
 	<div class="bsky_comment" v-else>
 		<span v-for="i in api_json.data" class="comment">
 			<p class="comment-body" v-if="i">
 				{{ axios_check('/icon/' + i.did.replace('did:plc:', '') + '.jpg') }}
-				<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="url_check" class="comment"/><img :src="i.avatar" v-else-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.updated_at">{{ moment(i.updated_at) }}</span> <span class="comment-handle" v-if="i.handle"><a :href="i.bsky_url">@{{ i.handle }}</a></span>
+				<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="url_check" class="comment"/><img :src="i.avatar" v-else-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.updated_at"><a :href="i.bsky_url">{{ moment(i.updated_at) }}</a></span> <span class="comment-handle" v-if="i.handle"><a :href="'https://' + i.bsky_url.split('/').slice(2,5).join('/')">@{{ i.handle }}</a></span>
 			<span class="comment-text" v-if="i.text">{{ i.text }}</span>
 		</p>
 	</span>
@@ -78,22 +88,13 @@
 	<div class="page_title">
 		<div class="page_data">
 			<table>
-				<thead>
-					<tr>
-						<th scope="col"><span class="icon-ai"></span></th>
-						<th scope="col">title</th>
-							<th scope="col">body</th>
-							<th scope="col">author</th>
-						</tr>
-					</thead>
 					<tbody>
 						<tr>
-							<th scope="row">
+							<th class="row">
 								<a href="https://yui.syui.ai"><img src="https://syui.ai/ai.png" v-on:click="page_run(s_a)"></a>
 							</th>
 							<td>yui</td>
 							<td>不思議な力を持つアイのお話</td>
-							<td>syui</td>
 						</tr>
 					</tbody>
 				</table>
@@ -237,7 +238,7 @@ a span.icon-ai {
 }
 
 .hooper-progress-inner {
-	background-color: #dcd500;
+	background-color: #aba700;
 }
 
 button {
@@ -299,6 +300,12 @@ thead, td, tr, th {
 	padding:10px;
 	background: #fff;
 	border: solid 1px #fff;
+	padding: 5px 25px 5px 25px;
+}
+
+th.row {
+	background: #313131;
+	border:none;
 }
 
 footer {
@@ -320,13 +327,21 @@ span.comment-time {
 	color: #999;
 }
 
+span.comment-time a {
+	color: #999;
+}
+
+span.comment-time a:hover {
+	color: rgb(16, 131, 254);
+}
+
 span.comment-handle {
 	padding: 0 5px 0 5px;
 	position: absolute;
 }
 
 span.comment-handle a {
-	color: rgb(16, 131, 254);
+	color: #aba700;
 }
 
 img.comment {
@@ -346,15 +361,22 @@ span.comment {
 }
 
 button.comment_open {
-	padding:5px 40px 5px 40px;
+	padding:20px 40px 20px 40px;
-	background-color: #fff;
+	background-color: rgba(184,207,224,.24);
+	border: none;
+	margin:0;
 }
 button.comment_open:hover {
-	background-color: #fff700;
+	color: rgb(16, 131, 254);
 }
 
 .comment_open {
 	text-align: center;
+	width: 100%;
+}
+
+.comment_open p a {
+	color: rgb(16, 131, 254);
 }
 
 @media screen and (max-width:1000px) { 
@@ -374,4 +396,6 @@ button.comment_open:hover {
 		padding: 5px;
 	}
 }
+
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap')
 </style>