Revamp home screen

snikket_web/scss/app.scss

@@ -645,6 +645,37 @@ body#login {
 	}
 }
 
+
+/* welcome screen specials */
+
+div.welcome-cards {
+	display: flex;
+	flex-wrap: wrap;
+
+	& > .card {
+		flex: 1 0 $w-l6;
+		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;
+	}
+}
+
+
 /* linearisation / responsive stuff */
 
 @media screen and (max-width: $small-screen-threshold) {

snikket_web/templates/user_home.html

@@ -1,11 +1,24 @@
 {% extends "app.html" %}
 {% block content %}
 <h1>Welcome!</h1>
-<p>Welcome home, {{ user_info.username }}.</p>
-<h2>Next?</h2>
-<p>What do you want to do today?</p>⎄
-<ul>
+<p>Welcome home, {{ user_info.display_name }}.</p>
+<div class="welcome-cards">
+	<a class="card" href="{{ url_for('user.profile') }}">
+		<h2>Update profile</h2>
+		<p>Change display name, set avatar and configure visibility of your
+		personal data to others.</p>
+	</a>
+	<a class="card" href="{{ url_for('user.change_pw') }}">
+		<h2>Change password</h2>
+	</a>
+	<a class="card" href="{{ url_for('user.logout') }}">
+		<h2>Log out</h2>
+		<p>Exit the Snikket Web Portal, without logging out your other devices.</p>
+	</a>
+</div>
+<!-- <ul>
+	<li><a href="{{ url_for('user.change_pw') }}">Change password</a></li>
 	<li><a href="{{ url_for('user.change_pw') }}">Change password</a></li>
 	<li><a href="{{ url_for('user.logout') }}">Log out</a></li>
-</ul>
+</ul> -->
 {% endblock %}