landing page

Changed files
+80 -2
public
img
src
public/img/sprites/door.png

This is a binary file and will not be displayed.

public/img/sprites/doorbg.png

This is a binary file and will not be displayed.

+11
src/components/Base.astro
··· 18 18 <title>{title}</title> 19 19 <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> 20 20 <meta charset="utf-8" /> 21 + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 21 22 <meta name="generator" content={Astro.generator} /> 22 23 { 23 24 graph && ( ··· 31 32 </Fragment> 32 33 ) 33 34 } 35 + <style is:global> 36 + * { 37 + padding: 0; 38 + margin: 0; 39 + } 40 + 41 + img { 42 + max-width: 100%; 43 + } 44 + </style> 34 45 </head> 35 46 <body> 36 47 <slot />
+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
··· 1 1 --- 2 2 import Base from "../components/Base.astro"; 3 + import "../styles/main.css"; 4 + import "../styles/splashscreen.css"; 3 5 --- 4 6 5 7 <Base 6 - title="HOME" 8 + title="ENTRANCE" 7 9 graph={{ 8 10 description: "WARNING: Bug inside.", 9 11 url: "https://entomoviscera.online/", 10 12 }} 11 - ></Base> 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
··· 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 + }
+10
src/styles/splashscreen.css
··· 1 + body { 2 + display: flex; 3 + flex-wrap: wrap; 4 + min-height: calc(100svh - 30px); 5 + justify-content: center; 6 + align-content: center; 7 + align-items: center; 8 + padding: 15px; 9 + gap: 15px; 10 + }