Change basic theme of aNetwork

master
root 3 years ago
parent f2c5f1bf17
commit 60f96b0185

@ -1 +0,0 @@
about us

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

@ -18,39 +18,43 @@
<body>
<header>
<div class="layout-wrapper">
<a class="logo" href="/">aNetwork</a>
<nav>
<ul class="inline-list">
<li><a href="/">Home</a></li>
<li><a href="/servers/">Servers</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/discord">Discord</a></li>
<li><a href="/support.html">Support</a></li>
</ul>
</nav>
<nav class="menu-left">
<a class="logo" href="/">aNetwork</a>
<ul class="inline-list">
<li><a href="#about">About</a></li>
<li><a href="#servers">Servers</a></li>
<li><a href="#support">Support</a></li>
</ul>
</nav>
<nav class="menu-right">
<ul class="inline-list">
<li><a href="/">Discord</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="home-servers--parent">
<section class="home-servers layout-wrapper">
<div class="home-server home-server-uno">
<div class="content">
<p class="heading">Want more servers?</p>
<h1 class="heading"><span class="title">aNetwork</span> Server Host</h1>
<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>
<a class="button" href="/discord" target="_blank">Join Discord</a>
<a class="button" href="#servers" target="_blank">View Servers</a>
</div>
<img class="centre-image" src="/images/moo-cow.png"/>
</div>
<div class="home-server home-server--discord">
<a href="/discord"><img class="centre-image" src="/images/discord.png" width="128" height="128"/></a>
<p class="heading">Discord</p>
<p class="content">
We are a toxic community
Where we chat, set up any events, and announce new servers.
</p>
<a class="button" href="/discord">Join</a>
</div>
@ -58,7 +62,7 @@
<div class="home-server home-server--minecraft">
<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">
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>
@ -83,7 +87,7 @@
</p>
</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"/>
<p class="heading">Terraria (Currently down)</p>
<p class="content">
@ -98,19 +102,26 @@
</div>
</section>
</div>
<section class="moar">
<section class="about" id="about">
<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>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>
</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">
<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>
<a class="button" href="/support.html">Contribute</a>
<a class="button" href="/expenses.html">Our Costs</a>

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

Loading…
Cancel
Save