Updated style; Added tracking acknowledgement banner.

7 files changed, 315 insertions, 304 deletions

diff --git a/common/common.js b/common/common.js
new file mode 100644
index 0000000..d79f659
--- /dev/null
+++ b/common/common.js
@@ -0,0 +1,36 @@
+/* Cookies */
+// Source: https://www.w3schools.com/js/js_cookies.asp
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+
+    for(let i = 0; i <ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+
+    return "";
+}
+
+/* Analytics */
+if(getCookie("confirmed_analytics") !== "true") {
+    document.body.innerHTML +=
+        "<div id='analytics-banner'>\
+        <p><strong>NOTE: </strong>This website uses Google Analytics to collect visitor statistics.</p>\
+        <button id='analytics-confirm'><strong>I UNDERSTAND</strong></button>\
+        </div>";
+
+    const div_analyticsBanner = document.getElementById("analytics-banner");
+    const btn_analyticsConfirm = document.getElementById("analytics-confirm");
+
+    btn_analyticsConfirm.onclick = function() {
+        div_analyticsBanner.setAttribute("confirmed", "true");
+        document.cookie += "confirmed_analytics=true;";
+    };
+}
\ No newline at end of file
diff --git a/common/examples.css b/common/examples.css
index 6bb01d6..4c97c29 100644
--- a/common/examples.css
+++ b/common/examples.css
@@ -4,24 +4,17 @@
 
 #filter_menu { width:820px; height:80px; margin-left:15px; }
 
-.legendButton { float:left; margin-right:8px; margin-bottom:20px; width:84px; height:78px; text-align:right; line-height:130px; }
-#core { cursor:pointer; background-color:#e1e1e1; color:#5c5a5a; border:5px solid #898888; }
-#shapes { cursor:pointer; background-color:#f0d6d6; color:#c55757; border:5px solid #e66666; }
-#textures { cursor:pointer; background-color:#c8eabf; color:#60815a; border:5px solid #75a06d; }
-#text { cursor:pointer; background-color:#bef0dd; color:#377764; border:5px solid #52b296; }
-#models { cursor:pointer; background-color:#bedce8; color:#417794; border:5px solid #5d9cbd; }
-#shaders { cursor:pointer; background-color:#e2c3f5; color:#a864d2; border:5px solid #a864d2; }
-#audio { cursor:pointer; background-color:#ebddae; color:#8c7539; border:5px solid #d3b157; }
-#physics { cursor:pointer; background-color:#ddffdd; color:#00a820; border:5px solid #00a820; }
+.legendButton { float:left; margin-right:8px; margin-bottom:20px; width:84px; height:78px; text-align:right; line-height:130px; cursor: pointer; transition: 0.125s; }
+#core       { background-color:#e1e1e1; color:#5c5a5a; border:5px solid #898888; }
+#shapes     { background-color:#f0d6d6; color:#c55757; border:5px solid #e66666; }
+#textures   { background-color:#c8eabf; color:#60815a; border:5px solid #75a06d; }
+#text       { background-color:#bef0dd; color:#377764; border:5px solid #52b296; }
+#models     { background-color:#bedce8; color:#417794; border:5px solid #5d9cbd; }
+#shaders    { background-color:#e2c3f5; color:#a864d2; border:5px solid #a864d2; }
+#audio      { background-color:#ebddae; color:#8c7539; border:5px solid #d3b157; }
+#physics    { background-color:#ddffdd; color:#00a820; border:5px solid #00a820; }
 
-#core:hover { border-color:black; }
-#shapes:hover { border-color:black; }
-#textures:hover { border-color:black; }
-#text:hover { border-color:black; }
-#models:hover { border-color:black; }
-#shaders:hover { border-color:black; }
-#audio:hover { border-color:black; }
-#physics:hover { border-color:black; }
+.legendButton:hover { border: 5px solid #000 !important; }
 
 .fcore { border: 1px solid #898888; margin-left: 12px; }
 .fshapes { border: 1px solid #e66666; margin-left: 12px; }
diff --git a/common/main.css b/common/main.css
index b6c6137..0773a91 100644
--- a/common/main.css
+++ b/common/main.css
@@ -18,24 +18,21 @@
 ::-webkit-scrollbar-button:end:increment {
     display: block;
     height: 10px;
-}
-
-::-webkit-scrollbar-button:vertical:increment {
-    background-color: #fff;
+    background-color: #8c8c8c;
 }
 
 ::-webkit-scrollbar-track-piece {
-    background-color: #bdbdbd;
+    background-color: #c8c8c8;
 }
 
 ::-webkit-scrollbar-thumb:vertical {
     height: 50px;
-    background-color: #000000;
+    background-color: #505050;
 }
 
 ::-webkit-scrollbar-thumb:horizontal {
     width: 50px;
-    background-color: #000000;
+    background-color: #505050;
 }
 
 * {
@@ -46,7 +43,7 @@
 }
 
 body {
-    background-color: #f5f5f5;
+    background-color: #ddd;
 }
 
 a {
@@ -74,51 +71,78 @@ h2 {
 }
 
 .page {
-    width: 880px;
+    width: min(960px, 100vw);
+    min-height: 100vh;
     margin: 0 auto;
+    padding-top: 128px;
+
+    background-color: #f5f5f5;
+    border: 2px solid #c8c8c8;
+    display: flex;
+    flex-direction: column;
+
+    border-top: none;
+}
+
+.header-container {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+
+    width: max(100%, 960px);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    background-color: white;
+
+    border-bottom: 2px solid #8c8c8c;
+
+    z-index: 100;
 }
 
 .header {
-    width: 100%;
-    float: left;
     position: relative;
+    width: 960px;
     height: 128px;
     font-size: 10pt;
-    margin-top: 40px;
-    margin-left: 10px;
+
+    background-color: #fff;
+
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 
 .content {
     font-size: 8pt;
-    width: 840px;
-    padding: 10px;
+    padding: 32px;
     padding-top: 30px;
     float: left;
     position: relative;
 }
 
 .footer {
-    width: 820px;
-    float: left;
-    position: relative;
-    border-top: 1px solid black;
+    width: 100%;
+    border-top: 1px solid #c8c8c8;
     text-align: right;
     height: 40px;
     padding-top: 10px;
+    background-color: #f5f5f5;
 }
 
 .footer p a {
-    color: #aaaaaa;
+    color: #828282;
+    transition: 0.125s;
 }
 
 .footer p a:hover {
-    color: #444;
+    color: #000;
 }
 
 .footer p {
     font-size: 6pt;
-    color: #aaaaaa;
-    margin-top: -8px;
+    margin-right: 20px;
+    color: #828282;
 }
 
 .simplelink {
@@ -141,8 +165,13 @@ h2 {
     font-size: x-small;
 }
 
-.list,
-.list strong {
+ul {
+    width: fit-content;
+    padding-left: 48px;
+    list-style-position: inside;
+}
+
+li {
     font-family: Courier New, Verdana, Arial !important;
     font-size: medium;
     line-height: 200%;
@@ -157,214 +186,153 @@ h2 {
 }
 
 .menu {
-    width: auto;
-    height: 40px;
-    text-align: right;
-    right: 0px;
-    left: 15px;
+    width: calc(100% - 128px);
+    height: 48px;
+
+    position: absolute;
     bottom: 0px;
-    position: relative;
-    float: left;
-    margin-left: 0px;
-    margin-top: -3px;
-    border-bottom: 1px solid black;
-    overflow: hidden;
+    right: 0px;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+    flex-wrap: nowrap;
+
+    background-color: #fff;
 }
 
 .menu a {
-    height: 40px;
+    height: 48px;
     padding: 0px 20px;
-    color: black;
+    color: #505050;
     font-size: 12pt;
+    line-height: 40px;
     float: left;
     position: relative;
-    top: 4px;
-    transition: top 0.1s ease-in-out;
+    transition: 0.125s;
+
+    border-left: 2px solid #0000;
+    border-right: 2px solid #0000;
 }
 
 .menu a:hover {
+    color: #000;
     padding: 0px 20px;
-    top: 0px;
 }
 
 #active {
-    height: 40px;
+    height: 46px;
     padding: 0px 20px;
-    color: #707070;
+    color: #000;
     font-size: 12pt;
+    line-height: 40px;
     float: left;
     position: relative;
-    margin-top: 0px;
+
+    border: 2px solid #c8c8c8;
+    border-bottom: none;
 }
 
 .menu a:hover,
 #active {
-    background: rgb(254, 255, 255);
-    background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%, rgba(224, 224, 224, 1) 100%);
-}
-
-#social {
-    width: 440px;
-    height: 50px;
-    position: relative;
-    float: right;
-    margin-right: 8px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-}
-
-#social a:hover {
-    background-position: 0 -36px;
-}
-
-#youtube {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_youtube.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
+    background: #c8c8c888;
 }
 
-#handmade {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_handmade.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
-}
+#analytics-banner {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    width: 100%;
 
-#twitch {
-    width: 36px;
-    height: 36px;
+    position: absolute;
     float: left;
-    position: relative;
-    background-image: url(img/icon_twitch.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
-}
+    bottom: 0px;
+    left: 0px;
+    position: sticky;
 
-#redbubble {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_redbubble.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
-}
+    background-color: #ffcb00;
+    border-top: 2px solid #b38e00;
 
-#patreon {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_patreon.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
-}
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-#itchio {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_itchio.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
+    transition: 0.5s;
 }
 
-#reddit {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_reddit.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
+#analytics-banner[confirmed="true"] {
+    bottom: -64px;
+    opacity: 0;
 }
 
-#freenode {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_freenode_irc.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
+#analytics-banner p,
+#analytics-banner p *,
+#analytics-banner button * {
+    font-family: Courier New, Verdana, Arial !important;
+    font-size: large;
 }
 
-#gitter {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_gitter.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
+#analytics-banner button {
+    min-height: 40px;
+    width: fit-content;
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-left: 32px;
+    margin-right: 32px;
+    border: 0px;
+    background-color: #fff5;
+    border: 2px solid #b38e00;
+    transition: 0.125s;
+    word-wrap: unset;
 }
 
-#twitter {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_twitter.png);
+#analytics-banner button:hover {
+    background-color: #fff8;
     cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
 }
 
-#github {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_github.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
+#analytics-banner p {
+    margin-left: 32px;
 }
 
-#kofi {
-    width: 36px;
-    height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_kofi.png);
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
+#social {
+    width: fit-content;
+    height: fit-content;
+    float: right;
+    margin-right: 8px;
+    margin-top: 8px;
+    display: flex;
+    flex-direction: row;
 }
 
-#discord {
+#social a {
+    margin-left: 4px;
     width: 36px;
     height: 36px;
-    float: left;
-    position: relative;
-    background-image: url(img/icon_discord.png);
+    background-color: #f5f5f5;
+    background-repeat: none;
+    background-position: 0px 0px;
     cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: 0 0;
 }
 
-.list {
-    margin-top: 10px;
-    margin-left: 30px;
-    display: inline-block;
-}
+#social a:hover {
+    background-position: 0px -36px;
+}
+
+#youtube    { background-image: url(img/icon_youtube.png);      }
+#handmade   { background-image: url(img/icon_handmade.png);     }
+#twitch     { background-image: url(img/icon_twitch.png);       }
+#redbubble  { background-image: url(img/icon_redbubble.png);    }
+#patreon    { background-image: url(img/icon_patreon.png);      }
+#itchio     { background-image: url(img/icon_itchio.png);       }
+#reddit     { background-image: url(img/icon_reddit.png);       }
+#freenode   { background-image: url(img/icon_freenode_irc.png); }
+#gitter     { background-image: url(img/icon_gitter.png);       }
+#twitter    { background-image: url(img/icon_twitter.png);      }
+#github     { background-image: url(img/icon_github.png);       }
+#kofi       { background-image: url(img/icon_kofi.png);         }
+#discord    { background-image: url(img/icon_discord.png);      }
 
 #licensebox {
     width: 808px;
@@ -594,6 +562,7 @@ h2 {
 #itchioframe {
     display: block;
     text-align: center;
+    overflow: auto;
 }
 
 .icon {
diff --git a/examples.html b/examples.html
index f3ff62a..3f09919 100644
--- a/examples.html
+++ b/examples.html
@@ -32,34 +32,38 @@
     </head>
 
     <body>
-        <div class="page">
-            <!--[if lt IE 7]>
-                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
-            <![endif]-->
-
+        <script src="common/common.js" defer></script>
+        <div class="header-container">
             <div class="header">
                 <a id="logo" href="index.html"></a>
-                <div id="social">
-                    <a id="twitter" href="https://www.twitter.com/raysan5" target="_blank"></a>
-                    <a id="discord" href="https://discord.gg/raylib" target="_blank"></a>
-                    <a id="twitch" href="https://www.twitch.tv/raysan5" target="_blank"></a>
-                    <a id="kofi" href="https://ko-fi.com/raysan5" target="_blank"></a>
-                    <a id="itchio" href="https://raysan5.itch.io" target="_blank"></a>
-                    <a id="handmade" href="https://raylib.handmade.network/" target="_blank"></a>
-                    <a id="reddit" href="https://www.reddit.com/r/raylib/" target="_blank"></a>
-                    <a id="youtube" href="https://www.youtube.com/c/raylib" target="_blank"></a>
-                    <a id="patreon" href="https://www.patreon.com/raylib" target="_blank"></a>
-                    <a id="redbubble" href="https://www.redbubble.com/shop/ap/78130012" target="_blank"></a>
-                    <a id="github" href="https://github.com/raysan5/raylib" target="_blank"></a>
-                </div>
-                <div class="menu">
-                    <a href="index.html">about</a>
-                    <div id="active">examples</div>
-                    <a href="games.html">games</a>
-                    <a href="cheatsheet/cheatsheet.html">cheatsheet</a>
-                    <a id="wiki" href="https://github.com/raysan5/raylib/wiki">wiki</a>
+                <div class="nav-container">
+                    <div id="social">
+                        <a id="twitter" href="https://www.twitter.com/raysan5" target="_blank"></a>
+                        <a id="discord" href="https://discord.gg/raylib" target="_blank"></a>
+                        <a id="twitch" href="https://www.twitch.tv/raysan5" target="_blank"></a>
+                        <a id="kofi" href="https://ko-fi.com/raysan5" target="_blank"></a>
+                        <a id="itchio" href="https://raysan5.itch.io" target="_blank"></a>
+                        <a id="handmade" href="https://raylib.handmade.network/" target="_blank"></a>
+                        <a id="reddit" href="https://www.reddit.com/r/raylib/" target="_blank"></a>
+                        <a id="youtube" href="https://www.youtube.com/c/raylib" target="_blank"></a>
+                        <a id="patreon" href="https://www.patreon.com/raylib" target="_blank"></a>
+                        <a id="redbubble" href="https://www.redbubble.com/shop/ap/78130012" target="_blank"></a>
+                        <a id="github" href="https://github.com/raysan5/raylib" target="_blank"></a>
+                    </div>
+                    <div class="menu">
+                        <a href="index.html">about</a>
+                        <div id="active">examples</div>
+                        <a href="games.html">games</a>
+                        <a href="cheatsheet/cheatsheet.html">cheatsheet</a>
+                        <a id="wiki" href="https://github.com/raysan5/raylib/wiki">wiki</a>
+                    </div>
                 </div>
             </div>
+        </div>
+        <div class="page">
+            <!--[if lt IE 7]>
+                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
+            <![endif]-->
 
             <div class="content">
                 <p>raylib examples are organized by colors depending on the raylib module they focus.</p>
diff --git a/games.html b/games.html
index 21067e9..aa61d5c 100644
--- a/games.html
+++ b/games.html
@@ -32,34 +32,38 @@
     </head>
     
     <body>
-        <div class="page">
-            <!--[if lt IE 7]>
-                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
-            <![endif]-->
-
+        <script src="common/common.js" defer></script>
+        <div class="header-container">
             <div class="header">
                 <a id="logo" href="index.html"></a>
-                <div id="social">
-                    <a id="twitter" href="https://www.twitter.com/raysan5" target="_blank"></a>
-                    <a id="discord" href="https://discord.gg/raylib" target="_blank"></a>
-                    <a id="twitch" href="https://www.twitch.tv/raysan5" target="_blank"></a>
-                    <a id="kofi" href="https://ko-fi.com/raysan5" target="_blank"></a>
-                    <a id="itchio" href="https://raysan5.itch.io" target="_blank"></a>
-                    <a id="handmade" href="https://raylib.handmade.network/" target="_blank"></a>
-                    <a id="reddit" href="https://www.reddit.com/r/raylib/" target="_blank"></a>
-                    <a id="youtube" href="https://www.youtube.com/c/raylib" target="_blank"></a>
-                    <a id="patreon" href="https://www.patreon.com/raylib" target="_blank"></a>
-                    <a id="redbubble" href="https://www.redbubble.com/shop/ap/78130012" target="_blank"></a>
-                    <a id="github" href="https://github.com/raysan5/raylib" target="_blank"></a>
-                </div>
-                <div class="menu">
-                    <a href="index.html">about</a>
-                    <a href="examples.html">examples</a>
-                    <div id="active">games</div>
-                    <a href="cheatsheet/cheatsheet.html">cheatsheet</a>
-                    <a id="wiki" href="https://github.com/raysan5/raylib/wiki">wiki</a>
+                <div class="nav-container">
+                    <div id="social">
+                        <a id="twitter" href="https://www.twitter.com/raysan5" target="_blank"></a>
+                        <a id="discord" href="https://discord.gg/raylib" target="_blank"></a>
+                        <a id="twitch" href="https://www.twitch.tv/raysan5" target="_blank"></a>
+                        <a id="kofi" href="https://ko-fi.com/raysan5" target="_blank"></a>
+                        <a id="itchio" href="https://raysan5.itch.io" target="_blank"></a>
+                        <a id="handmade" href="https://raylib.handmade.network/" target="_blank"></a>
+                        <a id="reddit" href="https://www.reddit.com/r/raylib/" target="_blank"></a>
+                        <a id="youtube" href="https://www.youtube.com/c/raylib" target="_blank"></a>
+                        <a id="patreon" href="https://www.patreon.com/raylib" target="_blank"></a>
+                        <a id="redbubble" href="https://www.redbubble.com/shop/ap/78130012" target="_blank"></a>
+                        <a id="github" href="https://github.com/raysan5/raylib" target="_blank"></a>
+                    </div>
+                    <div class="menu">
+                        <a href="index.html">about</a>
+                        <a href="examples.html">examples</a>
+                        <div id="active">games</div>
+                        <a href="cheatsheet/cheatsheet.html">cheatsheet</a>
+                        <a id="wiki" href="https://github.com/raysan5/raylib/wiki">wiki</a>
+                    </div>
                 </div>
             </div>
+        </div>
+        <div class="page">
+            <!--[if lt IE 7]>
+                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
+            <![endif]-->
 
             <div class="content">
                 <p>raylib games are organized in two categories:</p>
diff --git a/index.html b/index.html
index 058bb2b..0d6a2ae 100644
--- a/index.html
+++ b/index.html
@@ -30,34 +30,38 @@
     </head>
 
     <body>
-        <div class="page">
-            <!--[if lt IE 7]>
-                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
-            <![endif]-->
-
+        <script src="common/common.js" defer></script>
+        <div class="header-container">
             <div class="header">
                 <a id="logo" href="index.html"></a>
-                <div id="social">
-                    <a id="twitter" href="https://www.twitter.com/raysan5" target="_blank"></a>
-                    <a id="discord" href="https://discord.gg/raylib" target="_blank"></a>
-                    <a id="twitch" href="https://www.twitch.tv/raysan5" target="_blank"></a>
-                    <a id="kofi" href="https://ko-fi.com/raysan5" target="_blank"></a>
-                    <a id="itchio" href="https://raysan5.itch.io" target="_blank"></a>
-                    <a id="handmade" href="https://raylib.handmade.network/" target="_blank"></a>
-                    <a id="reddit" href="https://www.reddit.com/r/raylib/" target="_blank"></a>
-                    <a id="youtube" href="https://www.youtube.com/c/raylib" target="_blank"></a>
-                    <a id="patreon" href="https://www.patreon.com/raylib" target="_blank"></a>
-                    <a id="redbubble" href="https://www.redbubble.com/shop/ap/78130012" target="_blank"></a>
-                    <a id="github" href="https://github.com/raysan5/raylib" target="_blank"></a>
-                </div>
-                <div class="menu">
-                    <div id="active">about</div>
-                    <a href="examples.html">examples</a>
-                    <a href="games.html">games</a>
-                    <a href="cheatsheet/cheatsheet.html">cheatsheet</a>
-                    <a id="wiki" href="https://github.com/raysan5/raylib/wiki">wiki</a>
+                <div class="nav-container">
+                    <div id="social">
+                        <a id="twitter" href="https://www.twitter.com/raysan5" target="_blank"></a>
+                        <a id="discord" href="https://discord.gg/raylib" target="_blank"></a>
+                        <a id="twitch" href="https://www.twitch.tv/raysan5" target="_blank"></a>
+                        <a id="kofi" href="https://ko-fi.com/raysan5" target="_blank"></a>
+                        <a id="itchio" href="https://raysan5.itch.io" target="_blank"></a>
+                        <a id="handmade" href="https://raylib.handmade.network/" target="_blank"></a>
+                        <a id="reddit" href="https://www.reddit.com/r/raylib/" target="_blank"></a>
+                        <a id="youtube" href="https://www.youtube.com/c/raylib" target="_blank"></a>
+                        <a id="patreon" href="https://www.patreon.com/raylib" target="_blank"></a>
+                        <a id="redbubble" href="https://www.redbubble.com/shop/ap/78130012" target="_blank"></a>
+                        <a id="github" href="https://github.com/raysan5/raylib" target="_blank"></a>
+                    </div>
+                    <div class="menu">
+                        <div id="active">about</div>
+                        <a href="examples.html">examples</a>
+                        <a href="games.html">games</a>
+                        <a href="cheatsheet/cheatsheet.html">cheatsheet</a>
+                        <a id="wiki" href="https://github.com/raysan5/raylib/wiki">wiki</a>
+                    </div>
                 </div>
             </div>
+        </div>
+        <div class="page">
+            <!--[if lt IE 7]>
+                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
+            <![endif]-->
 
             <div class="content">
                 <h1>raylib is a simple and easy-to-use library to enjoy videogames programming.</h1>
@@ -67,7 +71,7 @@
                 <br>
                 <p><strong>NOTE for ADVENTURERS:</strong> raylib is a programming library to enjoy videogames programming; no fancy interface, no visual helpers, no gui tools or editors... just coding in pure spartan-programmers way. Are you ready to enjoy coding?</p>
                 <br>
-                <h2>raylib learning resources</h2>
+                <h2 id="learning-resources">raylib learning resources</h2>
                 <br>
                 <p>raylib does not provide the typical API documentation or a big set of tutorials. The library is designed to be minimalistic and be learned just from a cheatsheet with all required functionality and a big collection of examples to see how to use that functionality. <strong>Best way to learn to code is reading code.</strong></p>
                 <br>
@@ -83,7 +87,7 @@
                 </div>
                 <p>Apart from those materials, there are plenty of tutorials created by the amazing raylib community. It's highly recommended to join the friendly <a href="https://discord.gg/raylib" target="_blank">raylib Discord Community</a> to stay up to date of latest raylib news and ask for help when required!</p>
                 <br>
-                <h2>raylib awards</h2>
+                <h2 id="awards">raylib awards</h2>
                 <br>
                 <p>raylib has received several recognitions in the last years. Here there some awards received from <strong>Google</strong> and <strong>Epic Games</strong>.</p>
                 <br>
@@ -95,7 +99,7 @@
                     </div>
                 </div>
                 <br>
-                <h2>raylib supported platforms</h2>
+                <h2 id="platforms">raylib supported platforms</h2>
                 <br>
                 <p>raylib supports multiple target platforms, it has been tested in the following ones but, technically, any platform that supports C language and OpenGL graphics (or similar) can run raylib or it can be very easily ported to.</p>
                 <br>
@@ -112,7 +116,7 @@
                     </div>
                 </div>
                 <br>
-                <h2>raylib language bindings</h2>
+                <h2 id="bindings">raylib language bindings</h2>
                 <br>
                 <p>You can use raylib with multiple programming languages, there are <a href="https://github.com/raysan5/raylib/blob/master/BINDINGS.md" target="_blank">+60 bindings</a>! Here is a list with some of them:</p>
                 <br>
@@ -131,7 +135,7 @@
                     </div>
                 </div>
                 <br>
-                <h2>raylib extra libraries</h2>
+                <h2 id="extra-libraries">raylib extra libraries</h2>
                 <br>
                 <p>raylib can be combined with several extra libraries for additional functionality, some of those libraries are already used internally while others are provided for user integration, most of these libraries are single-file header-only with no external dependencies.</p>
                 <br>
@@ -147,7 +151,7 @@
                     </div>
                 </div>
                 <br>
-                <h2>raylib technologies tools</h2>
+                <h2 id="raylibtech-tools">raylib technologies tools</h2>
                 <br>
                 <p>raylib is the base technology for <a class="simplelink" href="https://www.raylibtech.com" target="_blank">raylib technologies</a> tools development! Several multiplatform tools have been developed using raylib and <a class="simplelink" href="https://github.com/raysan5/raygui" target="_blank">raygui</a>. <a class="simplelink" href="https://raylibtech.itch.io" target="_blank"/>Check them out!</a></p>
                 <br>
@@ -168,7 +172,7 @@
                     </div>
                 </div>
                 <br>
-                <h2>raylib community</h2>
+                <h2 id="community">raylib community</h2>
                 <br>
                 <p>Do you need help with raylib? Do you want to keep updated with latest news? Do you want to show your raylib creations? Join our amazing community of raylib developers! Choose the network you prefer! You are welcome!</p>
                 <br>
@@ -184,7 +188,7 @@
                     </div>
                 </div>
                 <br>
-                <h2>raylib contributions</h2>
+                <h2 id="contributions">raylib contributions</h2>
                 <br>
                 <p>I'm working hard on raylib but my resources are limited. If you enjoy raylib and want to help, consider a small donation or contributing to the project on GitHub. Thanks!</p>
                 <br>
@@ -199,30 +203,30 @@
                     </div>
                 </div>
                 <br>
-                <h2>raylib features</h2>
-                <br>
-                <div class="list">
-                    - <strong>NO external dependencies</strong>, all required libraries included with raylib<br>
-                    - Multiplatform: <strong>Windows, Linux, MacOS, RPI, Android, HTML5... and more!</strong><br>
-                    - Written in plain C code (C99) in PascalCase/camelCase notation<br>
-                    - Hardware accelerated with OpenGL (<strong>1.1, 2.1, 3.3, 4.3 or ES 2.0</strong>)<br>
-                    - <strong>Unique OpenGL abstraction</strong> layer: <a class="simplelink" href="https://github.com/raysan5/raylib/blob/master/src/rlgl.h" target="_blank">rlgl</a><br>
-                    - Powerful <strong>Fonts</strong> module (XNA SpriteFonts, BMfonts, TTF, SDF)<br>
-                    - Outstanding texture formats support, including compressed formats (DXT, ETC, ASTC)<br>
-                    - <strong>Full 3d support</strong> for 3d Shapes, Models, Billboards, Heightmaps and more! <br>
-                    - Flexible Materials system, supporting classic maps and <strong>PBR maps</strong><br>
-                    - <strong>Animated 3d models</strong> supported (skeletal bones animation)<br>
-                    - Shaders support, including <strong>Model shaders</strong> and <strong>Postprocessing shaders</strong><br>
-                    - <strong>Powerful math module</strong> for Vector, Matrix and Quaternion operations: <a class="simplelink" href="https://github.com/raysan5/raylib/blob/master/src/raymath.h" target="_blank">raymath</a><br>
-                    - Audio loading and playing with streaming support (WAV, OGG, MP3, FLAC, XM, MOD)<br>
-                    - <strong>VR stereo rendering</strong> support with configurable HMD device parameters<br>
-                    - Huge examples collection with <a class="simplelink" href="examples.html" target="_blank">+120 code examples</a>!<br>
-                    - Bindings to <a class="simplelink" href="https://github.com/raysan5/raylib/blob/master/BINDINGS.md" target="_blank">+50 programming languages</a>!<br>
-                    - Free and open source. Check [<a class="simplelink" href="license.html" target="_blank">LICENSE</a>].<br>
-                </div>
-                <br>
-                <br>
-                <h2>raylib architecture</h2>
+                <h2 id="features">raylib features</h2>
+                <br>
+                <ul>
+                    <li><strong>NO external dependencies</strong>, all required libraries included with raylib</li>
+                    <li>Multiplatform: <strong>Windows, Linux, MacOS, RPI, Android, HTML5... and more!</strong></li>
+                    <li>Written in plain C code (C99) in PascalCase/camelCase notation</li>
+                    <li>Hardware accelerated with OpenGL (<strong>1.1, 2.1, 3.3, 4.3 or ES 2.0</strong>)</li>
+                    <li><strong>Unique OpenGL abstraction</strong> layer: <a class="simplelink" href="https://github.com/raysan5/raylib/blob/master/src/rlgl.h" target="_blank">rlgl</a></li>
+                    <li>Powerful <strong>Fonts</strong> module (XNA SpriteFonts, BMfonts, TTF, SDF)</li>
+                    <li>Outstanding texture formats support, including compressed formats (DXT, ETC, ASTC)</li>
+                    <li><strong>Full 3d support</strong> for 3d Shapes, Models, Billboards, Heightmaps and more! </li>
+                    <li>Flexible Materials system, supporting classic maps and <strong>PBR maps</strong></li>
+                    <li><strong>Animated 3d models</strong> supported (skeletal bones animation)</li>
+                    <li>Shaders support, including <strong>Model shaders</strong> and <strong>Postprocessing shaders</strong></li>
+                    <li><strong>Powerful math module</strong> for Vector, Matrix and Quaternion operations: <a class="simplelink" href="https://github.com/raysan5/raylib/blob/master/src/raymath.h" target="_blank">raymath</a></li>
+                    <li>Audio loading and playing with streaming support (WAV, OGG, MP3, FLAC, XM, MOD)</li>
+                    <li><strong>VR stereo rendering</strong> support with configurable HMD device parameters</li>
+                    <li>Huge examples collection with <a class="simplelink" href="examples.html" target="_blank">+120 code examples</a>!</li>
+                    <li>Bindings to <a class="simplelink" href="https://github.com/raysan5/raylib/blob/master/BINDINGS.md" target="_blank">+50 programming languages</a>!</li>
+                    <li>Free and open source. Check [<a class="simplelink" href="license.html" target="_blank">LICENSE</a>].</li>
+                </ul>
+                <br>
+                <br>
+                <h2 id="architecture">raylib architecture</h2>
                 <br>
                 <p>raylib is a highly modular library. Everything is contained within a small number of well defined, specific and self-contained modules, named accordingly to its primary functionality. Note that some of those modules can be used in <strong>standalone mode</strong>, independently of raylib library.</p>
                 <a href="images/raylib_architecture_v4.2.png"><img src="images/raylib_architecture_v4.2.png" title="raylib architecture" alt="raylib architecture" width="800" /></a>
diff --git a/license.html b/license.html
index c5518c2..c7bbd6f 100644
--- a/license.html
+++ b/license.html
@@ -23,6 +23,7 @@
     </head>
     
     <body>
+        <script src="common/common.js" defer></script>
         <div class="page">
             <!--[if lt IE 7]>
                 <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>