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">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="tab-content hide" id="tab-2">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="tab-content hide" id="tab-3">
|
||||
<h2>Contact Us:</h2>
|
||||
<p>You can contact the Owner/Server manager directly here:</p>
|
||||
<a href="mailto:caskd@gmx.de">Mail</a>
|
||||
<a href="https://steamcommunity.com/id/caskd">Steam</a>
|
||||
<a href="https://t.me/casKd_dev">Telegram</a>
|
||||
</div>
|
||||
<h2>Contact Us:</h2>
|
||||
<p>You can contact the Owner/Server manager directly here:</p>
|
||||
<a href="mailto:caskd@gmx.de">Mail</a>
|
||||
<a href="https://steamcommunity.com/id/caskd">Steam</a>
|
||||
<a href="https://t.me/casKd_dev">Telegram</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
121
index.html
121
index.html
|
|
@ -2,68 +2,71 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<!--Styles and meta-->
|
||||
<title>RedXen Community</title>
|
||||
<meta name="description" content="The community that empowers gamers.">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<meta name="keywords" content="rx,redxen,community,game,games,server,discord,pmbot,forum">
|
||||
<meta name="author" content="caskd">
|
||||
<meta name="theme-color" content="#d22">
|
||||
<link rel="icon" sizes="222x222" href="res/logowhite.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="css/important.css">
|
||||
<!--Styles and meta-->
|
||||
<title>RedXen Community</title>
|
||||
<meta name="description" content="The community that empowers gamers.">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<meta name="keywords" content="rx,redxen,community,game,games,server,discord,pmbot,forum">
|
||||
<meta name="author" content="caskd">
|
||||
<meta name="theme-color" content="#d22">
|
||||
<link rel="icon" sizes="222x222" href="res/logowhite.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="css/important.css">
|
||||
</head>
|
||||
|
||||
<body style="background-color: #711">
|
||||
<div id="bg" class="bg-landing">
|
||||
<img alt="background" data-depth="0.2" src="res/bg.webp">
|
||||
</div>
|
||||
<div id="page" class="page flex column">
|
||||
<div class="branding flex row float">
|
||||
<div class="brand flex column justify-center">
|
||||
<h1 class="slide-top flex column h-hide">RedXen Community</h1>
|
||||
<div class="slide-left flex column">
|
||||
<p class="h-hide">The community that empowers gamers</p>
|
||||
<div class="h-hide links flex">
|
||||
<a id="abt-btn" href="#">About</a>
|
||||
<a href="https://redxen.eu/discord">Discord</a>
|
||||
<a href="https://forum.redxen.eu/">Forums</a>
|
||||
<a href="https://yagpdb.redxen.eu/">PMBot</a>
|
||||
<a href="https://status.redxen.eu/">Status</a>
|
||||
</div>
|
||||
<div id="abt" class="slide-top hide about">
|
||||
<div class="tabs flex">
|
||||
<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-3">Contact</a>
|
||||
<div class="spacer"></div>
|
||||
<a href="#" class="close" id="close">X</a>
|
||||
</div>
|
||||
<div id="content" class="abt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="logo slide-top">
|
||||
<img alt="logo" src="res/logo.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unsupported">
|
||||
<div class="unsupported-text">
|
||||
<p>Your resolution is known to cause problems!</p>
|
||||
<p>Please resize your window to a supported resolution.</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/rules.css"></noscript>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" defer></script>
|
||||
<script src="js/main.js" defer></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<noscript><link rel="stylesheet" href="css/responsive.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="css/animations.css"></noscript>
|
||||
<div id="bg" class="bg-landing">
|
||||
<img alt="background" data-depth="0.2" src="res/bg.webp">
|
||||
</div>
|
||||
<div id="page" class="page flex column">
|
||||
<div class="branding flex row float">
|
||||
<div class="brand flex column justify-center">
|
||||
<h1 class="slide-top flex column h-hide">RedXen Community</h1>
|
||||
<div class="slide-left flex column">
|
||||
<p class="h-hide">The community that empowers gamers</p>
|
||||
<div class="h-hide links flex">
|
||||
<a id="abt-btn" href="#">About</a>
|
||||
<a href="https://redxen.eu/discord">Discord</a>
|
||||
<a href="https://forum.redxen.eu/">Forums</a>
|
||||
<a href="https://yagpdb.redxen.eu/">PMBot</a>
|
||||
<a href="https://status.redxen.eu/">Status</a>
|
||||
</div>
|
||||
<div id="abt" class="slide-top hide about">
|
||||
<div class="tabs flex">
|
||||
<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-3">Contact</a>
|
||||
<div class="spacer"></div>
|
||||
<a href="#" class="close" id="close">X</a>
|
||||
</div>
|
||||
<div id="content" class="abt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="logo slide-top">
|
||||
<img alt="logo" src="res/logo.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unsupported">
|
||||
<div class="unsupported-text">
|
||||
<p>Your resolution is known to cause problems!</p>
|
||||
<p>Please resize your window to a supported resolution.</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="css/rules.css"></noscript>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" defer></script>
|
||||
<script src="js/main.js" defer></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="css/responsive.css"></noscript>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="css/animations.css"></noscript>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
52
js/main.js
52
js/main.js
|
|
@ -1,35 +1,35 @@
|
|||
$(document).ready(function () {
|
||||
$("head").append(
|
||||
'<link rel="stylesheet" href="css/rules.css">' +
|
||||
'<link rel="stylesheet" href="css/responsive.css">' +
|
||||
'<link rel="stylesheet" href="css/animations.css">'
|
||||
);
|
||||
$('#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(
|
||||
'<link rel="stylesheet" href="css/rules.css">' +
|
||||
'<link rel="stylesheet" href="css/responsive.css">' +
|
||||
'<link rel="stylesheet" href="css/animations.css">'
|
||||
);
|
||||
$('#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
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue