From 412f674b33392a5d5acfde645b707cb84c4c7a0a Mon Sep 17 00:00:00 2001
From: Lynne <lynne@bune.city>
Date: Wed, 16 Sep 2020 12:27:47 +1000
Subject: [PATCH] minor css tweaks, limit to at most 25 documents

---
 Pages/Index.cshtml    |  4 +++-
 wwwroot/css/style.css | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
index 8251697..c3678aa 100644
--- a/Pages/Index.cshtml
+++ b/Pages/Index.cshtml
@@ -8,7 +8,7 @@
 
 @* <h1>Documents</h1> *@
 <div class="documents">
-	@foreach (var item in Model.Documents) {
+	@foreach (var item in Model.Documents.Take(25)) {
 	<div class="document">
 		<div class="document-column left" style="background-image:url('/img/placeholder.png');"></div>
 		<div class="document-column centre">
@@ -31,4 +31,6 @@
 
 	</div>
 	}
+
+	<div class="centred subtle">Displaying @Model.Documents.Take(25).Count() of @Model.Documents.Count() results</div>
 </div>
diff --git a/wwwroot/css/style.css b/wwwroot/css/style.css
index 628963d..d05d901 100644
--- a/wwwroot/css/style.css
+++ b/wwwroot/css/style.css
@@ -13,6 +13,10 @@ h1, h2, h3, h4, h5, h6 {
 	width: max-content;
 	text-align: center;
 }
+.subtle {
+	color: #888;
+	font-style: italic;
+}
 
 a {
 	text-decoration: none;
@@ -74,12 +78,15 @@ main {
 .documents {
 	display: flex;
 	flex-direction: column;
+	margin: 0 auto;
 }
 .document {
 	display: flex;
 	flex: 1;
 	flex-direction: row;
 	margin: 10px;
+	padding-top: 10px;
+	border-top: thin #ccc solid;
 }
 
 .document-column {
@@ -89,6 +96,7 @@ main {
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center;
+	flex-grow: 1;
 }
 .document-column.centre {
 	width: 80%;
@@ -126,3 +134,15 @@ main {
 	margin: 10px auto;
 	width: min-content;
 }
+
+@media only screen and (min-width: 900px) {
+	.documents {
+		max-width: 80%;
+	}
+}
+
+@media only screen and (min-width: 600px) and (max-width: 899px) {
+	.documents {
+		max-width: 90%;
+	}
+}