added the best page yet

This commit is contained in:
Lynne Megido 2020-03-17 02:32:01 +10:00
parent 512c94870c
commit 0f18491633
Signed by: lynnesbian
GPG Key ID: F0A184B5213D9F90
7 changed files with 98 additions and 1 deletions

View File

@ -1,11 +1,21 @@
<header>
<span class='internal'>
<a href='/' {%- if page.title == "Welcome!" %} class='current'{% endif -%}>Home</a>
{%- 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 == '/' -%}
<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
{%- endunless -%}
{%- endfor -%}
<span class='more'>
{%- comment -%} todo: maybe make this collapsible? {%- endcomment -%}
{%- for html_page in less_important -%}
<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
{%- endfor -%}
</span>
</span>
<span class='other'>

40
assets/bll.js Normal file
View File

@ -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();
}

BIN
assets/img/bll-leggy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/img/bll-top.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

View File

@ -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%;

14
big-leggy-lynne.html Normal file
View File

@ -0,0 +1,14 @@
---
title: Big Leggy Lynne
layout: default
less_important: true
---
<script src='/assets/bll.js'></script>
<!--<h1>She is Already Here</h1>-->
<div id='big-leggy-lynne'>
<div id='bll-top'></div>
<div id='bll-leggies'></div>
<div id='bll-bottom'></div>
</div>
<button id='bll-enlarge'>Enlarge</button>