fortytwo/me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finer-grained text avoidance

Browse source 
Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
Naman Sood 2024-12-04 19:34:25 -05:00
parent c4e5bddd09
commit 7ddeaad9b2
3 changed files with 15 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
css/style.css
View file

@ -121,11 +121,15 @@ body.blue-mode {
text-align: left; text-align: left;
max-width: 50rem; max-width: 50rem;
margin: auto auto auto 13vw; margin: auto auto auto 13vw;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
} }
.main h1 { .main h1 {
font-size: 4rem; font-size: 4rem;
font-weight: 600; font-weight: 600;
margin: 0 0 2rem; margin: 0 0 1rem;
color: var(--boldColor); color: var(--boldColor);
} }
.main h3 { .main h3 {

6
css/style.scss
View file

@ -129,12 +129,16 @@ body {
text-align: left; text-align: left;
max-width: 50rem; max-width: 50rem;
margin: auto auto auto 13vw; margin: auto auto auto 13vw;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
} }
h1 { h1 {
font-size: 4rem; font-size: 4rem;
font-weight: 600; font-weight: 600;
margin: 0 0 2rem; margin: 0 0 1rem;
color: var(--boldColor); color: var(--boldColor);
} }

9
js/script.js
View file

@ -25,8 +25,9 @@ function isDarkMode() {
(document.body.classList.length === 0 && matchMedia('(prefers-color-scheme: dark)').matches); (document.body.classList.length === 0 && matchMedia('(prefers-color-scheme: dark)').matches);
} }
function contains(rect, x, y) { function contains(rect, x, y, buffer) {
return (rect.left <= x && x <= rect.right) && (rect.top <= y && y <= rect.bottom); return ((rect.left-buffer) <= x && x <= (rect.right+buffer)) &&
((rect.top-buffer) <= y && y <= (rect.bottom+buffer));
} }
function Point() { function Point() {
@ -42,12 +43,12 @@ function Point() {
// moves point to a random location and // moves point to a random location and
// resets its progress // resets its progress
this.init = function() { this.init = function() {
const textbox = document.querySelector('.text-container').getBoundingClientRect(); const textboxes = [...document.querySelector('.text-container').children].map(c => c.getBoundingClientRect());
this.progress = initialProgress; this.progress = initialProgress;
do { do {
this.x = Math.random() * canvas.width; this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height; 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.r = 0;
this.rng = Math.random(); this.rng = Math.random();
} }