Add animation to error block

[rbdr/forum] / 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 e46afa1400eab3a8cfed2029b451771b6996987b..b85a2ea196af579dc4dae373badf0c063dda5544 100644 (file)
--- 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>