|
|
@ -0,0 +1,40 @@ |
|
|
|
// ratio of each part's height to the width of the image (1082px)
|
|
|
|
var ratios = { |
|
|
|
"top": 1.3577, |
|
|
|
"leggies": 0.7311, |
|
|
|
"bottom": 0.2431 |
|
|
|
} |
|
|
|
// ratio of the image's height to its width
|
|
|
|
var overall_ratio = 2.3318; |
|
|
|
var leggy_factor = 0; |
|
|
|
|
|
|
|
function update_sizes() { |
|
|
|
let target_height = window.innerHeight - 300; |
|
|
|
let width = target_height / overall_ratio; |
|
|
|
if (width > window.innerWidth * 0.90) { |
|
|
|
width = window.innerWidth * 0.90; |
|
|
|
} |
|
|
|
dgel('big-leggy-lynne').style.width = `${width}px`; |
|
|
|
for (let [part, ratio] of Object.entries(ratios)) { |
|
|
|
dgel(`bll-${part}`).style.height = `${ratio * width}px`; |
|
|
|
} |
|
|
|
|
|
|
|
let leggy_height = ratios['leggies'] * width; |
|
|
|
dgel('bll-leggies').style.height = `${leggy_height + leggy_factor * 25}px`; |
|
|
|
} |
|
|
|
|
|
|
|
window.addEventListener('resize', update_sizes); |
|
|
|
|
|
|
|
window.onload = function () { |
|
|
|
this.dgel('bll-enlarge').onclick = function () { |
|
|
|
leggy_factor++; |
|
|
|
update_sizes(); |
|
|
|
window.scrollTo({ |
|
|
|
left: 0, |
|
|
|
top: document.body.scrollHeight, |
|
|
|
behavior: "smooth" |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
update_sizes(); |
|
|
|
} |