AverageMarcus/next-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile layout

Browse Source 
Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
This commit is contained in:
Marcus Noble
2025-05-17 15:59:56 +01:00
parent d2566e80d3
commit 7620f980c1
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
templates/index.html
View File

@@ -43,10 +43,22 @@
padding: 6px; padding: 6px;
} }
main > .category:nth-of-type(1),
main > .category:nth-of-type(2),
main > .category:nth-of-type(3) {
grid-column: span 4;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
main { main {
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
} }
main > .category:nth-of-type(1),
main > .category:nth-of-type(2),
main > .category:nth-of-type(3) {
grid-column: span 2;
}
} }
</style> </style>
</head> </head>
@@ -67,7 +79,7 @@
<main> <main>
{{ $cat := "Fiction" }} {{ $cat := "Fiction" }}
{{ $book := index .Books $cat }} {{ $book := index .Books $cat }}
<div class="category" style="grid-column: span 4;"> <div class="category">
<h3>{{ $cat }}</h3> <h3>{{ $cat }}</h3>
<a href="{{ $book.Link }}" target="_blank"> <a href="{{ $book.Link }}" target="_blank">
<img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" /> <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />
@@ -77,7 +89,7 @@
</div> </div>
{{ $cat := "Non-Fiction" }} {{ $cat := "Non-Fiction" }}
{{ $book := index .Books $cat }} {{ $book := index .Books $cat }}
<div class="category" style="grid-column: span 4;"> <div class="category">
<h3>{{ $cat }}</h3> <h3>{{ $cat }}</h3>
<a href="{{ $book.Link }}" target="_blank"> <a href="{{ $book.Link }}" target="_blank">
<img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" /> <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />
@@ -87,7 +99,7 @@
</div> </div>
{{ $cat := "Comics" }} {{ $cat := "Comics" }}
{{ $book := index .Books $cat }} {{ $book := index .Books $cat }}
<div class="category" style="grid-column: span 4;"> <div class="category">
<h3>{{ $cat }}</h3> <h3>{{ $cat }}</h3>
<a href="{{ $book.Link }}" target="_blank"> <a href="{{ $book.Link }}" target="_blank">
<img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" /> <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />