<head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body><head>
<meta charset="utf-8">
<title>la peanut</title>
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
<style>
h1 {
padding-top: 1.5em;
text-align: center;
padding-bottom: 1.5em;
font-family: monospace;
background-color: white;
margin: 0;
font-family: 'Ubuntu Mono', monospace;
}
pre {
padding-top: 2em;
width: 25%;
min-width: 180px;
margin: 0 auto;
font-size: 1.2em;
font-family: 'Ubuntu Mono', monospace;
display: none;
}
body {
padding: 0;
margin: 0;
}
.peanut {
display: inline-block;
position: absolute;
cursor: pointer;
}
.move .peanut {
cursor: move;
}
.peanut img {
width: 100%;
position: absolute;
min-width: 50px;
}
#bg {
position: fixed;
font-size: 2px;
color: #999;
line-height: 1em;
z-index: -10;
display: none;
}
ul {
width: 75%;
list-style-type: none;
margin: 5% auto;
text-align: center;
padding: none;
visibility: hidden;
}
li {
display: inline-block;
margin: 0 2% 0 0;
padding: none;
/*clip-path: circle(38px at center);*/
clip-path: circle(75px at center);
background-color: black;
position: relative;
width: 152px;
height: 152px;
/*width: 77px;
height: 77px;*/
}
li img {
position: absolute;
top: 0px;
left: 0px;
clip-path: circle(74px at center);
border: 1px solid black;
width: 150px;
/*width: 75px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="interact.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="content">
<h1>la peanut</h1>
<pre> </pre>
<ul>
<li>
<a href="passage_étroit.pdf"><img src="passage.png"></a>
</li>
<li>
<a href="deux.pdf"><img src="deux.png"></a>
</li>
<li>
<a href="patatras.pdf"><img src="patatras.png"></a>
</li>
<li>
<a href="https://anon.blue"><img src="anon.gif"></a>
</li>
<li>
<a href="https://astroesie.lapeanut.xyz/"><img src="astro.png"></a>
</li>
<li>
<a href="flots/"><img src="flots.jpg"></a>
</li>
</ul>
</div>
<script>
function randday(min, max) {
seed = Math.floor(new Date()/8.64e7);
var x = Math.sin(seed++) * 10000;
var rand = x - Math.floor(x);
return min + Math.round(rand * (max - min));
}
function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
}
function peanut() {
var rotate = rand(0,360);
var $img = $('<div class="peanut"><img src="logo_transp_s.png" style="transform:rotate('+rotate+'deg); opacity: 0.'+rand(40, 80)+'"/><img src="calque'+rand(1,5)+'_s.png" style="transform:rotate('+rotate+'deg);" /></div>');
$img.css('width', rand(4, 12)+'%');
$img.css('left', rand(0, 85)+'%');
$img.css('top', rand(0, 85)+'%');
var rotate = rand(0,360);
$img.css('filter', 'hue-rotate('+rand(0,360)+'deg)')
$('body').append($img);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>
<script>
$(function() {
// get nano
$.get('nano.txt', function(data){
var nanos = data.split("---");
var nanoIndex = randday(0, nanos.length - 1);
var nano = nanos[nanoIndex];
$('pre').html(nano);
$('pre').fadeIn(10000);
$('ul').css('visibility', 'visible');
});
// generate peanuts
var num = rand(1, 3);
for (var i = 0; i < num; i++)
{
peanut();
}
// target elements with the "draggable" class
interact('.peanut')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
}).on('tap', function (event) {
$(event.currentTarget).remove();
peanut();
event.preventDefault();
})
.on('dragstart', function(e) { $('body').addClass('move')})
.on('dragend', function(e) { $('body').removeClass('move')});
// prepare background (might be long)
var html = $('html').html();
$('#bg').text(html.repeat(200)).fadeIn(5000);
});
</script>
<div class="peanut" style="width: 4%; left: 56%; top: 79%; filter: hue-rotate(161deg);"><img src="logo_transp_s.png" style="transform:rotate(317deg); opacity: 0.52"><img src="calque3_s.png" style="transform:rotate(317deg);"></div></body>
la peanut
dans ma tête je vois
le monde comme un tambour
un écho une intensité
gribouillée
