From be1ce532b26aea4e3e2258da78849bd245f7f78b Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Sun, 1 May 2022 15:01:50 +0200
Subject: Use tailwind, reference types

---
 src/lib/components/error_block/error_block.svelte | 32 +++++------------------
 1 file changed, 6 insertions(+), 26 deletions(-)

(limited to 'src/lib/components/error_block/error_block.svelte')

diff --git a/src/lib/components/error_block/error_block.svelte b/src/lib/components/error_block/error_block.svelte
index d25f507..9fad768 100644
--- a/src/lib/components/error_block/error_block.svelte
+++ b/src/lib/components/error_block/error_block.svelte
@@ -5,36 +5,16 @@
 	import { blink } from '$lib/animations/blink';
 </script>
 
-<div transition:blink>
-	<h2>{$_('error.generic.title')}</h2>
-	<p>{message || $_('error.generic.message')}</p>
+<div
+	class="font-sans overflow-hidden text-center border-4 border-solid border-red-500 text-amber-300 mx-2.5"
+	transition:blink
+>
+	<h2 class="bg-black text-base uppercase mt-24 mx-1 mb-2.5">{$_('error.generic.title')}</h2>
+	<p class="bg-black text-base mt-2.5 mx-1 mb-24">{message || $_('error.generic.message')}</p>
 </div>
 
 <style>
 	div {
 		background: repeating-linear-gradient(-45deg, red, red 5px, black 5px, black 10px);
-		border: 5px solid red;
-		color: yellow;
-		font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体',
-			YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', HiraKakuProN-W3,
-			'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
-		margin: 0 10px 0 0;
-		text-align: center;
-		overflow: hidden;
-	}
-
-	h2,
-	p {
-		background-color: black;
-		font-size: 1em;
-	}
-
-	h2 {
-		text-transform: uppercase;
-		margin: 100px 5px 10px;
-	}
-
-	p {
-		margin: 10px 5px 100px;
 	}
 </style>
-- 
cgit