Commit f43caa6c authored by Dan Pudsey's avatar Dan Pudsey

[DP-107] - Added image minification

Updated some styles and reduced page size using image minification via gulp
parent fa11839f

Too many changes to show.

To preserve performance only 1000 of 1000+ files are displayed.

......@@ -36,7 +36,18 @@
<meta name="msapplication-TileImage" content="assets/img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script type="text/javascript" src="https://cdn.rawgit.com/mikeflynn/egg.js/master/egg.min.js"></script>
<script src="assets/components/modernizr/modernizr.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-32867105-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-32867105-1');</script>
</head>
<body>
<header class="header container" role="banner">
......@@ -90,7 +101,7 @@
</div>
<div class="panel-content__right panel-content__right--show">
<img
src="/assets/img/page-about/dan-pudsey-profile-picture.jpg"
src="/assets/img/image-min/dan-pudsey-profile-picture.jpg"
width="300"
alt="Dan Pudsey dressed as the March hare"
/>
......
......@@ -4,10 +4,10 @@
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 106.4rem;
width: 110.4rem;
max-width: 100%;
margin: auto;
padding: 8rem 4rem; }
padding: 8rem 6rem; }
.clear:before, .clear:after {
content: ' ';
......@@ -28,6 +28,8 @@
html {
font-size: 10px;
background-color: #01011f; }
html.senor-crabson {
cursor: url("/assets/img/favicon/favicon-32x32.png"), auto; }
body {
font: 400 16px/1.6 'Helvetica Neue', Helvetica, Arial;
......@@ -551,10 +553,10 @@ th {
list-style: none; }
.container {
width: 106.4rem;
width: 110.4rem;
max-width: 100%;
padding-left: 4rem;
padding-right: 4rem;
padding-left: 6rem;
padding-right: 6rem;
margin: auto; }
@media screen and (max-width: 767px) {
.container {
......@@ -663,7 +665,7 @@ th {
.panel-header--bottom {
position: absolute;
bottom: 0;
width: 106.4rem;
width: 110.4rem;
max-width: 100%;
left: 0;
right: 0; }
......@@ -1069,6 +1071,70 @@ th {
#particles {
height: 40rem; } }
html.bleak {
background-color: #000; }
.bleak .hero, .bleak
.panel--two, .bleak
.panel--three, .bleak
.panel--blog, .bleak
.panel--four {
background: #000; }
.bleak .hero::after, .bleak
.panel--two::after, .bleak
.panel--three::after, .bleak
.panel--blog::after, .bleak
.panel--four::after {
border-left-color: #000; }
.bleak .footer {
background-color: #fff; }
.bleak .footer p,
.bleak .footer a,
.bleak .footer .panel-content__title {
color: #000; }
.bleak .footer.panel.panel--colour a {
color: #696969; }
.bleak .footer .particles {
display: none; }
.bleak .hero--homepage h1.neon-highlight {
filter: grayscale(1); }
.bleak img {
filter: saturate(0) grayscale(1) brightness(1) invert(1); }
.bleak .btn {
background-color: #fff;
color: #000;
border-bottom: #fff; }
.bleak .btn .hover span {
background-color: #696969; }
.bleak .btn:active {
border-top: 0.5rem solid #fff; }
.bleak .hero__introduction a {
color: #696969; }
.bleak .hero-code {
background-color: #fff; }
.bleak .hero-code__screen {
background-color: #000; }
.bleak .hero-code__screen * {
color: #fff; }
.bleak .hero-code__screen a,
.bleak .hero-code__screen .confetti-button,
.bleak .hero-code__screen .code-string {
color: #696969; }
.bleak .panel a {
color: #000; }
.bleak .panel.panel--colour a {
color: #fff; }
@media print {
* {
background: transparent !important;
......
This diff is collapsed.
......@@ -13175,10 +13175,15 @@ var animation = bodymovin.loadAnimation({
// Easter egg
var egg = new Egg();
egg
.addCode("up,up,down,down", function() {
$(".hero-code__screen").addClass("hero-code__screen--glitch");
}).listen();
const html = document.querySelector("html");
egg.addCode("c,r,a,b,s,o,n", function() {
html.classList.add("senor-crabson");
}).listen();
egg.addCode("b,l,e,a,k", function() {
html.classList.add("bleak");
}).listen();
// This allows the confetti button to be re-animated
var classname = document.getElementsByClassName("confetti-button");
......
......@@ -50,10 +50,15 @@
// Easter egg
var egg = new Egg();
egg
.addCode("up,up,down,down", function() {
$(".hero-code__screen").addClass("hero-code__screen--glitch");
}).listen();
const html = document.querySelector("html");
egg.addCode("c,r,a,b,s,o,n", function() {
html.classList.add("senor-crabson");
}).listen();
egg.addCode("b,l,e,a,k", function() {
html.classList.add("bleak");
}).listen();
// This allows the confetti button to be re-animated
var classname = document.getElementsByClassName("confetti-button");
......