From c0f418672dc6f80a4e1f887fd541b33a93d2ec45 Mon Sep 17 00:00:00 2001 From: caskd Date: Thu, 4 Oct 2018 15:42:22 +0200 Subject: [PATCH] Better spacing and do not select text --- ajax/about.html | 20 +-- css/animations.css | 162 ++++++++++---------- css/important.css | 124 ++++++++-------- css/responsive.css | 362 +++++++++++++++++++++++++-------------------- css/rules.css | 98 ++++++------ index.html | 121 +++++++-------- js/main.js | 52 +++---- 7 files changed, 496 insertions(+), 443 deletions(-) diff --git a/ajax/about.html b/ajax/about.html index 58abb3e..d5715da 100644 --- a/ajax/about.html +++ b/ajax/about.html @@ -1,15 +1,15 @@
-

Staff:

-

Our staff is made out of multiple friendly members that help keep the community and conversations clean. If you need any help you can just call any of them.

+

Staff:

+

Our staff is made out of multiple friendly members that help keep the community and conversations clean. If you need any help you can just call any of them.

-

Discord Server:

-

Due to Discord being easy to use and reliable, we use it as a center for conversations. Join in and have a chat!

+

Discord Server:

+

Due to Discord being easy to use and reliable, we use it as a center for conversations. Join in and have a chat!

-

Contact Us:

-

You can contact the Owner/Server manager directly here:

- Mail - Steam - Telegram -
\ No newline at end of file +

Contact Us:

+

You can contact the Owner/Server manager directly here:

+ Mail + Steam + Telegram + diff --git a/css/animations.css b/css/animations.css index a95a15c..bd3c8d5 100644 --- a/css/animations.css +++ b/css/animations.css @@ -1,108 +1,116 @@ /*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; + -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; } .float:hover { - -webkit-animation-play-state: paused; - -moz-animation-play-state: paused; - -o-animation-play-state: paused; - animation-play-state: paused; + -webkit-animation-play-state: paused; + -moz-animation-play-state: paused; + -o-animation-play-state: paused; + animation-play-state: paused; } .slide-top { - -webkit-animation: slide-in-top 1s; - animation: slide-in-top 1s; + -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-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); - } + 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); - } + 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); - } + 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); - } + 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); - } + 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); - } + 0% { + opacity: 0; + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } } diff --git a/css/important.css b/css/important.css index 9356dbe..2e81ddf 100644 --- a/css/important.css +++ b/css/important.css @@ -1,112 +1,120 @@ /*Important rules*/ * { - margin: 0; - padding: 0; - font-family: "Oswald", sans-serif; + margin: 0; + padding: 0; + font-family: "Oswald", sans-serif; + -webkit-user-select: none; + /* Safari */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* IE10+/Edge */ + user-select: none; + /* Standard */ } .unsupported, .bg-landing { - top: 0; - left: 0; - width: 100%; - height: 100%; - position: fixed; - margin: 0; - min-width: 250px; - min-height: 310px; - overflow: hidden; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: fixed; + margin: 0; + min-width: 250px; + min-height: 310px; + overflow: hidden; } html, body, .page { - top: 0; - left: 0; - min-height: 100vh; - overflow: hidden; + top: 0; + left: 0; + min-height: 100vh; + overflow: hidden; } a, 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; + 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; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } .column { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: 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; + -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; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .hide { - display: none !important; - opacity: 0 !important; + display: none !important; + opacity: 0 !important; } .spacer { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; + -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; + -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 { - -webkit-filter: drop-shadow(0 10px 3px #0009); - filter: drop-shadow(0 10px 3px #0009); - margin: auto 0; - height: 100%; - z-index: 2; + -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; - padding: 0 50px; + color: #eee; + padding: 0 50px; } .logo { - padding: 0 50px; - margin: auto 0; + padding: 0 50px; + margin: auto 0; } .logo img { - height: 150px; + height: 150px; } .unsupported { - display: none; + display: none; } diff --git a/css/responsive.css b/css/responsive.css index 7259683..51e95e7 100644 --- a/css/responsive.css +++ b/css/responsive.css @@ -1,198 +1,232 @@ /*Responsive layout*/ @media screen and (min-width: 2420px) { - .bg-landing img { - -webkit-filter: blur(10px) brightness(0.4); - filter: blur(10px) brightness(0.4); - } + .bg-landing img { + -webkit-filter: blur(10px) brightness(0.4); + filter: blur(10px) brightness(0.4); + } } @media screen and (min-width: 1620px) { - .logo img { - height: 200px; - } - .brand h1 { - font-size: 96px; - width: 700px; - } + .logo img { + height: 200px; + } + + .brand h1 { + font-size: 96px; + width: 700px; + } } @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 { - height: 100px; - } - .brand { - -webkit-box-ordinal-group: 5; - -ms-flex-order: 4; - order: 4; - text-align: center; - min-width: 250px; - } - .brand h1 { - width: 100%; - font-size: 48px; - } - .links { - margin: 0 auto; - } - .about { - margin: 20px auto 0 auto; - } - .tab-content a { - padding: 0 5px; - } - .tabs { - padding: 2px 10px 0 10px; - } - .tabs a { - font-size: 12px; - border-radius: 5px 5px 0 0; - padding: 0 10px; - } - .tab-content h2 { - font-size: 18px; - } - .tab-content p { - font-size: 14px; - } + .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 { + height: 100px; + } + + .brand { + -webkit-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; + text-align: center; + min-width: 250px; + } + + .brand h1 { + width: 100%; + font-size: 48px; + } + + .links { + margin: 0 auto; + } + + .about { + margin: 20px auto 0 auto; + } + + .tab-content a { + padding: 0 5px; + } + + .tabs { + padding: 2px 10px 0 10px; + } + + .tabs a { + font-size: 12px; + border-radius: 5px 5px 0 0; + padding: 0 10px; + } + + .tab-content h2 { + font-size: 18px; + } + + .tab-content p { + font-size: 14px; + } } @media screen and (min-width: 920px) { - .logo { - display: initial !important; - } + .logo { + display: initial !important; + } } @media screen and (max-width: 640px) { - .brand { - padding: 0; - } - .brand h1 { - font-size: 32px; - } - .brand p { - font-size: 20px; - } - .brand a { - font-size: 18px; - } - .links { - width: 90%; - -ms-flex-flow: wrap; - flex-flow: wrap; - max-width: 300px; - } - .links a { - font-size: 14px; - } - .about { - margin-top: 10px; - width: 100%; - border-radius: 0; - } - .tabs { - padding: 2px 10px 0 10px; - border-radius: 0; - } - .tabs a { - font-size: 12px; - border-radius: 5px 5px 0 0; - padding: 0 10px; - } - .tab-content h2 { - font-size: 18px; - } - .tab-content p { - font-size: 14px; - } + .brand { + padding: 0; + } + + .brand h1 { + font-size: 32px; + } + + .brand p { + font-size: 20px; + } + + .brand a { + font-size: 18px; + } + + .links { + width: 90%; + -ms-flex-flow: wrap; + flex-flow: wrap; + max-width: 300px; + } + + .links a { + font-size: 14px; + } + + .about { + margin-top: 10px; + width: 100%; + border-radius: 0; + } + + .tabs { + padding: 2px 10px 0 10px; + border-radius: 0; + } + + .tabs a { + font-size: 12px; + border-radius: 5px 5px 0 0; + padding: 0 10px; + } + + .tab-content h2 { + font-size: 18px; + } + + .tab-content p { + font-size: 14px; + } } @media screen and (max-width: 330px) { - .logo, - .logo img { - height: 50px; - } - .brand h1 { - font-size: 24px; - } - .brand p { - font-size: 16px; - } - .links a { - font-size: 12px; - } - .tabs a { - padding: 0 4px; - margin: 0 2px; - } - .tab-content h2 { - font-size: 14px; - } - .tab-content p { - font-size: 12px; - } + + .logo, + .logo img { + height: 50px; + } + + .brand h1 { + font-size: 24px; + } + + .brand p { + font-size: 16px; + } + + .links a { + font-size: 12px; + } + + .tabs a { + padding: 0 4px; + margin: 0 2px; + } + + .tab-content h2 { + font-size: 14px; + } + + .tab-content p { + font-size: 12px; + } } @media screen and (max-height: 450px) { - .h-on, .logo, h1 { - display: none; - } - .about { - margin-top: 10px; - } + + .h-on, + .logo, + h1 { + display: none; + } + + .about { + margin-top: 10px; + } } /*Resolution Support*/ .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; - z-index: 20; - opacity: 0; + 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; + z-index: 20; + opacity: 0; } .unsupported-text { - margin: auto; - padding: 10px; - text-align: center; - font-size: 16px; - color: #eee; + margin: auto; + padding: 10px; + text-align: center; + font-size: 16px; + color: #eee; } @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); - } + .unsupported { + opacity: 1; + height: auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + .page { + -webkit-filter: blur(12px); + filter: blur(12px); + } } diff --git a/css/rules.css b/css/rules.css index 293fc64..ac4332e 100644 --- a/css/rules.css +++ b/css/rules.css @@ -1,108 +1,108 @@ /*Page Rules*/ a:hover { - color: #e22; + color: #e22; } body { - background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), - url(../res/bg.webp) no-repeat center; - background-size: cover; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url(../res/bg.webp) no-repeat center; + background-size: cover; } /*Text*/ .brand { - min-width: 570px; + min-width: 570px; } .brand h1 { - font-size: 72px; - line-height: 1.2em; - width: 550px; + font-size: 72px; + line-height: 1.2em; + width: 550px; } .brand p { - font-size: 20px; + font-size: 20px; } .links { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - width: 400px; - font-size: 24px; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + width: 400px; + 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; + -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; } /*About pop-up*/ .about { - background-color: #111; - border-radius: 10px; - margin: 40px 0 0 0; - min-width: 260px; - max-width: 640px; - max-height: 400px; - height: 50%; + background-color: #111; + border-radius: 10px; + margin: 40px 0 0 0; + min-width: 260px; + max-width: 640px; + max-height: 400px; + height: 50%; } .tabs { - background-color: #222; - border-radius: 10px 10px 0 0; - padding: 5px 10px 0 10px; + background-color: #222; + border-radius: 10px 10px 0 0; + padding: 5px 10px 0 10px; } .tabs a { - background-color: #333; - color: #eee; - 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; + background-color: #333; + color: #eee; + 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; } .tabs a:hover { - color: #ddd; - background-color: #444; + color: #ddd; + background-color: #444; } .abt { - padding: 20px; + padding: 20px; } .close { - background-color: #e22 !important; - border-radius: 10px 10px 0 0 !important; + background-color: #e22 !important; + border-radius: 10px 10px 0 0 !important; } .chosen { - background-color: #eee !important; - color: #222 !important; - -webkit-box-shadow: 0 0 10px 1px #fff; - box-shadow: 0 0 10px 1px #fff; + background-color: #eee !important; + color: #222 !important; + -webkit-box-shadow: 0 0 10px 1px #fff; + box-shadow: 0 0 10px 1px #fff; } .abt h2 { - font-size: 26px; + font-size: 26px; } .abt p { - font-size: 18px; + font-size: 18px; } .tab-content a { - color: #e22; - padding-right: 10px; + color: #e22; + padding-right: 10px; } .tab-content a:hover { - color: #a11; + color: #a11; } diff --git a/index.html b/index.html index 61b4d35..75569a6 100644 --- a/index.html +++ b/index.html @@ -2,68 +2,71 @@ - - RedXen Community - - - - - - - - - + + RedXen Community + + + + + + + + + -
- background -
-
-
-
-

RedXen Community

-
-

The community that empowers gamers

-
- About - Discord - Forums - PMBot - Status -
-
-
- Staff - Discord - Contact -
- X -
-
-
-
-
-
- -
-
-
-
-

Your resolution is known to cause problems!

-

Please resize your window to a supported resolution.

-
-
- - - - - - - - +
+ background +
+
+
+
+

RedXen Community

+
+

The community that empowers gamers

+
+ About + Discord + Forums + PMBot + Status +
+
+
+ Staff + Discord + Contact +
+ X +
+
+
+
+
+
+ +
+
+
+
+

Your resolution is known to cause problems!

+

Please resize your window to a supported resolution.

+
+
+ + + + + + + + diff --git a/js/main.js b/js/main.js index 6fc1406..9b21083 100644 --- a/js/main.js +++ b/js/main.js @@ -1,35 +1,35 @@ $(document).ready(function () { - $("head").append( - '' + - '' + - '' - ); - $('#abt-btn').click(function () { - $('#abt').toggleClass('hide'); - $('.h-hide').toggleClass('h-on'); - LoadOnce(); - }); - $('#close').click(function () { - $('#abt').addClass('hide'); - $('.h-hide').removeClass('h-on'); - }); - $('.tab').click(function () { - var tab_id = $(this).attr('data-tab'); - $('div.tabs a').removeClass('chosen'); - $('.tab-content').addClass('hide'); - $(this).addClass('chosen'); - $('#' + tab_id).removeClass('hide'); - }); + $("head").append( + '' + + '' + + '' + ); + $('#abt-btn').click(function () { + $('#abt').toggleClass('hide'); + $('.h-hide').toggleClass('h-on'); + LoadOnce(); + }); + $('#close').click(function () { + $('#abt').addClass('hide'); + $('.h-hide').removeClass('h-on'); + }); + $('.tab').click(function () { + var tab_id = $(this).attr('data-tab'); + $('div.tabs a').removeClass('chosen'); + $('.tab-content').addClass('hide'); + $(this).addClass('chosen'); + $('#' + tab_id).removeClass('hide'); + }); }); function LoadOnce() { - $('#content').load('ajax/about.html'); - $('.tab-content').addClass('hide'); - LoadOnce = function () {}; + $('#content').load('ajax/about.html'); + $('.tab-content').addClass('hide'); + LoadOnce = function () {}; } var scene = document.getElementById('bg'); var parallaxInstance = new Parallax(scene, { - relativeInput: true, - hoverOnly: true + relativeInput: true, + hoverOnly: true });