Added files

This commit is contained in:
Alex D. 2018-05-10 22:04:43 +02:00
parent fc086bff2a
commit dd3830c53f
5 changed files with 415 additions and 1 deletions

View File

@ -1 +1,11 @@
# RXHomepage
# RedXen Homepage
## What is this?
Well, nothing special...
This is just the homepage i use for the community i am running [here](http://redxen.dynu.net)
## Why do i host it on GitHub?
If anyone wants to contribute, see my code practices or something similar, then here it is.
It is also easier to check on something or manage changes.

70
index.html Normal file
View File

@ -0,0 +1,70 @@
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Glegoo" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="res/stylesheet-min.css" rel="stylesheet" id="style">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="res/window.js"></script>
<title>RedXen Gaming</title>
</head>
<body>
<div id="box">
<span id="links-top">
<a href="https://steamcommunity.com/groups/redxengaming"><i class="fab fa-steam"></i></a>
<a href="https://discord.gg/CTFMzde"><i class="fab fa-discord"></i></a>
<a href="https://forum.redxen.dynu.net"><i class="fab fa-discourse"></i></a>
<a href="https://cloud.redxen.dynu.net"><i class="fas fa-cloud"></i></a>
</span>
<span id="title">
<span class="titletext">RedXen Gaming</span>
</span>
</div>
<div id="content">
<p class="subtitle">About us</p>
<p class="text">
We&nbsp;are&nbsp;a&nbsp;small&nbsp;community&nbsp;of&nbsp;gamers that&nbsp;play&nbsp;the&nbsp;same&nbsp;games&nbsp;and&nbsp;enjoy&nbsp;the&nbsp;same&nbsp;things!<br>
</p>
<p class="subtitle">Updates</p>
<p class="text">
10&nbsp;May&nbsp;-&nbsp;Adapted&nbsp;the&nbsp;homepage&nbsp;to almost&nbsp;all&nbsp;viewports<br>
6&nbsp;May&nbsp;-&nbsp;Got&nbsp;a&nbsp;new&nbsp;homepage! The&nbsp;one&nbsp;you&nbsp;are&nbsp;on&nbsp;now<br>
1&nbsp;May&nbsp;-&nbsp;Discord&nbsp;revamp with new&nbsp;channels, categories&nbsp;and&nbsp;roles
</p>
<p class="subtitle">Servers</p>
<p class="text">
Currently&nbsp;planning&nbsp;on&nbsp;hosting&nbsp;servers&nbsp;for&nbsp;some&nbsp;games but&nbsp;our&nbsp;bandwidth&nbsp;doesn't&nbsp;allow&nbsp;it&nbsp;for&nbsp;now.<br>
In&nbsp;the&nbsp;near&nbsp;future we&nbsp;will&nbsp;get&nbsp;better&nbsp;bandwidth.<br>
The&nbsp;approx.&nbsp;number&nbsp;of&nbsp;players that&nbsp;wouldn't impact&nbsp;performance&nbsp;would&nbsp;be&nbsp;~&nbsp;5&nbsp;players.<br>
That&nbsp;amount&nbsp;is&nbsp;too&nbsp;low&nbsp;for&nbsp;a&nbsp;server.
</p>
<p class="subtitle">Current Staff</p>
<p class="text">
Owner:&nbsp;casKd <br>
Administrator:&nbsp;Davids_Trains<br>
Super-Moderator:&nbsp;McDonlad<br>
Moderators:&nbsp;ChuppaChupps&nbsp;&amp;&nbsp;Korato
</p>
<p class="subtitle">Current&nbsp;Setup</p>
<p class="text">
Our&nbsp;current&nbsp;server&nbsp;setup consists&nbsp;of:<br><br>
Intel&nbsp;i3-2100<br>
6GB&nbsp;DDR3&nbsp;RAM<br>
220&nbsp;KB/s upload&nbsp;speed<br>
830&nbsp;KB/s download speed<br>
Our&nbsp;forum powered by&nbsp;Discourse<br>
Cloud&nbsp;service powered by&nbsp;Nextcloud<br>
All&nbsp;running&nbsp;through nginx&nbsp;reverse&nbsp;proxy
</p>
<div id="footer">
<span class="links">
<a href="https://steamcommunity.com/id/caskd"><i class="fab fa-steam"></i></a>
<a href="https://discord.gg/CTFMzde"><i class="fab fa-discord"></i></a>
<a href="https://forum.redxen.dynu.net/u/caskd"><i class="fab fa-discourse"></i></a>
<a href="mailto:caskd@gmx.de"><i class="fas fa-envelope"></i></a>
</span>
</div>
</div>
</body>
</html>

156
res/stylesheet-min.css vendored Normal file
View File

@ -0,0 +1,156 @@
/*Root*/
:root {
background-color: rgb(110, 0, 0);
height: 100%;
}
/*Top bar settings*/
#box {
background: linear-gradient(to left, rgb(220, 0, 0), rgb(170, 0, 0));
width: 100%;
height: 60px;
position: fixed;
top: 0;
left: 0;
transition: ease-in-out 400ms;
z-index: 2;
}
#box:hover #title {
height: 40px;
transition: ease-in-out 200ms;
line-height: 40px;
}
#box:hover > #links-top a {
padding-top: 10px;
padding-bottom: 10px;
opacity: 1;
}
#box:hover ~ #content {
top: 80px;
transition: ease-in-out 300ms;
}
#box:hover {
height: 80px;
transition: ease-in-out 300ms;
}
/*Links in top bar*/
#links-top {
top: 0;
position: absolute;
text-align: center;
width: 100%;
height: auto;
background-color: rgba(0, 0, 0, 0.4);
transition: ease-in-out 300ms;
}
#links-top a {
text-decoration: none;
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
display: inline-block;
transition: ease-in-out 200ms;
padding-right: 5px;
padding-left: 5px;
opacity: 0.6;
}
#links-top a:hover {
color: rgb(200,0,50);
padding-right: 20px;
padding-left: 20px;
transition: ease-in-out 200ms;
}
/*Title Bar*/
#title {
font-family: 'Abel', sans-serif;
font-size: 20px;
line-height: 30px;
bottom: 0;
width: 100%;
left: 0;
height: 30px;
display: block;
text-align: center;
position: absolute;
color: #fff;
transition: ease-in-out 200ms;
}
/*Page Content*/
#content {
background-color: rgba(50,50,50,0.5);
color: #fff;
height: auto;
top: 60px;
width: 100%;
transition: ease-in-out 200ms;
position: absolute;
z-index: 0;
left: 0;
text-align: center;
vertical-align: middle;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#content:hover {
background-color: rgba(200,200,200,0.8);
color: #000;
}
/*Content types*/
.subtitle {
font-size: 14px;
line-height: 22px;
width: 100%;
color: #fff;
height: 22px;
background-color: rgba(0, 0, 0, 0.4);
font-family: 'Glegoo', serif;
transition: ease-in-out 300ms;
}
.subtitle:hover {
height: 30px;
line-height: 30px;
transition: ease-in-out 200ms;
background-color: rgba(0, 0, 0, 0.8);
color: rgb(200,0,50);
}
.text {
font-size: 10px;
line-height: 12px;
font-family: 'Quicksand', sans-serif;
transition: ease-in-out 150ms;
}
/*Footer Settings*/
#footer {
font-family: 'Quicksand', sans-serif;
width: 100%;
height: auto;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 14px;
line-height: 24px;
transition: ease-in-out 200ms;
}
#footer:hover {
transition: ease-in-out 300ms;
line-height: 30px;
background-color: rgba(0, 0, 0, 0.8);
}
#footer a {
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-left: 5px;
transition: ease-in-out 300ms;
}
#footer a:hover {
color: rgb(200,0,50);
padding-right: 20px;
padding-left: 20px;
transition: ease-in-out 200ms;
}

170
res/stylesheet.css Normal file
View File

@ -0,0 +1,170 @@
/*Root*/
:root {
background-color: rgb(110, 0, 0);
background-image: url('https://s14.postimg.cc/6ge0ofcrl/image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
height: 100%;
}
/*Top bar settings*/
#box {
background: linear-gradient(to left, rgb(220, 0, 0), rgb(170, 0, 0));
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
transition: ease-in-out 400ms;
z-index: 2;
}
#box:hover > #links-top a {
font-size: 150%;
padding-top: 10px;
padding-bottom: 10px;
opacity: 1;
}
#box:hover ~ #content {
top: 120px;
transition: ease-in-out 300ms;
}
#box:hover {
height: 120px;
transition: ease-in-out 300ms;
}
/*Links in top bar*/
#links-top {
top: 0;
position: absolute;
text-align: center;
width: 100%;
height: auto;
background-color: rgba(0, 0, 0, 0.4);
transition: ease-in-out 300ms;
}
#links-top a {
text-decoration: none;
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
font-family: 'Quicksand', sans-serif;
font-size: 16px;
display: inline-block;
transition: ease-in-out 200ms;
padding-right: 5px;
padding-left: 5px;
opacity: 0.6;
}
#links-top a:hover {
color: rgb(200,0,50);
padding-right: 20px;
padding-left: 20px;
transition: ease-in-out 200ms;
}
/*Title Bar*/
#title {
font-family: 'Abel', sans-serif;
font-size: 30px;
line-height: 40px;
bottom: 0;
width: 80%;
left: 10%;
height: 40px;
display: block;
text-align: center;
position: absolute;
background-color: rgba(0,0,0,0.2);
color: #fff;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
transition: ease-in-out 200ms;
}
#title:hover {
background-color: rgba(255,255,255,0.8);
transition: ease-in-out 200ms;
color: #000;
height: 50px;
line-height: 50px;
}
/*Page Content*/
#content {
background-color: rgba(50,50,50,0.5);
color: #fff;
height: auto;
top: 80px;
width: 80%;
transition: ease-in-out 200ms;
position: absolute;
left: 10%;
z-index: 0;
text-align: center;
vertical-align: middle;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#content:hover {
background-color: rgba(200,200,200,0.8);
color: #000;
}
/*Content types*/
.subtitle {
font-size: 20px;
line-height: 40px;
width: 100%;
color: #fff;
height: 40px;
background-color: rgba(0, 0, 0, 0.4);
font-family: 'Glegoo', serif;
transition: ease-in-out 300ms;
}
.subtitle:hover {
height: 50px;
line-height: 50px;
transition: ease-in-out 200ms;
background-color: rgba(0, 0, 0, 0.8);
color: rgb(200,0,50);
}
.text {
font-size: 12px;
line-height: 18px;
font-family: 'Quicksand', sans-serif;
transition: ease-in-out 150ms;
}
/*Footer Settings*/
#footer {
font-family: 'Quicksand', sans-serif;
width: 100%;
height: auto;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 24px;
line-height: 40px;
transition: ease-in-out 200ms;
}
#footer:hover {
transition: ease-in-out 300ms;
line-height: 60px;
background-color: rgba(0, 0, 0, 0.8);
}
#footer a {
text-decoration: none;
color: #fff;
padding-right: 5px;
padding-left: 5px;
transition: ease-in-out 300ms;
}
#footer a:hover {
color: rgb(200,0,50);
padding-right: 20px;
padding-left: 20px;
transition: ease-in-out 200ms;
}

8
res/window.js Normal file
View File

@ -0,0 +1,8 @@
$(window).on ("load resize", function() {
if ($(window).width() < 720) {
$('#style').attr('href','res/stylesheet-min.css');
}
else {
$('#style').attr('href','res/stylesheet.css');
}
});