Merge pull request #3 from RXCommunity/dev

Merge into Master and live from development

css/animations.css

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

css/important.css

@@ -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;
+    -webkit-filter: drop-shadow(0 10px 3px #0009);
-    flex-direction: row;
     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;
 }
 

css/responsive.css

@@ -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,6 +95,7 @@
     }
     .links {
         width: 90%;
+        -ms-flex-flow: wrap;
         flex-flow: wrap;
         max-width: 350px;
     }
@@ -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);
     }
 }

css/rules.css

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

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 id="page" class="page flex column">
-        <div class="branding float">
+        <div class="branding flex row float">
-            <div class="brand">
+            <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>