diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/layouts/Layout.astro | 83 | ||||
| -rw-r--r-- | src/pages/index.astro | 72 | ||||
| -rw-r--r-- | src/styles/global.css | 0 |
3 files changed, 141 insertions, 14 deletions
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..bd6a6b0 --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,83 @@ +--- +interface Props { + title: string; + description: string; +} + +const { title = "Alure Regions", description = "The official website of the Government of the Alure Regions" } = Astro.props; + +import { Font, Image } from "astro:assets"; +--- +<!DOCTYPE HTML> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <link rel="icon" href="/favicon.ico" /> + <meta name="viewport" content="width=device-width" /> + + <!-- Default Metadata --> + <meta name="title" content={title} /> + <meta name="description" content={description} /> + + <!-- Open Graph Metadata --> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="og:image" content="https://alee14.me/profile.png" /> + + <title>{title}</title> + + <meta name="generator" content={Astro.generator} /> + </head> + <body> + <div class="link"> + <a href="https://bnbmc.net" class="transition duration-150 ease-out hover:ease-in md:hover:text-red-500">bnbmc.net ↗</a> + </div> + <nav> + <Image src="/alure_flag.svg" alt="The Alure Regions Flag" width="80" height="80" /> + <span class="nav-label">Government<br/>of the Alure Regions</span> + </nav> + <div class="bnbmc-warning">The Alure Regions is a fictional country made for the bits & Bytes Minecraft Server</div> + <slot/> + </body> +</html> +<style is:global> +@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap'); +body { + padding: 0; + margin: 0; + font-family: "Exo", system-ui, sans-serif; +} + +.bnbmc-warning { + padding: 15px; + background: lime; +} + +nav { + display: flex; + flex-direction: row; + background-color: grey; + padding: 1em; + gap: 20px; +} + +.nav-label { + font-weight: 500; + font-size: 1.5rem; + align-self: center; +} + +.link { + background: #000000; + padding-inline: 5px; + padding-block: 0.5px; + font-weight: 500; + text-align: right; +} + +.link-text { + color: white; + transition: 150ms ease-out; +} +</style> diff --git a/src/pages/index.astro b/src/pages/index.astro index 95524cb..4d7fef4 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,17 +1,61 @@ --- - +import Layout from '../layouts/Layout.astro' --- +<Layout title="Alure Regions" description="The official website of the Government of the Alure Regions"> + <div class="banner"> + <div class="banner-text"> + <h1>The Alure Regions</h1> + <p>The official website of the Government of the Alure Regions</p> + </div> + </div> + <div class="services"> + <div class="services-panel"> + <span class="services-text"><a href="#">Travel Advisory</a></span> + </div> + <div class="services-panel"> + <span class="services-text"><a href="#">Visas</a></span> + </div> + <div class="services-panel"> + <span class="services-text"><a href="#">Enterprises</a></span> + </div> + <div class="services-panel"> + <span class="services-text"><a href="#">Immigration</a></span> + </div> + </div> + <div class="news"> + <h1>News</h1> + </div> +</Layout> +<style> +.banner { + background-image: url('/jumbotron.webp'); + background-position: center; + background-repeat: no-repeat; +} +.services { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.services-panel { + background-color: mediumpurple; + padding: 2em; +} + +.services-text { + font-size: 1.5em; + color: white; +} + +h1 { + margin: 0; +} + +h2 { + margin: 0; +} -<html lang="en"> - <head> - <meta charset="utf-8" /> - <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> - <link rel="icon" href="/favicon.ico" /> - <meta name="viewport" content="width=device-width" /> - <meta name="generator" content={Astro.generator} /> - <title>Alure Regions</title> - </head> - <body> - <h1>Alure Regions</h1> - </body> -</html> +p { + margin: 0; +} +</style> diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/styles/global.css |