Newest version changes
This commit is contained in:
parent
8a47aecd14
commit
ca4ff07ac2
@ -1,15 +0,0 @@
|
||||
<div class="tab-content" id="tab-1">
|
||||
<h2>Staff:</h2>
|
||||
<p>Our staff is made out of multiple friendly members that help keep the community and conversations clean. If you need any help you can just call any of them.</p>
|
||||
</div>
|
||||
<div class="tab-content hide" id="tab-2">
|
||||
<h2>Discord Server:</h2>
|
||||
<p>Due to Discord being easy to use and reliable, we use it as a center for conversations. Join in and have a chat!</p>
|
||||
</div>
|
||||
<div class="tab-content hide" id="tab-3">
|
||||
<h2>Contact Us:</h2>
|
||||
<p>You can contact the Owner/Server manager directly here:</p>
|
||||
<a href="mailto:caskd@gmx.de">Mail</a>
|
||||
<a href="https://steamcommunity.com/id/caskd">Steam</a>
|
||||
<a href="https://t.me/casKd_dev">Telegram</a>
|
||||
</div>
|
||||
@ -1,116 +0,0 @@
|
||||
/*Animations*/
|
||||
|
||||
.float {
|
||||
-webkit-animation: float 7s infinite;
|
||||
animation: float 7s infinite;
|
||||
-webkit-transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
|
||||
-o-transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
|
||||
transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
|
||||
}
|
||||
|
||||
.float:hover {
|
||||
-webkit-animation-play-state: paused;
|
||||
-moz-animation-play-state: paused;
|
||||
-o-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.slide-top {
|
||||
-webkit-animation: slide-in-top 1s;
|
||||
animation: slide-in-top 1s;
|
||||
}
|
||||
|
||||
.slide-left {
|
||||
-webkit-animation: slide-in-left 1s;
|
||||
animation: slide-in-left 1s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes float {
|
||||
0% {
|
||||
-webkit-transform: translateY(4px);
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateY(-4px);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(4px);
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
-webkit-transform: translateY(4px);
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateY(-4px);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(4px);
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-in-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-30px);
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-30px);
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-in-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-30px);
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-30px);
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@ -1,120 +0,0 @@
|
||||
/*Important rules*/
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Oswald", sans-serif;
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-moz-user-select: none;
|
||||
/* Firefox */
|
||||
-ms-user-select: none;
|
||||
/* IE10+/Edge */
|
||||
user-select: none;
|
||||
/* Standard */
|
||||
}
|
||||
|
||||
.unsupported,
|
||||
.bg-landing {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
min-width: 250px;
|
||||
min-height: 310px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
.page {
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: #eee;
|
||||
-webkit-transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
|
||||
-o-transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
|
||||
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.column {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bg-landing img {
|
||||
-webkit-filter: blur(5px) brightness(0.4);
|
||||
filter: blur(5px) brightness(0.4);
|
||||
top: -5vw !important;
|
||||
left: -5vw !important;
|
||||
min-width: 110vw;
|
||||
min-height: 110vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.branding {
|
||||
-webkit-filter: drop-shadow(0 10px 3px #0009);
|
||||
filter: drop-shadow(0 10px 3px #0009);
|
||||
margin: auto 0;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.brand {
|
||||
color: #eee;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0 50px;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.unsupported {
|
||||
display: none;
|
||||
}
|
||||
279
css/main.css
Normal file
279
css/main.css
Normal file
@ -0,0 +1,279 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
::selection {
|
||||
background: #c11;
|
||||
}
|
||||
img.logo {
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
}
|
||||
img.logo:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: url("/res/red-space.png") no-repeat;
|
||||
background-size: cover;
|
||||
backdrop-filter: blur(20px);
|
||||
color: #eee;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
div.slide.container {
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
display: block;
|
||||
background-color: #111;
|
||||
}
|
||||
div.slide.container::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
background: inherit;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
.main {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main .links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
min-height: 2em;
|
||||
min-width: 3em;
|
||||
}
|
||||
.main .links ul {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.main .links span {
|
||||
opacity: 1;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.main .links ul,
|
||||
.main .links span {
|
||||
transition: cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
|
||||
}
|
||||
.main .links:hover ul {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
.main .links:hover span {
|
||||
opacity: 0;
|
||||
}
|
||||
.main .content {
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.main .content .text {
|
||||
padding: 0 10px;
|
||||
scroll-behavior: smooth;
|
||||
text-align: left;
|
||||
}
|
||||
.main .content .text a {
|
||||
text-decoration: underline #eee;
|
||||
}
|
||||
.main .content .text a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.main .content .text .prst {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.main .content .text .prst::after {
|
||||
content: "the community that empowers you";
|
||||
animation: slideThrough 30s cubic-bezier(0, 1, 0, 1) forwards;
|
||||
display: inline-block;
|
||||
}
|
||||
.main .content .head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.main .content .head .column {
|
||||
margin: auto 10px;
|
||||
}
|
||||
.main .content .head .column h1,
|
||||
.main .content .head .column p {
|
||||
margin: 0;
|
||||
}
|
||||
ul {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
transition: cubic-bezier(0.19, 1, 0.22, 1) 1s;
|
||||
color: #3c3c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a[href] {
|
||||
color: #eee;
|
||||
}
|
||||
a[href]:hover {
|
||||
color: #e22;
|
||||
}
|
||||
div.links a[href]:hover::after {
|
||||
transform: translateX(6px);
|
||||
opacity: 1;
|
||||
}
|
||||
div.links a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
div.links a::after {
|
||||
content: ">";
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: translateX(0px);
|
||||
transition: transform cubic-bezier(0.19, 1, 0.22, 1) 1s;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.shadow {
|
||||
filter: drop-shadow(0px 3px 4px #010101);
|
||||
}
|
||||
@media only screen and (min-width: 900px) {
|
||||
div.slide.container {
|
||||
width: 80%;
|
||||
}
|
||||
div.slide.container::after {
|
||||
width: 100%;
|
||||
transform: skew(-10deg, 0deg);
|
||||
}
|
||||
.links ul {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
.links:hover span {
|
||||
transform: translateX(-40px) rotate(-90deg);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 900px) {
|
||||
img.logo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 0;
|
||||
}
|
||||
div.slide.container {
|
||||
background-color: rgba(17, 17, 17, 0.5);
|
||||
width: 100%;
|
||||
}
|
||||
div.slide.container::after {
|
||||
opacity: 0;
|
||||
}
|
||||
.content .text h2 {
|
||||
margin: 2px 0;
|
||||
}
|
||||
.main {
|
||||
flex-direction: column;
|
||||
}
|
||||
.main .content {
|
||||
order: 1;
|
||||
margin: 0;
|
||||
}
|
||||
.main .links {
|
||||
order: 2;
|
||||
text-align: center;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.main .links ul {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
}
|
||||
.main .links ul li {
|
||||
display: inline;
|
||||
margin: 0 6px;
|
||||
}
|
||||
.main .links ul li a::after {
|
||||
display: none;
|
||||
}
|
||||
.main .links span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@keyframes slideThrough {
|
||||
0%,
|
||||
11%,
|
||||
21%,
|
||||
31%,
|
||||
41%,
|
||||
51% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
2%,
|
||||
7%,
|
||||
12%,
|
||||
17%,
|
||||
22%,
|
||||
27%,
|
||||
32%,
|
||||
37%,
|
||||
42%,
|
||||
47%,
|
||||
52%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
9%,
|
||||
19%,
|
||||
29%,
|
||||
39%,
|
||||
49% {
|
||||
transform: translateX(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
content: "where you game";
|
||||
}
|
||||
10% {
|
||||
content: "where you are free";
|
||||
}
|
||||
20% {
|
||||
content: "where you have fun";
|
||||
}
|
||||
30% {
|
||||
content: "where the competition starts";
|
||||
}
|
||||
40% {
|
||||
content: "the free community";
|
||||
}
|
||||
50% {
|
||||
content: "the open community";
|
||||
}
|
||||
60%,
|
||||
100% {
|
||||
content: "the community that empowers you";
|
||||
}
|
||||
}
|
||||
308
css/main.less
Normal file
308
css/main.less
Normal file
@ -0,0 +1,308 @@
|
||||
@slide-duration: 0.5s;
|
||||
@slide-width: 80%;
|
||||
|
||||
@textdef: #eee;
|
||||
@vibrant: #e22;
|
||||
@dark: #c11;
|
||||
@contentbg: #111;
|
||||
@inkdark: #010101;
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: @dark;
|
||||
}
|
||||
|
||||
img.logo {
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: url("/res/red-space.png") no-repeat;
|
||||
background-size: cover;
|
||||
backdrop-filter: blur(20px);
|
||||
color: @textdef;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
div.slide.container {
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
background: inherit;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
height: 100%;
|
||||
width: @slide-width;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
display: block;
|
||||
background-color: @contentbg;
|
||||
}
|
||||
|
||||
.main {
|
||||
.links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
min-height: 2em;
|
||||
min-width: 3em;
|
||||
|
||||
ul {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
ul,
|
||||
span {
|
||||
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 0.4s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
ul {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
span {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.text {
|
||||
padding: 0 10px;
|
||||
scroll-behavior: smooth;
|
||||
text-align: left;
|
||||
|
||||
a {
|
||||
text-decoration: underline #eee;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.prst {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
content: "the community that empowers you";
|
||||
animation: slideThrough 30s cubic-bezier(0,1,0,1) forwards;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
.column {
|
||||
margin: auto 10px;
|
||||
|
||||
h1,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: cubic-bezier(0.19, 1, 0.22, 1) 1s;
|
||||
color: darken(@textdef, 70%);
|
||||
text-decoration: none;
|
||||
&[href] {
|
||||
color: @textdef;
|
||||
&:hover {
|
||||
color: @vibrant;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.links a {
|
||||
&[href] {
|
||||
&:hover {
|
||||
&::after {
|
||||
transform: translateX(6px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ">";
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: translateX(0px);
|
||||
transition: transform cubic-bezier(0.19, 1, 0.22, 1) 1s;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
filter: drop-shadow(0px 3px 4px @inkdark);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 900px) {
|
||||
div.slide.container {
|
||||
&::after {
|
||||
width: 100%;
|
||||
transform: skew(-10deg, 0deg);
|
||||
}
|
||||
|
||||
width: @slide-width;
|
||||
}
|
||||
|
||||
.links {
|
||||
ul {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
transform: translateX(-40px) rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
img.logo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
div.slide.container {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
background-color: fade(@contentbg, 50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
.text {
|
||||
h2 {
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
.content {
|
||||
order: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.links {
|
||||
order: 2;
|
||||
text-align: center;
|
||||
margin: 6px 0;
|
||||
|
||||
ul {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
margin: 0 6px;
|
||||
|
||||
a {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideThrough {
|
||||
0%,11%,21%,31%,41%,51% {transform: translateX(-10px); opacity: 0;}
|
||||
2%,7%,12%,17%,22%,27%,32%,37%,42%,47%,52%,100% {transform: translateY(0); opacity: 1;}
|
||||
9%,19%,29%,39%,49% {transform: translateX(10px); opacity: 0;}
|
||||
0% {content: "where you game";}
|
||||
10% {content: "where you are free";}
|
||||
20% {content: "where you have fun";}
|
||||
30% {content: "where the competition starts";}
|
||||
40% {content: "the free community";}
|
||||
50% {content: "the open community";}
|
||||
60%,100% {content: "the community that empowers you";}
|
||||
}
|
||||
@ -1,231 +0,0 @@
|
||||
/*Responsive layout*/
|
||||
|
||||
@media screen and (min-width: 2420px) {
|
||||
.bg-landing img {
|
||||
-webkit-filter: blur(10px) brightness(0.4);
|
||||
filter: blur(10px) brightness(0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1620px) {
|
||||
.logo img {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
font-size: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
.branding {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-ms-flex-order: 2;
|
||||
order: 2;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo,
|
||||
.logo img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
-webkit-box-ordinal-group: 5;
|
||||
-ms-flex-order: 4;
|
||||
order: 4;
|
||||
text-align: center;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
width: 100%;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.tab-content a {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
padding: 2px 10px 0 10px;
|
||||
}
|
||||
|
||||
.tabs a {
|
||||
font-size: 12px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.tab-content h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.tab-content p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 920px) {
|
||||
.logo {
|
||||
display: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.brand {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.brand p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.brand a {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.links {
|
||||
width: 90%;
|
||||
-ms-flex-flow: wrap;
|
||||
flex-flow: wrap;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.links a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
padding: 2px 10px 0 10px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tabs a {
|
||||
font-size: 12px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.tab-content h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.tab-content p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 330px) {
|
||||
|
||||
.logo,
|
||||
.logo img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.brand p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.links a {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tabs a {
|
||||
padding: 0 4px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.tab-content h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tab-content p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
|
||||
.h-on,
|
||||
.logo,
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/*Resolution Support*/
|
||||
|
||||
.unsupported {
|
||||
background-color: #222a;
|
||||
height: 0;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
z-index: 20;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.unsupported-text {
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 260px),
|
||||
screen and (max-height: 120px) {
|
||||
.unsupported {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page {
|
||||
-webkit-filter: blur(12px);
|
||||
filter: blur(12px);
|
||||
}
|
||||
}
|
||||
105
css/rules.css
105
css/rules.css
@ -1,105 +0,0 @@
|
||||
/*Page Rules*/
|
||||
|
||||
a:hover {
|
||||
color: #e22;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
url(../res/bg.webp) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/*Text*/
|
||||
|
||||
.brand {
|
||||
min-width: 570px;
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
font-size: 72px;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.brand p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.links {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
width: 400px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
-webkit-transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
|
||||
-o-transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
|
||||
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
|
||||
}
|
||||
|
||||
/*About pop-up*/
|
||||
|
||||
.about {
|
||||
background-color: #111;
|
||||
border-radius: 10px;
|
||||
margin: 40px 0 0 0;
|
||||
min-width: 260px;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background-color: #222;
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 5px 10px 0 10px;
|
||||
}
|
||||
|
||||
.tabs a {
|
||||
background-color: #333;
|
||||
color: #eee;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px 2px 0 0;
|
||||
margin: 0 4px;
|
||||
-webkit-transition: ease-out 0.3s;
|
||||
-o-transition: ease-out 0.3s;
|
||||
transition: ease-out 0.3s;
|
||||
}
|
||||
|
||||
.tabs a:hover {
|
||||
color: #ddd;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.abt {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.close {
|
||||
background-color: #e22 !important;
|
||||
border-radius: 10px 10px 0 0 !important;
|
||||
}
|
||||
|
||||
.chosen {
|
||||
background-color: #eee !important;
|
||||
color: #222 !important;
|
||||
-webkit-box-shadow: 0 0 10px 1px #fff;
|
||||
box-shadow: 0 0 10px 1px #fff;
|
||||
}
|
||||
|
||||
.abt h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.abt p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.tab-content a {
|
||||
color: #e22;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.tab-content a:hover {
|
||||
color: #a11;
|
||||
}
|
||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 298 KiB |
84
index.html
84
index.html
@ -12,61 +12,53 @@
|
||||
<link rel="icon" sizes="222x222" href="res/logowhite.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="css/important.css">
|
||||
<link href="css/main.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body style="background-color: #711">
|
||||
<div id="bg" class="bg-landing">
|
||||
<img alt="background" data-depth="0.2" src="res/bg.jpg">
|
||||
</div>
|
||||
<div id="page" class="page flex column">
|
||||
<div class="branding flex row float">
|
||||
<div class="brand flex column justify-center">
|
||||
<h1 class="slide-top flex column h-hide">RedXen Community</h1>
|
||||
<div class="slide-left flex column">
|
||||
<p class="h-hide">The community that empowers gamers</p>
|
||||
<div class="h-hide links flex">
|
||||
<a id="abt-btn" href="#">About</a>
|
||||
<a href="https://redxen.eu/discord">Discord</a>
|
||||
<a href="https://forum.redxen.eu/">Forums</a>
|
||||
<a href="https://yagpdb.redxen.eu/">PMBot</a>
|
||||
<a href="https://status.redxen.eu/">Status</a>
|
||||
</div>
|
||||
<div id="abt" class="slide-top hide about">
|
||||
<div class="tabs flex">
|
||||
<a href="#" class="tab chosen" data-tab="tab-1">Staff</a>
|
||||
<a href="#" class="tab" data-tab="tab-2">Discord</a>
|
||||
<a href="#" class="tab" data-tab="tab-3">Contact</a>
|
||||
<div class="spacer"></div>
|
||||
<a href="#" class="close" id="close">X</a>
|
||||
</div>
|
||||
<div id="content" class="abt"></div>
|
||||
<body style="background-color:#111">
|
||||
<div class="slide container shadow">
|
||||
<div class="main">
|
||||
<div class="links">
|
||||
<span>LINKS</span>
|
||||
<ul>
|
||||
<li><a title="Soon available...">Forum</a></li>
|
||||
<li><a href="https://redxen.eu/discord">Discord</a></li>
|
||||
<li><a href="https://cloud.redxen.eu">Cloud</a></li>
|
||||
<li><a href="https://yagpdb.redxen.eu"">PMBot</a></li>
|
||||
<li><a href="https://stats.redxen.eu">Servers</a></li>
|
||||
<li><a title="Not available yet...">Status</a></li>
|
||||
<li><a href="https://steamcommunity.com/groups/redxengaming">Steam</a></li>
|
||||
<li><a href="https://github.com/RXCommunity">GitHub</a></li>
|
||||
<li><a href="https://fonts.google.com">GFonts</a></li>
|
||||
<li><a title="Not available yet...">Contact</a></li>
|
||||
<li><a title="Not available yet....">Legal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="head">
|
||||
<div class="column">
|
||||
<h1>RedXen Community</h1>
|
||||
<p>The community that empowers gamers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="logo slide-top">
|
||||
<img alt="logo" src="res/logo.svg">
|
||||
<div class="text">
|
||||
<h2 class="prst">RedXen is </h2>
|
||||
<p>Making sure to respect many of the newest standards, being transparent, <a href="https://prism-break.org">private</a> and having no censorship is what shapes us as a community.</p>
|
||||
<p>We offer a multitude of services ranging from on-premise cloud storage with full control to gameserver hosting, we have everything you would wish for.</p>
|
||||
<h2>Fast</h2>
|
||||
<p>With the help of <a href="https://cloudflare.com">CloudFlare</a>'s <a href="https://www.cloudflare.com/learning/cdn/what-is-caching/">caching technologies</a> and their <a href="https://www.cloudflare.com/learning/cdn/what-is-a-cdn/">content distribution network</a>, most of the pages are loaded in a span of a few seconds, <i title="Depends on your own internet speed">no matter where</i> you are.</p>
|
||||
<h2>Reliable</h2>
|
||||
<p>Our staff always makes sure to be as precautious as possible, making sure that your data is safe and all your services, we offer highly available hosted services in <a href="https://docs.docker.com/engine/swarm#feature-highlights">Enterprise-level containers</a> for a small price.</p>
|
||||
<p>Would it be either a small seedbox or a huge web application, we make sure that it runs un-interrupted and performs well.</p>
|
||||
<h2>Private</h2>
|
||||
<p>Your data is not sold to any third-parties, ever. The only tracked things are your IP address and countries from which you access, with no relation to your private identity. How could you believe us? The only way is knowing about how we operate our services which i myself can gladly tell you <a href="mailto:caskd@gmx.de">here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unsupported">
|
||||
<div class="unsupported-text">
|
||||
<p>Your resolution is known to cause problems!</p>
|
||||
<p>Please resize your window to a supported resolution.</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="css/rules.css"></noscript>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" defer></script>
|
||||
<script src="js/main.js" defer></script>
|
||||
<img class="logo shadow" src="res/logo.svg">
|
||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="css/responsive.css"></noscript>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="css/animations.css"></noscript>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
35
js/main.js
35
js/main.js
@ -1,35 +0,0 @@
|
||||
$(document).ready(function () {
|
||||
$("head").append(
|
||||
'<link rel="stylesheet" href="css/rules.css">' +
|
||||
'<link rel="stylesheet" href="css/responsive.css">' +
|
||||
'<link rel="stylesheet" href="css/animations.css">'
|
||||
);
|
||||
$('#abt-btn').click(function () {
|
||||
$('#abt').toggleClass('hide');
|
||||
$('.h-hide').toggleClass('h-on');
|
||||
LoadOnce();
|
||||
});
|
||||
$('#close').click(function () {
|
||||
$('#abt').addClass('hide');
|
||||
$('.h-hide').removeClass('h-on');
|
||||
});
|
||||
$('.tab').click(function () {
|
||||
var tab_id = $(this).attr('data-tab');
|
||||
$('div.tabs a').removeClass('chosen');
|
||||
$('.tab-content').addClass('hide');
|
||||
$(this).addClass('chosen');
|
||||
$('#' + tab_id).removeClass('hide');
|
||||
});
|
||||
});
|
||||
|
||||
function LoadOnce() {
|
||||
$('#content').load('ajax/about.html');
|
||||
$('.tab-content').addClass('hide');
|
||||
LoadOnce = function () {};
|
||||
}
|
||||
|
||||
var scene = document.getElementById('bg');
|
||||
var parallaxInstance = new Parallax(scene, {
|
||||
relativeInput: true,
|
||||
hoverOnly: true
|
||||
});
|
||||
0
manifest.json
Normal file → Executable file
0
manifest.json
Normal file → Executable file
BIN
res/bg.jpg
BIN
res/bg.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
BIN
res/bg.webp
BIN
res/bg.webp
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
284
res/logo.svg
284
res/logo.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
BIN
res/red-space.png
Executable file
BIN
res/red-space.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
0
robots.txt
Normal file → Executable file
0
robots.txt
Normal file → Executable file
Loading…
Reference in New Issue
Block a user