From e6be291bd6787199f644b263c28c6d2c8b9b1d74 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 16 Mar 2022 13:12:48 -0500
Subject: Fix styling issues and add /login route

---
 src/lib/sections/Collections.svelte |  7 ++++---
 src/lib/sections/Inventories.svelte | 12 ++++++++++++
 src/lib/sections/Skills.svelte      |  6 +++---
 3 files changed, 19 insertions(+), 6 deletions(-)

(limited to 'src/lib/sections')

diff --git a/src/lib/sections/Collections.svelte b/src/lib/sections/Collections.svelte
index 7ca1969..ca2da16 100644
--- a/src/lib/sections/Collections.svelte
+++ b/src/lib/sections/Collections.svelte
@@ -42,10 +42,11 @@
 <style>
 	ul {
 		margin: 0;
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-column-gap: 0;
+		display: flex;
+		flex-wrap: wrap;
 		width: fit-content;
+		/* this ensures there's at most 2 lines */
+		max-width: 30em;
 	}
 
 	ul > :global(li) {
diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte
index 6af64e9..84480ea 100644
--- a/src/lib/sections/Inventories.svelte
+++ b/src/lib/sections/Inventories.svelte
@@ -124,4 +124,16 @@
 	.inventory-tab-active {
 		background-color: rgba(40, 40, 40, 0.9);
 	}
+
+	@media only screen and (max-width: 480px) {
+		.inventory-content:global(#inventory .item) {
+			/* there's no good way to override the existing 32px size without !important :( */
+			font-size: 24px !important;
+		}
+	}
+	@media only screen and (max-width: 350px) {
+		.inventory-content:global(#inventory .item) {
+			font-size: 16px !important;
+		}
+	}
 </style>
diff --git a/src/lib/sections/Skills.svelte b/src/lib/sections/Skills.svelte
index fd720f9..34f7339 100644
--- a/src/lib/sections/Skills.svelte
+++ b/src/lib/sections/Skills.svelte
@@ -64,9 +64,9 @@
 
 	ul {
 		margin-top: 0;
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-column-gap: 2em;
+		display: flex;
+		flex-wrap: wrap;
+		max-width: 30em;
 	}
 	ul > li {
 		width: 10em;
-- 
cgit