Commit d0d00a7d authored by Dan Pudsey's avatar Dan Pudsey

[Dp-109] - Adding new news page

Created the animations comparisons page 
parent 4c4c9c9a
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<title>
Dan Pudsey | London based front end developer &amp; web designer
Dan Pudsey | About me
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
......
This diff is collapsed.
......@@ -433,6 +433,29 @@ td,
th {
padding: 0; }
/* Code
========================================================================== */
figure,
figcaption,
pre,
code {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: monospace, monospace; }
figure {
margin: 0;
background-color: #272820;
color: #fff;
padding: 2rem; }
figcaption {
text-align: center; }
code {
white-space: pre-wrap; }
@keyframes heroTypeCode {
0% {
width: 0; }
......@@ -684,6 +707,14 @@ th {
animation-timing-function: ease-in-out;
animation-fill-mode: forwards; }
@media screen and (max-width: 767px) {
.panel .panel-content {
padding-left: 5rem;
padding-right: 5rem; }
.panel .panel-content.panel-content--loader {
padding-left: 2rem;
padding-right: 2rem; } }
.panel-content__left, .panel-content__right {
width: 50%;
float: left; }
......@@ -735,6 +766,89 @@ th {
height: auto;
padding-bottom: 10rem; } }
.panel-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 110.4rem;
max-width: 100%;
margin: auto;
padding: 8rem 6rem; }
.loader--object {
width: 20rem;
height: 20rem;
border-radius: 99999rem; }
.loader--light-grey {
background-color: lightgrey; }
.loader--spin {
animation-name: spinning;
animation-direction: normal;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-duration: 0.5s;
animation-timing-function: linear; }
.loader--canvas {
padding: 5rem; }
@media screen and (max-width: 767px) {
.loader--object {
margin: 0 auto 4rem; } }
.panel-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 110.4rem;
max-width: 100%;
margin: auto;
padding: 8rem 6rem; }
.pln {
color: #fe9501; }
.str {
color: #fff; }
.kwd {
color: #fe9501; }
.com {
color: #02ADFD; }
.typ {
color: #fff; }
.lit {
color: #fff; }
.clo,
.opn,
.pun {
color: #18798a; }
.tag {
color: #fff; }
.atn {
color: #fe9501; }
.atv {
color: #f31982; }
.dec, .var {
color: #f31982; }
.fun {
color: #f31982; }
.btn {
position: relative;
display: block;
......
This diff is collapsed.
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50">
<path d="M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.5s" repeatCount="indefinite"/>
</path>
</svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50">
<path d="M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z"></path>
</svg>
\ No newline at end of file
......@@ -13245,10 +13245,10 @@ var animation = bodymovin.loadAnimation({
// Add the particles
// Set variables
var canvas = document.getElementById("particles");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var canvasParticles = document.getElementById("particles");
var ctxParticles = canvasParticles.getContext("2d");
canvasParticles.width = window.innerWidth;
canvasParticles.height = window.innerHeight;
var particles = [];
var num_particles = 100;
......@@ -13267,33 +13267,33 @@ var animation = bodymovin.loadAnimation({
}
// Particle starting position and colour assignment
var Particle = function() {
this.x = canvas.width * Math.random();
this.y = canvas.height * Math.random();
this.x = canvasParticles.width * Math.random();
this.y = canvasParticles.height * Math.random();
this.vx = 4 * Math.random() - 2;
this.vy = 4 * Math.random() - 2;
this.Color = GetRandomColor();
};
Particle.prototype.Draw = function(ctx) {
ctx.fillStyle = this.Color;
ctx.fillRect(this.x, this.y, 2, 2);
Particle.prototype.Draw = function(ctxParticles) {
ctxParticles.fillStyle = this.Color;
ctxParticles.fillRect(this.x, this.y, 2, 2);
};
Particle.prototype.Update = function() {
this.x += this.vx;
this.y += this.vy;
if (this.x < 0 || this.x > canvas.width) this.vx = -this.vx;
if (this.x < 0 || this.x > canvasParticles.width) this.vx = -this.vx;
if (this.y < 0 || this.y > canvas.height) this.vy = -this.vy;
if (this.y < 0 || this.y > canvasParticles.height) this.vy = -this.vy;
};
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctxParticles.clearRect(0, 0, canvasParticles.width, canvasParticles.height);
for (var i = 0; i < num_particles; i++) {
particles[i].Update();
particles[i].Draw(ctx);
particles[i].Draw(ctxParticles);
}
requestAnimationFrame(loop);
}
......@@ -13301,5 +13301,40 @@ var animation = bodymovin.loadAnimation({
// Create particles
for (var i = 0; i < num_particles; i++) particles.push(new Particle());
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();
}
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);
......@@ -120,10 +120,10 @@
// Add the particles
// Set variables
var canvas = document.getElementById("particles");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var canvasParticles = document.getElementById("particles");
var ctxParticles = canvasParticles.getContext("2d");
canvasParticles.width = window.innerWidth;
canvasParticles.height = window.innerHeight;
var particles = [];
var num_particles = 100;
......@@ -142,33 +142,33 @@
}
// Particle starting position and colour assignment
var Particle = function() {
this.x = canvas.width * Math.random();
this.y = canvas.height * Math.random();
this.x = canvasParticles.width * Math.random();
this.y = canvasParticles.height * Math.random();
this.vx = 4 * Math.random() - 2;
this.vy = 4 * Math.random() - 2;
this.Color = GetRandomColor();
};
Particle.prototype.Draw = function(ctx) {
ctx.fillStyle = this.Color;
ctx.fillRect(this.x, this.y, 2, 2);
Particle.prototype.Draw = function(ctxParticles) {
ctxParticles.fillStyle = this.Color;
ctxParticles.fillRect(this.x, this.y, 2, 2);
};
Particle.prototype.Update = function() {
this.x += this.vx;
this.y += this.vy;
if (this.x < 0 || this.x > canvas.width) this.vx = -this.vx;
if (this.x < 0 || this.x > canvasParticles.width) this.vx = -this.vx;
if (this.y < 0 || this.y > canvas.height) this.vy = -this.vy;
if (this.y < 0 || this.y > canvasParticles.height) this.vy = -this.vy;
};
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctxParticles.clearRect(0, 0, canvasParticles.width, canvasParticles.height);
for (var i = 0; i < num_particles; i++) {
particles[i].Update();
particles[i].Draw(ctx);
particles[i].Draw(ctxParticles);
}
requestAnimationFrame(loop);
}
......@@ -176,5 +176,40 @@
// Create particles
for (var i = 0; i < num_particles; i++) particles.push(new Particle());
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();
}
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);
......@@ -6,4 +6,4 @@
* @version 1.0.5
* Copyright 2019. MIT licensed.
*/
!function(t,e,a,n){"use strict";t(function(){function n(t){var e=new Date,a=new Date(t),n=e.getFullYear()-a.getFullYear(),i=e.getMonth()-a.getMonth();return(i<0||0===i&&e.getDate()<a.getDate())&&n--,n}function i(){for(var t=0,e=0,a=0;t<100&&e<100&&a<100;)t=Math.floor(256*Math.random()),e=Math.floor(256*Math.random()),a=Math.floor(256*Math.random());return"rgb("+t+","+e+","+a+")"}function s(){u.clearRect(0,0,f.width,f.height);for(var t=0;t<p;t++)m[t].Update(),m[t].Draw(u);requestAnimationFrame(s)}t(".hero").addClass("hero--homepage-animation"),t(".btn").prepend('<div class="hover"><span></span><span></span><span></span><span></span><span></span></div>'),t(".hero-code__screen").addClass("hero-code__screen--animation"),t(".hero--homepage h1").addClass("neon-highlight");var o=function(t){t.preventDefault,t.target.classList.remove("animate"),t.target.classList.add("animate"),setTimeout(function(){t.target.classList.remove("animate")},1700)};const h=a.getElementById("js-my-age");h&&(h.innerHTML=n("1987/04/06"));var r=new Egg;const c=a.querySelector("html");r.addCode("c,r,a,b,s,o,n",function(){c.classList.add("senor-crabson")}).listen(),r.addCode("b,l,e,a,k",function(){c.classList.add("bleak")}).listen();for(var l=a.getElementsByClassName("confetti-button"),o=function(t){t.preventDefault,this.classList.remove("confetti-button"),void this.offsetWidth,this.classList.add("confetti-button"),this.classList.add("confetti-button--reanimate")},d=0;d<l.length;d++)l[d].addEventListener("click",o,!1);t('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(e){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=t(this.hash);a=a.length?a:t("[name="+this.hash.slice(1)+"]"),a.length&&(e.preventDefault(),t("html, body").animate({scrollTop:a.offset().top},1e3,function(){var e=t(a);return e.focus(),!e.is(":focus")&&(e.attr("tabindex","-1"),void e.focus())}))}});var f=a.getElementById("particles"),u=f.getContext("2d");f.width=e.innerWidth,f.height=e.innerHeight;var m=[],p=100,v=function(){this.x=f.width*Math.random(),this.y=f.height*Math.random(),this.vx=4*Math.random()-2,this.vy=4*Math.random()-2,this.Color=i()};v.prototype.Draw=function(t){t.fillStyle=this.Color,t.fillRect(this.x,this.y,2,2)},v.prototype.Update=function(){this.x+=this.vx,this.y+=this.vy,(this.x<0||this.x>f.width)&&(this.vx=-this.vx),(this.y<0||this.y>f.height)&&(this.vy=-this.vy)};for(var d=0;d<p;d++)m.push(new v);s()})}(jQuery,window,document);
\ No newline at end of file
!function(t,e,a,n){"use strict";t(function(){function n(t){var e=new Date,a=new Date(t),n=e.getFullYear()-a.getFullYear(),o=e.getMonth()-a.getMonth();return(o<0||0===o&&e.getDate()<a.getDate())&&n--,n}function o(){for(var t=0,e=0,a=0;t<100&&e<100&&a<100;)t=Math.floor(256*Math.random()),e=Math.floor(256*Math.random()),a=Math.floor(256*Math.random());return"rgb("+t+","+e+","+a+")"}function i(){u.clearRect(0,0,f.width,f.height);for(var t=0;t<g;t++)m[t].Update(),m[t].Draw(u);requestAnimationFrame(i)}t(".hero").addClass("hero--homepage-animation"),t(".btn").prepend('<div class="hover"><span></span><span></span><span></span><span></span><span></span></div>'),t(".hero-code__screen").addClass("hero-code__screen--animation"),t(".hero--homepage h1").addClass("neon-highlight");var s=function(t){t.preventDefault,t.target.classList.remove("animate"),t.target.classList.add("animate"),setTimeout(function(){t.target.classList.remove("animate")},1700)};const r=a.getElementById("js-my-age");r&&(r.innerHTML=n("1987/04/06"));var h=new Egg;const l=a.querySelector("html");h.addCode("c,r,a,b,s,o,n",function(){l.classList.add("senor-crabson")}).listen(),h.addCode("b,l,e,a,k",function(){l.classList.add("bleak")}).listen();for(var c=a.getElementsByClassName("confetti-button"),s=function(t){t.preventDefault,this.classList.remove("confetti-button"),void this.offsetWidth,this.classList.add("confetti-button"),this.classList.add("confetti-button--reanimate")},d=0;d<c.length;d++)c[d].addEventListener("click",s,!1);t('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(e){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=t(this.hash);a=a.length?a:t("[name="+this.hash.slice(1)+"]"),a.length&&(e.preventDefault(),t("html, body").animate({scrollTop:a.offset().top},1e3,function(){var e=t(a);return e.focus(),!e.is(":focus")&&(e.attr("tabindex","-1"),void e.focus())}))}});var f=a.getElementById("particles"),u=f.getContext("2d");f.width=e.innerWidth,f.height=e.innerHeight;var m=[],g=100,p=function(){this.x=f.width*Math.random(),this.y=f.height*Math.random(),this.vx=4*Math.random()-2,this.vy=4*Math.random()-2,this.Color=o()};p.prototype.Draw=function(t){t.fillStyle=this.Color,t.fillRect(this.x,this.y,2,2)},p.prototype.Update=function(){this.x+=this.vx,this.y+=this.vy,(this.x<0||this.x>f.width)&&(this.vx=-this.vx),(this.y<0||this.y>f.height)&&(this.vy=-this.vy)};for(var d=0;d<g;d++)m.push(new p);i();var v,y=a.getElementById("canvas--loader"),b=y.width=y.height=120,M=y.getContext("2d");M.translate(b/2,b/2),M.rotate(360*Math.PI/360),M.lineWidth=4,M.lineCap="butt";for(var d=0;d<=360;d++)M.save(),M.rotate(Math.PI*d/180),M.beginPath(),M.moveTo(0,0),v=(360-1*d)/360,M.strokeStyle="rgba(255,255,255,"+v.toFixed(2)+")",M.lineTo(0,b+30),M.stroke(),M.closePath(),M.restore();M.globalCompositeOperation="source-out",M.beginPath(),M.arc(0,0,b/2,2*Math.PI,!1),M.fillStyle="#000",M.fill(),M.globalCompositeOperation="destination-out",M.beginPath(),M.arc(0,0,b/2*.9,2*Math.PI,!1),M.fill()})}(jQuery,window,document);
\ No newline at end of file
......@@ -198,21 +198,17 @@
<div class="panel-content">
<div class="panel-content__left">
<header class="panel_headers">
<h3 class="panel-content__title">Blog.</h3>
<h3 class="panel-content__title">Updates.</h3>
<p class="panel-content__subheading">Latest</p>
<p class="panel-content__subheading">September 2018</p>
<p class="panel-content__subheading">February 2019</p>
</header>
<div class="panel-content__description">
<p>
I made a game with VueJS (and then lost the code), it’s called Shitty Kitten. The original
design was by my good friend
<a href="https://vimeo.com/everyonesfavourite" target="_blank"
>Tom King</a
>.
I studied a few animation techniques to see which I prefer, which has the best browser support and the neatest way to implement them.
</p>
</div>
<div class="panel-content__read-more">
<p><a href="https://vimeo.com/168693650" target="_blank">See the inspiration ></a></p>
<p><a href="/animation-comparisons.html" target="_blank">See the animations ></a></p>
</div>
</div>
</div>
......
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<title>
Dan Pudsey | London based front end developer &amp; web designer
Dan Pudsey | Projects
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
......
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50">
<path d="M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.5s" repeatCount="indefinite"/>
</path>
</svg>
\ No newline at end of file
......@@ -112,10 +112,10 @@
// Add the particles
// Set variables
var canvas = document.getElementById("particles");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var canvasParticles = document.getElementById("particles");
var ctxParticles = canvasParticles.getContext("2d");
canvasParticles.width = window.innerWidth;
canvasParticles.height = window.innerHeight;
var particles = [];
var num_particles = 100;
......@@ -134,33 +134,33 @@
}
// Particle starting position and colour assignment
var Particle = function() {
this.x = canvas.width * Math.random();
this.y = canvas.height * Math.random();
this.x = canvasParticles.width * Math.random();
this.y = canvasParticles.height * Math.random();
this.vx = 4 * Math.random() - 2;
this.vy = 4 * Math.random() - 2;
this.Color = GetRandomColor();
};
Particle.prototype.Draw = function(ctx) {
ctx.fillStyle = this.Color;
ctx.fillRect(this.x, this.y, 2, 2);
Particle.prototype.Draw = function(ctxParticles) {
ctxParticles.fillStyle = this.Color;
ctxParticles.fillRect(this.x, this.y, 2, 2);
};
Particle.prototype.Update = function() {
this.x += this.vx;
this.y += this.vy;
if (this.x < 0 || this.x > canvas.width) this.vx = -this.vx;
if (this.x < 0 || this.x > canvasParticles.width) this.vx = -this.vx;
if (this.y < 0 || this.y > canvas.height) this.vy = -this.vy;
if (this.y < 0 || this.y > canvasParticles.height) this.vy = -this.vy;
};
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctxParticles.clearRect(0, 0, canvasParticles.width, canvasParticles.height);
for (var i = 0; i < num_particles; i++) {
particles[i].Update();
particles[i].Draw(ctx);
particles[i].Draw(ctxParticles);
}
requestAnimationFrame(loop);
}
......@@ -168,5 +168,40 @@
// Create particles
for (var i = 0; i < num_particles; i++) particles.push(new Particle());
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();
}
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);
......@@ -122,7 +122,7 @@
&__screen {
position: relative;
height: 100%;
background-color: #272820;
background-color: $screen;
padding: 2.2rem 2.6rem;
border-radius: 0.3rem;
transition: background-color ease 0.2s;
......@@ -154,7 +154,7 @@
white-space: nowrap;
overflow: hidden;
width: 0;
color: #18798a;
color: $code;
line-height: 4.6rem;
margin: 0;
}
......@@ -201,7 +201,7 @@
}
.code-colon {
color: #18798a;
color: $code;
}
}
......
......@@ -424,4 +424,31 @@ table {
td,
th {
padding: 0;
}
/* Code
========================================================================== */
figure,
figcaption,
pre,
code {
appearance: none;
font-family: monospace, monospace;
}
figure {
margin: 0;
background-color: $screen;
color: #fff;
padding: 2rem;
}
figcaption {
text-align: center;
}
code {
white-space: pre-wrap;
}
\ No newline at end of file
......@@ -8,8 +8,11 @@ $neon-pink-opacity-50: rgba(243, 25, 130, 0.5);
$tangerine-dream: #fe9501;
$buddy-blue: #02ADFD;
$jean-grey: #696969;
$light-grey: lightgrey;
$bleakBlack: #000;
$bleakWhite: #fff;
$screen: #272820;
$code: #18798a;
// Dimensions
$desktopWidth: 110.4rem;
......
@import '../modules/vars';
.pln {
color: $tangerine-dream;
}
.str {
color: #fff;
}
.kwd {
color: $tangerine-dream;
}
.com {
color: $buddy-blue;
}
.typ {
color: #fff;
}
.lit {
color: #fff;
}
.clo,
.opn,
.pun {
color: $code;
}
.tag {
color: #fff;
}
.atn {
color: $tangerine-dream;
}
.atv {
color: $neon-pink;
}
.dec,.var {