Add mobile styles, social icons and README badges

src/lib/components/shell/Bar.svelte

@@ -78,7 +78,12 @@
 
 	@media (max-width: 640px) {
 		.bar {
-			font-size: 12px;
+			padding: 0 4px;
+			font-size: 13px;
+		}
+
+		.bar :global(.tray-button) {
+			width: 36px;
 		}
 	}
 </style>

src/lib/components/shell/Clock.svelte

@@ -20,13 +20,15 @@
 
 <span class="clock full">{now ? formatClock(now) : ''}</span>
 <span class="clock short">{now ? formatClock(now).split(' ').slice(1).join(' ') : ''}</span>
+<span class="clock time-only">{now ? formatClock(now).split(' ').at(-1) : ''}</span>
 
 <style>
 	.clock {
 		white-space: nowrap;
 	}
 
-	.short {
+	.short,
+	.time-only {
 		display: none;
 	}
 
@@ -39,4 +41,14 @@
 			display: inline;
 		}
 	}
+
+	@media (max-width: 420px) {
+		.short {
+			display: none;
+		}
+
+		.time-only {
+			display: inline;
+		}
+	}
 </style>

src/lib/components/shell/PopupCard.svelte

@@ -55,4 +55,14 @@
 		padding: 0.4rem;
 		background: var(--background);
 	}
+
+	@media (max-width: 640px) {
+		.popup {
+			position: fixed;
+			top: calc(var(--bar-height) + 6px);
+			right: 8px;
+			left: 8px;
+			width: auto;
+		}
+	}
 </style>

src/lib/components/shell/Workspaces.svelte

@@ -68,7 +68,7 @@
 		}
 
 		.workspace {
-			width: 20px;
+			width: 22px;
 		}
 	}