Updated style; Added tracking acknowledgement banner.

3 files changed, 198 insertions, 200 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 {