Fixed bugs, improved content responsiveness etc.
This commit is contained in:
parent
002c9b3fcb
commit
461ec1b25b
20
index.html
20
index.html
@ -7,27 +7,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="The homepage of the RedXen Community">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="res/jquery-3.3.1.min.js"></script>
|
||||
<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=Open+Sans+Condensed:300" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<!-- On DOM load -->
|
||||
<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>
|
||||
<script src="res/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="interface">
|
||||
@ -39,7 +25,7 @@
|
||||
<div class="header" id="pgHeader">
|
||||
<span id="logo-header">
|
||||
<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 id="links-header">
|
||||
<a href="https://forum.redxen.eu">Forum</a>
|
||||
|
||||
@ -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
2
res/jquery-3.3.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
18
res/main.js
Normal file
18
res/main.js
Normal 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
66
res/web.css
@ -7,9 +7,9 @@ html {
|
||||
min-height: 300px;
|
||||
|
||||
/*Global Variables*/
|
||||
--desktop-height: 5vh;
|
||||
--mobile-height: 3vh;
|
||||
--header-transparency: rgba(0, 0, 0, 0.7);
|
||||
--desktop-height: calc(20px + 2vw);
|
||||
--mobile-height: calc(10px + 2vw);
|
||||
--header-transparency: rgba( 0, 0, 0, 0.7);
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
@ -19,45 +19,55 @@ html {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
transition: ease-out 0.5s;
|
||||
transition: ease-out 0.2s;
|
||||
}
|
||||
.header:hover {
|
||||
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 {
|
||||
width: 100%;
|
||||
line-height: 5vh;
|
||||
font-size: auto;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
height: 5vh;
|
||||
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);
|
||||
line-height: var(--desktop-height);
|
||||
font-size: calc(var(--desktop-height) / 2);
|
||||
}
|
||||
#logo-header {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
#logo-header a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
#logo-header img {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#links-header {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
flex: 1;
|
||||
margin: auto 0;
|
||||
justify-content: space-around;
|
||||
transition: ease-out 0.4s;
|
||||
}
|
||||
#links-header a {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
margin-right: 1vw;
|
||||
margin-left: 1vw;
|
||||
margin: auto 1vw;
|
||||
text-decoration: none;
|
||||
font-size: 2.5vh;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
transition: ease-out 0.2s;
|
||||
}
|
||||
#links-header a:hover {
|
||||
color: #a11;
|
||||
@ -79,7 +89,7 @@ html {
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
font-size: 4vw;
|
||||
transition: ease-in-out 0.7s;
|
||||
transition: ease-out 0.4s;
|
||||
|
||||
/*Flexbox content*/
|
||||
justify-content: center;
|
||||
@ -98,7 +108,7 @@ html {
|
||||
#banner img {
|
||||
width: 20vw;
|
||||
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
|
||||
transition: ease-in-out 0.7s;
|
||||
transition: ease-out 0.4s;
|
||||
}
|
||||
#text {
|
||||
display: flex;
|
||||
@ -108,7 +118,7 @@ html {
|
||||
background-color: rgba(70, 70, 70, 0.4);
|
||||
color: #fff;
|
||||
align-self: center;
|
||||
transition: ease-in-out 0.5s;
|
||||
transition: ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
#text h2 {
|
||||
@ -118,7 +128,7 @@ html {
|
||||
font-size: 5vw;
|
||||
line-height: 8vw;
|
||||
background-color: rgba(10, 10, 10, 0.4);
|
||||
transition: ease-in-out 0.5s;
|
||||
transition: ease-in-out 0.3s;
|
||||
color: #F33;
|
||||
}
|
||||
/*Scrolled beyond header*/
|
||||
@ -129,8 +139,6 @@ html {
|
||||
}
|
||||
.sticky > #links-header {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
flex: 1 1 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@ -146,7 +154,7 @@ html {
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
transition: ease-in 200ms;
|
||||
transition: ease-in 0.2s;
|
||||
filter: saturate(0%);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 8px -2px #000;
|
||||
@ -178,7 +186,7 @@ html {
|
||||
align-items: flex-start;
|
||||
text-align: center;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
transition: ease-in-out 0.5s;
|
||||
transition: ease-in-out 0.2s;
|
||||
}
|
||||
.row {
|
||||
width: 45%;
|
||||
@ -233,7 +241,7 @@ html {
|
||||
display: flex;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
font-size: vw;
|
||||
font-size: 1vw;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
@ -256,11 +264,18 @@ html {
|
||||
/*Adaptive content using media queries*/
|
||||
@media screen and (max-width: 720px) {
|
||||
.header {
|
||||
position: fixed;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
background-color: rgba(10, 10, 10, 0.4);
|
||||
}
|
||||
.header:hover {
|
||||
background-color: var(--header-transparency);
|
||||
height: var(--mobile-height);
|
||||
}
|
||||
.header:hover > #links-header a {
|
||||
line-height: var(--mobile-height);
|
||||
font-size: 3vw;
|
||||
}
|
||||
.header-title {
|
||||
opacity: 0;
|
||||
@ -275,7 +290,7 @@ html {
|
||||
height: 300px;
|
||||
}
|
||||
#links-header a {
|
||||
font-size: 1vh;
|
||||
font-size: 3vw;
|
||||
}
|
||||
#banner img {
|
||||
width: 20vw;
|
||||
@ -299,6 +314,7 @@ html {
|
||||
}
|
||||
.swap .right {
|
||||
order: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.right {
|
||||
padding: 10px 25px 10px 25px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user