diff --git a/index.html b/index.html
index 067da55..0f1ba70 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
+
diff --git a/src/display.js b/src/display.js
index 5ea43c6..2b3b38e 100644
--- a/src/display.js
+++ b/src/display.js
@@ -78,10 +78,11 @@ export class Display {
let currentBB = this.layout.getBoundingBox()
let width = this.target.scrollWidth || 100
let height = this.target.scrollHeight || 100
+ const ballRadius = Math.min(document.body.clientWidth, document.body.clientHeight) * 0.06
var toScreen = function(p) {
var size = currentBB.topright.subtract(currentBB.bottomleft);
- var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * (width - 60) + 30;
- var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * (height - 60) + 30;
+ var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * (width - ballRadius * 2) + ballRadius;
+ var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * (height - ballRadius * 2) + ballRadius;
return new Springy.Vector(sx, sy);
};
@@ -133,8 +134,8 @@ export class Display {
}
dom.className = item.data.state
dom.style.position = 'absolute'
- dom.style.left = (target.x - 60) + 'px'
- dom.style.top = (target.y - 60) + 'px'
+ dom.style.left = (target.x - ballRadius) + 'px'
+ dom.style.top = (target.y - ballRadius) + 'px'
dom.appendChild(a)
field.appendChild(dom)
}, undefined, undefined,
diff --git a/style.css b/style.css
index 0e15793..b21099e 100644
--- a/style.css
+++ b/style.css
@@ -27,7 +27,7 @@ body {
background-color: #FFC63F;
position: relative;
box-sizing: border-box;
- padding: 20px;
+ padding: 1em;
flex: 1;
}
@@ -42,10 +42,10 @@ body {
}
.items > li a {
- width: 120px;
- height: 120px;
+ width: min(12vh, 12vw);
+ height: min(12vh, 12vw);
background: #D66C00;
- border-radius: 80px;
+ border-radius: min(7vh, 7vw);
display: block;
border: 3px solid #1a1c1c;
}
@@ -69,7 +69,7 @@ body {
position: absolute;
transform-origin: 0 0;
font-size: 1.2em;
- padding: 0 55px;
+ padding: 0 min(6vh, 6vw);
box-sizing: border-box;
}
@@ -104,8 +104,9 @@ a.fullview {
}
.fullview > div img {
float: right;
- width: 120px;
- border-radius: 80px;
+ width: 7em;
+ height: 7em;
+ border-radius: 7em;
border: 3px solid #1a1c1c;
margin-bottom: 1em;
}