Light homepage
This commit is contained in:
parent
c440e22ffa
commit
df59b76440
@ -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);
|
||||
}
|
||||
}
|
||||
@ -4,27 +4,6 @@
|
||||
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,
|
||||
@ -113,8 +92,5 @@ a:link {
|
||||
|
||||
.logo img {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.unsupported {
|
||||
display: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -1,12 +1,5 @@
|
||||
/*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;
|
||||
@ -189,43 +182,3 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ a:hover {
|
||||
|
||||
body {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
url(../res/bg.webp) no-repeat center;
|
||||
url(../res/bg.png) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 104 KiB |
56
index.html
56
index.html
@ -16,57 +16,59 @@
|
||||
</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="branding flex row">
|
||||
<div class="brand flex column justify-center">
|
||||
<h1 class="slide-top flex column h-hide">RedXen Community</h1>
|
||||
<div class="slide-left flex column">
|
||||
<h1 class="flex column h-hide">RedXen Community</h1>
|
||||
<div class="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 id="abt" class="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>
|
||||
<a href="#" class="tab chosen" data-tab="tab-1">About us</a>
|
||||
</div>
|
||||
<div id="content" class="abt">
|
||||
<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" 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" 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>
|
||||
|
||||
</div>
|
||||
<div id="content" class="abt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="logo slide-top">
|
||||
<div class="logo">
|
||||
<img alt="logo" src="res/logo.svg">
|
||||
</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>
|
||||
<link rel="stylesheet" href="css/rules.css">
|
||||
<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 rel="manifest" href="/manifest.json">
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="css/responsive.css"></noscript>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="css/animations.css"></noscript>
|
||||
<link rel="stylesheet" href="css/responsive.css">
|
||||
<link rel="stylesheet" href="css/animations.css">
|
||||
</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
|
||||
});
|
||||
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 |
234
res/logo.svg
234
res/logo.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 6.5 KiB |
Loading…
Reference in New Issue
Block a user