Added sourceban and news

index.html

@@ -44,6 +44,7 @@
                         <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://sb.redxen.eu">SourceBans</a>
                         <a href="https://yagpdb.redxen.eu">PMBot</a>
                     </span>
                 </div>
@@ -76,11 +77,21 @@
                             <p>We also host a slightly customized version of YAGPDB called PMBot that can moderate your servers, you can add him to your server!</p>
                         </div>
                     </div>
+                    <div id="sb" class="category">
+                        <div class="left">
+                            <img alt="sourcebans" src="res/sb.png">
+                        </div>
+                        <div class="right">
+                            <h3>SourceBans</h3>
+                            <p>Got banned? Don't know the reason why, or want to make a complaint? You should be visiting our SourceBans page</p>
+                        </div>
+                    </div>
                     <h2>News</h2>
                     <div id="news" class="text-field">
                         <div class="row">
                             <h3>June 2018</h3>
-                            Now hosting TF2 servers<br>
+                            Added SourceBans for easier ban management<br>
+                            Now hosting TF2 &amp; CSS 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

res/header.js

@@ -1,4 +1,5 @@
 window.onscroll = function() {checkheader()};
+window.onload = function() {checkheader()};
 
 // Get the header
 var header = document.getElementById("pgHeader");

res/web.css

@@ -33,26 +33,6 @@ html {
     display: none;
     opacity: 0;
 }
-.sticky > #logo-header {
-    opacity: 1;
-    display: flex;
-}
-.sticky > #links-header {
-    display: flex;
-    height: 50px;
-    line-height: 50px;
-    flex: 1 1 0;
-    justify-content: flex-end;
-}
-.sticky > #links-header a:hover {
-    background-color: rgba(255 ,255 ,255, 0.5);
-    color: #a11;
-}
-.sticky {
-    position: fixed;
-    background-color: rgba(10, 10, 10, 0.7);
-    top: 0;
-}
 #logo-header img {
     display: flex;
     height: 40px;
@@ -76,7 +56,6 @@ html {
     font-family: 'Dosis', sans-serif;
 }
 #links-header a:hover {
-    background-color: rgba(255 ,255 ,255, 0);
     color: #a11;
 }
 .content {
@@ -117,12 +96,12 @@ html {
 #text {
     display: flex;
     flex-wrap: wrap;
-    width: 100%;
+    width: 95%;
-    max-width: 1700px;
     min-height: 100px;
     background-color: rgba(70, 70, 70, 0.4);
     color: #fff;
     align-self: center;
+    transition: ease-in-out 0.5s;
 }
 
 #text h2 {
@@ -133,8 +112,24 @@ html {
     background-color: rgba(10, 10, 10, 0.4);
     transition: ease-in-out 0.5s;
 }
-  
+/*Scrolled beyond header*/
 
+.sticky > #logo-header {
+    opacity: 1;
+    display: flex;
+}
+.sticky > #links-header {
+    display: flex;
+    height: 50px;
+    line-height: 50px;
+    flex: 1 1 0;
+    justify-content: flex-end;
+}
+.sticky {
+    position: fixed;
+    background-color: rgba(10, 10, 10, 0.7);
+    top: 0;
+}
 /*Category of descriptions*/
 .category {
     padding: 70px 0 0 0;
@@ -244,7 +239,7 @@ h2 { color: #F33;}
 
 /*Adaptive content using media queries*/
 
-@media screen and (max-width: 730px) {
+@media screen and (max-width: 720px) {
     .header {
         position: fixed;
         background-color: rgba(10, 10, 10, 0.4);
@@ -277,6 +272,9 @@ h2 { color: #F33;}
     .left, .right {
         width: 100%;
     }
+    .left {
+        min-width: 200px;
+    }
     .right {
         padding: 10px 25px 10px 25px;
     }
@@ -317,6 +315,11 @@ h2 { color: #F33;}
         padding: 0 0 10px 0;
     }
 }
+@media screen and (max-width: 1280px) {
+    #text {
+        width: 100%;
+    }
+}
 
 /*Scrollbar*/
 ::-webkit-scrollbar {