Support for Older Browsers and other minor changes
This commit is contained in:
parent
5997d66ad2
commit
195c0ec175
@ -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,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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user