- Show/hide passwords
- Add copy to clipboard button for key
- Update homepage copy, inc CTA buttons
- Style Key & Salt sections
- Make responsive (for desktop)
// 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'); |
<!-- 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> |
// 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; |
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%)); | |
} |
a{ | |
border-bottom: 2px solid red; | |
display: inline-block; | |
line-height: .9; | |
} |
a{ | |
border-bottom: 2px solid red; | |
} |
a{ | |
text-decoration: underline; | |
} |
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'; | |
} | |
/* 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> |