- Show/hide passwords
- Add copy to clipboard button for key
- Update homepage copy, inc CTA buttons
- Style Key & Salt sections
- Make responsive (for desktop)
// ======================================================================= | |
// Fluid Grid Generator Mixin | |
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ | |
// | |
// Based on fluid grid from http://twitter.github.com/bootstrap/ | |
// ======================================================================= | |
// | |
// | |
// Parameters | |
// ======================================================================= |
/* 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> |
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'; | |
} | |
a{ | |
text-decoration: underline; | |
} |
a{ | |
border-bottom: 2px solid red; | |
} |
a{ | |
border-bottom: 2px solid red; | |
display: inline-block; | |
line-height: .9; | |
} |
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%)); | |
} |
// 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; |
<!-- 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> |