decent mobile css with responsiveish content, other minor css fixes

1 year ago · 9c593b57be
8 changed files with 124 additions and 19 deletions
--- a/_data/contact.yml
+++ b/_data/contact.yml
@ -1,7 +1,7 @@
 - heading: Social
  entries:
  - [lynne@bune.city, "mailto:lynne@bune.city"]
-  - ["@lynnesbian@fedi.lynnesbian.space", https://fedi.lynnesbian.space/@lynnesbian]
+  - ["@lynnesbian<wbr>@fedi.lynnesbian.space", https://fedi.lynnesbian.space/@lynnesbian]
  - [My blog, https://bune.city]

 - heading: Computer Junk
@ -14,7 +14,7 @@
  entries:
  - [Steam, https://steamcommunity.com/id/lynnesbian]
  - [Xbox, "https://account.xbox.com/en-au/profile?gamertag=lynnesbian"]
-  - [SW-4030-6532-7056 (Switch), null]
+  - [SW-<wbr>4030-<wbr>6532-<wbr>7056 (Switch), null]

 - heading: Other
  entries:
--- a/_includes/header.html
+++ b/_includes/header.html
@ -1,6 +1,8 @@
-<header>
+<div id='hamburger'>☰</div>
+<header id='header'>
+	<h1>Menu</h1>
 	<span class='internal'>
-		<div id='lynnesoft'></div>
+		<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 -%}
@ -24,4 +26,5 @@

 		<span id='theme-control'></span>
 	</span>
+	<div class='lynnesoft mobile'></div>
 </header>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -3,6 +3,7 @@

 <head>
 	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 	<link rel="stylesheet" type="text/css" href="/assets/style.css">
 	<script src='/assets/script.js'></script>
 	<title>{% if page.layout == 'project' %}Projects - {% endif %}{{ page.title | default: "lynnesbian dot space" }}</title>
--- a/_projects/fedibooks.md
+++ b/_projects/fedibooks.md
@ -1,6 +1,6 @@
 ---
 name: FediBooks
-description: A web UI for creating "ebooks bots"; bots that learn from your posts and use Markov chains to generate similar posts
+description: A web UI for creating "ebooks bots" - bots that learn from your posts and use Markov chains to generate similar posts.
 source: https://github.com/Lynnesbian/FediBooks
 website: https://fedibooks.com
 screenshots: [fedibooks-home.png, fedibooks-bots.png, fedibooks-chat.png]
--- a/assets/img/lynnesoft-square-small.png
+++ b/assets/img/lynnesoft-square-small.png
--- a/assets/img/lynnesoft-square.png
+++ b/assets/img/lynnesoft-square.png
--- a/assets/script.js
+++ b/assets/script.js
@ -60,4 +60,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
 		theme_set(!theme_get());
 		update_page_theme();
 	};
+
+	dgel('hamburger').onclick = function () {
+		this.classList.toggle('active');
+		dgel('header').classList.toggle('active');
+		dgel('main').classList.toggle('active');
+	}
 });
--- a/assets/style.css
+++ b/assets/style.css
@ -48,9 +48,6 @@ p, ul {
 	margin: 20px auto;
 	line-height: 1.3em;
 }
-p, ul {
-	font-size: 120%;
-}
 li {
 	margin-top: 3px;
 }
@ -77,7 +74,7 @@ html.night a {
 	background-size: 2px;
 }
 .project, .donation-method {
-	flex: 1 0 400px;
+	flex: 1 1 400px;
 	padding: 10px;
 	padding-bottom: 30px;
 	margin: 10px;
@ -132,14 +129,18 @@ header {
 	justify-content: space-between;
 	flex-wrap: wrap;
 }
+header h1 {
+	display: none;
+	color: white;
+	font-size: 2em;
+}
 header span {
 	display: inline-block;
 }
 header a {
 	color: white;
 	display: inline-block;
-	padding: 5px 15px;
-}
+	padding: 5px 15px;}
 header span:not(#theme-control), header a {
 	height: 100%;
 }
@ -161,13 +162,31 @@ html.night header a:hover {
 	background-color: #0008;
 }

-#lynnesoft {
+.lynnesoft {
 	background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
-	height: 32px;
+	height: 30px;
 	width: 32px;
 	display: inline-block;
 	vertical-align: top;
 }
+.lynnesoft.mobile {
+	display: none;
+	margin: 0 auto;
+}
+
+#hamburger {
+	display: none;
+	color: mediumpurple;
+	font-size: 2em;
+	position: fixed;
+	top: 10px;
+	left: 10px;
+	z-index: 1;
+	transition: 0.2s all;
+}
+#hamburger.active {
+	color: white;
+}

 #theme-control {
 	color: white;
@ -224,18 +243,94 @@ html.night #theme-control::before {

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 	#main {
-		width: 95%;
+		width: 90%;
+	}
+	ul {
+		padding-left: 15px;
 	}
 	p, ul {
 		line-height: 1.6em;
 	}
+	#screenshots a {
+		max-width: 100%;
+	}
+
+	.lynnesoft.desktop {
+		display: none;
+	}
+	.lynnesoft.mobile {
+		display: block;
+	}
+	#hamburger {
+		display: inline-block;
+		touch-action: manipulation;
+	}
 	header {
+		flex-direction: column;
+		flex-wrap: nowrap;
+		overflow-y:scroll;
 		padding: 0;
+		position: fixed;
+		width: 100vw;
+		height: 100vh;
+		top: 0;
+		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; */
 	}
-	h1 {
-		margin-top: 0;
+	header.active {
+		left: 0;
 	}
-	#screenshots a {
-		max-width: 100%;
+	html.night header {
+		background: black;
 	}
-}
+	header h1 {
+		display: block;
+	}
+	header span {
+		width: 100%;
+	}
+	header span:not(#theme-control), header a {
+		height: unset;
+	}
+	header a {
+		display: block;
+	}
+	header > span {
+		padding-bottom: 20px;
+	}
+
+	#theme-control {
+		width: max-content;
+		margin: 0 auto;
+		display: block;
+		touch-action: manipulation;
+	}
+
+	#main.active {
+		pointer-events: none;
+		opacity: 0;
+	}
+
+	.project, .donation-method {
+		margin: 10px 0;
+	}
+	.project {
+		padding-bottom: unset;
+	}
+	.project p {
+		margin-bottom: 0;
+	}
+	.project .footer {
+		position: relative;
+	}
+	.project .footer a {
+		display: block;
+		text-align: center;
+		margin: 3px 0;
+	}
+	.project .footer a:not(:last-child)::after {
+		content: "";
+	}
+}