diff options
| -rw-r--r-- | src/components/news.json | 4 | ||||
| -rw-r--r-- | src/components/sites.json | 5 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 24 | ||||
| -rw-r--r-- | src/pages/index.astro | 44 |
4 files changed, 59 insertions, 18 deletions
diff --git a/src/components/news.json b/src/components/news.json index c3b99af..174a298 100644 --- a/src/components/news.json +++ b/src/components/news.json @@ -3,12 +3,12 @@ "id": 1, "title": "AirCS Race 2025", "date": "2025-02-22", - "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt, quam ac tempor luctus, nisl est tempor enim, a maximus elit mauris in tellus. Aenean imperdiet fermentum urna, eget scelerisque nibh vestibulum in. Sed orci nulla, mollis non risus ac, tincidunt fermentum lorem. Vestibulum bibendum egestas tristique. Curabitur tincidunt gravida orci a malesuada. Ut sed purus massa. Donec et bibendum velit. Curabitur malesuada, eros vitae porttitor pellentesque, nulla velit congue quam, ut auctor urna massa sit amet felis. Sed condimentum nisi at nunc dapibus, ac egestas tellus pharetra. Sed ut dictum nisl. Quisque dictum, nulla vel laoreet consequat, lectus ex dapibus erat, ac tempus tortor odio eget sapien. Integer eget orci odio. Nunc a sapien ornare, porttitor massa dictum, pharetra nisl. In malesuada leo quis ullamcorper bibendum." + "content": "Planning for the AirCS Race of 2025 is now underway. To assist us with planning for the race, please let us know if you spot any stations not mapped on map.aircs.racing.\n\nFurther details will come at a later date.\n\nMay the best minecart rider win!\n" }, { "id": 2, "title": "ePassport+ now available", "date": "2025-02-22", - "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt, quam ac tempor luctus, nisl est tempor enim, a maximus elit mauris in tellus. Aenean imperdiet fermentum urna, eget scelerisque nibh vestibulum in. Sed orci nulla, mollis non risus ac, tincidunt fermentum lorem. Vestibulum bibendum egestas tristique. Curabitur tincidunt gravida orci a malesuada. Ut sed purus massa. Donec et bibendum velit. Curabitur malesuada, eros vitae porttitor pellentesque, nulla velit congue quam, ut auctor urna massa sit amet felis. Sed condimentum nisi at nunc dapibus, ac egestas tellus pharetra. Sed ut dictum nisl. Quisque dictum, nulla vel laoreet consequat, lectus ex dapibus erat, ac tempus tortor odio eget sapien. Integer eget orci odio. Nunc a sapien ornare, porttitor massa dictum, pharetra nisl. In malesuada leo quis ullamcorper bibendum." + "content": "We would like to formally announce that we are rolling out the third generation passport, the ePassport+. This passport is readable by command blocks, allowing for swift border processing at countries where it is supported.\n\nAn ePassport+ can be identified by searching for the [-o-] symbol on the front page, and by issuing the command /passport query while holding it.\n\nCountries can now onboard onto ePassport+ by contacting Victor. Existing passports will continue to work at the discretion of the border control officials at the gate." } ] diff --git a/src/components/sites.json b/src/components/sites.json index b88fc00..9705f9e 100644 --- a/src/components/sites.json +++ b/src/components/sites.json @@ -83,5 +83,10 @@ "name": "Solstice", "website": "https://solstice.aircs.racing", "type": "country" + }, + { + "name": "Kingdom of Union Jacks", + "website": "https://kuj.bnbmc.net", + "type": "country" } ] diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 6fecdb9..e81ddd8 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -7,6 +7,9 @@ <meta name="title" content="bits & Bytes Minecraft" /> <meta name="description" content="Official Minecraft server for the bits & Bytes Community" /> + <meta name=”color-scheme” content="dark light" /> + <script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"/> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="generator" content={Astro.generator} /> <title>bits & Bytes Minecraft</title> @@ -18,11 +21,26 @@ <style> @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); - html, + html { + color-scheme: dark light; + } + + :root { + --base: #272727; + --text: #FFFFFF; + } + + @media (prefers-color-scheme: light) { + :root { + --base: #d6d6d6; + --text: #353535; + } + } + body { font-family: "Jetbrains Mono", monospace; - background-color: #272727; - color: #ffffff; + background-color: var(--base); + color: var(--text); margin: 0; width: 100%; height: 100%; diff --git a/src/pages/index.astro b/src/pages/index.astro index 5d0b858..20d113b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -10,16 +10,14 @@ import news from '../components/news.json'; <h1>Welcome to bits & Bytes Minecraft!</h1> <p class="ip">IP: bnbmc.net</p> <i>Must be an active member of the bits & Bytes Discord to join.</i> - <div class="flex-container"> + <div class="grid-container"> <div class="flex-site"> {sites.map((site) => ( - <div class="site"> - <a href={site.website}>{site.name}</a> - </div> + <a href={site.website} class="site">{site.name}</a> ))} </div> <div class="flex-news"> - <h1>News</h1> + <h1>Announcements</h1> {news.map((article) => ( <h2>{article.title}</h2> <p>{article.content}</p> @@ -30,23 +28,40 @@ import news from '../components/news.json'; </Layout> <style> + + :root { + --box: #394049; + --link: #22b7f1; + --link-hover: #4dbdea; + --link-active: #3f7a91; + } + + @media (prefers-color-scheme: light) { + :root { + --box: #9bafc8; + --link: #135268; + --link-hover: #2aabda; + --link-active: #2797ca; + } + } + .ip { font-size: 1.2em; } a { font-size: 1.1em; - color: #22b7f1; + color: var(--link); text-decoration: none; } a:hover { - color: #4198bc; + color: var(--link-hover); text-decoration: none; } a:active { - color: #3f7a91; + color: var(--link-active); } .container { @@ -55,10 +70,10 @@ import news from '../components/news.json'; padding-right: 6em; } - .flex-container { + .grid-container { display: grid; grid-template-columns: 1fr 1fr; - grid-gap: 1em; + grid-gap: 2em; margin: 1em; } @@ -67,17 +82,20 @@ import news from '../components/news.json'; flex-direction: column; } .site { - background-color: #394049; + background-color: var(--box); padding: 1.5em; margin-bottom: .5em; } /* Mobile view */ @media (max-width: 992px) { - .flex-container { + .grid-container { display: grid; grid: auto auto auto / 1fr; - margin: 1em; } } </style> + +<script> + twemoji.parse(document.body); +</script> |