Better spacing and do not select text
This commit is contained in:
parent
0de7bd35a9
commit
c0f418672d
|
|
@ -1,15 +1,15 @@
|
||||||
<div class="tab-content" id="tab-1">
|
<div class="tab-content" id="tab-1">
|
||||||
<h2>Staff:</h2>
|
<h2>Staff:</h2>
|
||||||
<p>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.</p>
|
<p>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.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-content hide" id="tab-2">
|
<div class="tab-content hide" id="tab-2">
|
||||||
<h2>Discord Server:</h2>
|
<h2>Discord Server:</h2>
|
||||||
<p>Due to Discord being easy to use and reliable, we use it as a center for conversations. Join in and have a chat!</p>
|
<p>Due to Discord being easy to use and reliable, we use it as a center for conversations. Join in and have a chat!</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-content hide" id="tab-3">
|
<div class="tab-content hide" id="tab-3">
|
||||||
<h2>Contact Us:</h2>
|
<h2>Contact Us:</h2>
|
||||||
<p>You can contact the Owner/Server manager directly here:</p>
|
<p>You can contact the Owner/Server manager directly here:</p>
|
||||||
<a href="mailto:caskd@gmx.de">Mail</a>
|
<a href="mailto:caskd@gmx.de">Mail</a>
|
||||||
<a href="https://steamcommunity.com/id/caskd">Steam</a>
|
<a href="https://steamcommunity.com/id/caskd">Steam</a>
|
||||||
<a href="https://t.me/casKd_dev">Telegram</a>
|
<a href="https://t.me/casKd_dev">Telegram</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,108 +1,116 @@
|
||||||
/*Animations*/
|
/*Animations*/
|
||||||
|
|
||||||
.float {
|
.float {
|
||||||
-webkit-animation: float 7s infinite;
|
-webkit-animation: float 7s infinite;
|
||||||
animation: float 7s infinite;
|
animation: float 7s infinite;
|
||||||
-webkit-transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
|
-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;
|
-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;
|
transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.float:hover {
|
.float:hover {
|
||||||
-webkit-animation-play-state: paused;
|
-webkit-animation-play-state: paused;
|
||||||
-moz-animation-play-state: paused;
|
-moz-animation-play-state: paused;
|
||||||
-o-animation-play-state: paused;
|
-o-animation-play-state: paused;
|
||||||
animation-play-state: paused;
|
animation-play-state: paused;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-top {
|
.slide-top {
|
||||||
-webkit-animation: slide-in-top 1s;
|
-webkit-animation: slide-in-top 1s;
|
||||||
animation: slide-in-top 1s;
|
animation: slide-in-top 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-left {
|
.slide-left {
|
||||||
-webkit-animation: slide-in-left 1s;
|
-webkit-animation: slide-in-left 1s;
|
||||||
animation: slide-in-left 1s;
|
animation: slide-in-left 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes float {
|
@-webkit-keyframes float {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: translateY(4px);
|
-webkit-transform: translateY(4px);
|
||||||
transform: translateY(4px);
|
transform: translateY(4px);
|
||||||
}
|
}
|
||||||
50% {
|
|
||||||
-webkit-transform: translateY(-4px);
|
50% {
|
||||||
transform: translateY(-4px);
|
-webkit-transform: translateY(-4px);
|
||||||
}
|
transform: translateY(-4px);
|
||||||
100% {
|
}
|
||||||
-webkit-transform: translateY(4px);
|
|
||||||
transform: translateY(4px);
|
100% {
|
||||||
}
|
-webkit-transform: translateY(4px);
|
||||||
|
transform: translateY(4px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes float {
|
@keyframes float {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: translateY(4px);
|
-webkit-transform: translateY(4px);
|
||||||
transform: translateY(4px);
|
transform: translateY(4px);
|
||||||
}
|
}
|
||||||
50% {
|
|
||||||
-webkit-transform: translateY(-4px);
|
50% {
|
||||||
transform: translateY(-4px);
|
-webkit-transform: translateY(-4px);
|
||||||
}
|
transform: translateY(-4px);
|
||||||
100% {
|
}
|
||||||
-webkit-transform: translateY(4px);
|
|
||||||
transform: translateY(4px);
|
100% {
|
||||||
}
|
-webkit-transform: translateY(4px);
|
||||||
|
transform: translateY(4px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes slide-in-left {
|
@-webkit-keyframes slide-in-left {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-transform: translateX(-30px);
|
-webkit-transform: translateX(-30px);
|
||||||
transform: translateX(-30px);
|
transform: translateX(-30px);
|
||||||
}
|
}
|
||||||
100% {
|
|
||||||
opacity: 1;
|
100% {
|
||||||
-webkit-transform: translateX(0);
|
opacity: 1;
|
||||||
transform: translateX(0);
|
-webkit-transform: translateX(0);
|
||||||
}
|
transform: translateX(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-in-left {
|
@keyframes slide-in-left {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-transform: translateX(-30px);
|
-webkit-transform: translateX(-30px);
|
||||||
transform: translateX(-30px);
|
transform: translateX(-30px);
|
||||||
}
|
}
|
||||||
100% {
|
|
||||||
opacity: 1;
|
100% {
|
||||||
-webkit-transform: translateX(0);
|
opacity: 1;
|
||||||
transform: translateX(0);
|
-webkit-transform: translateX(0);
|
||||||
}
|
transform: translateX(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes slide-in-top {
|
@-webkit-keyframes slide-in-top {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-transform: translateY(-30px);
|
-webkit-transform: translateY(-30px);
|
||||||
transform: translateY(-30px);
|
transform: translateY(-30px);
|
||||||
}
|
}
|
||||||
100% {
|
|
||||||
opacity: 1;
|
100% {
|
||||||
-webkit-transform: translateY(0);
|
opacity: 1;
|
||||||
transform: translateY(0);
|
-webkit-transform: translateY(0);
|
||||||
}
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-in-top {
|
@keyframes slide-in-top {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-transform: translateY(-30px);
|
-webkit-transform: translateY(-30px);
|
||||||
transform: translateY(-30px);
|
transform: translateY(-30px);
|
||||||
}
|
}
|
||||||
100% {
|
|
||||||
opacity: 1;
|
100% {
|
||||||
-webkit-transform: translateY(0);
|
opacity: 1;
|
||||||
transform: translateY(0);
|
-webkit-transform: translateY(0);
|
||||||
}
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,112 +1,120 @@
|
||||||
/*Important rules*/
|
/*Important rules*/
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: "Oswald", sans-serif;
|
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,
|
.unsupported,
|
||||||
.bg-landing {
|
.bg-landing {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
min-height: 310px;
|
min-height: 310px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
.page {
|
.page {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
a,
|
||||||
a:visited,
|
a:visited,
|
||||||
a:link {
|
a:link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
-webkit-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;
|
-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;
|
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-box-direction: normal;
|
-webkit-box-direction: normal;
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
-webkit-box-orient: horizontal;
|
-webkit-box-orient: horizontal;
|
||||||
-webkit-box-direction: normal;
|
-webkit-box-direction: normal;
|
||||||
-ms-flex-direction: row;
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.justify-center {
|
.justify-center {
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
-ms-flex-pack: center;
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
opacity: 0 !important;
|
opacity: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-ms-flex: 1;
|
-ms-flex: 1;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-landing img {
|
.bg-landing img {
|
||||||
-webkit-filter: blur(5px) brightness(0.4);
|
-webkit-filter: blur(5px) brightness(0.4);
|
||||||
filter: blur(5px) brightness(0.4);
|
filter: blur(5px) brightness(0.4);
|
||||||
top: -5vw !important;
|
top: -5vw !important;
|
||||||
left: -5vw !important;
|
left: -5vw !important;
|
||||||
min-width: 110vw;
|
min-width: 110vw;
|
||||||
min-height: 110vh;
|
min-height: 110vh;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.branding {
|
.branding {
|
||||||
-webkit-filter: drop-shadow(0 10px 3px #0009);
|
-webkit-filter: drop-shadow(0 10px 3px #0009);
|
||||||
filter: drop-shadow(0 10px 3px #0009);
|
filter: drop-shadow(0 10px 3px #0009);
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo img {
|
.logo img {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unsupported {
|
.unsupported {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,198 +1,232 @@
|
||||||
/*Responsive layout*/
|
/*Responsive layout*/
|
||||||
|
|
||||||
@media screen and (min-width: 2420px) {
|
@media screen and (min-width: 2420px) {
|
||||||
.bg-landing img {
|
.bg-landing img {
|
||||||
-webkit-filter: blur(10px) brightness(0.4);
|
-webkit-filter: blur(10px) brightness(0.4);
|
||||||
filter: blur(10px) brightness(0.4);
|
filter: blur(10px) brightness(0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1620px) {
|
@media screen and (min-width: 1620px) {
|
||||||
.logo img {
|
.logo img {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
.brand h1 {
|
|
||||||
font-size: 96px;
|
.brand h1 {
|
||||||
width: 700px;
|
font-size: 96px;
|
||||||
}
|
width: 700px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 920px) {
|
@media screen and (max-width: 920px) {
|
||||||
.branding {
|
.branding {
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-box-direction: normal;
|
-webkit-box-direction: normal;
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.logo {
|
|
||||||
-webkit-box-ordinal-group: 3;
|
.logo {
|
||||||
-ms-flex-order: 2;
|
-webkit-box-ordinal-group: 3;
|
||||||
order: 2;
|
-ms-flex-order: 2;
|
||||||
-webkit-box-pack: center;
|
order: 2;
|
||||||
-ms-flex-pack: center;
|
-webkit-box-pack: center;
|
||||||
justify-content: center;
|
-ms-flex-pack: center;
|
||||||
margin: 0 auto;
|
justify-content: center;
|
||||||
}
|
margin: 0 auto;
|
||||||
.logo,
|
}
|
||||||
.logo img {
|
|
||||||
height: 100px;
|
.logo,
|
||||||
}
|
.logo img {
|
||||||
.brand {
|
height: 100px;
|
||||||
-webkit-box-ordinal-group: 5;
|
}
|
||||||
-ms-flex-order: 4;
|
|
||||||
order: 4;
|
.brand {
|
||||||
text-align: center;
|
-webkit-box-ordinal-group: 5;
|
||||||
min-width: 250px;
|
-ms-flex-order: 4;
|
||||||
}
|
order: 4;
|
||||||
.brand h1 {
|
text-align: center;
|
||||||
width: 100%;
|
min-width: 250px;
|
||||||
font-size: 48px;
|
}
|
||||||
}
|
|
||||||
.links {
|
.brand h1 {
|
||||||
margin: 0 auto;
|
width: 100%;
|
||||||
}
|
font-size: 48px;
|
||||||
.about {
|
}
|
||||||
margin: 20px auto 0 auto;
|
|
||||||
}
|
.links {
|
||||||
.tab-content a {
|
margin: 0 auto;
|
||||||
padding: 0 5px;
|
}
|
||||||
}
|
|
||||||
.tabs {
|
.about {
|
||||||
padding: 2px 10px 0 10px;
|
margin: 20px auto 0 auto;
|
||||||
}
|
}
|
||||||
.tabs a {
|
|
||||||
font-size: 12px;
|
.tab-content a {
|
||||||
border-radius: 5px 5px 0 0;
|
padding: 0 5px;
|
||||||
padding: 0 10px;
|
}
|
||||||
}
|
|
||||||
.tab-content h2 {
|
.tabs {
|
||||||
font-size: 18px;
|
padding: 2px 10px 0 10px;
|
||||||
}
|
}
|
||||||
.tab-content p {
|
|
||||||
font-size: 14px;
|
.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) {
|
@media screen and (min-width: 920px) {
|
||||||
.logo {
|
.logo {
|
||||||
display: initial !important;
|
display: initial !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 640px) {
|
@media screen and (max-width: 640px) {
|
||||||
.brand {
|
.brand {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.brand h1 {
|
|
||||||
font-size: 32px;
|
.brand h1 {
|
||||||
}
|
font-size: 32px;
|
||||||
.brand p {
|
}
|
||||||
font-size: 20px;
|
|
||||||
}
|
.brand p {
|
||||||
.brand a {
|
font-size: 20px;
|
||||||
font-size: 18px;
|
}
|
||||||
}
|
|
||||||
.links {
|
.brand a {
|
||||||
width: 90%;
|
font-size: 18px;
|
||||||
-ms-flex-flow: wrap;
|
}
|
||||||
flex-flow: wrap;
|
|
||||||
max-width: 300px;
|
.links {
|
||||||
}
|
width: 90%;
|
||||||
.links a {
|
-ms-flex-flow: wrap;
|
||||||
font-size: 14px;
|
flex-flow: wrap;
|
||||||
}
|
max-width: 300px;
|
||||||
.about {
|
}
|
||||||
margin-top: 10px;
|
|
||||||
width: 100%;
|
.links a {
|
||||||
border-radius: 0;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
.tabs {
|
|
||||||
padding: 2px 10px 0 10px;
|
.about {
|
||||||
border-radius: 0;
|
margin-top: 10px;
|
||||||
}
|
width: 100%;
|
||||||
.tabs a {
|
border-radius: 0;
|
||||||
font-size: 12px;
|
}
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
padding: 0 10px;
|
.tabs {
|
||||||
}
|
padding: 2px 10px 0 10px;
|
||||||
.tab-content h2 {
|
border-radius: 0;
|
||||||
font-size: 18px;
|
}
|
||||||
}
|
|
||||||
.tab-content p {
|
.tabs a {
|
||||||
font-size: 14px;
|
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) {
|
@media screen and (max-width: 330px) {
|
||||||
.logo,
|
|
||||||
.logo img {
|
.logo,
|
||||||
height: 50px;
|
.logo img {
|
||||||
}
|
height: 50px;
|
||||||
.brand h1 {
|
}
|
||||||
font-size: 24px;
|
|
||||||
}
|
.brand h1 {
|
||||||
.brand p {
|
font-size: 24px;
|
||||||
font-size: 16px;
|
}
|
||||||
}
|
|
||||||
.links a {
|
.brand p {
|
||||||
font-size: 12px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.tabs a {
|
|
||||||
padding: 0 4px;
|
.links a {
|
||||||
margin: 0 2px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.tab-content h2 {
|
|
||||||
font-size: 14px;
|
.tabs a {
|
||||||
}
|
padding: 0 4px;
|
||||||
.tab-content p {
|
margin: 0 2px;
|
||||||
font-size: 12px;
|
}
|
||||||
}
|
|
||||||
|
.tab-content h2 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content p {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 450px) {
|
@media screen and (max-height: 450px) {
|
||||||
.h-on, .logo, h1 {
|
|
||||||
display: none;
|
.h-on,
|
||||||
}
|
.logo,
|
||||||
.about {
|
h1 {
|
||||||
margin-top: 10px;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Resolution Support*/
|
/*Resolution Support*/
|
||||||
|
|
||||||
.unsupported {
|
.unsupported {
|
||||||
background-color: #222a;
|
background-color: #222a;
|
||||||
height: 0;
|
height: 0;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
-ms-flex-pack: center;
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
-ms-flex-line-pack: center;
|
-ms-flex-line-pack: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unsupported-text {
|
.unsupported-text {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 260px),
|
@media screen and (max-width: 260px),
|
||||||
screen and (max-height: 120px) {
|
screen and (max-height: 120px) {
|
||||||
.unsupported {
|
.unsupported {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
height: auto;
|
height: auto;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.page {
|
|
||||||
-webkit-filter: blur(12px);
|
.page {
|
||||||
filter: blur(12px);
|
-webkit-filter: blur(12px);
|
||||||
}
|
filter: blur(12px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,108 +1,108 @@
|
||||||
/*Page Rules*/
|
/*Page Rules*/
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: #e22;
|
color: #e22;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||||
url(../res/bg.webp) no-repeat center;
|
url(../res/bg.webp) no-repeat center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Text*/
|
/*Text*/
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
min-width: 570px;
|
min-width: 570px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand h1 {
|
.brand h1 {
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
width: 550px;
|
width: 550px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand p {
|
.brand p {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.links {
|
||||||
-webkit-box-pack: justify;
|
-webkit-box-pack: justify;
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
-webkit-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;
|
-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;
|
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*About pop-up*/
|
/*About pop-up*/
|
||||||
|
|
||||||
.about {
|
.about {
|
||||||
background-color: #111;
|
background-color: #111;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin: 40px 0 0 0;
|
margin: 40px 0 0 0;
|
||||||
min-width: 260px;
|
min-width: 260px;
|
||||||
max-width: 640px;
|
max-width: 640px;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
border-radius: 10px 10px 0 0;
|
border-radius: 10px 10px 0 0;
|
||||||
padding: 5px 10px 0 10px;
|
padding: 5px 10px 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs a {
|
.tabs a {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
border-radius: 20px 2px 0 0;
|
border-radius: 20px 2px 0 0;
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
-webkit-transition: ease-out 0.3s;
|
-webkit-transition: ease-out 0.3s;
|
||||||
-o-transition: ease-out 0.3s;
|
-o-transition: ease-out 0.3s;
|
||||||
transition: ease-out 0.3s;
|
transition: ease-out 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs a:hover {
|
.tabs a:hover {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
.abt {
|
.abt {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
background-color: #e22 !important;
|
background-color: #e22 !important;
|
||||||
border-radius: 10px 10px 0 0 !important;
|
border-radius: 10px 10px 0 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chosen {
|
.chosen {
|
||||||
background-color: #eee !important;
|
background-color: #eee !important;
|
||||||
color: #222 !important;
|
color: #222 !important;
|
||||||
-webkit-box-shadow: 0 0 10px 1px #fff;
|
-webkit-box-shadow: 0 0 10px 1px #fff;
|
||||||
box-shadow: 0 0 10px 1px #fff;
|
box-shadow: 0 0 10px 1px #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.abt h2 {
|
.abt h2 {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.abt p {
|
.abt p {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content a {
|
.tab-content a {
|
||||||
color: #e22;
|
color: #e22;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content a:hover {
|
.tab-content a:hover {
|
||||||
color: #a11;
|
color: #a11;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
121
index.html
121
index.html
|
|
@ -2,68 +2,71 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<!--Styles and meta-->
|
<!--Styles and meta-->
|
||||||
<title>RedXen Community</title>
|
<title>RedXen Community</title>
|
||||||
<meta name="description" content="The community that empowers gamers.">
|
<meta name="description" content="The community that empowers gamers.">
|
||||||
<link rel="shortcut icon" href="/favicon.ico">
|
<link rel="shortcut icon" href="/favicon.ico">
|
||||||
<meta name="keywords" content="rx,redxen,community,game,games,server,discord,pmbot,forum">
|
<meta name="keywords" content="rx,redxen,community,game,games,server,discord,pmbot,forum">
|
||||||
<meta name="author" content="caskd">
|
<meta name="author" content="caskd">
|
||||||
<meta name="theme-color" content="#d22">
|
<meta name="theme-color" content="#d22">
|
||||||
<link rel="icon" sizes="222x222" href="res/logowhite.png">
|
<link rel="icon" sizes="222x222" href="res/logowhite.png">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="css/important.css">
|
<link rel="stylesheet" href="css/important.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="background-color: #711">
|
<body style="background-color: #711">
|
||||||
<div id="bg" class="bg-landing">
|
<div id="bg" class="bg-landing">
|
||||||
<img alt="background" data-depth="0.2" src="res/bg.webp">
|
<img alt="background" data-depth="0.2" src="res/bg.webp">
|
||||||
</div>
|
</div>
|
||||||
<div id="page" class="page flex column">
|
<div id="page" class="page flex column">
|
||||||
<div class="branding flex row float">
|
<div class="branding flex row float">
|
||||||
<div class="brand flex column justify-center">
|
<div class="brand flex column justify-center">
|
||||||
<h1 class="slide-top flex column h-hide">RedXen Community</h1>
|
<h1 class="slide-top flex column h-hide">RedXen Community</h1>
|
||||||
<div class="slide-left flex column">
|
<div class="slide-left flex column">
|
||||||
<p class="h-hide">The community that empowers gamers</p>
|
<p class="h-hide">The community that empowers gamers</p>
|
||||||
<div class="h-hide links flex">
|
<div class="h-hide links flex">
|
||||||
<a id="abt-btn" href="#">About</a>
|
<a id="abt-btn" href="#">About</a>
|
||||||
<a href="https://redxen.eu/discord">Discord</a>
|
<a href="https://redxen.eu/discord">Discord</a>
|
||||||
<a href="https://forum.redxen.eu/">Forums</a>
|
<a href="https://forum.redxen.eu/">Forums</a>
|
||||||
<a href="https://yagpdb.redxen.eu/">PMBot</a>
|
<a href="https://yagpdb.redxen.eu/">PMBot</a>
|
||||||
<a href="https://status.redxen.eu/">Status</a>
|
<a href="https://status.redxen.eu/">Status</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="abt" class="slide-top hide about">
|
<div id="abt" class="slide-top hide about">
|
||||||
<div class="tabs flex">
|
<div class="tabs flex">
|
||||||
<a href="#" class="tab chosen" data-tab="tab-1">Staff</a>
|
<a href="#" class="tab chosen" data-tab="tab-1">Staff</a>
|
||||||
<a href="#" class="tab" data-tab="tab-2">Discord</a>
|
<a href="#" class="tab" data-tab="tab-2">Discord</a>
|
||||||
<a href="#" class="tab" data-tab="tab-3">Contact</a>
|
<a href="#" class="tab" data-tab="tab-3">Contact</a>
|
||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
<a href="#" class="close" id="close">X</a>
|
<a href="#" class="close" id="close">X</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="content" class="abt"></div>
|
<div id="content" class="abt"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
<div class="logo slide-top">
|
<div class="logo slide-top">
|
||||||
<img alt="logo" src="res/logo.svg">
|
<img alt="logo" src="res/logo.svg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="unsupported">
|
<div class="unsupported">
|
||||||
<div class="unsupported-text">
|
<div class="unsupported-text">
|
||||||
<p>Your resolution is known to cause problems!</p>
|
<p>Your resolution is known to cause problems!</p>
|
||||||
<p>Please resize your window to a supported resolution.</p>
|
<p>Please resize your window to a supported resolution.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<noscript><link rel="stylesheet" href="css/rules.css"></noscript>
|
<noscript>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
<link rel="stylesheet" href="css/rules.css"></noscript>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" defer></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||||
<script src="js/main.js" defer></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" defer></script>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
<script src="js/main.js" defer></script>
|
||||||
<link rel="manifest" href="/manifest.json">
|
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||||
<noscript><link rel="stylesheet" href="css/responsive.css"></noscript>
|
<link rel="manifest" href="/manifest.json">
|
||||||
<noscript><link rel="stylesheet" href="css/animations.css"></noscript>
|
<noscript>
|
||||||
|
<link rel="stylesheet" href="css/responsive.css"></noscript>
|
||||||
|
<noscript>
|
||||||
|
<link rel="stylesheet" href="css/animations.css"></noscript>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
52
js/main.js
52
js/main.js
|
|
@ -1,35 +1,35 @@
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$("head").append(
|
$("head").append(
|
||||||
'<link rel="stylesheet" href="css/rules.css">' +
|
'<link rel="stylesheet" href="css/rules.css">' +
|
||||||
'<link rel="stylesheet" href="css/responsive.css">' +
|
'<link rel="stylesheet" href="css/responsive.css">' +
|
||||||
'<link rel="stylesheet" href="css/animations.css">'
|
'<link rel="stylesheet" href="css/animations.css">'
|
||||||
);
|
);
|
||||||
$('#abt-btn').click(function () {
|
$('#abt-btn').click(function () {
|
||||||
$('#abt').toggleClass('hide');
|
$('#abt').toggleClass('hide');
|
||||||
$('.h-hide').toggleClass('h-on');
|
$('.h-hide').toggleClass('h-on');
|
||||||
LoadOnce();
|
LoadOnce();
|
||||||
});
|
});
|
||||||
$('#close').click(function () {
|
$('#close').click(function () {
|
||||||
$('#abt').addClass('hide');
|
$('#abt').addClass('hide');
|
||||||
$('.h-hide').removeClass('h-on');
|
$('.h-hide').removeClass('h-on');
|
||||||
});
|
});
|
||||||
$('.tab').click(function () {
|
$('.tab').click(function () {
|
||||||
var tab_id = $(this).attr('data-tab');
|
var tab_id = $(this).attr('data-tab');
|
||||||
$('div.tabs a').removeClass('chosen');
|
$('div.tabs a').removeClass('chosen');
|
||||||
$('.tab-content').addClass('hide');
|
$('.tab-content').addClass('hide');
|
||||||
$(this).addClass('chosen');
|
$(this).addClass('chosen');
|
||||||
$('#' + tab_id).removeClass('hide');
|
$('#' + tab_id).removeClass('hide');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function LoadOnce() {
|
function LoadOnce() {
|
||||||
$('#content').load('ajax/about.html');
|
$('#content').load('ajax/about.html');
|
||||||
$('.tab-content').addClass('hide');
|
$('.tab-content').addClass('hide');
|
||||||
LoadOnce = function () {};
|
LoadOnce = function () {};
|
||||||
}
|
}
|
||||||
|
|
||||||
var scene = document.getElementById('bg');
|
var scene = document.getElementById('bg');
|
||||||
var parallaxInstance = new Parallax(scene, {
|
var parallaxInstance = new Parallax(scene, {
|
||||||
relativeInput: true,
|
relativeInput: true,
|
||||||
hoverOnly: true
|
hoverOnly: true
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue