From 3297333312d8560a3c1649d90fbd2ac6ca3f2224 Mon Sep 17 00:00:00 2001
From: Cadence Fish <cloudrac3r@vivaldi.net>
Date: Wed, 29 Jan 2020 23:08:52 +1300
Subject: [PATCH] Force 3 columns on mobile

---
 src/lib/structures/TimelineEntry.js |  2 +-
 src/site/sass/main.sass             | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/lib/structures/TimelineEntry.js b/src/lib/structures/TimelineEntry.js
index 879f5c7..f4690f3 100644
--- a/src/lib/structures/TimelineEntry.js
+++ b/src/lib/structures/TimelineEntry.js
@@ -149,7 +149,7 @@ class TimelineEntry extends TimelineBaseMethods {
 	}
 
 	getThumbnailSizes() {
-		return `(max-width: 820px) 120px, 260px` // from css :(
+		return `(max-width: 820px) 200px, 260px` // from css :(
 	}
 
 	async fetchChildren() {
diff --git a/src/site/sass/main.sass b/src/site/sass/main.sass
index 0ea4147..de85d61 100644
--- a/src/site/sass/main.sass
+++ b/src/site/sass/main.sass
@@ -1,5 +1,6 @@
 $layout-a-max: 820px
 $layout-b-min: 821px
+$layout-c-max: 680px;
 $layout-home-a-max: 520px
 $layout-home-b-min: 521px
 
@@ -100,9 +101,12 @@ body
 	$background: #fff4e8
 
 	@media screen and (max-width: $layout-a-max)
-		--image-size: 120px
+		--image-size: 150px
 		flex: 1
 
+	@media screen and (max-width: $layout-c-max)
+		--image-size: calc(33vw - 10px)
+
 	background-color: $background
 	padding: 15px 15px 40px
 
@@ -154,6 +158,12 @@ body
 		flex-wrap: wrap
 		margin: 0 auto
 
+		@media screen and (max-width: $layout-c-max)
+			display: grid
+			grid-template-columns: repeat(3, 1fr)
+			justify-content: center
+			justify-items: center
+
 		@mixin sized()
 			width: $image-size
 			height: $image-size
@@ -172,6 +182,15 @@ body
 				margin: $margin - $border-width
 				border: $border-width solid #111
 
+			@media screen and (max-width: $layout-c-max)
+				$margin: 2px
+				margin: $margin
+
+				&:hover
+					$border-width: 2px
+					margin: $margin - $border-width
+					border: $border-width solid #111
+
 			.sized-image
 				@include sized