Support for Older Browsers and other minor changes

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,24 +33,50 @@ 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;
@@ -59,8 +85,7 @@ a:link {
 }
 
 .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%;
@@ -68,9 +93,6 @@ a:link {
 
 .brand {
     color: #eee;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
     padding: 0 50px;
 }
 
@@ -85,4 +107,4 @@ a:link {
 
 .unsupported {
     display: none;
-}
+}

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,10 +95,11 @@
     }
     .links {
         width: 90%;
+        -ms-flex-flow: wrap;
         flex-flow: wrap;
         max-width: 350px;
     }
-    .links a { 
+    .links a {
         font-size: 14px;
     }
     .about {
@@ -147,7 +160,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;
@@ -163,13 +179,17 @@
     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,19 @@ a:hover {
 }
 
 .links {
+    display: -webkit-box;
+    display: -ms-flexbox;
     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,6 +53,8 @@ a:hover {
     background-color: #222;
     border-radius: 10px 10px 0 0;
     padding: 5px 10px 0 10px;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
 }
 
@@ -56,6 +64,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 +86,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 +105,4 @@ a:hover {
 
 .tab-content a:hover {
     color: #a11;
-}
+}

index.html

@@ -17,9 +17,9 @@
     <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">
                     <p class="h-hide">The community that empowers gamers</p>