Add mobile styles, social icons and README badges

src/lib/components/desktop/DesktopIcons.svelte

@@ -2,10 +2,12 @@
 	import Icon from '@iconify/svelte';
 	import { desktop } from '#lib/content';
 	import { runDesktopAction } from '#lib/desktop/actions';
+
+	const icons = desktop.iconGroups.flatMap((group) => group.icons);
 </script>
 
 <nav class="desktop-icons" aria-label="Desktop">
-	{#each desktop.icons as item (item.label)}
+	{#each icons as item (item.label)}
 		<button class="desktop-icon" title={item.label} onclick={() => runDesktopAction(item.open)}>
 			<span class="icon-box">
 				<Icon icon={item.icon} width="36" />
@@ -19,9 +21,9 @@
 	.desktop-icons {
 		display: grid;
 		grid-auto-flow: column;
-		grid-template-rows: repeat(auto-fill, 104px);
-		grid-auto-columns: 112px;
-		gap: 6px;
+		grid-template-rows: repeat(auto-fill, 100px);
+		grid-auto-columns: 116px;
+		gap: 4px;
 		height: 100%;
 		padding: 4px;
 		align-content: start;
@@ -32,7 +34,7 @@
 		flex-direction: column;
 		align-items: center;
 		gap: 7px;
-		padding: 6px 4px;
+		padding: 6px 2px;
 		background: none;
 		border: none;
 		color: var(--foreground);
@@ -69,11 +71,12 @@
 	.icon-label {
 		max-width: 100%;
 		padding: 1px 6px;
+		overflow: hidden;
 		background: color-mix(in srgb, var(--background) 88%, transparent);
 		font-size: 13px;
 		line-height: 1.35;
-		text-align: center;
-		word-break: break-word;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
 
 	.desktop-icon:hover .icon-label,
@@ -81,4 +84,15 @@
 		background: var(--accent);
 		color: var(--background);
 	}
+
+	@media (max-width: 767px) {
+		.desktop-icons {
+			grid-auto-flow: row;
+			grid-template-columns: repeat(auto-fill, 104px);
+			grid-template-rows: none;
+			grid-auto-rows: 100px;
+			justify-content: center;
+			height: auto;
+		}
+	}
 </style>