Customize the archive's page

Hosting on Micro.blog
4

I know this is not exactly what I asked for:

following what you said above, I tried to play around with the photo page (I want to allow the photo grid to be wider than the other regular pages). What I did is to include a wider max width property in a custom photo page (layouts/list.photoshtml.html).

I first tried to add it directly to the grid chunk (at the end of the div class= line, right under {{ define "main" }}

{{ define "main" }}

	<div class="photos-grid-container" style="display: grid; grid-column-gap: 15px; grid-row-gap: 15px; grid-template-columns: 33% 33% 33%; max-width: 100%;">

	{{- $list := where .Site.Pages ".Params.photos" "!=" nil -}}
	{{- $len := (len $list) -}}
	{{ range $index, $value := $list }}
		<a href="{{ .Permalink }}">
			{{ range first 1 .Params.photos }}
				<img src="{{ . }}" width="300" height="300" style="border-radius: 5px; max-width: 100%; height: auto;" class="photos-grid-item" loading="lazy" />
			{{ end }}
		</a>
	{{ end }}

	</div>

{{ end }}

This didn’t seem to work, so I tried to just include the same inside <style> tags, first at the very first line (before {{ define "main" }}), then, thinking that define main creates the page maybe I could use it somewhere inside (I did right after {{ define "main" }}). I used article.post-content since that seems to be the most external div for the photo section (not including the title), which takes its default width from <body> (where it’s 40em):

{{ define "main" }}

<style>
article.post-content {
max-width: 70em;
}
</style>

	<div class="photos-grid-container" style="display: grid; grid-column-gap: 15px; grid-row-gap: 15px; grid-template-columns: 33% 33% 33%; max-width: 100%;">

	{{- $list := where .Site.Pages ".Params.photos" "!=" nil -}}
	{{- $len := (len $list) -}}
	{{ range $index, $value := $list }}
		<a href="{{ .Permalink }}">
			{{ range first 1 .Params.photos }}
				<img src="{{ . }}" width="300" height="300" style="border-radius: 5px; max-width: 100%; height: auto;" class="photos-grid-item" loading="lazy" />
			{{ end }}
		</a>
	{{ end }}

	</div>

{{ end }}

There are a few places where this can be implemented and also how, maybe you can help me out? This is on my test blog: https://jtr-test.micro.blog/, where it should affect both the “cats” and the “photos” (indicated by a camera emoji).

I know we talked about this before, but I don’t remember what I did exactly. By the way, (a most important thing to mention at the end, of course) I am now using TinyTheme, so this might be implemented differently.