From 0848df1bf38092d61603b05868d1a620727d95a4 Mon Sep 17 00:00:00 2001
From: moris <moris@noreply.moris.day>
Date: Mon, 10 Mar 2025 10:10:58 +0900
Subject: [PATCH] =?UTF-8?q?post=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AEcss?=
 =?UTF-8?q?=E6=9C=80=E9=81=A9=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(DefaultStyle)/post/[slug]/+page.svelte   | 109 +++++++++---------
 1 file changed, 52 insertions(+), 57 deletions(-)

diff --git a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte b/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
index 9ef5610..0dfc670 100644
--- a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
+++ b/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
@@ -104,9 +104,9 @@
 		<Metadata meta={data.metadata}/>
 
 		{#if thumbnail}
-			<img class="thumbnail" alt="thumbnail" src="{thumbnail}" style='view-transition-name: {data.id}'/>
+			<img class="thumbnail image" alt="thumbnail" src="{thumbnail}"/>
 		{:else if data.metadata.emoji}
-			<div class='thumbnail emoji'><img class="emoji" alt="thumbnail" src="{data.metadata.emoji}" style='view-transition-name: {data.id}'/></div>
+			<img class="thumbnail emoji" alt="thumbnail" src="{data.metadata.emoji}"/>
 		{/if}
 
 		<div class='markdown'>
@@ -115,10 +115,10 @@
 
 		<div class="data">
 			{#if PUBLIC_POST_REPO}
-				<div><a target="_blank" href="{PUBLIC_POST_REPO}/commits/branch/main/Posts/{data.id}.md">History</a></div>
+				<a class="dataItem" target="_blank" href="{PUBLIC_POST_REPO}/commits/branch/main/Posts/{data.id}.md">History</a>
 				<div class="spacer"></div>
 			{/if}
-			<div><a target="_blank" href="raw.md">Raw file</a></div>
+			<a class="dataItem" target="_blank" href="raw.md">Raw file</a>
 		</div>
 	</article>
 
@@ -155,66 +155,61 @@
 		margin-inline: auto;
 		flex-grow: 1;
 		padding: 0 20px;
-		border-radius: 8px;
 		@media(width<640px){
 			padding: 0;
 		}
+	}
 
-		& .title {
-			font-size: 2em;
-			font-weight: 600;
-			margin: 8px;
-			padding: 8px;
-			border-bottom: 1px solid;
-			@media(width<480px) {
-				font-size: 1.5em;
-			}
-		}
-		& .thumbnail {
-			display: block;
-			margin-inline: auto;
-			max-height: 50vh;
-		}
-		& img.thumbnail {
-			max-width: 100%;
-			object-fit: contain;
-		}
-		& .emoji.thumbnail {
-			width: 30%;
-			max-width: 30vh;
-			aspect-ratio: 1;
-			@media(width<480px) {
-				width: 50%;
-			}
-			& img {
-				margin: 15%;
-			}
-		}
-		& .markdown {
-			margin: 1em;
-			@media (width<480px) {margin: 8px;}
-		}
-		& .data {
-			display: flex;
-			padding: 8px;
-			margin: 12px;
-			border-top: solid 1px;
-			font-weight: 200;
-			font-size: 1.2em;
-			& .spacer {
-				width: 1px;
-				background-color: var(--font-color);
-				box-sizing: border-box;
-				margin: 2px 6px;
-			}
-			& a {
-				margin: 4px;
-				color: var(--font-color);
-				text-decoration-thickness: 1px;
-			}
+	.title {
+		font-size: 2em;
+		font-weight: 600;
+		margin: 8px;
+		padding: 8px;
+		border-bottom: 1px solid;
+		@media(width<480px) {
+			font-size: 1.5em;
 		}
 	}
 
+	.thumbnail {
+		display: block;
+		margin-inline: auto;
+		max-height: 50vh;
+	}
+	.image {
+		max-width: 100%;
+		object-fit: contain;
+	}
+	.emoji {
+		width: 30%;
+		max-width: 25vh;
+		margin-block: 5vh;
+	}
+
+	.markdown {
+		margin: 1em;
+		@media (width<480px) {margin: 8px;}
+	}
+
+	.data {
+		display: flex;
+		padding: 8px;
+		margin: 12px;
+		border-top: solid 1px;
+		font-weight: 200;
+		font-size: 1.2em;
+	}
+	.dataItem {
+		color: currentColor;
+		text-decoration-thickness: 1px;
+	}
+	.spacer {
+		width: 1px;
+		margin: 2px .5em;
+		background-color: currentColor;
+	}
+
+
 	aside {
 		@media (width<1000px) {
 			display: none;