From 195c0ec1755dc63b6fd69025cd513903ddee6f17 Mon Sep 17 00:00:00 2001 From: caskd Date: Thu, 2 Aug 2018 12:44:20 +0200 Subject: [PATCH 1/3] Support for Older Browsers and other minor changes --- css/animations.css | 55 +++++++++++++++++++++++++++++++++++++++++++++- css/important.css | 44 +++++++++++++++++++++++++++---------- css/responsive.css | 28 +++++++++++++++++++---- css/rules.css | 13 ++++++++++- index.html | 6 ++--- 5 files changed, 126 insertions(+), 20 deletions(-) diff --git a/css/animations.css b/css/animations.css index 4f7041e..4cdff2f 100644 --- a/css/animations.css +++ b/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); } -} \ No newline at end of file +} diff --git a/css/important.css b/css/important.css index 5ef9749..35744ec 100644 --- a/css/important.css +++ b/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; -} \ No newline at end of file +} diff --git a/css/responsive.css b/css/responsive.css index 9ad1fe6..a896d82 100644 --- a/css/responsive.css +++ b/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); } -} \ No newline at end of file +} diff --git a/css/rules.css b/css/rules.css index 82afacf..1d357ae 100644 --- a/css/rules.css +++ b/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; -} \ No newline at end of file +} diff --git a/index.html b/index.html index c01e9ce..09dc0f7 100644 --- a/index.html +++ b/index.html @@ -17,9 +17,9 @@
background
-
-
-
+
+
+

RedXen Community

The community that empowers gamers

From 95916f1b63c536ce1741766b02099429687d2502 Mon Sep 17 00:00:00 2001 From: caskd Date: Thu, 2 Aug 2018 12:54:09 +0200 Subject: [PATCH 2/3] Make sure the content is over the background. --- css/important.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css/important.css b/css/important.css index 35744ec..9356dbe 100644 --- a/css/important.css +++ b/css/important.css @@ -82,6 +82,7 @@ a:link { left: -5vw !important; min-width: 110vw; min-height: 110vh; + z-index: 1; } .branding { @@ -89,6 +90,7 @@ a:link { filter: drop-shadow(0 10px 3px #0009); margin: auto 0; height: 100%; + z-index: 2; } .brand { From c6e55467de0f27f0b7ce9ea36380503d901aac44 Mon Sep 17 00:00:00 2001 From: caskd Date: Thu, 2 Aug 2018 21:42:13 +0200 Subject: [PATCH 3/3] Small tweaks --- css/responsive.css | 8 ++++++-- css/rules.css | 6 ------ index.html | 6 +++--- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/css/responsive.css b/css/responsive.css index a896d82..8089d2a 100644 --- a/css/responsive.css +++ b/css/responsive.css @@ -122,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; @@ -175,7 +179,7 @@ margin: auto; padding: 10px; text-align: center; - font-size: 12px; + font-size: 16px; color: #eee; } diff --git a/css/rules.css b/css/rules.css index 1d357ae..4721add 100644 --- a/css/rules.css +++ b/css/rules.css @@ -21,9 +21,6 @@ a:hover { } .links { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; @@ -53,9 +50,6 @@ a:hover { background-color: #222; border-radius: 10px 10px 0 0; padding: 5px 10px 0 10px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; } .tabs a { diff --git a/index.html b/index.html index 09dc0f7..08109b2 100644 --- a/index.html +++ b/index.html @@ -21,9 +21,9 @@

RedXen Community

-
+

The community that empowers gamers

-
+
About Discord Sourcebans @@ -32,7 +32,7 @@ Status