From 418139d54821cf6d59ba8ec1fee12ba295575412 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 31 Mar 2023 16:24:01 +0100 Subject: [PATCH] Alter content --- index.html | 58 ++++++++++++++++++++++++++++++++++---------- main.css | 62 +++++++++++++++++++++++++++++++++++++++++++++--- server-toggle.js | 26 ++++++++++++++++++++ 3 files changed, 130 insertions(+), 16 deletions(-) create mode 100644 server-toggle.js diff --git a/index.html b/index.html index bd9aaa7..f8c12ec 100755 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + @@ -106,15 +107,48 @@
-

aNetwork is a small gaming community with the aim of setting up servers, and events for all to enjoy.

-

Formed sometime in 2021 as a private, and small growing group. Since them the aim has become creating a more public community, and venturing into public server hosting to allow people to play the games they want with friends.

+
+

Who are we?

+

A community of gamers

+

All we want is a place to play, and connect with friends new and old

+
+
+
+ Formed in 2021 +
+
+ Public Servers +
+
+ Community Events +
+
+

Our Servers

-
+
+
Minecraft
+
Factorio
+
Terraria
+
Misc.
+
+
+

Minecraft

+
    +
  • Survival: minecraft.anetwork.uk
    • +
  • FTB Oceanblock: ftb.anetwork.uk
    • +
+
+
+

Factorio

+
    +
  • Survival: factorio.anetwork.uk
    • +
+
@@ -122,9 +156,9 @@

Contribute

aNetwork hosts and maintains a number of servers, and to keep these servers operational we need to pay the big bucks.

-

If you'd like to contribute, or see a breakdown of our outgoings click below

- Contribute - Our Costs +

If you'd like to contribute, follow one of the links below.

+ Ko-fi + Liberapay
@@ -132,16 +166,14 @@
-

Servers

-

Minecraft

-

Factorio

-
-
-

Community

-

Discord

+

aNetwork

+
+ +
+

© aNetwork | Website by Aney

diff --git a/main.css b/main.css index 29f739b..3a4fcaf 100755 --- a/main.css +++ b/main.css @@ -2,11 +2,13 @@ 320, 375, 425, 768, 1024, 1440, 2560 */ html{ - box-sizing: border-box;color: #1A1A1D;font-size: 16px; + box-sizing: border-box; + color: #1A1A1D; + font-size: 16px; } body{ margin: 0; - font: 1.2rem/1.62 sans-serif; + font: 1.2rem/1.62 sans-serif; } *, *::before, *::after{box-sizing: inherit;} img{ @@ -47,6 +49,44 @@ header .layout-wrapper{ -webkit-text-fill-color: transparent; } +.centre-title{ + text-align: center; + margin-bottom: 60px; + margin-top: 24px; +} +.about-title{ + font-size: 18px; + margin: 0; + font-weight: normal; + color: gray; +} +.about-subtitle{ + font-size: 24px; + margin: 0; + font-weight: bold; +} +.about-content{ + font-size: 18px; + /* margin: 10px; */ + color: gray; +} +.about-blocks{ + display: grid; + margin: 0 auto; + gap: 20px; + width: 100%; + grid-template-columns: repeat(auto-fill, minmax(312px, 1fr)); + margin-bottom: 36px; +} +.about-block{ + border-radius: 24px; + padding: 24px; + min-height: 80px; + text-align: center; + background-color: #DFE0E2; + font-weight: bold; +} + .home-servers--parent{ background: #33312E; } @@ -120,6 +160,22 @@ header .layout-wrapper{ } .button:hover{ background: #E9ECEA; + cursor: pointer; +} + + +.servers--games{ + display: flex; + gap: 10px; +} +.servers--servers{ + display: none; +} +.servers--servers--visible{ + display: block; +} +.servers--servers--no-js{ + display: block; } .clipboard{ @@ -164,7 +220,7 @@ header .layout-wrapper{ background: #DFE0E2; } footer{ - background-color: #1A1A1D; + background-color: #33312E; color: white; } .inline-list{ diff --git a/server-toggle.js b/server-toggle.js new file mode 100644 index 0000000..3a7ced4 --- /dev/null +++ b/server-toggle.js @@ -0,0 +1,26 @@ +const minecraftServer = document.getElementById("servers--minecraft"); +const factorioServer = document.getElementById("servers--factorio"); + +minecraftServer.classList.add("servers--servers--visible"); +minecraftServer.classList.remove("servers--servers--no-js"); +factorioServer.classList.remove("servers--servers--no-js"); + +function resetServers() { + + minecraftServer.classList.remove("servers--servers--visible"); + factorioServer.classList.remove("servers--servers--visible"); + +} + +const minecraftButton = document.getElementById('server-button--minecraft'); +minecraftButton.addEventListener('click', function (event) { + resetServers(); + minecraftServer.classList.toggle("servers--servers--visible"); +}); + +const factorioButton = document.getElementById('server-button--factorio'); +factorioButton.addEventListener('click', function (event) { + resetServers(); + factorioServer.classList.toggle("servers--servers--visible"); +}); +