]> git.r.bdr.sh - rbdr/forum/blob - src/components/error_block/error_block.svelte
Update documentation
[rbdr/forum] / src / components / error_block / error_block.svelte
1 <script>
2 import { _ } from 'svelte-i18n';
3 export let message = null;
4
5 import { blink } from '$/animations/blink';
6 </script>
7
8 <div transition:blink>
9 <h2>{$_('error.generic.title')}</h2>
10 <p>{message || $_('error.generic.message')}</p>
11 </div>
12
13 <style>
14 div {
15 background: repeating-linear-gradient(-45deg, red, red 5px, black 5px, black 10px);
16 border: 5px solid red;
17 color: yellow;
18 font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体',
19 YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'MS ゴシック', 'MS Gothic', HiraKakuProN-W3,
20 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
21 margin: 0 10px 0 0;
22 text-align: center;
23 overflow: hidden;
24 }
25
26 h2,
27 p {
28 background-color: black;
29 font-size: 1em;
30 }
31
32 h2 {
33 text-transform: uppercase;
34 margin: 100px 5px 10px;
35 }
36
37 p {
38 margin: 10px 5px 100px;
39 }
40 </style>