nathan
/
anetwork.uk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change basic theme of aNetwork

Browse Source
master
root 3 years ago
parent f2c5f1bf17
commit 60f96b0185
4 changed files with 100 additions and 64 deletions
Show Stats Download Patch File Download Diff File

1
about.html
Unescape Escape View File

@ -1 +0,0 @@
about us

BIN
images/moo-cow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 68 KiB

53
index.html
Unescape Escape View File

@ -18,39 +18,43 @@
<body> <body>
<header> <header>
<div class="layout-wrapper"> <div class="layout-wrapper">
<a class="logo" href="/">aNetwork</a> <nav class="menu-left">
<nav> <a class="logo" href="/">aNetwork</a>
<ul class="inline-list"> <ul class="inline-list">
<li><a href="/">Home</a></li> <li><a href="#about">About</a></li>
<li><a href="/servers/">Servers</a></li> <li><a href="#servers">Servers</a></li>
<li><a href="/about.html">About</a></li> <li><a href="#support">Support</a></li>
<li><a href="/discord">Discord</a></li> </ul>
<li><a href="/support.html">Support</a></li> </nav>
</ul>
</nav> <nav class="menu-right">
<ul class="inline-list">
<li><a href="/">Discord</a></li>
</ul>
</nav>
</div> </div>
</header> </header>
<main> <main>
<div class="home-servers--parent">
<section class="home-servers layout-wrapper"> <section class="home-servers layout-wrapper">
<div class="home-server home-server-uno"> <div class="home-server home-server-uno">
<div class="content"> <div class="content">
<p class="heading">Want more servers?</p> <h1 class="heading"><span class="title">aNetwork</span> Server Host</h1>
<p class="content"> <p class="content">
Let the secretaries know over in aNetwork <a href="/discord" target="_blank">Discord's</a> #moar-servers channel. If there's enough want, we'll set it up. A community that runs several gaming servers. If there's something we don't host; Let us know over in the aNetwork <a href="/discord" target="_blank">Discord</a>. If there's enough want, we'll set it up.
</p> </p>
<a class="button" href="/discord" target="_blank">Join Discord</a> <a class="button" href="/discord" target="_blank">Join Discord</a>
<a class="button" href="#servers" target="_blank">View Servers</a>
</div> </div>
<img class="centre-image" src="/images/moo-cow.png"/>
</div> </div>
<div class="home-server home-server--discord"> <div class="home-server home-server--discord">
<a href="/discord"><img class="centre-image" src="/images/discord.png" width="128" height="128"/></a> <a href="/discord"><img class="centre-image" src="/images/discord.png" width="128" height="128"/></a>
<p class="heading">Discord</p> <p class="heading">Discord</p>
<p class="content"> <p class="content">
We are a toxic community Where we chat, set up any events, and announce new servers.
</p> </p>
<a class="button" href="/discord">Join</a> <a class="button" href="/discord">Join</a>
</div> </div>
@ -58,7 +62,7 @@
<div class="home-server home-server--minecraft"> <div class="home-server home-server--minecraft">
<img class="centre-image" src="/images/mc.png" width="128" height="128"/> <img class="centre-image" src="/images/mc.png" width="128" height="128"/>
<p class="heading">MC</p> <p class="heading">MineCraft</p>
<p class="content"> <p class="content">
A publically available minecraft server that is currenly a WIP. i.e. We are trying plugins, and administration to see what people would like best. A publically available minecraft server that is currenly a WIP. i.e. We are trying plugins, and administration to see what people would like best.
</p> </p>
@ -83,7 +87,7 @@
</p> </p>
</div> </div>
<div class="home-server home-server--terraria"> <div class="home-server home-server--down">
<img class="centre-image" src="/images/terraria.png" width="128" height="128"/> <img class="centre-image" src="/images/terraria.png" width="128" height="128"/>
<p class="heading">Terraria (Currently down)</p> <p class="heading">Terraria (Currently down)</p>
<p class="content"> <p class="content">
@ -98,19 +102,26 @@
</div> </div>
</section> </section>
</div>
<section class="moar"> <section class="about" id="about">
<div class="layout-wrapper"> <div class="layout-wrapper">
<img class="centre-image" src="/images/moo-cow.png"/>
<p>aNetwork is a small gaming community with the aim of setting up servers, and events for all to enjoy.</p> <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> <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> </div>
</section> </section>
<section class="extra"> <section class="our-servers" id="servers">
<div class="layout-wrapper">
<h2>Our Servers</h2>
<div class=""></div>
</div>
</section>
<section class="extra" id="support">
<div class="layout-wrapper"> <div class="layout-wrapper">
<h2>Contribute</h2> <h2>Contribute</h2>
<p>aNetwork hosts and maintains a number of <a href="/servers/" target="_blank">servers</a>, and to keep these servers operational we need to pay the big bucks.</p> <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> <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="/support.html">Contribute</a>
<a class="button" href="/expenses.html">Our Costs</a> <a class="button" href="/expenses.html">Our Costs</a>

108
main.css
Unescape Escape View File

@ -2,19 +2,18 @@
320, 375, 425, 768, 1024, 1440, 2560 320, 375, 425, 768, 1024, 1440, 2560
*/ */
html{ html{
box-sizing: border-box; box-sizing: border-box;color: #1A1A1D;font-size: 16px;
color: #1A1A1D;
} }
body{ body{
margin: 0; margin: 0;
font: 1.2rem/1.62 sans-serif;
} }
*, *::before, *::after{ *, *::before, *::after{box-sizing: inherit;}
box-sizing: inherit;
}
img{ img{
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
.layout-wrapper{ .layout-wrapper{
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
@ -22,16 +21,34 @@ img{
padding: 24px; padding: 24px;
} }
header{ header{
background-color: #C2CAD0; background-color: #33312E;
color: #F2F4F3;
} }
header .layout-wrapper{ header .layout-wrapper{
display: flex; display: flex;
} }
.logo{ .logo{
flex: 1 0 64px; padding-right: 12px;
text-decoration: none;
} }
.logo, nav{ .logo, nav{
display: inline-block; display: inline-block;
font-size: 18px;
line-height: 1.6;
color: #F2F4F3;
}
.menu-left{
flex: 1 1 0;
}
.title{
background: -webkit-linear-gradient(45deg,#FFF, #777);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-servers--parent{
background: #33312E;
} }
.home-servers{ .home-servers{
display: grid; display: grid;
@ -39,26 +56,37 @@ header .layout-wrapper{
gap: 20px; gap: 20px;
width: 100%; width: 100%;
max-width: 1024px; max-width: 1024px;
} }
.home-server{ .home-server{
text-align: center; text-align: center;
min-height: 200px; min-height: 200px;
background-color: #6BA8D7; background-color: #4464AD;
border-radius: 24px; border-radius: 24px;
padding: 24px; padding: 24px;
} }
.home-server .button{ .home-server .button{
margin-top: 16px;
display: inline-block; display: inline-block;
margin: 16px 6px 0 6px;
}
.home-server .heading{
font-size: 1.875rem;
margin: 0.5rem;
font-weight: bold;
} }
.home-server-uno{ .home-server-uno{
text-align: center; text-align: center;
display: flex; display: flex;
row-gap: 24px; row-gap: 24px;
column-gap: 12px; column-gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
background: none;
color: #F2F4F3;
margin-top: 32px;
}
.home-server-uno .heading{
font-size: 48px;
color: #F2F4F3;
margin: 0;
} }
.home-server-uno img{ .home-server-uno img{
width: 100%; width: 100%;
@ -66,34 +94,32 @@ header .layout-wrapper{
height: auto; height: auto;
} }
.home-server--minecraft{ .home-server--minecraft{
background-color: lightgreen; background-color: #72A276;
color: green;
} }
.home-server--discord{ .home-server--discord{
background-color: mediumpurple; background-color: mediumpurple;
color: blueviolet;
} }
.home-server .heading{ .home-server--down{
font-size: 1.875rem; background: grey;
margin: 0.5rem; color: darkgray;
font-weight: bold;
}
.home-server--minecraft .heading{
color: darkgreen;
}
.home-server--discord .heading{
color: purple;
} }
.centre-image{ .centre-image{
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.button{ .button{
padding: 12px; padding: 8px 18px;
font-size: 16px;
border-radius: 12px; border-radius: 12px;
color: black; color: #33312E;
background-color: lightblue; background: #F2F4F3;
border-color: #33312E;
text-decoration: none;
}
.button:hover{
background: #E9ECEA;
} }
.clipboard{ .clipboard{
@ -126,37 +152,37 @@ header .layout-wrapper{
} }
.tooltipped .tooltiptext::after { .tooltipped .tooltiptext::after {
content: ""; content: "";position: absolute;
position: absolute; top: 100%;left: 50%;
top: 100%; margin-left: -5px;border-width: 5px;
left: 50%; border-style: solid;border-color: #555 transparent transparent transparent;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
} }
.tooltipped:hover .tooltiptext {visibility: visible;}
.tooltipped:hover .tooltiptext { .about{}
visibility: visible; .our-servers{
} background: #DFE0E2;
.moar{
background-color: #97CAEF;
} }
footer{ footer{
background-color: #1A1A1D; background-color: #1A1A1D;
color: white; color: white;
} }
.inline-list{ .inline-list{
display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.inline-list li{ .inline-list li{
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
margin: 0 10px;
} }
.inline-list li a{ .inline-list li a{
text-decoration: none; text-decoration: none;
color: #F2F4F3;
}
.inline-list li a:hover{
color: #E9ECEA;
} }
.content{ .content{
font-size: 16px; font-size: 16px;

Write Preview
Loading…
Cancel
Save