From e4035dcaeedae841134ffa896e7c49f71c5d3b84 Mon Sep 17 00:00:00 2001
From: Thomas Lynch <tom@69420.me>
Date: Wed, 27 Apr 2022 22:03:19 +1000
Subject: [PATCH] Portrait mode improvement for tegaki on mobiles. was simpler
 than i thought

---
 gulp/res/css/tegaki.css | 15 +++++++++++++++
 gulpfile.js             |  1 +
 2 files changed, 16 insertions(+)

diff --git a/gulp/res/css/tegaki.css b/gulp/res/css/tegaki.css
index aaa66ab5..e0d1c6ad 100644
--- a/gulp/res/css/tegaki.css
+++ b/gulp/res/css/tegaki.css
@@ -657,3 +657,18 @@
   margin-top: -32px;
 }
 
+/* Improved mobile compatibility by moving the tools to
+   the bottom of the screen in portrait mode*/
+@media only screen and (max-width:600px) {
+	#tegaki {
+		grid-template-columns: 40px 1fr 0px;
+		grid-template-rows: 24px 1fr 300px;
+	}
+	#tegaki-ctrl-cnt {
+		grid-area: 3/2/3/2;
+		z-index: 1;
+	}
+	#tegaki-layers-wrap {
+		padding: 10px;
+	}
+}
diff --git a/gulpfile.js b/gulpfile.js
index f6c03a5d..a7cf047d 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -349,6 +349,7 @@ async function css() {
 	return gulp.src([
 			`${paths.styles.src}/locals.css`,
 			`${paths.styles.src}/style.css`,
+			`${paths.styles.src}/tegaki.css`, //make sure any custom.css also goes after this
 			`${paths.styles.src}/*.css`,
 			`!${paths.styles.src}/nscaptcha.css`,
 		])