From 8ada141df4fbf454f577294bc3cf1dce08054b43 Mon Sep 17 00:00:00 2001
From: Sam Wilson <sam@samwilson.id.au>
Date: Tue, 18 May 2021 10:32:47 +0800
Subject: [PATCH] Add columns and cards

---
 resources/less/cards.less   | 42 +++++++++++++++++++++++++++++++++++++
 resources/less/columns.less | 41 ++++++++++++++++++++++++++++++++++++
 resources/less/style.less   |  2 ++
 3 files changed, 85 insertions(+)
 create mode 100644 resources/less/cards.less
 create mode 100644 resources/less/columns.less

diff --git a/resources/less/cards.less b/resources/less/cards.less
new file mode 100644
index 0000000..af6cefa
--- /dev/null
+++ b/resources/less/cards.less
@@ -0,0 +1,42 @@
+@skin-wmau-card-space: 12px;
+
+.card {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid #c0c0c0;
+	border-radius: 4px;
+	width: 100%;
+	max-width: 100%;
+	margin: 0;
+	position: relative;
+
+	& > * {
+		margin: 0;
+		line-height: 1;
+	}
+
+	.card-body {
+		margin: @skin-wmau-card-space;
+
+		& > * {
+			margin: 0;
+		}
+	}
+
+	.card-title {
+		display: block;
+		font-size: larger;
+		font-weight: bolder;
+		margin-bottom: @skin-wmau-card-space;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+
+	a {
+		color: inherit;
+	}
+}
diff --git a/resources/less/columns.less b/resources/less/columns.less
new file mode 100644
index 0000000..1b801c4
--- /dev/null
+++ b/resources/less/columns.less
@@ -0,0 +1,41 @@
+.row {
+	display: flex;
+	flex-wrap: wrap;
+
+	.col {
+		width: 100%;
+		max-width: 100%;
+		flex: 1 0 0;
+		padding: 1em;
+	}
+
+	.col-1 {
+		.col;
+		flex: 1;
+	}
+
+	.col-2 {
+		.col;
+		flex: 2;
+	}
+
+	.col-3 {
+		.col;
+		flex: 3;
+	}
+}
+
+@media screen and ( max-width: 750px ) {
+	.row {
+		display: block;
+
+		.col,
+		.col-1,
+		.col-2,
+		.col-3 {
+			flex: none;
+			padding: 0;
+			margin: 1em 0;
+		}
+	}
+}
diff --git a/resources/less/style.less b/resources/less/style.less
index 27c9c0a..b93e2af 100644
--- a/resources/less/style.less
+++ b/resources/less/style.less
@@ -3,6 +3,8 @@
 @import 'action-drawer';
 @import 'feathericons';
 @import 'searchform';
+@import 'columns';
+@import 'cards';
 // @TODO This shouldn't be necessary. Why is it not working the proper way?
 @import 'ext-wikidata-page-banner';