use lynnear software logo, handle smaller screens better

_includes/header.html

@@ -1,5 +1,6 @@
 <header>
 	<span class='internal'>
+		<div id='lynnesoft'></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 -%}

assets/style.css

@@ -130,6 +130,7 @@ header {
 	padding: 0 30px;
 	display: flex;
 	justify-content: space-between;
+	flex-wrap: wrap;
 }
 header span {
 	display: inline-block;
@@ -139,6 +140,9 @@ header a {
 	display: inline-block;
 	padding: 5px 15px;
 }
+header span:not(#theme-control), header a {
+	height: 100%;
+}
 html.night header a {
 	color: white;
 }
@@ -157,6 +161,14 @@ html.night header a:hover {
 	background-color: #0008;
 }
 
+#lynnesoft {
+	background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
+	height: 32px;
+	width: 32px;
+	display: inline-block;
+	vertical-align: top;
+}
+
 #theme-control {
 	color: white;
 	border: thin white solid;
@@ -204,6 +216,12 @@ html.night #theme-control::before {
 	display: block;
 }
 
+@media only screen and (max-width: 800px) {
+	#main {
+		width: 95%;
+	}
+}
+
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 	#main {
 		width: 95%;