Commit 2eef2795 authored by Dan Pudsey's avatar Dan Pudsey

[DP-110] - Added TSH panel

Removed node_modules also.
parent d0d00a7d
node_modules
This diff is collapsed.
This diff is collapsed.
......@@ -9,6 +9,38 @@
margin: auto;
padding: 8rem 6rem; }
.panel-header h2:focus, .panel-content:focus {
outline-offset: -0.4rem;
outline-color: #02adfd;
animation-name: focusFadeOut;
animation-duration: 0.6s;
animation-delay: 1s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards; }
.code a {
position: relative; }
.code a::after {
content: "";
position: absolute;
margin: 0 auto;
bottom: -0.3rem;
left: 0;
width: 100%;
height: 0.2rem;
background-color: #f31982;
opacity: 0.3;
-ms-transform: scaleX(0.8);
transform: scaleX(0.8);
transition-property: opacity, transform;
transition-duration: 0.3s; }
.code a:hover::after {
opacity: 1;
-ms-transform: scaleX(1);
transform: scaleX(1); }
.clear:before, .clear:after {
content: ' ';
display: table; }
......@@ -171,7 +203,9 @@ a:hover {
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
border-bottom: 1px dotted;
text-decoration: none;
cursor: help; }
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
......@@ -470,7 +504,7 @@ code {
@keyframes focusFadeOut {
from {
outline-color: #02ADFD; }
outline-color: #02adfd; }
to {
outline-color: #fff; } }
......@@ -597,6 +631,19 @@ code {
color: #fff; }
.panel a {
color: #0012d3; }
.panel--tsh {
/* fallback/image non-cover color */
background-color: #ffadad;
/* Firefox 3.6+ */
/* Safari 4+, Chrome 1+ */
/* Safari 5.1+, Chrome 10+ */
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, #ffadad 0%, #fc4d69 100%);
/* IE10+ */
/* Standard */
background: linear-gradient(to right, #ffadad 0%, #fc4d69 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 ); }
.panel--two {
/* fallback/image non-cover color */
background-color: #f31982;
......@@ -656,6 +703,18 @@ code {
color: #01011f; }
.panel--small .panel-content {
padding: 2rem; }
.panel--past-news {
background-color: #0038a0;
text-align: left; }
.panel--past-news .panel-content {
padding-left: 6rem;
padding-right: 6rem; }
.panel--past-news header > p {
margin-bottom: 1rem; }
.panel--past-news header a {
color: #fff; }
.panel--content-led {
min-height: 10rem; }
.panel--white-bg p {
color: #000; }
.panel--white-bg .panel-content__title {
......@@ -671,10 +730,10 @@ code {
/* Safari 4+, Chrome 1+ */
/* Safari 5.1+, Chrome 10+ */
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, #0012d3 0%, #02ADFD 100%);
background-image: -o-linear-gradient(left, #0012d3 0%, #02adfd 100%);
/* IE10+ */
/* Standard */
background: linear-gradient(to right, #0012d3 0%, #02ADFD 100%);
background: linear-gradient(to right, #0012d3 0%, #02adfd 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 );
color: #fff; }
......@@ -698,14 +757,6 @@ code {
.panel-header h2 {
margin: 0;
padding: 4rem 2rem 2rem; }
.panel-header h2:focus {
outline-offset: -0.4rem;
outline-color: #02ADFD;
animation-name: focusFadeOut;
animation-duration: 0.6s;
animation-delay: 1s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards; }
@media screen and (max-width: 767px) {
.panel .panel-content {
......@@ -730,6 +781,14 @@ code {
display: block;
margin-bottom: 2rem; } }
.panel-content__image--caption {
padding: 2rem;
background-color: lightgrey; }
.panel-content__image--caption p {
margin: 0;
font-size: 1.2rem;
font-weight: 800; }
.panel-content__title {
margin: 0;
color: #fff;
......@@ -756,6 +815,11 @@ code {
-ms-flex-pack: end;
justify-content: flex-end; }
.code {
max-width: 100%; }
.code a {
color: #f31982; }
.footer {
display: -ms-flexbox;
display: flex;
......@@ -777,6 +841,38 @@ code {
margin: auto;
padding: 8rem 6rem; }
.panel-header h2:focus, .panel-content:focus {
outline-offset: -0.4rem;
outline-color: #02adfd;
animation-name: focusFadeOut;
animation-duration: 0.6s;
animation-delay: 1s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards; }
.code a {
position: relative; }
.code a::after {
content: "";
position: absolute;
margin: 0 auto;
bottom: -0.3rem;
left: 0;
width: 100%;
height: 0.2rem;
background-color: #f31982;
opacity: 0.3;
-ms-transform: scaleX(0.8);
transform: scaleX(0.8);
transition-property: opacity, transform;
transition-duration: 0.3s; }
.code a:hover::after {
opacity: 1;
-ms-transform: scaleX(1);
transform: scaleX(1); }
.loader--object {
width: 20rem;
height: 20rem;
......@@ -811,6 +907,38 @@ code {
margin: auto;
padding: 8rem 6rem; }
.panel-header h2:focus, .panel-content:focus {
outline-offset: -0.4rem;
outline-color: #02adfd;
animation-name: focusFadeOut;
animation-duration: 0.6s;
animation-delay: 1s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards; }
.code a {
position: relative; }
.code a::after {
content: "";
position: absolute;
margin: 0 auto;
bottom: -0.3rem;
left: 0;
width: 100%;
height: 0.2rem;
background-color: #f31982;
opacity: 0.3;
-ms-transform: scaleX(0.8);
transform: scaleX(0.8);
transition-property: opacity, transform;
transition-duration: 0.3s; }
.code a:hover::after {
opacity: 1;
-ms-transform: scaleX(1);
transform: scaleX(1); }
.pln {
color: #fe9501; }
......@@ -821,7 +949,7 @@ code {
color: #fe9501; }
.com {
color: #02ADFD; }
color: #02adfd; }
.typ {
color: #fff; }
......@@ -849,6 +977,9 @@ code {
.fun {
color: #f31982; }
.javascript-title {
color: #fe9501; }
.btn {
position: relative;
display: block;
......@@ -1110,7 +1241,7 @@ code {
.hero-code__screen .code-string {
color: #f31982; }
.hero-code__screen .code-quote {
color: #02ADFD; }
color: #02adfd; }
.hero-code__screen .code-colon {
color: #18798a; }
.hero-code__button-bar {
......
This diff is collapsed.
......@@ -13303,38 +13303,40 @@ var animation = bodymovin.loadAnimation({
loop();
// Canvas spinner
var canvasLoader = document.getElementById('canvas--loader'),
d = canvasLoader.width = canvasLoader.height = 120,
ctxLoader = canvasLoader.getContext('2d'),
opacity;
ctxLoader.translate(d / 2, d / 2);
ctxLoader.rotate(Math.PI * 360/360);
ctxLoader.lineWidth = 4;
ctxLoader.lineCap = 'butt';
for(var i = 0; i <= 360; i++) {
ctxLoader.save();
ctxLoader.rotate((Math.PI * i/180));
ctxLoader.beginPath();
ctxLoader.moveTo(0, 0);
opacity = (360 - (i * 1)) / 360;
ctxLoader.strokeStyle = 'rgba(255,255,255,' + opacity.toFixed(2) +')';
ctxLoader.lineTo(0, d + 30);
ctxLoader.stroke();
ctxLoader.closePath();
ctxLoader.restore();
var canvasLoader = document.getElementById('canvas--loader');
if (canvasLoader) {
var d = canvasLoader.width = canvasLoader.height = 120,
ctxLoader = canvasLoader.getContext('2d'),
opacity;
ctxLoader.translate(d / 2, d / 2);
ctxLoader.rotate(Math.PI * 360/360);
ctxLoader.lineWidth = 4;
ctxLoader.lineCap = 'butt';
for(var i = 0; i <= 360; i++) {
ctxLoader.save();
ctxLoader.rotate((Math.PI * i/180));
ctxLoader.beginPath();
ctxLoader.moveTo(0, 0);
opacity = (360 - (i * 1)) / 360;
ctxLoader.strokeStyle = 'rgba(255,255,255,' + opacity.toFixed(2) +')';
ctxLoader.lineTo(0, d + 30);
ctxLoader.stroke();
ctxLoader.closePath();
ctxLoader.restore();
}
ctxLoader.globalCompositeOperation ='source-out';
ctxLoader.beginPath();
ctxLoader.arc(0, 0, d/2, 2 * Math.PI, false);
ctxLoader.fillStyle = '#000';
ctxLoader.fill();
ctxLoader.globalCompositeOperation ='destination-out';
ctxLoader.beginPath();
ctxLoader.arc(0, 0, (d/2) * .9, 2 * Math.PI, false);
ctxLoader.fill();
}
ctxLoader.globalCompositeOperation ='source-out';
ctxLoader.beginPath();
ctxLoader.arc(0, 0, d/2, 2 * Math.PI, false);
ctxLoader.fillStyle = '#000';
ctxLoader.fill();
ctxLoader.globalCompositeOperation ='destination-out';
ctxLoader.beginPath();
ctxLoader.arc(0, 0, (d/2) * .9, 2 * Math.PI, false);
ctxLoader.fill();
});
})(jQuery, window, document);
......@@ -4,7 +4,7 @@
* https://HosseinKarami.github.io/fastshell
* @author Hossein Karami
* @version 1.0.5
* Copyright 2019. MIT licensed.
* Copyright 2020. MIT licensed.
*/
(function($, window, document, undefined) {
"use strict";
......@@ -178,38 +178,40 @@
loop();
// Canvas spinner
var canvasLoader = document.getElementById('canvas--loader'),
d = canvasLoader.width = canvasLoader.height = 120,
ctxLoader = canvasLoader.getContext('2d'),
opacity;
ctxLoader.translate(d / 2, d / 2);
ctxLoader.rotate(Math.PI * 360/360);
ctxLoader.lineWidth = 4;
ctxLoader.lineCap = 'butt';
for(var i = 0; i <= 360; i++) {
ctxLoader.save();
ctxLoader.rotate((Math.PI * i/180));
ctxLoader.beginPath();
ctxLoader.moveTo(0, 0);
opacity = (360 - (i * 1)) / 360;
ctxLoader.strokeStyle = 'rgba(255,255,255,' + opacity.toFixed(2) +')';
ctxLoader.lineTo(0, d + 30);
ctxLoader.stroke();
ctxLoader.closePath();
ctxLoader.restore();
var canvasLoader = document.getElementById('canvas--loader');
if (canvasLoader) {
var d = canvasLoader.width = canvasLoader.height = 120,
ctxLoader = canvasLoader.getContext('2d'),
opacity;
ctxLoader.translate(d / 2, d / 2);
ctxLoader.rotate(Math.PI * 360/360);
ctxLoader.lineWidth = 4;
ctxLoader.lineCap = 'butt';
for(var i = 0; i <= 360; i++) {
ctxLoader.save();
ctxLoader.rotate((Math.PI * i/180));
ctxLoader.beginPath();
ctxLoader.moveTo(0, 0);
opacity = (360 - (i * 1)) / 360;
ctxLoader.strokeStyle = 'rgba(255,255,255,' + opacity.toFixed(2) +')';
ctxLoader.lineTo(0, d + 30);
ctxLoader.stroke();
ctxLoader.closePath();
ctxLoader.restore();
}
ctxLoader.globalCompositeOperation ='source-out';
ctxLoader.beginPath();
ctxLoader.arc(0, 0, d/2, 2 * Math.PI, false);
ctxLoader.fillStyle = '#000';
ctxLoader.fill();
ctxLoader.globalCompositeOperation ='destination-out';
ctxLoader.beginPath();
ctxLoader.arc(0, 0, (d/2) * .9, 2 * Math.PI, false);
ctxLoader.fill();
}
ctxLoader.globalCompositeOperation ='source-out';
ctxLoader.beginPath();
ctxLoader.arc(0, 0, d/2, 2 * Math.PI, false);
ctxLoader.fillStyle = '#000';
ctxLoader.fill();
ctxLoader.globalCompositeOperation ='destination-out';
ctxLoader.beginPath();
ctxLoader.arc(0, 0, (d/2) * .9, 2 * Math.PI, false);
ctxLoader.fill();
});
})(jQuery, window, document);