Newest version changes
|
@ -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;
|
|
||||||
}
|
|
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
@ -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
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 298 KiB |
84
index.html
|
@ -12,61 +12,53 @@
|
||||||
<link rel="icon" sizes="222x222" href="res/logowhite.png">
|
<link rel="icon" sizes="222x222" href="res/logowhite.png">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="css/important.css">
|
<link href="css/main.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="background-color: #711">
|
<body style="background-color:#111">
|
||||||
<div id="bg" class="bg-landing">
|
<div class="slide container shadow">
|
||||||
<img alt="background" data-depth="0.2" src="res/bg.jpg">
|
<div class="main">
|
||||||
</div>
|
<div class="links">
|
||||||
<div id="page" class="page flex column">
|
<span>LINKS</span>
|
||||||
<div class="branding flex row float">
|
<ul>
|
||||||
<div class="brand flex column justify-center">
|
<li><a title="Soon available...">Forum</a></li>
|
||||||
<h1 class="slide-top flex column h-hide">RedXen Community</h1>
|
<li><a href="https://redxen.eu/discord">Discord</a></li>
|
||||||
<div class="slide-left flex column">
|
<li><a href="https://cloud.redxen.eu">Cloud</a></li>
|
||||||
<p class="h-hide">The community that empowers gamers</p>
|
<li><a href="https://yagpdb.redxen.eu"">PMBot</a></li>
|
||||||
<div class="h-hide links flex">
|
<li><a href="https://stats.redxen.eu">Servers</a></li>
|
||||||
<a id="abt-btn" href="#">About</a>
|
<li><a title="Not available yet...">Status</a></li>
|
||||||
<a href="https://redxen.eu/discord">Discord</a>
|
<li><a href="https://steamcommunity.com/groups/redxengaming">Steam</a></li>
|
||||||
<a href="https://forum.redxen.eu/">Forums</a>
|
<li><a href="https://github.com/RXCommunity">GitHub</a></li>
|
||||||
<a href="https://yagpdb.redxen.eu/">PMBot</a>
|
<li><a href="https://fonts.google.com">GFonts</a></li>
|
||||||
<a href="https://status.redxen.eu/">Status</a>
|
<li><a title="Not available yet...">Contact</a></li>
|
||||||
</div>
|
<li><a title="Not available yet....">Legal</a></li>
|
||||||
<div id="abt" class="slide-top hide about">
|
</ul>
|
||||||
<div class="tabs flex">
|
</div>
|
||||||
<a href="#" class="tab chosen" data-tab="tab-1">Staff</a>
|
<div class="content">
|
||||||
<a href="#" class="tab" data-tab="tab-2">Discord</a>
|
<div class="head">
|
||||||
<a href="#" class="tab" data-tab="tab-3">Contact</a>
|
<div class="column">
|
||||||
<div class="spacer"></div>
|
<h1>RedXen Community</h1>
|
||||||
<a href="#" class="close" id="close">X</a>
|
<p>The community that empowers gamers</p>
|
||||||
</div>
|
|
||||||
<div id="content" class="abt"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="text">
|
||||||
<div class="spacer"></div>
|
<h2 class="prst">RedXen is </h2>
|
||||||
<div class="logo slide-top">
|
<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>
|
||||||
<img alt="logo" src="res/logo.svg">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="unsupported">
|
<img class="logo shadow" src="res/logo.svg">
|
||||||
<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>
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||||
<link rel="manifest" href="/manifest.json">
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
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
|
|
||||||
});
|
|
BIN
res/bg.jpg
Before Width: | Height: | Size: 127 KiB |
BIN
res/bg.webp
Before Width: | Height: | Size: 127 KiB |
284
res/logo.svg
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 3.8 MiB |