Skip to content

Instantly share code, notes, and snippets.

View markdurrant's full-sized avatar

Mark Durrant markdurrant

17 followers · 1 following
  • London, UK
View GitHub Profile
@markdurrant
markdurrant / rainbow.js
Created September 25, 2018 11:34
Add rainbow outlines to all elements for debugging CSS
// Add rainbow outlines to all elements for debugging CSS.
// Use Alt + Shit + R to turn on or off.
let rainbow = function() {
if (!document.getElementById('rainbow')) {
console.log('🌈: ON');
let rainbowContent = document.createTextNode('* { outline: 1px solid rgba(255, 127, 0, 0.75); } *:nth-child(2n) { outline: 1px solid rgba(255, 127, 0, 0.75); } *:nth-child(3n) { outline: 1px solid rgba(255, 255, 0, 0.75); } *:nth-child(4n) { outline: 1px solid rgba(0, 255, 0, 0.75); } *:nth-child(5n) { outline: 1px solid rgba(0, 0, 255, 0.75); } *:nth-child(6n) { outline: 1px solid rgba(75, 0, 130, 0.75); } *:nth-child(7n) { outline: 1px solid rgba(148, 0, 211, 0.75); }');
let rainbowElm = document.createElement('style');
@markdurrant
markdurrant / fumo-drawing-robots.html
Last active August 2, 2017 11:56
Furthermore: Drawing with code example
<!-- regular html stuff -->
<!DOCTYPE html>
<html>
<head>
<!-- page title, this will also be the name of the file we'll download -->
<title>Furthermore Drawing Machines!</title>
<!-- load paper.js (paperjs.org) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.4/paper-full.min.js"></script>
</head>
@markdurrant
markdurrant / TCC-to-dos.md
Created April 23, 2017 08:34
TCC-to-dos

Colour Card to-dos

Makoto

  • Show/hide passwords
  • Add copy to clipboard button for key
  • Update homepage copy, inc CTA buttons
Mark
  • Style Key & Salt sections
  • Make responsive (for desktop)
@markdurrant
markdurrant / sass inline media quieries
Created February 27, 2014 10:17
// mobile first inline media quieries with breakpoints as variables
$medium-breakpoint: 20rem;
$large-breakpoint: 30rem;
p {
font-size: 1rem;
@media ( min-width: $medium-breakpoint ) {
font-size: 1.2rem;
@markdurrant
markdurrant / underline-4.scss
Created October 15, 2012 17:02
gradient underline
a{
background-image: linear-gradient(rgba(0, 0, 0, 0) 82%,
red 82%,
red 90%,
rgba(0, 0, 0, 0) 90%);
// with compass
// @include background-image(linear-gradient(hsla(0,0,0,0) 82%, $color 82%, $color 90%, hsla(0,0,0,0) 90%));
}
@markdurrant
markdurrant / underline-3.scss
Created October 15, 2012 16:55
border-underline-extreme
a{
border-bottom: 2px solid red;
display: inline-block;
line-height: .9;
}
@markdurrant
markdurrant / underline-2.scss
Created October 15, 2012 16:48
border-underline
a{
border-bottom: 2px solid red;
}
@markdurrant
markdurrant / underline-1.scss
Created October 15, 2012 16:39
simple underline
a{
text-decoration: underline;
}
@markdurrant
markdurrant / m6_d6_Sample.js
Created October 11, 2012 11:44
Sample JS m6 d6 syntax highlighting test
for (var c=0; c<21; c++){
for (var i=0; i<21; i++){
myCircle = new Path.Circle(new Point(x, y), (Math.random()*35));
myCircle.fillColor = "hsl("+ hue + ",100%,50%)";
x = x+20;
hue = (Math.random()*120)+320;
myCircle.opacity =0.8 ;
//myCircle.blendMode = 'average';
}
@markdurrant
markdurrant / gist:3369502
Created August 16, 2012 11:33
Orientation media query example
/* Example html
<body>
<!-- change to landscape mode prompt -->
<div id="portrait">
<h1>Please rotate your device. This game only works in landscape mode</h1>
</div>
<!-- game content start -->
<div>