mobile layout server, sites & home route pages

src/lib/components/ThumbnailButton.svelte

@@ -107,6 +107,17 @@
 			opacity: 0;
 		}
 
+		@media screen and (max-width: 750px) {
+			.title h2 {
+				padding: 0.6rem;
+				font-size: 1.2rem;
+			}
+
+			.image {
+				height: 5rem;
+			}
+		}
+
 		&:hover {
 			transform: translateY(-4px) translateX(-4px);
 			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

src/routes/+layout.svelte

@@ -37,17 +37,10 @@
 
 		@media screen and (max-width: 750px) {
 			padding-top: 0;
-		}
-		/*
-		@media screen and (max-width: 750px) {
+
 			main {
 				--margin: 1rem;
 			}
-
-			:global(> .nav-wrapper) {
-				display: none;
-			}
 		}
-		*/
 	}
 </style>

src/routes/+page.svelte

@@ -111,7 +111,7 @@
 	.shortcut-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-		grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 		gap: 1.2rem;
 		margin-top: 2rem;
 	}

src/routes/cluster/+page.svelte

@@ -81,13 +81,16 @@
 
 	.server-list {
 		display: grid;
-		--grid-tmpl-cols: repeat(2, 1fr);
+		--grid-tmpl-cols: repeat(1, 1fr);
 		--grid-gap: 0.5rem;
 		grid-template-columns: var(--grid-tmpl-cols, repeat(2, 1fr));
 		gap: var(--grid-gap, 0.5rem);
 
 		margin-bottom: 2rem;
 
+		@media screen and (min-width: 480px) {
+			--grid-tmpl-cols: repeat(2, 1fr);
+		}
 		@media screen and (min-width: 750px) {
 			--grid-tmpl-cols: repeat(2, 1fr);
 			--grid-gap: 1.25rem;

src/routes/sites/+page.svelte

@@ -104,7 +104,9 @@
 			link={site.link}
 		/>
 	{/each}
+</div>
 
+<div class="section-wrapper full-width">
 	<Section
 		title="Expose HTTP traffic"
 		description="You can reach your Application on a specific Port you configure, redirecting all your domains to it. You can make it Private by disabling HTTP traffic."
@@ -137,6 +139,14 @@
 
 		@media screen and (max-width: 750px) {
 			grid-template-columns: repeat(2, 1fr);
+
+			&.full-width {
+				grid-template-columns: repeat(1, 1fr);
+			}
+		}
+
+		&:not(:first-of-type) {
+			margin-top: 4rem;
 		}
 	}
 </style>