Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/ou-50.js.html

Created January 4, 2019 13:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/9ca101e6214a6543e6a7e06a1613edf2 to your computer and use it in GitHub Desktop.
Save nfreear/9ca101e6214a6543e6a7e06a1613edf2 to your computer and use it in GitHub Desktop.
Download ZIP
The OU at 50 | https://www.open.ac.uk
Raw
ou-50.js.html
<!doctype html> <title> OU at 50 &mdash; The Open University </title>
<style>
#ou-header a.ou-logo {
float: left;
display: block;
margin: 20px 0 0;
height: 90px; /* height: 56px; */
width: 150px;
/* background-image: url(/ouheaders/gui/England-50.svg?1.1.1.47); */
background-size: 150px 56px;
position: relative;
overflow: hidden;
}
#XX-ou-header a.ou-logo img {
border: 0;
top: 0;
position: relative;
width: 258px;
visibility: hidden;
}
.clearfix { clear: both; }
</style>
<div id="ou-header">
<a
class="ou-logo england"
href="https://www.open.ac.uk/"
title="The Open University"
><img
src="https://www.open.ac.uk/ouheaders/gui/sprite.png?1.1.1.47"
srcset="https://www.open.ac.uk/ouheaders/gui/sprite.png?1.1.1.47 1x, https://www.open.ac.uk/ouheaders/gui/sprite-x3.png?1.1.1.47 2x"
alt="The Open University"
/></a>
</div>
<p class="clearfix"> Hello world! </p>
<script>
(function (W, D, selector, src_50) {
const IMG = D.querySelector(selector);
const BODY = D.querySelector('body');
const IS_2019 = ( new Date().getFullYear() === 2019 );
if (IS_2019) {
IMG.src = src_50;
IMG.srcset = src_50;
IMG.parentElement.className += ' ou-logo-50';
BODY.className += ' ou-50';
}
console.warn('ou-50:', IMG, IS_2019);
})(window, window.document, 'a.ou-logo img', 'https://www.open.ac.uk/ouheaders/gui/England-50.svg?1.1.1.47')
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment