Minimal responsiveness improvements

Author: lbirkert

src/lib/components/Navbar.svelte

@@ -39,6 +39,12 @@
 		border-bottom: 2px solid var(--color-accent);
 	}
 
+	@media only screen and (max-width: 400px) {
+		header {
+			padding: 10px;
+		}
+	}
+
 	button {
 		border: none;
 		background-color: transparent;
@@ -58,7 +64,7 @@
 	}
 
 	h1 {
-		font-size: min(1.2em, 4vw);
+		font-size: 1.2em;
 		font-weight: 100;
 		font-family: 'Dela Gothic One', sans-serif;
 		color: var(--color-accent);

src/lib/components/Theme.svelte

@@ -103,7 +103,7 @@
 		width: 100%;
 	}
 
-	:global(form) {
+	:global(form, .form) {
 		padding: 20px;
 		display: flex;
 		flex-direction: column;

src/lib/components/setlist/SetlistWidget.svelte

@@ -33,6 +33,7 @@
 
 	.title {
 		font-weight: 600;
+		font-size: 1.05em;
 		margin-bottom: 3px;
 	}
 

src/lib/components/song/SongSettings.svelte

@@ -19,7 +19,7 @@
 		Song Settings
 	{/snippet}
 	{#snippet main()}
-		<form>
+		<div class="form">
 			{#if openSongState.song}
 				<label>
 					Edit Key
@@ -32,7 +32,7 @@
 			{:else}
 				Please open a Song first
 			{/if}
-		</form>
+			</div>
 	{/snippet}
 	{#snippet footer()}
 		<button> + Edit metadata </button>

src/lib/components/song/SongWidget.svelte

@@ -39,7 +39,7 @@
 
 	.title {
 		font-weight: 600;
-		font-size: 1em;
+		font-size: 1.05em;
 		margin-bottom: 3px;
 	}