diff --git a/_includes/header.html b/_includes/header.html index 050c678..0392db0 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,11 +1,21 @@
Home - {%- for html_page in site.html_pages -%} + {%- assign main_pages = site.html_pages | where: "less_important", null -%} + {%- assign less_important = site.html_pages | where: "less_important", true -%} + + {%- for html_page in main_pages -%} {%- unless html_page.url == '/' -%} {{ html_page.title }} {%- endunless -%} {%- endfor -%} + + + {%- comment -%} todo: maybe make this collapsible? {%- endcomment -%} + {%- for html_page in less_important -%} + {{ html_page.title }} + {%- endfor -%} + diff --git a/assets/bll.js b/assets/bll.js new file mode 100644 index 0000000..433b20d --- /dev/null +++ b/assets/bll.js @@ -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(); +} diff --git a/assets/img/bll-leggy.png b/assets/img/bll-leggy.png new file mode 100644 index 0000000..bdf7458 Binary files /dev/null and b/assets/img/bll-leggy.png differ diff --git a/assets/img/bll-send-pics.png b/assets/img/bll-send-pics.png new file mode 100644 index 0000000..a08810c Binary files /dev/null and b/assets/img/bll-send-pics.png differ diff --git a/assets/img/bll-top.png b/assets/img/bll-top.png new file mode 100644 index 0000000..ab57515 Binary files /dev/null and b/assets/img/bll-top.png differ diff --git a/assets/style.css b/assets/style.css index ad0c86c..46c87c2 100644 --- a/assets/style.css +++ b/assets/style.css @@ -173,6 +173,39 @@ html.night #theme-control::before { content: "Theme: Night"; } +/*this is very silly do not look*/ +#big-leggy-lynne { + margin: 40px auto 0; + width: 10px; +} + +#big-leggy-lynne div { + width: 100%; + background-size: 100% 100%; + background-repeat: no-repeat; +} +#bll-top { + background: url('/assets/img/bll-top.png'); +} +#bll-leggies { + transition: 0.3s all; + background: url('/assets/img/bll-leggy.png'); +} +#bll-bottom { + background: url('/assets/img/bll-send-pics.png'); +} + +#bll-enlarge { + background: mediumpurple; + border: none; + cursor: pointer; + color: white; + font-size: 2em; + padding: 10px; + margin: 30px auto; + display: block; +} + @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #main { width: 95%; diff --git a/big-leggy-lynne.html b/big-leggy-lynne.html new file mode 100644 index 0000000..cec544f --- /dev/null +++ b/big-leggy-lynne.html @@ -0,0 +1,14 @@ +--- +title: Big Leggy Lynne +layout: default +less_important: true +--- + + + +
+
+
+
+
+