diff --git a/css/style.css b/css/style.css index d109511..c8af6d8 100644 --- a/css/style.css +++ b/css/style.css @@ -121,11 +121,15 @@ body.blue-mode { text-align: left; max-width: 50rem; margin: auto auto auto 13vw; + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; } .main h1 { font-size: 4rem; font-weight: 600; - margin: 0 0 2rem; + margin: 0 0 1rem; color: var(--boldColor); } .main h3 { diff --git a/css/style.scss b/css/style.scss index f1bd59e..448bf98 100644 --- a/css/style.scss +++ b/css/style.scss @@ -129,12 +129,16 @@ body { text-align: left; max-width: 50rem; margin: auto auto auto 13vw; + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; } h1 { font-size: 4rem; font-weight: 600; - margin: 0 0 2rem; + margin: 0 0 1rem; color: var(--boldColor); } diff --git a/js/script.js b/js/script.js index aaa03d0..26d671e 100644 --- a/js/script.js +++ b/js/script.js @@ -25,8 +25,9 @@ function isDarkMode() { (document.body.classList.length === 0 && matchMedia('(prefers-color-scheme: dark)').matches); } -function contains(rect, x, y) { - return (rect.left <= x && x <= rect.right) && (rect.top <= y && y <= rect.bottom); +function contains(rect, x, y, buffer) { + return ((rect.left-buffer) <= x && x <= (rect.right+buffer)) && + ((rect.top-buffer) <= y && y <= (rect.bottom+buffer)); } function Point() { @@ -42,12 +43,12 @@ function Point() { // moves point to a random location and // resets its progress this.init = function() { - const textbox = document.querySelector('.text-container').getBoundingClientRect(); + const textboxes = [...document.querySelector('.text-container').children].map(c => c.getBoundingClientRect()); this.progress = initialProgress; do { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; - } while(contains(textbox, this.x, this.y)); + } while(!textboxes.every(t => !contains(t, this.x, this.y, r))); this.r = 0; this.rng = Math.random(); }