Port to sveltekit

[rbdr/forum] / src / components / error_block / error_block.svelte

<script>
	import { _ } from 'svelte-i18n';
	export let message;

	import { blink } from '$/animations/blink';
</script>

<div transition:blink>
	<h2>{$_('error.generic.title')}</h2>
	<p>{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>