RedXen/Homepage
RedXen
/
Homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #3 from RXCommunity/dev 

Merge into Master and live from development
This commit is contained in:
Alex 2018-08-02 21:43:18 +02:00 committed by GitHub
parent 8b8e109480 c9c18b119d
commit 261c71f77a
5 changed files with 133 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
css/animations.css
View File

@ -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);
}
}
}

46
css/important.css
View File

@ -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;
}
}

36
css/responsive.css
View File

@ -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);
}
}
}

11
css/rules.css
View File

@ -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
View File

@ -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>