RedXen/Homepage
RedXen
/
Homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed bugs, improved content responsiveness etc.

This commit is contained in:
Alex D. 2018-06-30 18:30:25 +02:00
parent 002c9b3fcb
commit 461ec1b25b
5 changed files with 64 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -7,27 +7,13 @@
<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">
<meta name="description" content="The homepage of the RedXen Community"> <meta name="description" content="The homepage of the RedXen Community">
<script <script src="res/jquery-3.3.1.min.js"></script>
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" href="/favicon.ico">
<!-- On DOM load --> <script src="res/main.js"></script>
<script>
$(document).ready(function() {
$.getScript("res/header.js");
$.getScript("https://www.googletagmanager.com/gtag/js?id=UA-120536610-1");
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-120536610-1');
});
</script>
</head> </head>
<body> <body>
<div class="interface"> <div class="interface">
@ -39,7 +25,7 @@
<div class="header" id="pgHeader"> <div class="header" id="pgHeader">
<span id="logo-header"> <span id="logo-header">
<div><a href="https://redxen.eu"><img src="res/logo.png" alt="logo"></a></div> <div><a href="https://redxen.eu"><img src="res/logo.png" alt="logo"></a></div>
<div class="header-title">RedXen Gaming</div> <div class="header-title"><a href="https://redxen.eu">RedXen Gaming</a></div>
</span> </span>
<span id="links-header"> <span id="links-header">
<a href="https://forum.redxen.eu">Forum</a> <a href="https://forum.redxen.eu">Forum</a>

18
res/header.js
View File

@ -1,18 +0,0 @@
window.onscroll = function() {checkheader()};
window.onload = function() {checkheader()};
// Get the header
var header = document.getElementById("pgHeader");
var banner = document.getElementById("text");
// Get the offset position of the navbar
var sticky = banner.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function checkheader() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}

2
res/jquery-3.3.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

18
res/main.js Normal file
View File

@ -0,0 +1,18 @@
$(document).ready(function() {
/* Load Google Analytics */
$.getScript("https://www.googletagmanager.com/gtag/js?id=UA-120536610-1");
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-120536610-1');
});
$(document).scroll(function() {
/* On scroll check if scrolled beyond 100% */
var header = document.getElementById("pgHeader");
if (window.pageYOffset >= $(window).height()) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
});

66
res/web.css
View File

@ -7,9 +7,9 @@ html {
min-height: 300px; min-height: 300px;
/*Global Variables*/ /*Global Variables*/
--desktop-height: 5vh; --desktop-height: calc(20px + 2vw);
--mobile-height: 3vh; --mobile-height: calc(10px + 2vw);
--header-transparency: rgba(0, 0, 0, 0.7); --header-transparency: rgba( 0, 0, 0, 0.7);
} }
.header { .header {
width: 100%; width: 100%;
@ -19,45 +19,55 @@ html {
display: flex; display: flex;
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
transition: ease-out 0.5s; transition: ease-out 0.2s;
} }
.header:hover { .header:hover {
background-color: var(--header-transparency); background-color: var(--header-transparency);
height: calc(var(--desktop-height) * 1.5);
}
.header:hover > .header-title {
font-size: calc(var(--desktop-height) / 1.75);
height: calc(var(--desktop-height) * 1.5);
} }
.header-title { .header-title {
width: 100%; width: 100%;
line-height: 5vh;
font-size: auto;
color: #fff; color: #fff;
display: flex; display: flex;
height: 5vh;
flex-wrap: nowrap; flex-wrap: nowrap;
font-size: 3vh; font-size: calc(var(--desktop-height) / 2);
margin: auto 0;
} }
.header, #links-header, #links-header a, #logo-header img { .header, #links-header, #logo-header, #logo-header img{
height: var(--desktop-height); height: var(--desktop-height);
line-height: var(--desktop-height); font-size: calc(var(--desktop-height) / 2);
} }
#logo-header { #logo-header {
display: none; display: none;
opacity: 0; opacity: 0;
margin: auto 0;
}
#logo-header a {
text-decoration: none;
color: #fff;
} }
#logo-header img { #logo-header img {
display: flex; display: flex;
margin-left: 5px;
} }
#links-header { #links-header {
display: flex; display: flex;
flex: 1 1 0; flex: 1;
margin: auto 0;
justify-content: space-around; justify-content: space-around;
transition: ease-out 0.4s;
} }
#links-header a { #links-header a {
color: #eee; color: #eee;
text-align: center; text-align: center;
margin-right: 1vw; margin: auto 1vw;
margin-left: 1vw;
text-decoration: none; text-decoration: none;
font-size: 2.5vh;
font-family: 'Dosis', sans-serif; font-family: 'Dosis', sans-serif;
transition: ease-out 0.2s;
} }
#links-header a:hover { #links-header a:hover {
color: #a11; color: #a11;
@ -79,7 +89,7 @@ html {
color: #fff; color: #fff;
overflow: hidden; overflow: hidden;
font-size: 4vw; font-size: 4vw;
transition: ease-in-out 0.7s; transition: ease-out 0.4s;
/*Flexbox content*/ /*Flexbox content*/
justify-content: center; justify-content: center;
@ -98,7 +108,7 @@ html {
#banner img { #banner img {
width: 20vw; width: 20vw;
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7)); filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
transition: ease-in-out 0.7s; transition: ease-out 0.4s;
} }
#text { #text {
display: flex; display: flex;
@ -108,7 +118,7 @@ html {
background-color: rgba(70, 70, 70, 0.4); background-color: rgba(70, 70, 70, 0.4);
color: #fff; color: #fff;
align-self: center; align-self: center;
transition: ease-in-out 0.5s; transition: ease-in-out 0.3s;
} }
#text h2 { #text h2 {
@ -118,7 +128,7 @@ html {
font-size: 5vw; font-size: 5vw;
line-height: 8vw; line-height: 8vw;
background-color: rgba(10, 10, 10, 0.4); background-color: rgba(10, 10, 10, 0.4);
transition: ease-in-out 0.5s; transition: ease-in-out 0.3s;
color: #F33; color: #F33;
} }
/*Scrolled beyond header*/ /*Scrolled beyond header*/
@ -129,8 +139,6 @@ html {
} }
.sticky > #links-header { .sticky > #links-header {
display: flex; display: flex;
height: 50px;
line-height: 50px;
flex: 1 1 0; flex: 1 1 0;
justify-content: flex-end; justify-content: flex-end;
} }
@ -146,7 +154,7 @@ html {
flex-wrap: nowrap; flex-wrap: nowrap;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
transition: ease-in 200ms; transition: ease-in 0.2s;
filter: saturate(0%); filter: saturate(0%);
color: #fff; color: #fff;
box-shadow: 0 4px 8px -2px #000; box-shadow: 0 4px 8px -2px #000;
@ -178,7 +186,7 @@ html {
align-items: flex-start; align-items: flex-start;
text-align: center; text-align: center;
font-family: 'Dosis', sans-serif; font-family: 'Dosis', sans-serif;
transition: ease-in-out 0.5s; transition: ease-in-out 0.2s;
} }
.row { .row {
width: 45%; width: 45%;
@ -233,7 +241,7 @@ html {
display: flex; display: flex;
width: 95%; width: 95%;
height: auto; height: auto;
font-size: vw; font-size: 1vw;
text-align: center; text-align: center;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
@ -256,11 +264,18 @@ html {
/*Adaptive content using media queries*/ /*Adaptive content using media queries*/
@media screen and (max-width: 720px) { @media screen and (max-width: 720px) {
.header { .header {
position: fixed; position: relative;
margin-top: 5px;
margin-bottom: 5px;
background-color: rgba(10, 10, 10, 0.4); background-color: rgba(10, 10, 10, 0.4);
} }
.header:hover { .header:hover {
background-color: var(--header-transparency); background-color: var(--header-transparency);
height: var(--mobile-height);
}
.header:hover > #links-header a {
line-height: var(--mobile-height);
font-size: 3vw;
} }
.header-title { .header-title {
opacity: 0; opacity: 0;
@ -275,7 +290,7 @@ html {
height: 300px; height: 300px;
} }
#links-header a { #links-header a {
font-size: 1vh; font-size: 3vw;
} }
#banner img { #banner img {
width: 20vw; width: 20vw;
@ -299,6 +314,7 @@ html {
} }
.swap .right { .swap .right {
order: 1; order: 1;
text-align: center;
} }
.right { .right {
padding: 10px 25px 10px 25px; padding: 10px 25px 10px 25px;