From 629087c403d9112fb3a859cc6064557b3980b274 Mon Sep 17 00:00:00 2001 From: Colleen Date: Mon, 16 Jan 2023 08:10:13 -0400 Subject: Reformatted CSS --- common/main.css | 725 ++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 624 insertions(+), 101 deletions(-) diff --git a/common/main.css b/common/main.css index 7b25fd1..b6c6137 100644 --- a/common/main.css +++ b/common/main.css @@ -2,111 +2,634 @@ 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; +} + +::-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; +} /* 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; +} + +.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%); +} \ No newline at end of file -- cgit v1.2.3 From c3b1e540fb7e5a595d7b43860a43dbcea5a5ba1d Mon Sep 17 00:00:00 2001 From: Colleen Date: Tue, 17 Jan 2023 04:57:45 -0400 Subject: Updated style; Added tracking acknowledgement banner. --- common/common.js | 36 ++++++ common/examples.css | 27 ++--- common/main.css | 335 ++++++++++++++++++++++++---------------------------- examples.html | 52 ++++---- games.html | 52 ++++---- index.html | 116 +++++++++--------- license.html | 1 + 7 files changed, 315 insertions(+), 304 deletions(-) create mode 100644 common/common.js 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 \ +

NOTE: This website uses Google Analytics to collect visitor statistics.

\ + \ + "; + + 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 @@ -
- - + +
-
- - - - - - - - - - - -
-
- about -
examples
- games - cheatsheet - wiki +
+
+ + + + + + + + + + + +
+
+ about +
examples
+ games + cheatsheet + wiki +
+
+
+

raylib examples are organized by colors depending on the raylib module they focus.

diff --git a/games.html b/games.html index 21067e9..aa61d5c 100644 --- a/games.html +++ b/games.html @@ -32,34 +32,38 @@ -
- - + +
-
- - - - - - - - - - - -
-
- about - examples -
games
- cheatsheet - wiki +
+
+ + + + + + + + + + + +
+
+ about + examples +
games
+ cheatsheet + wiki +
+
+
+

raylib games are organized in two categories:

diff --git a/index.html b/index.html index 058bb2b..0d6a2ae 100644 --- a/index.html +++ b/index.html @@ -30,34 +30,38 @@ -
- - + +
-
- - - - - - - - - - - -
-
-
about
- examples - games - cheatsheet - wiki +
+
+ + + + + + + + + + + +
+
+
about
+ examples + games + cheatsheet + wiki +
+
+
+

raylib is a simple and easy-to-use library to enjoy videogames programming.

@@ -67,7 +71,7 @@

NOTE for ADVENTURERS: 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?


-

raylib learning resources

+

raylib learning resources


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. Best way to learn to code is reading code.


@@ -83,7 +87,7 @@

Apart from those materials, there are plenty of tutorials created by the amazing raylib community. It's highly recommended to join the friendly raylib Discord Community to stay up to date of latest raylib news and ask for help when required!


-

raylib awards

+

raylib awards


raylib has received several recognitions in the last years. Here there some awards received from Google and Epic Games.


@@ -95,7 +99,7 @@

-

raylib supported platforms

+

raylib supported platforms


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.


@@ -112,7 +116,7 @@

-

raylib language bindings

+

raylib language bindings


You can use raylib with multiple programming languages, there are +60 bindings! Here is a list with some of them:


@@ -131,7 +135,7 @@

-

raylib extra libraries

+

raylib extra libraries


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.


@@ -147,7 +151,7 @@

-

raylib technologies tools

+

raylib technologies tools


raylib is the base technology for raylib technologies tools development! Several multiplatform tools have been developed using raylib and raygui. Check them out!


@@ -168,7 +172,7 @@

-

raylib community

+

raylib community


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!


@@ -184,7 +188,7 @@

-

raylib contributions

+

raylib contributions


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!


@@ -199,30 +203,30 @@
-

raylib features

-
-
- - NO external dependencies, all required libraries included with raylib
- - Multiplatform: Windows, Linux, MacOS, RPI, Android, HTML5... and more!
- - Written in plain C code (C99) in PascalCase/camelCase notation
- - Hardware accelerated with OpenGL (1.1, 2.1, 3.3, 4.3 or ES 2.0)
- - Unique OpenGL abstraction layer: rlgl
- - Powerful Fonts module (XNA SpriteFonts, BMfonts, TTF, SDF)
- - Outstanding texture formats support, including compressed formats (DXT, ETC, ASTC)
- - Full 3d support for 3d Shapes, Models, Billboards, Heightmaps and more!
- - Flexible Materials system, supporting classic maps and PBR maps
- - Animated 3d models supported (skeletal bones animation)
- - Shaders support, including Model shaders and Postprocessing shaders
- - Powerful math module for Vector, Matrix and Quaternion operations: raymath
- - Audio loading and playing with streaming support (WAV, OGG, MP3, FLAC, XM, MOD)
- - VR stereo rendering support with configurable HMD device parameters
- - Huge examples collection with +120 code examples!
- - Bindings to +50 programming languages!
- - Free and open source. Check [LICENSE].
-
-
-
-

raylib architecture

+

raylib features

+
+
    +
  • NO external dependencies, all required libraries included with raylib
    • +
  • Multiplatform: Windows, Linux, MacOS, RPI, Android, HTML5... and more!
    • +
  • Written in plain C code (C99) in PascalCase/camelCase notation
    • +
  • Hardware accelerated with OpenGL (1.1, 2.1, 3.3, 4.3 or ES 2.0)
    • +
  • Unique OpenGL abstraction layer: rlgl
    • +
  • Powerful Fonts module (XNA SpriteFonts, BMfonts, TTF, SDF)
    • +
  • Outstanding texture formats support, including compressed formats (DXT, ETC, ASTC)
    • +
  • Full 3d support for 3d Shapes, Models, Billboards, Heightmaps and more!
    • +
  • Flexible Materials system, supporting classic maps and PBR maps
    • +
  • Animated 3d models supported (skeletal bones animation)
    • +
  • Shaders support, including Model shaders and Postprocessing shaders
    • +
  • Powerful math module for Vector, Matrix and Quaternion operations: raymath
    • +
  • Audio loading and playing with streaming support (WAV, OGG, MP3, FLAC, XM, MOD)
    • +
  • VR stereo rendering support with configurable HMD device parameters
    • +
  • Huge examples collection with +120 code examples!
    • +
  • Bindings to +50 programming languages!
    • +
  • Free and open source. Check [LICENSE].
    • +
+
+
+

raylib architecture


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 standalone mode, independently of raylib library.

raylib architecture diff --git a/license.html b/license.html index c5518c2..c7bbd6f 100644 --- a/license.html +++ b/license.html @@ -23,6 +23,7 @@ +