Implement an Xbox dashboard style jumbotron anim

This commit is contained in:
Matt Borgerson 2022-06-21 20:00:54 -07:00
parent 4792370ab6
commit 157b64d2e4
8 changed files with 256 additions and 42 deletions

View File

@ -40,7 +40,7 @@ const int numParticles = 35;
const int numSpotlights = 5; const int numSpotlights = 5;
const vec2 texSize = vec2(128.0,128.0); const vec2 texSize = vec2(128.0,128.0);
const vec4 bgColor = vec4(0.); const vec4 bgColor = vec4(0.);
const vec4 fgColor = vec4(0.259, 0.890, 0.208, 1.); const vec4 fgColor = vec4(0.384, 0.792, 0.075, 1.);
const vec4 particleColor = fgColor; const vec4 particleColor = fgColor;
const vec4 textPos = vec4(0.01, 0, 0.98, 0.125); const vec4 textPos = vec4(0.01, 0, 0.98, 0.125);
@ -321,6 +321,8 @@ function render(ts) {
requestAnimationFrame(render); requestAnimationFrame(render);
return; return;
} }
if (!(gl = getRenderingContext()))
return;
if (pending_disable_fallback) { if (pending_disable_fallback) {
document.getElementById("logo-canvas").style.visibility = "visible"; document.getElementById("logo-canvas").style.visibility = "visible";
document.getElementById("logo-fallback").style.visibility = "hidden"; document.getElementById("logo-fallback").style.visibility = "hidden";
@ -339,7 +341,7 @@ function render(ts) {
} }
function getRenderingContext() { function getRenderingContext() {
var canvas = document.querySelector("canvas"); var canvas = document.querySelector("#logo-canvas");
canvas.width = 512; canvas.width = 512;
canvas.height = 512; canvas.height = 512;
var gl = canvas.getContext("webgl"); var gl = canvas.getContext("webgl");

View File

@ -0,0 +1,83 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="207.3632pt"
height="84.864967pt"
viewBox="0 0 73.15313 29.938475"
version="1.1"
id="svg841"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="logo-green.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs835" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="53.664354"
inkscape:cy="33.84011"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1908"
inkscape:window-height="993"
inkscape:window-x="1928"
inkscape:window-y="1121"
inkscape:window-maximized="0"
units="px"
inkscape:pagecheckerboard="0" />
<metadata
id="metadata838">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-10.729956,-10.135178)">
<g
aria-label="xemu"
style="font-style:normal;font-weight:normal;font-size:63.40210724px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;opacity:1;fill:#62ca13;fill-opacity:1;stroke:none;stroke-width:0.59907502;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="text879-9-3">
<path
d="m 24.08244,33.68272 q -0.380413,-0.760825 -0.951032,-1.673815 -0.532578,-0.912991 -1.179279,-1.864022 -0.646702,-0.989073 -1.369486,-1.940105 -0.684742,-0.951031 -1.369485,-1.787939 -0.684743,0.874949 -1.445568,1.82598 -0.760825,0.951032 -1.483609,1.940105 -0.684743,0.951032 -1.293403,1.864022 -0.608661,0.91299 -1.027114,1.635774 h -3.233508 q 1.255362,-2.282476 3.043301,-4.679075 1.825981,-2.434641 3.575879,-4.602993 l -6.352891,-8.369078 h 3.537838 l 4.755157,6.162685 4.374746,-6.162685 h 3.347631 l -5.820313,8.178872 q 1.711857,2.244434 3.423713,4.679075 1.749899,2.434641 2.967219,4.793199 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:38.04126358px;font-family:'ubuntu mono';-inkscape-font-specification:'ubuntu mono';fill:#62ca13;fill-opacity:1;stroke:none;stroke-width:0.59907502;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1469" />
<path
d="m 38.500006,15.61312 q 3.575879,0 5.515983,2.244435 1.940105,2.206393 1.940105,6.733303 v 1.103197 h -12.6297 q 0.190207,2.738971 1.78794,4.184539 1.635774,1.407527 4.564951,1.407527 1.673816,0 2.853095,-0.266289 1.179279,-0.266289 1.787939,-0.570619 l 0.418454,2.662888 q -0.570619,0.30433 -2.054228,0.646702 -1.483609,0.342371 -3.347631,0.342371 -2.282476,0 -4.032374,-0.684743 -1.711857,-0.722784 -2.853095,-1.940104 -1.141238,-1.217321 -1.711857,-2.891136 -0.570619,-1.711857 -0.570619,-3.690003 0,-2.358558 0.722784,-4.108456 0.722784,-1.749898 1.902064,-2.891136 1.179279,-1.141238 2.662888,-1.711857 1.483609,-0.570619 3.043301,-0.570619 z m 4.260622,7.53217 q 0,-2.244434 -1.17928,-3.537837 -1.179279,-1.331445 -3.119383,-1.331445 -1.103197,0 -2.016187,0.418454 -0.874949,0.418454 -1.521651,1.103197 -0.646701,0.684743 -1.027114,1.559692 -0.380412,0.874949 -0.494536,1.787939 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:38.04126358px;font-family:'ubuntu mono';-inkscape-font-specification:'ubuntu mono';fill:#62ca13;fill-opacity:1;stroke:none;stroke-width:0.59907502;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1471" />
<path
d="m 49.22757,16.52611 q 2.282476,-0.874949 4.298663,-0.874949 1.103196,0 2.054228,0.342372 0.989073,0.30433 1.673816,0.989072 1.635774,-1.331444 3.499796,-1.331444 0.91299,0 1.711857,0.342372 0.836907,0.342371 1.445568,1.027114 0.646701,0.684742 1.027114,1.711857 0.380412,1.027114 0.380412,2.396599 V 33.68272 H 62.46593 V 21.053021 q 0,-1.369486 -0.608661,-2.09227 -0.60866,-0.722784 -1.52165,-0.722784 -0.456495,0 -0.951032,0.228248 -0.494536,0.228247 -0.91299,0.722784 0.228248,0.874949 0.228248,1.940104 v 5.744231 H 55.84675 v -5.782272 q 0,-1.331444 -0.418454,-2.09227 -0.418454,-0.760825 -1.635774,-0.760825 -0.760826,0 -1.711857,0.342372 V 33.68272 H 49.22757 Z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:38.04126358px;font-family:'ubuntu mono';-inkscape-font-specification:'ubuntu mono';fill:#62ca13;fill-opacity:1;stroke:none;stroke-width:0.59907502;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1473" />
<path
d="m 83.008138,33.188184 q -1.027114,0.266289 -2.738971,0.570619 -1.673816,0.30433 -3.956292,0.30433 -2.016187,0 -3.347631,-0.570619 -1.331444,-0.60866 -2.168352,-1.673816 -0.836908,-1.103196 -1.179279,-2.586806 -0.342372,-1.483609 -0.342372,-3.271548 v -9.92877 h 3.119384 v 9.244027 q 0,3.271549 0.951032,4.641034 0.989073,1.369486 3.271548,1.369486 0.494537,0 0.989073,-0.03804 0.532578,-0.03804 0.989073,-0.07608 0.456495,-0.07608 0.798867,-0.114124 0.342371,-0.07608 0.456495,-0.114124 V 16.031574 h 3.157425 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:38.04126358px;font-family:'ubuntu mono';-inkscape-font-specification:'ubuntu mono';fill:#62ca13;fill-opacity:1;stroke:none;stroke-width:0.59907502;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1475" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="128"
height="128"
viewBox="0 0 33.866666 33.866668"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1">
<rect
style="fill:#062a00;stroke-width:1.05833333;fill-opacity:1;stroke:#2c6d0f;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
id="rect846"
width="33.866665"
height="33.866665"
x="8.9009603e-07"
y="8.9009603e-07" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.52916667;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 8.9009603e-7,8.9009603e-7 33.866664,33.866664"
id="path1520" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.52916667;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 22.053307,12.062727 -5.162329,4.91296"
id="path1522" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 22.053307,12.062727 16.933333,0"
id="path1668" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 22.053307,12.062727 11.81336,4.870606"
id="path1994" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.52916667;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 11.728649,21.888647 5.162329,-4.91296"
id="path4202" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 11.728649,21.888647 5.204684,11.97802"
id="path4204" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 11.728649,21.888647 0,16.933333"
id="path4206" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

6
resources/three.min.js vendored Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 94 KiB

View File

@ -25,6 +25,10 @@
<title>{%block title %}{% endblock %}{% if self.title() %} | {% endif %}xemu: Original Xbox Emulator</title> <title>{%block title %}{% endblock %}{% if self.title() %} | {% endif %}xemu: Original Xbox Emulator</title>
{% block append_head %}{% endblock %} {% block append_head %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-163809672-1"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-163809672-1"></script>
<script> <script>
@ -38,7 +42,7 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark navbar-transparent">
<a class="navbar-brand" href="{{ main_url_base }}/"><img alt="xemu logo" src="/logo-green.svg" style="height: 1em"></a> <a class="navbar-brand" href="{{ main_url_base }}/"><img alt="xemu logo" src="/logo-green.svg" style="height: 1em"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -77,10 +81,6 @@
</div> </div>
</main> </main>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{% block append_foot %}{% endblock %} {% block append_foot %}{% endblock %}
</body> </body>
</html> </html>

View File

@ -67,7 +67,7 @@
margin-right: 0.75em; margin-right: 0.75em;
} }
canvas { #logo-canvas {
display: block; display: block;
visibility: hidden; visibility: hidden;
width: 256px; width: 256px;
@ -78,22 +78,44 @@ canvas {
padding: 0; padding: 0;
border: none; border: none;
} }
#bg-scene {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.jumbotron {
position: relative;
}
@media only screen and (min-width: 768px)
{
.navbar-transparent
{
background-color: transparent !important;
transition: background-color 200ms linear;
}
}
</style> </style>
{% endblock %} {% endblock %}
{% block jumbotron %} {% block jumbotron %}
<div class="jumbotron"> <div class="jumbotron d-flex align-items-center min-vh-100">
<div id="bg-scene"></div>
<div class="container"> <div class="container">
<div class="row mt-5"> <div class="row mt-5">
<div class="col-md-6 mt-4 text-center"> <div class="col-md-6 mt-4 pb-5 pb-md-0 text-center">
<img src="xbox_logo.png" class="img-fluid" width=450 /> <img src="xbox_logo.png" class="img-fluid" width=450 />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h1 class="display-3"> <h1 class="display-3">
<canvas id="logo-canvas" class="gl-logo"></canvas> <canvas id="logo-canvas" class="gl-logo"></canvas>
<img id="logo-fallback" alt="xemu logo" src="/logo-green.svg" style="height: 1.03em;"> <img id="logo-fallback" alt="xemu logo" src="/logo-green-jumbotron.svg" style="height: 1.03em;">
</h1> </h1>
<h4 class="card-subtitle mb-2 text-muted">Original Xbox Emulator</h4> <h4 class="card-subtitle mb-2">Original Xbox Emulator</h4>
<p> <p>
A free and open-source application that emulates the original Microsoft A free and open-source application that emulates the original Microsoft
Xbox game console, enabling people to play their original Xbox games on Xbox game console, enabling people to play their original Xbox games on
@ -103,21 +125,21 @@ canvas {
<div class="container pl-2 p-0"> <div class="container pl-2 p-0">
<div class="row"> <div class="row">
<div class="column text-center text-md-left p-2"> <div class="column text-center text-md-left p-2">
<a class="btn btn-secondary btn-lg" role="button" id="download-gen" href="/docs/download"> <a class="btn btn-green btn-lg" role="button" id="download-gen" href="/docs/download">
<i class="fa fa-laptop button-icon" aria-hidden="true"></i>View Download Options <i class="fa fa-laptop button-icon" aria-hidden="true"></i>View Download Options
</a> </a>
<a class="btn btn-secondary btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/mborgerson/xemu/releases/latest/download/xemu-win-release.zip"> <a class="btn btn-green btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/mborgerson/xemu/releases/latest/download/xemu-win-release.zip">
<i class="fab fa-windows button-icon" aria-hidden="true"></i>Download for Windows <i class="fab fa-windows button-icon" aria-hidden="true"></i>Download for Windows
</a> </a>
<a class="btn btn-secondary btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/mborgerson/xemu/releases/latest/download/xemu-macos-universal-release.zip"> <a class="btn btn-green btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/mborgerson/xemu/releases/latest/download/xemu-macos-universal-release.zip">
<i class="fab fa-apple button-icon" aria-hidden="true"></i>Download for macOS <i class="fab fa-apple button-icon" aria-hidden="true"></i>Download for macOS
</a> </a>
<a class="btn btn-secondary btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux"> <a class="btn btn-green btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux">
<i class="fab fa-linux button-icon" aria-hidden="true"></i>Download for Linux <i class="fab fa-linux button-icon" aria-hidden="true"></i>Download for Linux
</a> </a>
</div> </div>
<div class="column p-2"> <div class="column p-2">
<strong>Latest Release:</strong> v{{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}}) <strong>Latest release:</strong> v{{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}})
<br /> <br />
<a href="/docs/download" id="download-options" style="display: none">Alternative download options</a> <a href="/docs/download" id="download-options" style="display: none">Alternative download options</a>
</div> </div>
@ -126,18 +148,12 @@ canvas {
</div> </div>
</div> </div>
</div> </div>
<div class="scroll"></div>
</div> </div>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/?list=PLec5KNGR_nILyzdbQ8OyFpceyrTRUBNNU&autoplay=1&mute=1&modestbranding=1&loop=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<hr>
<h2 class="mb-4 text-center">Features</h2> <h2 class="mb-4 text-center">Features</h2>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
@ -166,6 +182,10 @@ canvas {
</div> </div>
</div> </div>
<hr>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/?list=PLec5KNGR_nILyzdbQ8OyFpceyrTRUBNNU&autoplay=1&mute=1&modestbranding=1&loop=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<hr> <hr>
<div class="" id="compatibility"> <div class="" id="compatibility">
@ -201,8 +221,6 @@ canvas {
{% endblock %} {% endblock %}
{% block append_foot %} {% block append_foot %}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.plugins.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// Show platform-specific download button // Show platform-specific download button
var platform = undefined; var platform = undefined;
@ -219,7 +237,63 @@ if (platform != undefined) {
$('#download-options').show(); $('#download-options').show();
} }
</script> </script>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript">
var canvas = document.querySelector('#bg-scene');
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 50, canvas.offsetWidth/canvas.offsetHeight, 0.1, 1000 );
scene.fog = new THREE.Fog('black', 0.5, 2.75);
scene.background = new THREE.Color('black');
var renderer = new THREE.WebGLRenderer();
renderer.setSize( canvas.offsetWidth, canvas.offsetHeight );
renderer.setPixelRatio( window.devicePixelRatio );
canvas.appendChild( renderer.domElement );
const texture = new THREE.TextureLoader().load("mesh_pattern.svg");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 50, -25 );
const geometry = new THREE.SphereGeometry( 1, 50, 25 );
var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.BackSide } );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
camera.position.z = 1;
var clock = new THREE.Clock();
var render = function () {
requestAnimationFrame( render );
var delta = clock.getDelta();
sphere.rotation.y += 0.01 * delta;
renderer.render(scene, camera);
};
render();
window.addEventListener('resize', function(){
camera.aspect = canvas.offsetWidth/canvas.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
}, false);
</script>
<script type="text/javascript" src="gl_logo.js"></script>
<script type="text/javascript">
function updateNavbarTransparency() {
var nav = $(".navbar");
var t = $(document).scrollTop() < ($(".jumbotron")[0].offsetHeight-nav.height());
nav.toggleClass('navbar-transparent', t);
}
$(document).scroll(updateNavbarTransparency);
$(function () {
$(".navbar-toggle").click(updateNavbarTransparency);
});
updateNavbarTransparency();
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.plugins.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// Lazy-load images // Lazy-load images
var lazyInstance = $('img.lazy').Lazy({ var lazyInstance = $('img.lazy').Lazy({
@ -383,5 +457,5 @@ var options = {
var chart = new ApexCharts(document.querySelector("#title_stats"), options); var chart = new ApexCharts(document.querySelector("#title_stats"), options);
chart.render(); chart.render();
</script> </script>
<script type="text/javascript" src="gl_logo.js"></script>
{% endblock %} {% endblock %}

View File

@ -1,6 +1,5 @@
// Your variable overrides // Your variable overrides
/*$body-bg: #303030;*/ /*$body-bg: #303030;*/
$body-color: #A7A7A7;
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
@ -21,9 +20,10 @@ $gray-600: #888 !default;
$gray-700: #444 !default; $gray-700: #444 !default;
$gray-800: #303030 !default; $gray-800: #303030 !default;
$gray-900: #222 !default; $gray-900: #222 !default;
$gray-1000: #111 !default;
$black: #000 !default; $black: #000 !default;
$xemu-logo-green: #42e335ff !default; $xemu-logo-green: #62ca13ff !default;
$blue: #375a7f !default; $blue: #375a7f !default;
$indigo: #6610f2 !default; $indigo: #6610f2 !default;
@ -36,25 +36,25 @@ $green: #00bc8c !default;
$teal: #20c997 !default; $teal: #20c997 !default;
$cyan: #3498DB !default; $cyan: #3498DB !default;
$primary: darken($xemu-logo-green, 10%) !default; $primary: darken($xemu-logo-green, 5%) !default;
$secondary: $gray-500 !default; $secondary: $gray-500 !default;
$success: $green !default; $success: $green !default;
$info: $cyan !default; $info: $cyan !default;
$warning: $yellow !default; $warning: $yellow !default;
$danger: $red !default; $danger: $red !default;
$light: $gray-500 !default; $light: $gray-500 !default;
$dark: $gray-800 !default; $dark: $gray-1000 !default;
$yiq-contrasted-threshold: 175 !default; $yiq-contrasted-threshold: 175 !default;
// Body // Body
$body-bg: $gray-900 !default; $body-bg: $gray-900 !default;
$body-color: $white !default; $body-color: $gray-400;
// Links // Links
$link-color: $gray-300 !default; $link-color: $white !default;
$link-hover-color: $white !default; $link-hover-color: $white !default;
// Fonts // Fonts
@ -67,7 +67,7 @@ $h1-font-size: 3rem !default;
$h2-font-size: 2.5rem !default; $h2-font-size: 2.5rem !default;
$h3-font-size: 2rem !default; $h3-font-size: 2rem !default;
$text-muted: $gray-600 !default; $text-muted: $gray-500 !default;
// Tables // Tables
@ -142,7 +142,7 @@ $pagination-disabled-border-color: transparent !default;
// Jumbotron // Jumbotron
$jumbotron-bg: $gray-800 !default; $jumbotron-bg: $gray-1000 !default;
// Cards // Cards
@ -422,13 +422,6 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Roboto:400,400italic&di
} }
} }
body {
background-image: url(xbox_duke.png);
background-position: -200px 40em;
background-size: 400px 311px;
background-repeat: no-repeat;
}
.btn-icon { .btn-icon {
padding-right: 0.5em; padding-right: 0.5em;
} }
@ -445,3 +438,7 @@ body {
.btn-secondary.focus { .btn-secondary.focus {
color: $gray-900; color: $gray-900;
} }
.btn-green {
@include button-outline-variant(#82b540, $gray-900, #8dc103, #8dc103);
}