From 6347b8d9ab40c5807226eaece1945266292d0893 Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Sun, 14 Mar 2021 22:45:22 +0100
Subject: Add animation to error block

---
 src/components/error_block/error_block.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

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

diff --git a/src/components/error_block/error_block.svelte b/src/components/error_block/error_block.svelte
index e46afa1..b85a2ea 100644
--- a/src/components/error_block/error_block.svelte
+++ b/src/components/error_block/error_block.svelte
@@ -1,9 +1,11 @@
 <script>
   import { _ } from 'svelte-i18n';
   export let message;
+
+  import { blink } from '$/animations/blink';
 </script>
 
-<div>
+<div transition:blink>
   <h2>{$_('error.generic.title')}</h2>
   <p>{message || $_('error.generic.message')}</p>
 </div>
@@ -15,8 +17,8 @@
     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;
-    padding: 100px 5px;
     text-align: center;
+    overflow: hidden;
   }
 
   h2, p {
@@ -26,6 +28,11 @@
 
   h2 {
     text-transform: uppercase;
+    margin: 100px 5px 10px;
+  }
+
+  p {
+    margin: 10px 5px 100px;
   }
 </style>
 
-- 
cgit