From df68dcd352c3db3850526aa9dab17db7dcc84112 Mon Sep 17 00:00:00 2001
From: caskd <caskd@gmx.de>
Date: Thu, 5 Jul 2018 18:19:19 +0200
Subject: [PATCH] Some fixes and making it look nice

---
 css/web.css | 147 +++++++++++++++++++++++++---------------------------
 index.html  |  16 +++---
 js/main.js  |  25 ++++-----
 3 files changed, 87 insertions(+), 101 deletions(-)

diff --git a/css/web.css b/css/web.css
index f4d0847..0a59ded 100644
--- a/css/web.css
+++ b/css/web.css
@@ -3,6 +3,7 @@ html {
     top: 0;
     left: 0;
     font-family: 'Oswald', sans-serif;
+    scroll-behavior: smooth;
 
     /*Fixed Background*/
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../res/bg.jpg);
@@ -18,11 +19,11 @@ html {
 
     --header-transparency: rgba(0, 0, 0, 0.7);
 
-    --image-size: 20%;
+    --image-size: 30%;
     --red: #d22;
     --dark-gray: #111;
     --gray: #151515;
-    --light-gray: #222;
+    --transparent-gray: #222E;
 
     --quick-transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
     --long-transition: cubic-bezier(0.215, 0.610, 0.355, 1) 1s;
@@ -46,27 +47,27 @@ html {
     font-size: calc(var(--desktop-height) / 2);
     margin: auto 0;
 }
-#logo-header {
+.logo-header {
     display: none;
     opacity: 0;
     margin: auto 0;
 }
-#logo-header a {
+.logo-header a {
     text-decoration: none;
     color: #fff;
 }
-#logo-header img {
+.logo-header img {
     display: flex;
     margin-left: 5px;
 }
-#links-header {
+.links-header {
     display: flex;
     flex: 1;
     margin: auto 0;
     justify-content: space-around;
     transition: var(--quick-transition);
 }
-#links-header a {
+.links-header a {
     color: #eee;
     text-align: center;
     margin: auto 1vw;
@@ -74,7 +75,7 @@ html {
     font-family: 'Dosis', sans-serif;
     transition: var(--quick-transition);
 }
-.header, #links-header, #logo-header, #logo-header img{
+.header, .links-header, .logo-header, .logo-header img{
     height: var(--desktop-height);
     font-size: calc(var(--desktop-height) / 2);
 }
@@ -88,16 +89,16 @@ html {
     font-size: calc(var(--desktop-height) / 1.75);
     height: calc(var(--desktop-height) * 1.5);
 }
-#links-header a:hover {
+.links-header a:hover {
     color: var(--red);
 }
 
 /*Sticky header*/
-.sticky > #logo-header {
+.sticky > .logo-header {
     opacity: 1;
     display: flex;
 }
-.sticky > #links-header {
+.sticky > .links-header {
     display: flex;
     flex: 1 1 0;
     justify-content: flex-end;
@@ -121,13 +122,13 @@ html {
 }
 
 /* Banner settings */
-#banner {
+.banner {
     /*Sizing*/
     height: 100vh;
     width: 100%;
     color: #fff;
     overflow: hidden;
-    font-size: 4vw;
+    font-size: calc(32px + 2vw);
     transition: var(--long-transition);
     
     /*Flexbox content*/
@@ -135,33 +136,33 @@ html {
     align-items: center; 
     display: flex;
 }
-#banner h1 {
+.banner h1 {
     filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
 }
-#banner img {
-    width: 20vw;
+.banner img {
+    width: calc(32px + 14vw);
     filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
     transition: var(--long-transition);
 }
 
 /* Text field settings */
-#text {
+.text {
     display: flex;
     flex-wrap: wrap;
-    width: 95%;
+    width: 100%;
     min-height: 100px;
-    background-color: var(--light-gray);
+    background-color: var(--dark-gray);
     color: #fff;
     align-self: center;
     transition: var(--quick-transition);
 }
 
-#text h2 {
+.text h2 {
     text-align: center;
     width: 100%;
     margin: 3vw 0;
-    font-size: 5vw;
-    line-height: 8vw;
+    font-size: calc(32px + 2vw);
+    line-height: 1.4em;
     background-color: var(--gray);
     transition: var(--quick-transition);
     color: var(--red);
@@ -175,7 +176,7 @@ html {
     margin: 0 auto;
     flex-direction: row;
     flex: 1;
-    font-size: 1.2vw;
+    font-size: calc(16px + 0.5vw);
     flex-wrap: wrap;
     align-items: flex-start;
     text-align: center;
@@ -183,43 +184,35 @@ html {
     transition: var(--quick-transition);
 }
 .row {
-    width: 45%;
+    width: 50%;
 }
 .text-field h3 { 
-    font-size: 1.2vw;
+    font-size: calc(16px + 1vw);
     margin: 0;
 }
 
 /*Category of descriptions*/
 .category {
-    margin: 1.5vw 0;
     display: flex;
     flex-wrap: nowrap;
-    width: 100%;
+    width: 90%;
+    margin: 1.5vw auto;
     overflow: hidden;
     transition: var(--quick-transition);
-    filter: saturate(0%);
     color: #fff;
-    box-shadow: 0 4px 8px -2px #000;
 }
 .category img {
-    width: 40%;
+    width: 80%;
     max-width: 900px;
     padding: 5% 5% 5% 5%;
     transition: var(--quick-transition);
 }
-.category:hover {
-    color: #c22;
-    box-shadow: 0 10px 8px -2px #000;
-    filter: saturate(100%);
-}
 
 /*Left Side settings*/
 .left {
-    background-color: var(--dark-gray);
     width: var(--image-size);
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     min-width: 200px;
     transition: var(--quick-transition);
@@ -227,17 +220,17 @@ html {
 
 .swap .left {
     order: 1;
+    justify-content: flex-start;
 }
 
 /*Right side settings*/
 .right {
-    background-color: var(--gray);
     width: calc(100% - var(--image-size));
     display: flex;
     flex-direction: column;
-    padding: 2%;
+    padding: 5%;
     justify-content: center;
-    text-align: right;
+    text-align: left;
     transition: var(--quick-transition);
 }
 .right h3 {
@@ -245,36 +238,35 @@ html {
     margin: 0;
 }
 .right p {
-    font-size: 1.5vw;
-    font-style: italic;
+    font-size: calc(16px + 0.75vw);
     font-family: 'Open Sans Condensed', sans-serif;
 }
 .swap .right {
     order: 0;
-    text-align: left;
+    text-align: right;
 }
 
 /*Webpage footer*/
-#footer {
+.footer {
     color: #fff;
     display: flex;
-    width: 100%;
+    width: 95%;
     height: auto;
-    font-size: 1vw;
+    font-size: calc(16px + 0.75vw);
     text-align: center;
     align-items: center;
     overflow: hidden;
     align-content: space-around;
-    padding: 2% 0;
+    padding: 2% 2.5%;
     background-color: var(--dark-gray);
 }
-#footer a {
+.footer a {
     color: var(--red);
     text-decoration: none;
     padding: 0 0.5vw;
 }
-#footer-r, #footer-r a {
-    font-size: 1.5vw;
+.footer-r, .footer-r a {
+    font-size: calc(16px + 0.5vw);
     padding: 0;
     font-style: italic;
 }
@@ -292,35 +284,38 @@ html {
         opacity: 0;
         display: none; 
     }
-    #links-header a {
-        font-size: 3vw;
+    .links-header a {
+        font-size: calc(16 + 1vw);
     }
-    .header, #links-header, #links-header a, #logo-header img {
+    .header, .links-header, .links-header a, .logo-header img {
         height: var(--mobile-height);
         line-height: var(--mobile-height);
     }
     .header:hover {
-        background-color: var(--header-transparency);
+        background-color: var(--dark-gray);
         height: var(--mobile-height);
     }
-    .header:hover > #links-header a {
+    .header:hover > .links-header a {
         line-height: var(--mobile-height);
-        font-size: 3vw;
+        font-size: inherit;
     }
 
     /*Banner settings*/
-    #banner {
+    .banner {
         font-size: 4vw;
         height: 300px;
     }
-    #banner img {
+    .banner img {
         width: 20vw;
     }
 
     /*Category settings*/
     .category {
         flex-wrap: wrap;
-        margin: 2vw 0;
+        margin: 3vh 0;
+        width: 100%;
+        background-color: var(--gray);
+        box-shadow: 0px 10px 10px 5px rgba(0,0,0,1);
     }
     .category img {
         width: 30%;
@@ -336,6 +331,7 @@ html {
     }
     .left {
         min-width: 200px;
+        background-color: #5551;
     }
     .swap .right {
         order: 1;
@@ -346,10 +342,10 @@ html {
         text-align: center;
     }
     .right h3 {
-        font-size: 6vw;
+        font-size: calc(16px + 3vw);
     }
     .right p {
-        font-size: 3vw;
+        font-size: calc(16px + 1vw);
         margin: 0;
     }
 
@@ -358,43 +354,40 @@ html {
         width: 100%;
         margin: 10px 0;
     }
+    .text h2 {
+        font-size: calc(16px + 7vw);
+        line-height: 1.4em;
+    }
     .text-field {
-        font-size: 3vw;
+        font-size: calc(12px + 0.75vw);
         padding: 10px;
         justify-content: space-between;
     }
     .text-field h3 {
-        font-size: 4vw;
+        font-size: calc(16px + 1.2vw);
     }
 
     /*Footer settings*/
-    #footer {
+    .footer {
         width: 90%;
         padding: 0 5%;
-        font-size: 4vw;
+        font-size: calc(16px + 1.2vw);
         height: auto;
         flex-flow: wrap;
     }
-    #footer a {
-        font-size: 4vw;
+    .footer a {
+        font-size: calc(16px + 1.2vw);
         padding: 0 7px 0 7px;
     }
-    #footer-r, #footer-r a {
-        font-size: 3vw;
+    .footer-r, .footer-r a {
+        font-size: calc(16px + 0.5vw);
         padding: 0;
     }
-    #footer-r {
+    .footer-r {
         padding: 0 0 10px 0;
     }
 }
 
-/*Fit text to whole screen*/
-@media screen and (max-width: 1280px) {
-    #text {
-        width: 100%;
-    }
-}
-
 /*Scrollbar hide*/
 ::-webkit-scrollbar {
     width: 0;
diff --git a/index.html b/index.html
index c1a8f23..b6a8f79 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
     <head>
         <!--Styles and meta-->
         <title>RedXen Community</title>
@@ -18,16 +18,16 @@
     <body>
         <div class="interface">
             <div class="content">
-               <div id="banner">
-                    <img id="logobig" src="res/logo.png" alt="logo">
+               <div class="banner">
+                    <img src="res/logo.png" alt="logo">
                     <h1>RedXen Gaming</h1>
                 </div>
                 <div class="header" id="pgHeader">
-                    <span id="logo-header">
+                    <span class="logo-header">
                         <div><a href="https://redxen.eu"><img src="res/logo.png" alt="logo"></a></div>
                         <div class="header-title"><a href="https://redxen.eu">RedXen Gaming</a></div>
                     </span>
-                    <span id="links-header">
+                    <span class="links-header">
                         <a href="https://forum.redxen.eu">Forum</a>
                         <a href="https://steamcommunity.com/groups/redxengaming">Steam</a>
                         <a href="/discord">Discord</a>
@@ -35,7 +35,7 @@
                         <a href="https://yagpdb.redxen.eu">PMBot</a>
                     </span>
                 </div>
-                <div id="text">
+                <div class="text">
                     <h2>About us</h2>
                     <div id="forum" class="category">
                         <div class="left">
@@ -92,14 +92,14 @@
                         </div>
                     </div>
                 </div>
-                <div id=footer>
+                <div class="footer">
                     <div class="row">
                         Made by caskd!<br>
                         <a href="https://steamcommunity.com/id/caskd"><i class="fab fa-steam"></i></a>
                         <a href="https://github.com/casKd-dev"><i class="fab fa-github"></i></a>
                         <a href="https://soundcloud.com/caskd"><i class="fab fa-soundcloud"></i></a>
                     </div>
-                    <div id="footer-r" class="row">
+                    <div class="footer-r row">
                         This website was made with tons of love, trial and time. If you appreciate what i have done or want to give me feedback or such, <a href="mailto:caskd@gmx.de">contact</a> me here.
                     </div>
                 </div>
diff --git a/js/main.js b/js/main.js
index 288874b..36687c0 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,18 +1,11 @@
 $(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");
-  }
+  $(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");
+    }
+  });
 });
\ No newline at end of file