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