iamvdo

// Get Lat/Lng from Tile x,y,z
// (returns top/left corner of tile)
function tile2latlng (x, y, z) {
  const n = Math.pow(2, z);
  const lat = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / n))) * 180 / Math.PI;
  const lng = x / n * 360 - 180;
  return { lat, lng };
}

// Get Tile x,y from Lat/Lng,z

iamvdo

license: gpl-3.0

iamvdo

{"data":[{"url":"http://google.fr","tags":"Google,fr"},{"url":"http://holygrail.com","tags":"holy,css,top"},{"url":"world","tags":"before"},{"url":"http://iamvdo.me","tags":"css,me,portfolio,blog"},{"url":"https://www.npmjs.com/package/beulogue","tags":"nodejs,npm,static,blog,zig"},{"url":"pipo","tags":"pipo"},{"url":"hello","tags":"world,css,top"}]}

iamvdo

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

iamvdo

html{font:2em sans-serif;color:#eee;}
div{overflow:hidden;position:relative;top:0;right:0;bottom:0;right:0;width:150px;height:150px;margin:auto;min-width:150px;max-width:150px;padding:20px;background:#444;transition:all 1s;}
div:after{content:'Pseudo';position:absolute;bottom:inherit;right:inherit;background:red;width:inherit;padding:inherit;}
div:hover,div.on{bottom:50px;}

button{
display:block;
width:120px;
height:30px;
margin:10px auto;

iamvdo

html{font:2em sans-serif;color:#fff;}
div{position:relative;width:150px;height:150px;margin:auto;min-width:150px;max-width:150px;padding:20px;background:#888;transition:all 1s;}
div::after{content:'Pseudo';position:absolute;left:20px;bottom:20px;background:deepskyblue;width:inherit;padding:inherit;}
div:hover,div.on{width:250px;}

button{
display:block;
width:120px;
height:30px;
margin:10px auto;

iamvdo

html{font:2em sans-serif;color:#fff;}
div{position:relative;width:150px;height:150px;margin:auto;/*min-width:200px;max-width:200px;*/padding:20px;background:#888;transition:all 1s;}
div::after{content:'Pseudo';position:absolute;left:20px;bottom:20px;background:deepskyblue;width:inherit;padding:inherit;}
div:hover,div.on{width:250px;}

button{
display:block;
width:120px;
height:30px;
margin:10px auto;

iamvdo

/**
 * The first commented line is your dabblet’s title
 http://codepen.io/anon/pen/KjhJt
 */

*{margin:0;padding:0;}
html{
height:450px;
background:linear-gradient(#9162D8,#382A99) no-repeat;
font:.8em sans-serif;

iamvdo

/**
 * The first commented line is your dabblet’s title
 http://codepen.io/anon/pen/KjhJt
 */

*{margin:0;padding:0;}
html{
}
ul{
margin:100px auto;

iamvdo

/**
 * The first commented line is your dabblet’s title
 http://codepen.io/anon/pen/KjhJt
 */

*{margin:0;padding:0;}
html{
height:450px;
background:linear-gradient(#9162D8,#382A99) no-repeat;
font:.8em sans-serif;