feat: about, contributeページをlayoutをととのえる

eniehack · Nov 24, 2024 · fe9db6a · fe9db6a
1 parent d0ec676
commit fe9db6a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 29 deletions.
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -3,32 +3,32 @@
 	import ogpImage from '$lib/assets/ogp.jpg';
 </script>
 
-<article>
-	<h1>about</h1>
-	<section>
-		<h1>地図、自販機データの出典</h1>
-		<p>
-			地図データ、自動販売機データ共に<a href="https://openstreetmap.org">OpenStreetMap</a
+<article class="prose">
+	<h1 class="p-5 text-2xl font-bold">about</h1>
+	<section class="p-4">
+		<h1 class="text-xl font-semibold">地図、自販機データの出典</h1>
+		<p class="p-3">
+			地図データ、自動販売機データ共に<a class="text-sky-500 hover:underline" href="https://openstreetmap.org">OpenStreetMap</a
 			>を利用しています。 OSMの提供するデータはODbLの下にライセンスされます。 詳細は<a
-				href="https://www.openstreetmap.org/copyright">こちら</a
+				class="text-sky-500 hover:underline" href="https://www.openstreetmap.org/copyright">こちら</a
 			>をご覧ください
 		</p>
 	</section>
-	<section>
-		<h1>プライバシーポリシー</h1>
-		<p>
+	<section class="p-4">
+		<h1 class="text-xl font-semibold">プライバシーポリシー</h1>
+		<p class="p-3">
 			このサービスではあなたの位置情報を取り扱います。
 			しかし、位置情報はあなたのブラウザのみに共有され、その他第三者に共有されることはありません。
 		</p>
-		<p>
+		<p class="p-3">
 			また、このサイトの使いやすさ向上のためにGoogle Analyticsの導入しています。 Google
 			Analyticsを用いて、ユーザの属性や行動を収集することで、よりよいインタフェース、機能の開発に利用します。
 			Google Analyticsではそれぞれのアクセスを匿名化した上で収集されます。 Google
 			Analyticsの問題があると感じる場合は、Adblockerの導入やブラウザの設定によりcookieを無効化することで回避できます。
 			Google Analyticsに関しての詳細は<a
-				href="https://marketingplatform.google.com/about/analytics/terms/jp/"
+				class="text-sky-500 hover:underline" href="https://marketingplatform.google.com/about/analytics/terms/jp/"
 				>Google アナリティクス利用規約</a
-			>や<a href="https://policies.google.com/technologies/partner-sites">Google ポリシーと規約</a
+			>や<a class="text-sky-500 hover:underline" href="https://policies.google.com/technologies/partner-sites">Google ポリシーと規約</a
 			>などをご確認ください。
 		</p>
 	</section>

diff --git a/src/routes/contribute/+page.svelte b/src/routes/contribute/+page.svelte
@@ -3,12 +3,14 @@
 	import ogpImage from '$lib/assets/ogp.jpg';
 </script>
 
-<article>
-	<h1>このサイトへ貢献する</h1>
-	<section>
-		<h2>自動販売機の報告</h2>
-		<p>
-			このサイトでは、自動販売機のデータ、地図データを<a href="https://openstreetmap.org/"
+<article class="prose">
+	<h1 class="p-5 text-2xl font-bold">
+		このサイトへ貢献する
+	</h1>
+	<section class="p-4">
+		<h2 class="text-xl font-semibold">自動販売機の報告</h2>
+		<p class="p-3">
+			このサイトでは、自動販売機のデータ、地図データを<a class="text-sky-500 hover:underline" href="https://openstreetmap.org/"
 				>OpenStreetMap</a
 			>から取得しています。
 			OpenStreetMapにユーザ登録をして、自動販売機のデータを追加することもできます。
@@ -18,20 +20,20 @@
             または、Twitterハッシュタグ <a href="https://twitter.com/hashtag/itf_vendingmachine_map">#itf_vendingmachinemap</a> 、<a href="https://twitter.com/hashtag/%E7%AD%91%E6%B3%A2%E5%A4%A7%E5%AD%A6%E8%87%AA%E8%B2%A9%E6%A9%9FMap">#筑波大学自販機Map</a> を付けて投稿してください。その際は、「7A棟1F内」、「1A棟の1H棟・文サ館方面階段近く」などおおまかな場所を含め投稿してください。
         </p>-->
 	</section>
-	<section>
-		<h2>開発に参加する</h2>
-		<p>
-			このサイトは<a href="https://github.com/eniehack/itf-vendingmachine">GitHub</a
+	<section class="p-4">
+		<h2 class="text-2xl font-semibold">開発に参加する</h2>
+		<p class="p-3">
+			このサイトは<a class="text-sky-500 hover:underline" href="https://github.com/eniehack/itf-vendingmachine">GitHub</a
 			>にて、オープンソースソフトウェアとして公開されています。 Pull Request歓迎です。
 		</p>
 	</section>
-	<section>
-		<h2>バグ等の報告、機能の提案</h2>
-		<p>
-			<a href="https://github.com/eniehack/itf-vendingmachine/issues">GitHubのissue</a
+	<section class="p-4">
+		<h2 class="text-2xl font-semibold">バグ等の報告、機能の提案</h2>
+		<p class="p-3">
+			<a class="text-sky-500 hover:underline" href="https://github.com/eniehack/itf-vendingmachine/issues">GitHubのissue</a
 			>から、または、Twitterハッシュタグ
-			<a href="https://twitter.com/hashtag/itf_vendingmachine_map">#itf_vendingmachinemap</a>
-			、<a
+			<a class="text-sky-500 hover:underline" href="https://twitter.com/hashtag/itf_vendingmachine_map">#itf_vendingmachinemap</a>
+			、<a class="text-sky-500 hover:underline"
 				href="https://twitter.com/hashtag/%E7%AD%91%E6%B3%A2%E5%A4%A7%E5%AD%A6%E8%87%AA%E8%B2%A9%E6%A9%9FMap"
 				>#筑波大学自販機Map</a
 			> を付けて投稿してください。