Merge pull request #3 from RXCommunity/dev
Merge into Master and live from development
This commit is contained in:
Alex
GitHub
commit
261c71f77a
@ -1,48 +1,101 @@
|
||||
/*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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,44 +33,68 @@ 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;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-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;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
@ -85,4 +109,4 @@ a:link {
|
||||
|
||||
.unsupported {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
/*Responsive layout*/
|
||||
|
||||
@media screen and (min-width: 2420px) {
|
||||
.bg-landing img {
|
||||
-webkit-filter: blur(10px) brightness(0.4);
|
||||
filter: blur(10px) brightness(0.4);
|
||||
}
|
||||
}
|
||||
@ -17,17 +19,27 @@
|
||||
|
||||
@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 {
|
||||
.logo,
|
||||
.logo img {
|
||||
height: 100px;
|
||||
}
|
||||
.brand {
|
||||
-webkit-box-ordinal-group: 5;
|
||||
-ms-flex-order: 4;
|
||||
order: 4;
|
||||
text-align: center;
|
||||
min-width: 250px;
|
||||
@ -83,10 +95,11 @@
|
||||
}
|
||||
.links {
|
||||
width: 90%;
|
||||
-ms-flex-flow: wrap;
|
||||
flex-flow: wrap;
|
||||
max-width: 350px;
|
||||
}
|
||||
.links a {
|
||||
.links a {
|
||||
font-size: 14px;
|
||||
}
|
||||
.about {
|
||||
@ -109,11 +122,15 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 330px) {
|
||||
.logo,
|
||||
.logo img {
|
||||
height: 50px;
|
||||
}
|
||||
.brand h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.brand p {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.links a {
|
||||
font-size: 12px;
|
||||
@ -147,7 +164,10 @@
|
||||
.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;
|
||||
@ -159,17 +179,21 @@
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 260px), screen and (max-height: 120px) {
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,13 +21,16 @@ a:hover {
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
width: 450px;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -47,7 +50,6 @@ a:hover {
|
||||
background-color: #222;
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 5px 10px 0 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tabs a {
|
||||
@ -56,6 +58,8 @@ a:hover {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -76,6 +80,7 @@ a:hover {
|
||||
.chosen {
|
||||
background-color: #eee !important;
|
||||
color: #222 !important;
|
||||
-webkit-box-shadow: 0 0 10px 1px #fff;
|
||||
box-shadow: 0 0 10px 1px #fff;
|
||||
}
|
||||
|
||||
@ -94,4 +99,4 @@ a:hover {
|
||||
|
||||
.tab-content a:hover {
|
||||
color: #a11;
|
||||
}
|
||||
}
|
||||
|
||||
12
index.html
12
index.html
@ -17,13 +17,13 @@
|
||||
<div id="bg" class="bg-landing">
|
||||
<img alt="background" data-depth="0.2" src="res/bg.webp">
|
||||
</div>
|
||||
<div id="page" class="page">
|
||||
<div class="branding float">
|
||||
<div class="brand">
|
||||
<div id="page" class="page flex column">
|
||||
<div class="branding flex row float">
|
||||
<div class="brand flex column justify-center">
|
||||
<h1 class="slide-top">RedXen Community</h1>
|
||||
<div class="slide-left">
|
||||
<div class="slide-left flex column">
|
||||
<p class="h-hide">The community that empowers gamers</p>
|
||||
<div class="h-hide links">
|
||||
<div class="h-hide links flex">
|
||||
<a id="abt-btn" href="#">About</a>
|
||||
<a href="https://redxen.eu/discord">Discord</a>
|
||||
<a href="https://sb.redxen.eu/">Sourcebans</a>
|
||||
@ -32,7 +32,7 @@
|
||||
<a href="https://status.redxen.eu/">Status</a>
|
||||
</div>
|
||||
<div id="abt" class="slide-top hide about">
|
||||
<div class="tabs">
|
||||
<div class="tabs flex">
|
||||
<a href="#" class="tab chosen" data-tab="tab-1">Staff</a>
|
||||
<a href="#" class="tab" data-tab="tab-2">Servers</a>
|
||||
<a href="#" class="tab" data-tab="tab-3">Discord</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user