Initial commit

This commit is contained in:
Alex 2020-06-06 02:40:51 +02:00
parent ae7d353636
commit 25795c9c29
Signed by: caskd
GPG Key ID: F92BA85F61F4C173
14 changed files with 288 additions and 340 deletions

21
LICENSE
View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2018 caskd
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -1,9 +0,0 @@
# RedXen Homepage
## What is this?
The portal for the community where everything is linked. It is supposed to be as lightweight and well-functioning as possible.
## How does this work?
It is based around flexboxes mostly to ensure efficiency and good support.
Styling is based on many variables and compiled with the help of lesscss for a dynamic style.

View File

@ -1,200 +1,215 @@
@color: #e11;
@bg: #111;
@round: 5px;
// Standards and pre-defined style classes
.round {border-radius:50%}
ul {
padding:0;
margin:4px 0;
li {list-style-type:none}
}
h1,h2,h3,h4,p {margin:0}
h1 {font-size:32px}
h2 {font-size:14px}
a {
color: contrast(@bg);
text-decoration: none;
&:hover,
&.highlight {
color: @color;
}
&.highlight:hover {
text-decoration: underline;
}
&:not([href]) {
color: average(contrast(@bg), @bg);
}
transition: cubic-bezier(0.23, 1, 0.32, 1) 0.4s;
}
@bg: #000;
@text: contrast(@bg);
@crimson-red: #e11;
@font-size: 16px;
html {
min-height: 100%;
// Nice background to have
color: contrast(@bg);
font-family: 'Oswald' ,sans-serif;
background:
linear-gradient(0deg, darken(@bg,10%), fade(darken(@bg,10%), 50%)),
repeating-linear-gradient(
45deg,
darken(@color, 20%) 0% 2%,
transparent 2% 4%
),
repeating-linear-gradient(
-45deg,
@bg 0% 2%,
darken(@bg, 20%) 2% 4%
)
;
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
z-index: 1;
.headwrap {
height: 130px;
width: 100%;
top: 0;
position: fixed;
z-index: 2;
background:
linear-gradient(180deg, fade(darken(@bg,10%), 80%) 50%, transparent);
.header {
height: 50px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
font-size: 20px;
padding: 0 0 80px 0;
img {
display: inline-block;
height: 100px;
margin: 30px 0 30px 0;
transform: translateY(30px);
}
}
}
.bodywrap {
width: 100%;
margin: 130px 0 50px 0;
.body {
font-size: 24px;
text-align: center;
img.logo {
display: none;
width: 100%;
}
div.banner {
height: auto;
background:
linear-gradient(90deg, fade(darken(@bg,10%), 50%), fade(darken(@bg,10%), 20%));
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
padding: 30px 0;
margin: 100px 0;
div.overflow {
height: 0;
transform: translateY(-100px);
img {
height: 200px;
}
}
}
div.textbody {
width: 90%;
padding: 12px 20px;
margin: auto;
text-align: left;
background: fade(darken(@bg,10%), 50%);
border: @color 2px solid;
border-radius: @round;
flex-direction: row;
div.item {
margin: 14px 0;
div.date {
font-size: 12px;
}
}
}
}
}
.footerwrap {
width: 100%;
flex: 1;
background: fade(darken(@bg,10%), 80%);
border-top: @color 2px solid;
.footer {
display: flex;
flex-direction: row;
span {
font-size: 20px;
}
div.col {
&.name {
flex: 2;
}
flex: 1;
padding: 10px;
}
}
}
}
}
@media only screen and (min-width: 800px) {
background:
linear-gradient(
0deg,
darken(@bg,10%),
fade(darken(@bg,10%), 50%)),
repeating-linear-gradient(
45deg,
darken(@crimson-red, 20%) 0% 2%,
transparent 2% 4%
),
repeating-linear-gradient(
-45deg,
@bg 0% 2%,
darken(@bg, 20%) 2% 4%
);
color: @text;
font-size: @font-size;
font-family: 'Oswald' ,sans-serif;
scroll-behavior: smooth;
body {
margin: 0;
.content {
width: 100%;
.head {
width: 100%;
margin-bottom: 20px;
height: calc(100vh);
position: relative;
overflow: hidden;
.slideshow {
width: 100%;
height: 100%;
li {
&:nth-child(1) span {
background-image: url(../res/slideshow/1.jpg);
animation-delay: 15s;
}
&:nth-child(2) span {
background-image: url(../res/slideshow/2.jpg);
animation-delay: 10s;
}
&:nth-child(3) span {
background-image: url(../res/slideshow/3.jpg);
animation-delay: 5s;
}
&:nth-child(4) span {
background-image: url(../res/slideshow/4.jpg);
opacity: 1;
animation-delay: 0s;
}
&:nth-child(1) div {
opacity: 1;
animation-delay: 0s;
}
&:nth-child(2) div {
animation-delay: 5s;
}
&:nth-child(3) div {
animation-delay: 10s;
}
&:nth-child(4) div {
animation-delay: 15s;
}
div {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
z-index: 10;
opacity: 0;
animation-timing-function: ease-in-out;
animation: textslideshow 20s infinite;
}
}
span {
color: transparent;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 5;
animation: slideshow 20s infinite;
animation-timing-function: ease-in-out;
}
}
}
div.main {
animation: none;
background: fadeout(@bg,20%);
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 0;
z-index: 6;
opacity: 1;
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
justify-content: center;
img {
animation-timing-function: ease-in-out;
animation: slide-in-top 1s;
width: 50%;
}
p {
font-size: 1.5em;
}
}
.about {
margin: 0 2.5%;
padding: 10px 0;
text-align: center;
font-size: 2em;
h3 {
margin: 20px 0 5px 0;
}
}
}
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
width: 100%;
overflow: hidden;
background: @bg;
border-top: contrast(@bg) 2px solid;
margin: 10px 0;
padding: 4px 10px 0px 10px;
box-sizing: border-box;
.column {
&.header {
justify-self: flex-start;
}
margin: 0 10px;
min-width: 100px;
}
}
}
@media only screen and (max-width: 800px) {
html {
body{
.headwrap {
height: 50px;
.header {
padding: 0;
background:
linear-gradient(180deg, fade(darken(@bg,10%), 80%) 90%, transparent);
img {
display: none;
}
}
}
.bodywrap {
margin: 50px 0 10px 0;
.body {
img.logo {
display: initial;
}
div.banner {
height: auto;
width: 100%;
display: flex;
flex-direction: column;
padding: 10px 0;
margin: 20px 0;
div.overflow {
height: auto;
transform: translateY(0);
}
}
}
}
.footerwrap {
.footer {
padding: 0 10px;
text-align: center;
box-sizing: border-box;
flex-direction: column;
flex-basis: 50%;
div.col {padding:2px}
}
}
}
}
body {
.footer {
flex-direction: row;
align-items: center;
text-align: center;
flex-wrap: wrap;
padding: 0;
.column {
width: 50%;
margin: 0;
&.header {
width: 100%;
}
}
}
}
}
h1, h2, h3, p {
margin: 0;
}
a {
color: contrast(@bg);
transition: color 300ms;
&:hover {
color: @crimson-red;
}
&:not([href]) {
color: average(contrast(@bg), @bg);
}
}
ul {
list-style-type: none;
padding-inline-start: 0;
padding-inline-end: 0;
margin-block-start: 0;
margin-block-end: 0;
}
@keyframes slideshow {
0%,35%,100% { opacity: 0 }
5%,25% { opacity: 1 }
}
@keyframes textslideshow {
10%,25% { transform: translateX(0px); opacity: 1 }
30% { transform: translateX(-20px); opacity: 0 }
100%,0% { transform: translateX(20px); opacity: 0 }
}
@keyframes blink {
0%,20%,70%,100% { color: @text }
25%,50% { color: @crimson-red }
}
@keyframes slide-in-top {
0% { transform: translateY(-100px) }
100% { transform: translateY(0px) }
}
.attention {
animation: blink 5s infinite;
}
.hidden {
display: none;
}

View File

@ -1,118 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--Styles and meta-->
<title>RedXen Community</title>
<meta name="description" content="The community that empowers gamers.">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="keywords" content="rx,redxen,community,game,minecraft,games,server,pmbot">
<meta name="author" content="caskd">
<meta name="theme-color" content="#e11">
<link rel="icon" sizes="321x300" href="res/logo2.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!--These endless wrappers might be unnecessary now but could be useful later-->
<!--
Looking to help us achieve more?
Mail me at caskd@420blaze.it or contact me directly over on Telegram and we can discuss ideas.
-->
<div class="headwrap">
<div class="header">
<a href="https://git.redxen.eu">Git</a>
<a href="https://social.redxen.eu">Pleroma</a>
<a title="Gametracker still is extremely slow, might make a alternative static page.">Gameservers</a>
<img alt="logo" src="res/logo.png">
<a href="ircs://redxen.eu:6697">IRC</a>
<a href="https://stats.redxen.eu">Status</a>
<a href="https://t.me/rxtelegram" class="highlight">Join RedXen!</a>
</div>
</div>
<div class="bodywrap">
<div class="body">
<img alt="logo" class="logo" src="https://redxen.eu/res/logo.png">
<div class="banner">
<div class="overflow">
<img src="res/pleroma.png" alt="tooltipicon">
</div>
<p>Pleroma is now a part of the RedXen world!</p>
</div>
<div class="news textbody">
<h3>News</h3>
<div class="item">
<h4>Pleroma joins the service list</h4>
<p>We have joined the Fediverse with the first Pleroma instance. Due to the size of the fediverse, this is invite only but we accept new people freely. This is done to prevent bot accounts or similiar malicious behaviour which can put a high load on the servers. Stay safe and healthy!</p>
<div class="date">12.03.2020</div>
</div>
<div class="item">
<h4>No more Nextcloud</h4>
<p>We are going to move to a different storage backend because Nextcloud is developing poorly without any quality control, FTP/SFTP/NFS/WebDAV/Samba server(s) will be spun up soon with authentication mechanisms.</p>
<div class="date">06.01.2020</div>
</div>
<div class="item">
<h4>Discord be gone!</h4>
<p>We are not officially available on Discord anymore and support for PMBot has been dropped, if you were a user of it, you should move to the <a href="https://yagpdb.xyz">official</a> version of the bot.</p>
<div class="date">21.12.2019</div>
</div>
<div class="item">
<h4>No more Cloudflare and network maintenances.</h4>
<p>We have moved away from CloudFlare which will give you a more safer experience and better networking, the Git repository has been moved to git.redxen.eu and we do not accept any port 80 connections anymore.</p>
<div class="date">13.12.2019</div>
</div>
<div class="item">
<h4>Fully encrypted networks!</h4>
<p>We have configured fully encrypted communications between our servers, now your personal information is safe from anyone in between the connections.</p>
<div class="date">27.11.2019</div>
<head>
<meta charset="UTF-8">
<title>RedXen Homepage</title>
<meta property="og:title" content="RedXen Homepage" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://redxen.eu/res/logo-small.png" />
<meta property="og:description" content="The community that empowers gamers." />
<link rel="shortcut icon" href="/favicon.ico">
<meta name="keywords" content="rx,redxen,community,game,minecraft,games,server" />
<meta name="author" content="caskd" />
<meta name="theme-color" content="#e11" />
<link rel="icon" sizes="321x300" href="res/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!--
Looking to help us achieve more?
Mail me at caskd@420blaze.it or contact me directly over on Telegram and we can discuss ideas.
-->
<div class="content">
<div class="head">
<ul class="slideshow">
<li><span></span><div><p>Night time survival experience</p></div></li>
<li><span></span><div><p>Defeating the Ender Dragon</p></div></li>
<li><span></span><div><p>The "Fishtank"</p></div></li>
<li><span></span><div><p>Themed shops</p></div></li>
</ul>
<div class="main">
<img src="res/logo.png">
<p>Having fun has never been so easy before.</p>
<p>Ready to <a class="attention" href="#about">start</a>?</p>
</div>
</div>
<div class="about" id="about">
<h3>What is RedXen?</h3>
<p>RedXen is a hosting group and community that provide services for your entertainment.</p>
<h3>Why RedXen?</h3>
<p>Transparency and Freedom. Those 2 words are written in stone. We are committing to being as transparent as possible to everyone by serving <a href="https://en.wikipedia.org/wiki/Open-source_software">(F)OS software</a> wherever possible. We think that freedom of speech should be for everyone, no matter how "extreme" it might be. We allow all type of speech as long as it is not spam.</p>
<h3>Where do i join?</h3>
<p>There are a few places you might want to start. If you are looking for some games, our <a href="mumble://redxen.eu:64738">Mumble server</a> is a good start. You can communicate with ease with your buddies without limits and without worrying about management. Just join, make a channel and you are good to go!</p>
<p>However, if you are looking to help with hosting or development, our <a href="https://git.redxen.eu/RedXen">Gitea</a> instance is open for registrations. You can help us become better by submitting a issue or contributing yourself.</p>
<p>Finally, if you feel adventurous you might want to join our <a href="https://t.me/rxtelegram">Telegram Group</a> to have a chat.</p>
<h3>What games are you hosting?</h3>
<p>At the current moment, the following servers are available or planned:</p>
<ul>
<li>Minecraft: redxen.eu:25565</li>
<li>Terraria: (planned)</li>
<li>Xonotic: (planned)</li>
</ul>
</div>
</div>
</div>
<div class="footerwrap">
<div class="footer">
<div class="col name">
<span class="column header">
<h1>RedXen Community</h1>
<h2>The community that empowers gamers</h2>
</div>
<div class="col">
<h2>The community that empowers gamers.</h2>
</span>
<span class="column">
<b>Links</b>
<ul>
<li><a title="WIP: Will be soon up.">News RSS</a></li>
<li><a href="https://git.redxen.eu/">Development</a></li>
<li><a href="https://stats.redxen.eu/">Status</a></li>
</ul>
</span>
<span class="column">
<b>Community</b>
<ul>
<li><a href="https://t.me/rxtelegram">Telegram</a></li>
<li><a href="mumble://redxen.eu:64738">Mumble</a></li>
<li><a href="https://social.redxen.eu">Pleroma</a></li>
</ul>
</span>
<span class="column">
<b>Privacy & Freedom</b>
<ul>
<span>Resources</span>
<li><a href="https://prism-break.org">Prism Break</a></li>
<li><a href="https://rfc-editor.org/rfc-index.html">IETF RFC</a></li>
<li><a href="https://www.gnu.org/">GNU</a></li>
<li><a href="https://www.ietf.org/">IETF</a></li>
<li><a href="https://prism-break.org/">PRISM Break</a></li>
<li><a href="https://suckless.org/">suckless.org</a></li>
</ul>
</div>
<div class="col">
</span>
<span class="column">
<b>Contact</b>
<ul>
<span>Cool people</span>
<li><a href="https://cyberia.is/">Cyberia</a></li>
<li><a href="https://fuwafuwa.moe">Fuwafuwa</a></li>
<li><a href="https://2f30.org/">divided by 0</a></li>
<li><a href="https://cock.li/">Cock.li</a></li>
</ul>
</div>
<div class="col">
<ul>
<span>Libraries</span>
<li><a href="https://fonts.google.com">Google Fonts</a></li>
<li><a href="https://lesscss.org">Less CSS</a></li>
</ul>
</div>
<div class="col">
<ul>
<span>Contact</span>
<li><a href="mailto:caskd@gmx.de">Mail</a></li>
<li><a href="https://social.redxen.eu/caskd">Pleroma</a></li>
<li><a href="https://t.me/casKd_dev">Telegram</a></li>
<li><a href="mumble://dc.redxen.eu:2200">Mumble</a></li>
</ul>
</div>
</span>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="manifest" href="/manifest.json">
</body>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</body>
</html>

View File

@ -1,15 +0,0 @@
{
"name": "RedXen Community",
"short_name": "RX Community",
"start_url": ".",
"display": "standalone",
"orientation": "portrait-primary",
"theme_color": "red",
"background_color": "#e11",
"description": "The Community that empowers gamers!",
"icons": [{
"src": "res/logo2.png",
"sizes": "321x300",
"type": "image/png"
}]
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

BIN
res/logo-small.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
res/slideshow/1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

BIN
res/slideshow/2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

BIN
res/slideshow/3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
res/slideshow/4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

0
robots.txt Executable file → Normal file
View File