animated-java.github.io/src/routes/404/+page.svelte at 073e377f79e4c8f0c72b20a3639f9379aa546199 · Animated-Java/animated-java.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<script lang="ts">
	import { page } from '$app/stores'

	const flavorQuote = $page.data.flavorQuote as string
</script>

<div class="page">
	<div class="center-container">
		<div class="header-container">
			<img src="/img/animated_java_icon.svg" alt="Animated Java icon" />
			<div>
				<h1>Uh oh :(</h1>
				<p>Looks like that page doesn't exist!</p>
				<p>
					Try <a href="/docs">searching our documentation</a> or return to the
					<a href="/">home page</a>.
				</p>
			</div>
		</div>
		<q class="quote"><span>{@html flavorQuote}</span></q>
	</div>
</div>

<style>
	/* :global(.discord-widget-container) {
		position: fixed;
		bottom: 16px;
		right: 16px;
		background-color: rgb(88, 101, 242);
		border-radius: 16px;
		padding-top: 1rem;
	}
	:global(.discord-widget-container > button) {
		position: absolute;
		top: 0.25rem;
		right: -0.5rem;
	}
	.discord-widget {
		border-radius: 16px;
	}
	.discord-widget :global(.widgetBody-38iyIo) {
		display: none;
	} */
	a {
		color: var(--tw-prose-links);
		text-decoration: none;
		font-weight: 400;
		border-bottom: 1px solid rgb(var(--kd-color-brand));
	}

	.page {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin: 0px 32px 0 16px;
		width: auto;
		overflow: visible;
	}

	.center-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: visible;
	}

	.header-container {
		display: flex;
		align-items: center;
		margin-top: 2rem;
	}
	.header-container div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 2rem;
	}
	.header-container img {
		width: 192px;
		border-radius: 16px;
		box-shadow: 4px 4px 8px -4px black;
	}
	.header-container h1 {
		margin: 0px;
		font-size: 3rem;
	}

	q {
		margin: 1rem 0;
		color: var(--kd-color-subtle);
		font-size: 1.25rem;
		font-style: italic;
	}

	q span {
		margin: 0 0.25em;
	}

	@media (max-width: 768px) {
		.header-container {
			flex-direction: column;
		}
		.header-container > div {
			margin-left: unset;
		}
		.header-container img {
			width: 128px;
		}
		.header-container h1 {
			font-size: 2.5rem;
			text-align: center;
			margin-bottom: 0.75rem;
		}
	}
</style>