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 @@
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");
+});
+