Redo the welcome navigation

Tester feedback suggested that it looks really content-heavy,
more like blogpost previews or something like that. We now move
to a clear, recognizable "action button with description" style
using the already prominent primary colour.

snikket_web/scss/app.scss

@@ -770,36 +770,6 @@ body#login {
 }
 
 
-/* welcome screen specials */
-
-div.welcome-cards {
-	display: flex;
-	flex-wrap: wrap;
-
-	& > .card {
-		flex: 1 0 $w-l7;
-		margin: $w-s1;
-		@extend .el-2;
-		padding: $w-s1 $w-l1;
-		background: white;
-	}
-
-	& > a.card {
-		text-decoration: none;
-		color: inherit;
-
-		& > h2 {
-			color: $primary-200;
-			text-decoration: underline;
-		}
-	}
-
-	& > .card:hover, & > .card:active, & > .card:focus, & > .card:focus-within {
-		@extend .el-3;
-	}
-}
-
-
 /* admin area specials */
 
 #topbar > div.admin-note {
@@ -1185,3 +1155,40 @@ pre.guru-meditation {
 .with-tooltip:hover:before, .with-tooltip:hover:after {
 	display: block;
 }
+
+
+/* welcome screen specials */
+
+nav.welcome {
+	> ul {
+		display: flex;
+		flex-wrap: wrap;
+		list-style-type: none;
+		justify-content: center;
+		padding: 0;
+
+		> li {
+			flex: 1 0 $w-l7;
+			margin: $w-s1;
+			padding: $w-s1 $w-l1;
+			text-align: center;
+			max-width: $w-l8;
+
+			.button {
+				display: block;
+			}
+
+			img {
+				display: block;
+				margin: $w-l1 $w-0;
+				--margin: $w-0 * 2;
+				width: calc(100% - var(--margin));
+			}
+
+			p {
+				margin-left: $w-0;
+				margin-right: $w-0;
+			}
+		}
+	}
+}