1 files changed, 74 insertions, 15 deletions
diff --git a/web/source/css/index.css b/web/source/css/index.css
index b4ad1bd1c..4ea3b78e1 100644
--- a/web/source/css/index.css
+++ b/web/source/css/index.css
@@ -16,26 +16,85 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-header a {
-	margin: 2rem;
+/*
+	Render instance title a
+	bit bigger on index page.
+*/
+.page-header a h1 {
+	font-size: 2rem;
+	line-height: 2rem;
+}
+
+/*
+	Reuse about styling, but rework it
+	to separate sections a bit more.
+*/
+.about {
+	display: flex;
+	flex-direction: column;
 	gap: 2rem;
+	padding: 0;
+	
+	background: initial;
+	box-shadow: initial;
+	border: initial;
+	border-radius: initial;
 
-	img {
-		height: 6rem;
+	.about-section {
+		padding: 2rem;
+		background: $bg-accent;
+		box-shadow: $boxshadow;
+		border: $boxshadow-border;
+		border-radius: $br;
 	}
+}
 
-	h1 {
-		font-size: 2rem;
+.apps {
+	align-self: start;
+
+	.applist {
+		margin: 0;
+		padding: 0;
+
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 0.5rem;
+		align-content: start;
+
+		.applist-entry {
+			display: grid;
+			grid-template-columns: 25% 1fr;
+			grid-template-areas: "logo text";
+			gap: 1.5rem;
+			padding: 0.5rem;
+
+			.applist-logo {
+				grid-area: logo;
+				align-self: center;
+				justify-self: center;
+				width: 100%;
+				object-fit: contain;
+				flex: 1 1 auto;
+			}
+
+			.applist-logo.redraw {
+				fill: $fg;
+				stroke: $fg;
+			}
+
+			.applist-text {
+				grid-area: text;
+				
+				a {
+					font-weight: bold;
+				}
+			}
+		}
 	}
 }
 
-main {
-	section {
-		background: $bg-accent;
-		box-shadow: $boxshadow;
-		border: $boxshadow-border;
-		border-radius: $br;
-		padding: 2rem;
-		margin-bottom: 2rem;
+@media screen and (max-width: 600px) {
+	.apps .applist {
+		grid-template-columns: 1fr;
 	}
-}
-\ No newline at end of file
+}