From 8ab07abbc4ff7d2e10ddb16a0a9c119229d62a6d Mon Sep 17 00:00:00 2001
From: Lynnesbian <lynne@bune.city>
Date: Thu, 26 Mar 2020 15:24:08 +1000
Subject: [PATCH] changed the way the header is laid out, fixing some really
 minor bugs

---
 _includes/header.html                 | 40 +++++++++++------------
 assets/big-thicc-quiz-of-the-lynne.js |  2 +-
 assets/style.css                      | 46 ++++++++++++++++++---------
 3 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 1f00f2a..7680591 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -2,31 +2,29 @@
 
 <header id='header'>
 	<h1>Menu</h1>
-	<span class='internal'>
-		<div class='lynnesoft desktop'></div>
-		<a href='/' {%- if page.title == "Welcome!" %} class='current'{% endif -%}>Home</a>
-		{%- assign main_pages = site.html_pages | where: "less_important", null -%}
-		{%- assign less_important = site.html_pages | where: "less_important", true -%}
+	<div class='lynnesoft desktop'></div>
+	<a href='/' {%- if page.title == "Welcome!" %} class='current'{% endif -%}>Home</a>
+	{%- 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 -%}
+	{%- 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'>
+		<div id='show-more'><!--sir... it's the demons again... they're pinging the-->&hellip;</div>
+		{%- 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 class='more'>
-			<div id='show-more'><!--sir... it's the demons again... they're pinging the-->&hellip;</div>
-			{%- 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'>
-		<a href='https://bune.city'>Blog</a><a href='https://github.com/lynnesbian'>GitHub</a><a href='https://git.bune.city/lynnesbian'>Gitea</a>
+	<div id='spacer'></div>
 
-		<span id='theme-control'></span>
-	</span>
+	<a href='https://bune.city'>Blog</a><a href='https://github.com/lynnesbian'>GitHub</a><a href='https://git.bune.city/lynnesbian'>Gitea</a>
+
+	<span id='theme-control'></span>
 	<div class='lynnesoft mobile'></div>
 </header>
diff --git a/assets/big-thicc-quiz-of-the-lynne.js b/assets/big-thicc-quiz-of-the-lynne.js
index bfa5e09..86ac27c 100644
--- a/assets/big-thicc-quiz-of-the-lynne.js
+++ b/assets/big-thicc-quiz-of-the-lynne.js
@@ -21,7 +21,7 @@ var questions = {
 	"have accidentally stolen a library book before": true,
 	"am allergic to gluten": true,
 	"can draw The Cool S": false,
-	"have written several games for the TI-84+ calculator": true,
+	"have written several games for the TI-84+ calculator": true, // https://git.bune.city/lynnesbian/ti-basic
 	"can play the trumpet": true,
 	"can play the ukelele": false,
 	"never have to look at the keyboard when typing": false,
diff --git a/assets/style.css b/assets/style.css
index 9e82d27..3045286 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -126,7 +126,7 @@ header {
 	color: white;
 	padding: 0 30px;
 	display: flex;
-	justify-content: space-between;
+	/* justify-content: space-between; */
 	flex-wrap: wrap;
 	user-select: none;
 }
@@ -135,10 +135,6 @@ header h1 {
 	color: white;
 	font-size: 2em;
 }
-header span {
-	display: inline-block;
-	text-align: center;
-}
 header a, #show-more {
 	color: white;
 	display: inline-block;
@@ -162,6 +158,14 @@ hrml.night #show-more:hover {
 	background-color: #0008;
 }
 
+.more {
+	display: contents;
+}
+
+#spacer {
+	flex-grow: 1;
+}
+
 #show-more {
 	display: none;
 	padding: 5px;
@@ -170,14 +174,18 @@ hrml.night #show-more:hover {
 
 .lynnesoft {
 	background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
-	height: 30px;
+	height: 32px;
 	width: 32px;
 	display: inline-block;
 	vertical-align: top;
 }
+.lynnesoft.desktop {
+	margin-right: 10px;
+}
 .lynnesoft.mobile {
 	display: none;
 	margin: 0 auto;
+	min-height: 32px;
 }
 
 #hamburger {
@@ -222,8 +230,10 @@ html.night #hb-icon {
 	color: white;
 	border: thin white solid;
 	border-radius: 2px;
-	padding: 2px 10px;
+	padding: 2px 7px;
 	cursor: pointer;
+	height: max-content;
+  margin: auto 0;
 }
 #theme-control::before {
 	content: "Theme: Day";
@@ -360,9 +370,6 @@ button, a.button {
 		touch-action: manipulation;
 	}
 	header {
-		flex-direction: column;
-		flex-wrap: nowrap;
-		overflow-y:scroll;
 		padding: 0;
 		position: fixed;
 		width: 100vw;
@@ -371,7 +378,9 @@ button, a.button {
 		left: -100vw;
 		justify-content: start;
 		transition: 0.2s all;
-		/* background: 50% calc(100% - 5px) / 32px 32px url('/assets/img/lynnesoft-square-small.png') mediumpurple no-repeat; */
+		flex-direction: column;
+		flex-wrap: nowrap;
+		overflow-y: auto;
 	}
 	header.active {
 		left: 0;
@@ -382,9 +391,6 @@ button, a.button {
 	header h1 {
 		display: block;
 	}
-	header span {
-		width: 100%;
-	}
 	header span:not(#theme-control), header a {
 		height: unset;
 	}
@@ -395,6 +401,16 @@ button, a.button {
 		padding-bottom: 20px;
 	}
 
+	header a {
+		text-align: center;
+		padding: 10px 0;
+	}
+
+	#spacer {
+		flex-grow: 0;
+		flex-basis: 50px;
+	}
+
 	.more a {
 		display: block;
 	}
@@ -404,7 +420,7 @@ button, a.button {
 
 	#theme-control {
 		width: max-content;
-		margin: 0 auto;
+		margin: 20px auto;
 		display: block;
 		touch-action: manipulation;
 	}