From 9b299894dfef071ed7b277d23ccabf616557df58 Mon Sep 17 00:00:00 2001 From: caskd <caskd@gmx.de> Date: Wed, 13 Jun 2018 17:36:29 +0200 Subject: [PATCH] Added functionality Added jQuery for performance improvement Moved DOM elements by priority Moved header below banner Swapped sides for easier css adapting --- index.html | 55 ++++++++++++++++++++++++++++++--------------------- res/header.js | 16 +++++++++++++++ res/web.css | 32 +++++++++++++++++++++++++----- 3 files changed, 75 insertions(+), 28 deletions(-) create mode 100644 res/header.js diff --git a/index.html b/index.html index 737856c..6af287c 100644 --- a/index.html +++ b/index.html @@ -1,44 +1,51 @@ <html> <head> - <!--Styles and such--> + <!--Styles and meta--> + <title>RedXen Community</title> <link rel="stylesheet" href="res/web.css"> + <meta name="author" content="caskd"> + <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> <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"> - <!--Meta and tracking--> - <meta name="author" content="caskd"> - <meta charset="UTF-8"> - <meta name="description" content="The homepage of the RedXen Community"> - <title>RedXen Community</title> - <!-- Global site tag (gtag.js) - Google Analytics --> - <script async src="https://www.googletagmanager.com/gtag/js?id=UA-120536610-1"></script> + <!-- On DOM load --> <script> - window.dataLayer = window.dataLayer || []; - function gtag(){dataLayer.push(arguments);} - gtag('js', new Date()); - gtag('config', 'UA-120536610-1'); + $(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> <body> <div class="interface"> - <div class="header"> - <span id="logo-header"> - <img src="res/logo.png" alt="logo"> - </span> - <span id="links-header"> - <a href="https://forum.redxen.eu">Forum</a> - <a href="https://steamcommunity.com/groups/redxengaming">Steam</a> - <a href="/discord">Discord</a> - <a href="https://yagpdb.redxen.eu">PMBot</a> - </span> - </div> <div class="content"> <div id="banner"> <img id="logobig" src="res/logo.png" alt="logo"> <h1>RedXen Gaming</h1> </div> + <div class="header" id="myHeader"> + <span id="logo-header"> + <img src="res/logo.png" alt="logo"> + </span> + <span id="links-header"> + <a href="https://forum.redxen.eu">Forum</a> + <a href="https://steamcommunity.com/groups/redxengaming">Steam</a> + <a href="/discord">Discord</a> + <a href="https://yagpdb.redxen.eu">PMBot</a> + </span> + </div> <div id="text"> <h2>About us</h2> <div id="forum" class="category"> @@ -72,6 +79,8 @@ <div id="news" class="text-field"> <div class="row"> <h3>June 2018</h3> + Now hosting TF2 servers<br> + Forums are stable and ready to use<br> Created this webpage and added meta tags for SEO's<br> Now hosting server on DigitalOcean with improved bandwidth </div> diff --git a/res/header.js b/res/header.js new file mode 100644 index 0000000..8e3d1f7 --- /dev/null +++ b/res/header.js @@ -0,0 +1,16 @@ +window.onscroll = function() {checkheader()}; + +// Get the header +var header = document.getElementById("myHeader"); + +// Get the offset position of the navbar +var sticky = header.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"); + } +} \ No newline at end of file diff --git a/res/web.css b/res/web.css index d8174d7..f2f3d17 100644 --- a/res/web.css +++ b/res/web.css @@ -9,14 +9,20 @@ html { .header { height: 50px; width: 100%; - top: 0; left: 0; - position: fixed; - background-color: rgba(10, 10, 10, 0.4); + background-color: rgba(30, 30, 30, 0.4); z-index: 20; display: flex; overflow: hidden; } +.sticky { + position: fixed; + background-color: rgba(10, 10, 10, 0.4); + top: 0; +} +.sticky + .content { + padding-top: 50px; +} #logo-header img { display: flex; height: 40px; @@ -210,7 +216,8 @@ h2 { color: #F33;} @media screen and (max-width: 730px) { .header { - height: 50px; + position: fixed; + background-color: rgba(10, 10, 10, 0.4); } #banner { font-size: 20px; @@ -225,6 +232,7 @@ h2 { color: #F33;} } .category { flex-wrap: wrap; + padding: 30px 0 0 0; } .category img { width: 30%; @@ -247,7 +255,7 @@ h2 { color: #F33;} margin: 10px 0; } .text-field { - font-size: 10px; + font-size: 15px; padding: 10px; justify-content: space-between; } @@ -271,4 +279,18 @@ h2 { color: #F33;} #footer-r { padding: 0 0 10px 0; } +} + +/*Scrollbar*/ +::-webkit-scrollbar { + width: 5px; +} +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.5); +} +::-webkit-scrollbar-thumb { + background: rgba(255 ,255 ,255, 0.2); +} +::-webkit-scrollbar-thumb:hover { + background: rgba(255 ,255 ,255, 0.5); } \ No newline at end of file