Solicited unsolicited advice from Kevin Kelly, served one at a time.
You'll need something like Live Server to allow the cross-origin resources to load:
live-server
Making style changes? You'll need Sass installed. Then run:
sass --watch css/sass/index.scss css/style.css
Advice comes (with permission) from Kevin Kelly's 68 Bits of Unsolicited Advice.
Copyright (c) 2018, Paratype Inc (https://paratype.com), Copyright (c) 2018, Paratype Ltd, with Reserved Font Name "PT Root UI".
Shake.js is used for Magic 8-Ball Mode.
I made resizeText.js for recalculating font-size and line-height based on the length of incoming strings. Existing libraries and packages like Fitty didn't play nice for some reason.
My brother Noah explained what a monotonically decreasing function is and how to use it to acheive the "longer the string, the smaller the font-size" (and vice versa) effect. I also used fpillet's gist for scaling values between two ranges.
These resources helped me along the way:
- Wholegrain Digital's guide to perfomant web fonts
- CSS-Tricks' link and button highlight snippet and checkbox styling guide
- A StackOverflow discussion on DeviceOrientationEvent permissions
- A similar dev.to post on requestPermission for DeviceOrientationEvent