added the best page yet

_includes/header.html

@@ -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'>

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

assets/script.js

@@ -1,4 +1,6 @@
 var use_local_storage = storage_check();
+var html_element = null;
+
 
 function dgel(id) {
 	return document.getElementById(id);
@@ -39,7 +41,6 @@ function theme_set(night) {
 
 function update_page_theme() {
 	let night = theme_get();
-	let html_element = document.getElementsByTagName('html')[0];
 
 	if (night) {
 		html_element.classList.add('night');
@@ -49,8 +50,13 @@ function update_page_theme() {
 }
 
 window.addEventListener('DOMContentLoaded', (event) => {
+	html_element = document.getElementsByTagName('html')[0];
 	update_page_theme();
+
 	dgel('theme-control').onclick = function () {
+		// only add the 'ready' class upon clicking the button
+		// this avoids the page transitioning every time you change the page with night theme on
+		html_element.classList.add('ready');
 		theme_set(!theme_get());
 		update_page_theme();
 	};

assets/style.css

@@ -4,6 +4,12 @@ html {
 html.night {
 	background: #333;
 }
+html.ready,
+html.ready body,
+html.ready a,
+html.ready header a  {
+	transition: 0.2s all;
+}
 body {
 	font-family: "Roboto", sans-serif;
 	display: flex;
@@ -134,7 +140,6 @@ header a {
 	color: white;
 	display: inline-block;
 	padding: 5px 15px;
-	transition: 0.2s all;
 }
 html.night header a {
 	color: white;
@@ -168,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%;

big-leggy-lynne.html

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