Merge pull request #47 from colleen05/master

Restyle, added functionality, code rework, +1 more change.
author: Ray <[email protected]> 2023-01-19 20:49:25 +0100
committer: GitHub <[email protected]> 2023-01-19 20:49:25 +0100
commit: 5684133aa766d54d200d1931697d99e76affcc8f (patch)
tree: a872c1ab0ef87ffe01e74a90984808692efe9273
parent: b5b8c2328dfa95178489cb627032e4d91bf55726 (diff)
parent: fb63eed4bc87c608a43406c3df6b6092e41bd010 (diff)
download: raylib.com-5684133aa766d54d200d1931697d99e76affcc8f.tar.gz
raylib.com-5684133aa766d54d200d1931697d99e76affcc8f.zip
10 files changed, 806 insertions, 225 deletions
diff --git a/cheatsheet/cheatsheet.html b/cheatsheet/cheatsheet.html
index f63fde6..5fd1c0b 100644
--- a/cheatsheet/cheatsheet.html
+++ b/cheatsheet/cheatsheet.html
@@ -126,7 +126,7 @@
 
     <body>
         <div id="header">
-            <a id="logo" href="https://www.raylib.com/index.html"></a>
+            <a id="logo" href="../index.html"></a>
             <p id="title">A simple and easy-to-use library to enjoy videogames programming</p>
             <p id="plinks">[<a href="https://discord.gg/raylib">raylib Discord server</a>][<a href="https://github.com/raysan5/raylib">github.com/raysan5/raylib</a>][<a href="https://github.com/raysan5/raylib/blob/master/src/raylib.h">raylib.h</a>]</p>
             <p></p>
diff --git a/cheatsheet/cheatsheet_zh.html b/cheatsheet/cheatsheet_zh.html
index a7e66d5..698de0f 100644
--- a/cheatsheet/cheatsheet_zh.html
+++ b/cheatsheet/cheatsheet_zh.html
@@ -125,7 +125,7 @@
 
     <body>
         <div id="header">
-            <a id="logo" href="https://www.raylib.com/index.html"></a>
+            <a id="logo" href="../index.html"></a>
             <p id="title">以下为raylib所有API接口中文释义</p>
             <p id="title">A simple and easy-to-use library to enjoy videogames programming</p>
             <p id="plinks">[<a href="https://discord.gg/raylib">raylib Discord server</a>][<a href="https://github.com/raysan5/raylib">github.com/raysan5/raylib</a>][<a href="https://github.com/raysan5/raylib/blob/master/src/raylib.h">raylib.h</a>]</p>
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/img/anchor_link.svg b/common/img/anchor_link.svg
new file mode 100644
index 0000000..0bf8d19
--- /dev/null
+++ b/common/img/anchor_link.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+
+</svg>
+\ No newline at end of file
diff --git a/common/main.css b/common/main.css
index 7b25fd1..5ee4def 100644
--- a/common/main.css
+++ b/common/main.css
@@ -2,111 +2,645 @@
     font-family: 'grixel_acme_7_wide_xtnd';
     src: url('font/acme_7_wide_xtnd.eot');
     src: url('font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
-         url('font/acme_7_wide_xtnd.woff') format('woff'),
-         url('font/acme_7_wide_xtnd.ttf') format('truetype');
+        url('font/acme_7_wide_xtnd.woff') format('woff'),
+        url('font/acme_7_wide_xtnd.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
-    font-size-adjust:0.49;
+    font-size-adjust: 0.49;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
 }
 
-::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-button:start:decrement,
-::-webkit-scrollbar-button:end:increment { display: block; height: 10px; }
-::-webkit-scrollbar-button:vertical:increment { background-color: #fff; }
-::-webkit-scrollbar-track-piece { background-color: #bdbdbd; }
-::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: #000000; }
-::-webkit-scrollbar-thumb:horizontal { width: 50px; background-color: #000000; }
-
-* { padding:0px; margin:0px; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial; line-height:24px; }
-body { background-color:#f5f5f5; }
-a {text-decoration: none; color:black; }
-p a:hover{text-decoration: none; color:gray; }
-h1 { font-family: Courier New, Verdana, Arial; font-weight: bold; font-size: 18px; line-height:24px; }
-h2 { font-family: Courier New, Verdana, Arial; font-weight: bold; font-size: 18px; line-height:24px; }
-
-.page { width:880px; margin:0 auto; }
-
-.header { width:100%; float:left; position:relative; height:128px; font-size:10pt; margin-top:40px; margin-left:10px; }
-.content { font-size:8pt; width:840px; padding:10px; padding-top:30px; float:left; position:relative; }
-.footer { width:820px; float:left; position:relative; border-top:1px solid black; text-align: right;  height:40px; padding-top:10px; }
-.footer p a {color:#aaaaaa; }
-.footer p a:hover {color:#444; }
-.footer p { font-size:6pt; color:#aaaaaa; margin-top:-8px; }
-.simplelink { font-weight: bold; color: #ff6060; }
+::-webkit-scrollbar-button:end:increment {
+    display: block;
+    height: 10px;
+    background-color: #8c8c8c;
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: #c8c8c8;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+    height: 50px;
+    background-color: #505050;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    width: 50px;
+    background-color: #505050;
+}
+
+:root {
+    --content-width: 840px;
+}
+
+* {
+    padding: 0px;
+    margin: 0px;
+    font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;
+    line-height: 24px;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    /* background-color: #ddd; */
+    background-color: #f5f5f5;
+}
+
+a {
+    text-decoration: none;
+    color: black;
+}
+
+p a:hover {
+    text-decoration: none;
+    color: gray;
+}
+
+h1 {
+    font-family: Courier New, Verdana, Arial;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 24px;
+}
+
+h2 {
+    font-family: Courier New, Verdana, Arial;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 24px;
+}
+
+.page {
+    width: min(var(--content-width), 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%, var(--content-width));
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    background-color: white;
+
+    border-bottom: 2px solid #8c8c8c;
+
+    z-index: 100;
+}
+
+.header {
+    position: relative;
+    width: var(--content-width);
+    height: 128px;
+    font-size: 10pt;
+
+    background-color: #fff;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.content {
+    font-size: 8pt;
+    padding-top: 30px;
+    float: left;
+    position: relative;
+}
+
+.footer {
+    width: 100%;
+    border-top: 1px solid #c8c8c8;
+    text-align: right;
+    height: 40px;
+    padding-top: 10px;
+    background-color: #f5f5f5;
+}
+
+.footer p a {
+    color: #828282;
+    transition: 0.125s;
+}
+
+.footer p a:hover {
+    color: #000;
+}
+
+.footer p {
+    font-size: 6pt;
+    margin-right: 20px;
+    color: #828282;
+}
+
+.simplelink {
+    font-weight: bold;
+    color: #ff6060;
+}
 
 /* font change for better reading... */
-.content p, .content a, .content p strong, .content strong, .content .downloadText { font-family: Courier New, Verdana, Arial!important; font-size: medium; line-height: 200%; }
-.downloadButtonInstaller { font-size: x-small; }
-.list, .list strong { font-family: Courier New, Verdana, Arial!important; font-size: medium; line-height: 200%; }
-
-#logo{width:128px; height:128px; float:left; position:relative; background-image:url(img/raylib_logo.png);}
-.menu{width:auto; height:40px; text-align:right; right:0px; left:15px; bottom:0px; position:relative; float:left; margin-left:0px; margin-top:-3px; border-bottom:1px solid black; overflow:hidden;}
-.menu a{height: 40px; padding:0px 20px; color:black; font-size:12pt; float:left; position:relative; top: 4px; transition:top 0.1s ease-in-out;}
-.menu a:hover{padding:0px 20px; top:0px;}
-#active { height: 40px; padding:0px 20px; color:#707070; font-size:12pt; float:left; position:relative; margin-top: 0px; }
-.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; }
-#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; }
-#twitch { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_twitch.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#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; }
-#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; }
-#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; }
-#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; }
-#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; }
-#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; }
-#twitter { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_twitter.png); 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; }
-#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; }
-#discord { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_discord.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-.list { margin-top:10px; margin-left:30px; display: inline-block; }
-
-#licensebox { width:808px; height:400px; border:12px solid; border-color:#d0d0d0; background-color:#e4e4e4; }
-#licensebox p { font-size:12px; margin-top: 15px; margin-left: 10px; }
-.licensepoint { margin-left: 25px!important; }
-
-.downloadText { width:420px; height:40px; float:left; position:relative; margin-left:40px; }
-.downloadButton { width:220px; height:35px; float:left; position: relative; cursor:pointer; font-weight: bold; line-height:35px; text-align: center; border-width:5px!important; }
-.downloadButtonInstaller { width:460px; height:35px; position: relative; margin: auto auto; margin-top:20px!important; cursor:pointer; font-weight: bold; line-height:35px; text-align: center; border-width:5px!important; }
-#btngit { background-color:#e1e1e1; color:#5c5a5a; border:4px solid #898888; }
-#btngit:hover { background-color:#bedce8; color:#417794; border:4px solid #5d9cbd; }
-#btnlib { background-color:#e1e1e1; color:#5c5a5a; border:4px solid #898888; margin-top: 15px; }
-#btnlib:hover { background-color:#f0d6d6; color:#c55757; border:4px solid #e66666; margin-top: 15px; }
-#btnmac { font-weight: normal; cursor:default; background-color:#f0f0f0; color:#5c5a5a; border:4px solid #d3d3d3; }
-#newVersion { background-color:#f0d6d6; color:#e55757; border:1px solid #f66666; margin-top: 15px; margin-left: -5px; width:100%; height:30px; position: relative; margin: auto auto; line-height:30px; text-align: center; }
-#raylib13 { position:relative; background-color:#222222; color:#f5f5f5; width:100vw; left:calc(-52vw + 50%); padding:30px; text-align:center; margin: 10px; }
-
-#basicgrid { width:580px; margin-left:60px; float:left; position:relative; text-align: center; }
-#advgrid { width:560px; margin-left:70px; float:left; position:relative; text-align: center; }
-.exampleBox { cursor:pointer; margin:15px 20px; width:54px; padding-right:2px; height:56px; border:4px solid black; display:inline-block; text-align: right; font-weight: bold; vertical-align: bottom; }
-.exampleBox .in { display: table-cell; vertical-align: bottom; width:52px; height:56px; }
-
-.specialBox { cursor:pointer; vertical-align: bottom; color:#818181; width:56px; height:58px; padding-right:2px; padding-top:4px; padding-left:4px; margin:15px 20px; display:inline-block; border:1px solid #b9b9b9; text-align:right; }
-.specialBox .in { display: table-cell; vertical-align: bottom; width:52px; height:52px; border:1px solid #b9b9b9; margin-top:-5px; }
-.specialBox:hover { color: black; border:1px solid black; }
-.specialBox .in:hover { color: black; border:1px solid black; }
-.boxintext { margin-bottom: 3px; margin-right: 2px; line-height:10px; font-size:6pt; }
-.boxintextex { margin-bottom: 3px; margin-right: -2px; line-height:10px; font-size:6pt; width:54px!important; height:53px!important; font-weight: normal!important; }
-.boxtodo { margin-bottom: 13px; margin-right: 7px; }
-
-.help { font-size:8px; margin-left: 25px; }
-#paypalbox { width:200px; height:50px; border:12px solid; border-color:#d0d0d0; background-color:#e4e4e4; margin:0 auto; }
-#paypalform input { margin-top: 12px; margin-left: 50px; }
-#wiki { color: maroon; }
-
-#itchioframe { display:block; text-align:center; }
-
-.icon { margin-right: 2px; }
-#platforms>a>img { border: 6px solid #888888; transition: all .2s ease; }
-#platforms>a>img:hover { border: 6px solid #111111; }
-
-#bindings>a>img { border: 6px solid #888888; transition: all .2s ease; }
-#bindings>a>img:hover { border: 6px solid #111111; }
-
-#extralibs>a>img { transition: all .2s ease; }
-#extralibs>a>img:hover { filter: contrast(200%); }
-
-#raylibtech>a>img { transition: all .2s ease; }
-#raylibtech>a>img:hover { filter: contrast(180%); }
+.content p,
+.content a,
+.content p strong,
+.content strong,
+.content .downloadText {
+    font-family: Courier New, Verdana, Arial !important;
+    font-size: medium;
+    line-height: 200%;
+}
+
+.downloadButtonInstaller {
+    font-size: x-small;
+}
+
+.anchor-link {
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+    background-image: url(img/anchor_link.svg);
+    background-size: 16px 16px;
+    display: inline-block;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: 0.25s;
+    transform: translateY(4px);
+}
+
+.anchor-link:hover {
+    opacity: 1.0;
+}
+
+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%;
+}
+
+#logo {
+    width: 128px;
+    height: 128px;
+    float: left;
+    position: relative;
+    background-image: url(img/raylib_logo.png);
+}
+
+.menu {
+    width: calc(100% - 128px);
+    height: 48px;
+
+    position: absolute;
+    bottom: 0px;
+    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: 48px;
+    padding: 0px 20px;
+    color: #505050;
+    font-size: 12pt;
+    line-height: 40px;
+    float: left;
+    position: relative;
+    transition: 0.125s;
+
+    border-left: 2px solid #0000;
+    border-right: 2px solid #0000;
+}
+
+.menu a:hover {
+    color: #000;
+    padding: 0px 20px;
+}
+
+#active {
+    height: 46px;
+    padding: 0px 20px;
+    color: #000;
+    font-size: 12pt;
+    line-height: 36px;
+    float: left;
+    position: relative;
+
+    border: 2px solid #c8c8c8;
+    border-bottom: none;
+}
+
+.menu a:hover,
+#active {
+    background: #c8c8c888;
+}
+
+#analytics-banner {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    width: 100%;
+
+    position: absolute;
+    float: left;
+    bottom: 0px;
+    left: 0px;
+    position: sticky;
+
+    background-color: #ffcb00;
+    border-top: 2px solid #b38e00;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    transition: 0.5s;
+}
+
+#analytics-banner[confirmed="true"] {
+    bottom: -64px;
+    opacity: 0;
+}
+
+#analytics-banner p,
+#analytics-banner p *,
+#analytics-banner button * {
+    font-family: Courier New, Verdana, Arial !important;
+    font-size: large;
+}
+
+#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;
+}
+
+#analytics-banner button:hover {
+    background-color: #fff8;
+    cursor: pointer;
+}
+
+#analytics-banner p {
+    margin-left: 32px;
+}
+
+.architecture-image-container {
+    margin-top: 32px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.architecture-image-container img {
+    border: 2px solid #c8c8c8;
+    transition: 0.125s;
+}
+
+.architecture-image-container:hover img {
+    border: 2px solid #828282;
+}
+
+#social {
+    width: fit-content;
+    height: fit-content;
+    float: right;
+    margin-right: 0px;
+    margin-top: 8px;
+    display: flex;
+    flex-direction: row;
+}
+
+#social a {
+    margin-left: 4px;
+    width: 36px;
+    height: 36px;
+    background-color: #f5f5f5;
+    background-repeat: none;
+    background-position: 0px 0px;
+    cursor: pointer;
+}
+
+#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;
+    height: 400px;
+    border: 12px solid;
+    border-color: #d0d0d0;
+    background-color: #e4e4e4;
+}
+
+#licensebox p {
+    font-size: 12px;
+    margin-top: 15px;
+    margin-left: 10px;
+}
+
+.licensepoint {
+    margin-left: 25px !important;
+}
+
+.downloadText {
+    width: 420px;
+    height: 40px;
+    float: left;
+    position: relative;
+    margin-left: 40px;
+}
+
+.downloadButton {
+    width: 220px;
+    height: 35px;
+    float: left;
+    position: relative;
+    cursor: pointer;
+    font-weight: bold;
+    line-height: 35px;
+    text-align: center;
+    border-width: 5px !important;
+}
+
+.downloadButtonInstaller {
+    width: 460px;
+    height: 35px;
+    position: relative;
+    margin: auto auto;
+    margin-top: 20px !important;
+    cursor: pointer;
+    font-weight: bold;
+    line-height: 35px;
+    text-align: center;
+    border-width: 5px !important;
+}
+
+#btngit {
+    background-color: #e1e1e1;
+    color: #5c5a5a;
+    border: 4px solid #898888;
+}
+
+#btngit:hover {
+    background-color: #bedce8;
+    color: #417794;
+    border: 4px solid #5d9cbd;
+}
+
+#btnlib {
+    background-color: #e1e1e1;
+    color: #5c5a5a;
+    border: 4px solid #898888;
+    margin-top: 15px;
+}
+
+#btnlib:hover {
+    background-color: #f0d6d6;
+    color: #c55757;
+    border: 4px solid #e66666;
+    margin-top: 15px;
+}
+
+#btnmac {
+    font-weight: normal;
+    cursor: default;
+    background-color: #f0f0f0;
+    color: #5c5a5a;
+    border: 4px solid #d3d3d3;
+}
+
+#newVersion {
+    background-color: #f0d6d6;
+    color: #e55757;
+    border: 1px solid #f66666;
+    margin-top: 15px;
+    margin-left: -5px;
+    width: 100%;
+    height: 30px;
+    position: relative;
+    margin: auto auto;
+    line-height: 30px;
+    text-align: center;
+}
+
+#raylib13 {
+    position: relative;
+    background-color: #222222;
+    color: #f5f5f5;
+    width: 100vw;
+    left: calc(-52vw + 50%);
+    padding: 30px;
+    text-align: center;
+    margin: 10px;
+}
+
+#basicgrid {
+    width: 580px;
+    margin-left: 60px;
+    float: left;
+    position: relative;
+    text-align: center;
+}
+
+#advgrid {
+    width: 560px;
+    margin-left: 70px;
+    float: left;
+    position: relative;
+    text-align: center;
+}
+
+.exampleBox {
+    cursor: pointer;
+    margin: 15px 20px;
+    width: 54px;
+    padding-right: 2px;
+    height: 56px;
+    border: 4px solid black;
+    display: inline-block;
+    text-align: right;
+    font-weight: bold;
+    vertical-align: bottom;
+}
+
+.exampleBox .in {
+    display: table-cell;
+    vertical-align: bottom;
+    width: 52px;
+    height: 56px;
+}
+
+.specialBox {
+    cursor: pointer;
+    vertical-align: bottom;
+    color: #818181;
+    width: 56px;
+    height: 58px;
+    padding-right: 2px;
+    padding-top: 4px;
+    padding-left: 4px;
+    margin: 15px 20px;
+    display: inline-block;
+    border: 1px solid #b9b9b9;
+    text-align: right;
+}
+
+.specialBox .in {
+    display: table-cell;
+    vertical-align: bottom;
+    width: 52px;
+    height: 52px;
+    border: 1px solid #b9b9b9;
+    margin-top: -5px;
+}
+
+.specialBox:hover {
+    color: black;
+    border: 1px solid black;
+}
+
+.specialBox .in:hover {
+    color: black;
+    border: 1px solid black;
+}
+
+.boxintext {
+    margin-bottom: 3px;
+    margin-right: 2px;
+    line-height: 10px;
+    font-size: 6pt;
+}
+
+.boxintextex {
+    margin-bottom: 3px;
+    margin-right: -2px;
+    line-height: 10px;
+    font-size: 6pt;
+    width: 54px !important;
+    height: 53px !important;
+    font-weight: normal !important;
+}
+
+.boxtodo {
+    margin-bottom: 13px;
+    margin-right: 7px;
+}
+
+.help {
+    font-size: 8px;
+    margin-left: 25px;
+}
+
+#paypalbox {
+    width: 200px;
+    height: 50px;
+    border: 12px solid;
+    border-color: #d0d0d0;
+    background-color: #e4e4e4;
+    margin: 0 auto;
+}
+
+#paypalform input {
+    margin-top: 12px;
+    margin-left: 50px;
+}
+
+#wiki {
+    color: maroon;
+}
+
+#itchioframe {
+    display: block;
+    text-align: center;
+    overflow: auto;
+}
+
+.icon {
+    margin-right: 2px;
+}
+
+#platforms>a>img {
+    border: 6px solid #888888;
+    transition: all .2s ease;
+}
+
+#platforms>a>img:hover {
+    border: 6px solid #111111;
+}
+
+#bindings>a>img {
+    border: 6px solid #888888;
+    transition: all .2s ease;
+}
+
+#bindings>a>img:hover {
+    border: 6px solid #111111;
+}
+
+#extralibs>a>img {
+    transition: all .2s ease;
+}
+
+#extralibs>a>img:hover {
+    filter: contrast(200%);
+}
+
+#raylibtech>a>img {
+    transition: all .2s ease;
+}
+
+#raylibtech>a>img:hover {
+    filter: contrast(180%);
+}
+\ No newline at end of file
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..852ebc6 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"><a class="anchor-link" href="#learning-resources"></a>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"><a class="anchor-link" href="#awards"></a>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"><a class="anchor-link" href="#platforms"></a>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"><a class="anchor-link" href="#bindings"></a>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"><a class="anchor-link" href="#extra-libraries"></a>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"><a class="anchor-link" href="#raylibtech-tools"></a>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"><a class="anchor-link" href="#community"></a>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"><a class="anchor-link" href="#contributions"></a>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,33 +203,33 @@
                     </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"><a class="anchor-link" href="#features"></a>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"><a class="anchor-link" href="#architecture"></a>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>
+                <a class="architecture-image-container" href="images/raylib_architecture_v4.2.png" target="_blank"><img src="images/raylib_architecture_v4.2.png" title="raylib architecture" alt="raylib architecture" width="800" /></a>
                 <br>
             </div>
 
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>
author	Ray <[email protected]>	2023-01-19 20:49:25 +0100
committer	GitHub <[email protected]>	2023-01-19 20:49:25 +0100
commit	5684133aa766d54d200d1931697d99e76affcc8f (patch)
tree	a872c1ab0ef87ffe01e74a90984808692efe9273
parent	b5b8c2328dfa95178489cb627032e4d91bf55726 (diff)
parent	fb63eed4bc87c608a43406c3df6b6092e41bd010 (diff)
download	raylib.com-5684133aa766d54d200d1931697d99e76affcc8f.tar.gz raylib.com-5684133aa766d54d200d1931697d99e76affcc8f.zip