Alter content

index.html

@@ -9,6 +9,7 @@
 
   <link rel="stylesheet" href="main.css">
   <script src="clipboard.js" defer></script>
+  <script src="server-toggle.js" defer></script>
   <script async defer data-website-id="3fa310c0-d272-4822-a86b-5ac42c8d939c" src="https://umami.aney.co.uk/umami.js"></script>
 
   <meta name="theme-color" content="#fafafa">
@@ -106,15 +107,48 @@
 
 		<section class="about" id="about">
 			<div class="layout-wrapper">
-				<p>aNetwork is a small gaming community with the aim of setting up servers, and events for all to enjoy.</p>
-				<p>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.</p>
+				<div class="centre-title">
+					<h2 class="about-title">Who are we?</h2>
+					<h3 class="about-subtitle">A community of gamers</h3>
+					<p class="about-content">All we want is a place to play, and connect with friends new and old</p>
+				</div>
+				<div class="about-blocks">
+					<div class="about-block">
+						Formed in 2021
+					</div>
+					<div class="about-block">
+						Public Servers
+					</div>
+					<div class="about-block">
+						Community Events
+					</div>
+				</div>
+				
 			</div>
 		</section>
 
 		<section class="our-servers" id="servers">
 			<div class="layout-wrapper">
 				<h2>Our Servers</h2>
-				<div class=""></div>
+				<div class="servers--games">
+					<div class="button" id="server-button--minecraft">Minecraft</div>
+					<div class="button" id="server-button--factorio">Factorio</div>
+					<div class="button">Terraria</div>
+					<div class="button">Misc.</div>
+				</div>
+				<div class="servers--servers servers--servers--no-js" id="servers--minecraft">
+					<h2>Minecraft</h2>
+					<ul class="">
+						<li>Survival: minecraft.anetwork.uk</li>
+						<li>FTB Oceanblock: ftb.anetwork.uk</li>
+					</ul>
+				</div>
+				<div class="servers--servers servers--servers--no-js" id="servers--factorio">
+					<h2>Factorio</h2>
+					<ul class="">
+						<li>Survival: factorio.anetwork.uk</li>
+					</ul>
+				</div>
 			</div>
 		</section>
 
@@ -122,9 +156,9 @@
 			<div class="layout-wrapper">
 				<h2>Contribute</h2>
 				<p>aNetwork hosts and maintains a number of servers, and to keep these servers operational we need to pay the big bucks.</p>
-				<p>If you'd like to contribute, or see a breakdown of our outgoings click below</p>
-				<a class="button" href="/support.html">Contribute</a>
-				<a class="button" href="/expenses.html">Our Costs</a>
+				<p>If you'd like to contribute, follow one of the links below.</p>
+				<a class="button" target="_blank" rel="noopener" href="https://ko-fi.com/siraney">Ko-fi</a>
+				<a class="button" target="_blank" rel="noopener" href="https://liberapay.com/aney/donate">Liberapay</a>
 			</div>
 		</section>
 
@@ -132,16 +166,14 @@
 			<div class="layout-wrapper">
 
 				<div class="footer__column">
-					<p><a href="/servers/">Servers</a></p>
-					<p><a href="/servers/minecraft.html">Minecraft</a></p>
-					<p><a href="/servers/factorio.html">Factorio</a></p>
-				</div>
-				<div class="footer__column">
-					<p>Community</p>
-					<p><a href="/discord">Discord</a></p>
+					<p>aNetwork</p>
+					<div class="footer--socials">
+						<a href="/discord" class="footer--social">Discord</a>
+					</div>
 				</div>
 
 				<div class="sub-footer">
+					<hr/>
 					<p>&copy; aNetwork | Website by <a href="https://aney.co.uk" target="_blank" rel="noopener">Aney</a></p>
 				</div>
 			</div>

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{

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