lynnesbian/Snootalogue
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

minor css tweaks, limit to at most 25 documents

Browse source
This commit is contained in:
Lynne Megido 2020-09-16 12:27:47 +10:00
parent 9d2d0d697c
commit 412f674b33
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
2 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Pages/Index.cshtml
View file

@ -8,7 +8,7 @@
@* <h1>Documents</h1> *@ @* <h1>Documents</h1> *@
<div class="documents"> <div class="documents">
@foreach (var item in Model.Documents) { @foreach (var item in Model.Documents.Take(25)) {
<div class="document"> <div class="document">
<div class="document-column left" style="background-image:url('/img/placeholder.png');"></div> <div class="document-column left" style="background-image:url('/img/placeholder.png');"></div>
<div class="document-column centre"> <div class="document-column centre">
@ -31,4 +31,6 @@
</div> </div>
} }
<div class="centred subtle">Displaying @Model.Documents.Take(25).Count() of @Model.Documents.Count() results</div>
</div> </div>

20
wwwroot/css/style.css
View file

@ -13,6 +13,10 @@ h1, h2, h3, h4, h5, h6 {
width: max-content; width: max-content;
text-align: center; text-align: center;
} }
.subtle {
color: #888;
font-style: italic;
}
a { a {
text-decoration: none; text-decoration: none;
@ -74,12 +78,15 @@ main {
.documents { .documents {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto;
} }
.document { .document {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: row; flex-direction: row;
margin: 10px; margin: 10px;
padding-top: 10px;
border-top: thin #ccc solid;
} }
.document-column { .document-column {
@ -89,6 +96,7 @@ main {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
flex-grow: 1;
} }
.document-column.centre { .document-column.centre {
width: 80%; width: 80%;
@ -126,3 +134,15 @@ main {
margin: 10px auto; margin: 10px auto;
width: min-content; 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%;
}
}