public/img/sprites/door.png
public/img/sprites/door.png
This is a binary file and will not be displayed.
public/img/sprites/doorbg.png
public/img/sprites/doorbg.png
This is a binary file and will not be displayed.
+11
src/components/Base.astro
+11
src/components/Base.astro
···
18
<title>{title}</title>
19
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
20
<meta charset="utf-8" />
21
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
22
<meta name="generator" content={Astro.generator} />
23
{
24
graph && (
···
32
</Fragment>
33
)
34
}
35
+
<style is:global>
36
+
* {
37
+
padding: 0;
38
+
margin: 0;
39
+
}
40
+
41
+
img {
42
+
max-width: 100%;
43
+
}
44
+
</style>
45
</head>
46
<body>
47
<slot />
+14
src/pages/home.astro
+14
src/pages/home.astro
···
···
1
+
---
2
+
import Base from "../components/Base.astro";
3
+
import "../styles/main.css";
4
+
---
5
+
6
+
<Base
7
+
title="HOME"
8
+
graph={{
9
+
description: "WARNING: Bug inside.",
10
+
url: "https://entomoviscera.online/home",
11
+
}}
12
+
>
13
+
<p>Under construction. Come back later.</p>
14
+
</Base>
+27
-2
src/pages/index.astro
+27
-2
src/pages/index.astro
···
1
---
2
import Base from "../components/Base.astro";
3
+
import "../styles/main.css";
4
+
import "../styles/splashscreen.css";
5
---
6
7
<Base
8
+
title="ENTRANCE"
9
graph={{
10
description: "WARNING: Bug inside.",
11
url: "https://entomoviscera.online/",
12
}}
13
+
>
14
+
<a href="/home" id="welcome">
15
+
<img src="/img/sprites/door.png" id="door" alt="" />
16
+
<img src="/img/sprites/doorbg.png" id="doorbg" alt="entrance" />
17
+
</a>
18
+
</Base>
19
+
20
+
<style>
21
+
#welcome {
22
+
position: relative;
23
+
margin: 20px;
24
+
}
25
+
26
+
#door {
27
+
position: absolute;
28
+
transform: 0;
29
+
transform-origin: 10% center;
30
+
transition: 600ms;
31
+
}
32
+
33
+
#welcome:hover #door {
34
+
transform: rotateY(60deg) skewY(16deg);
35
+
}
36
+
</style>
+18
src/styles/main.css
+18
src/styles/main.css
···
···
1
+
body {
2
+
font-family: "Courier New", Courier, monospace;
3
+
color: var(--white);
4
+
background-color: var(--black);
5
+
}
6
+
7
+
:root {
8
+
--black: #000;
9
+
--grey: #4e505c;
10
+
--orange: #fc9156;
11
+
--yellow: #ffe75a;
12
+
--white: #eceee1;
13
+
}
14
+
15
+
ul {
16
+
list-style: "::";
17
+
padding-left: 2ch;
18
+
}