Photos WIP

content/photos/photos.css

@@ -1,44 +1,81 @@
 :root {
-    --photo-params-background: #ddd;
-    --photo-params-border-color: #aaa;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --photo-params-background: #444;
-        --photo-params-background: #777;
-    }
+    --body-code-background-color: rgb(var(--dk-gray));
+    --box-shadow-color: rgba(var(--dk-gray), 0.8);
+
+    --heading-color: rgb(var(--white));
+
+    --html-color: rgb(var(--white));
+    --html-background-color: rgb(var(--black));
+
+    --photo-params-background-color: rgb(var(--dk-gray));
+    --photo-params-container-background-color: rgb(var(--sub-dk-gray));
+    --photo-params-color: rgb(var(--super-lt-gray));
+    --photo-params-border-color: rgb(var(--sub-dk-gray));
+
+    --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
+
+    --separator-color: rgb(var(--dk-gray));
+
+    --twitter-icon: url(/icons/twitter-dark.svg);
+    --github-icon: url(/icons/github-dark.svg);
+    --instagram-icon: url(/icons/instagram-dark.svg);
+    --rss-icon: url(/icons/rss-dark.svg);
 }
 
-ul.grid {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 5px;
-    justify-content: flex-start;
+main.photos.list {
+    display: inline-block;
+    max-width: none;
+    margin: var(--body-item-spacing) 0;
+    padding: 0 var(--body-item-spacing);
+    width: 100%;
+}
+
+main.photos.list ul.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 0.8rem;
     margin: 0;
     padding: 0;
 }
-
-.photos .grid li {
-    display: block;
-    height: 210px;
-    list-style: none;
-    width: 210px;
+@media (max-width: 415px) {
+    .photos ul.grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
 
-.grid li img {
-    border-radius: 0.5rem;
+.photos .grid li {
+    line-height: 0;
+    list-style: none;
+}
+
+.photos .grid li a {
+}
+
+.photos .grid li img {
+    border-radius: 3px;
 }
 
 .photo-params {
-    background-color: var(--photo-params-background);
+    width: 100%;
+}
+
+.photo-params .container {
+    display: block;
+    background-color: var(--photo-params-container-background-color);
+    border-radius: 10px;
+    margin: var(--body-item-spacing) auto;
+    padding: calc(var(--body-item-spacing) / 2);
+    width: 66%;
+}
+
+.photo-params table {
+    background-color: var(--photo-params-background-color);
+    color: var(--photo-params-color);
     border-collapse: collapse;
     border-radius: 6px;
-    margin: 1rem auto;
     table-layout: fixed;
     text-align: center;
-    width: 66%;
+    width: 100%;
 }
 
 .photo-params thead td {
@@ -84,7 +121,7 @@ ul.grid {
 .photo-params.debug thead {
     font-size: 2rem;
     font-weight: bold;
-    border-bottom: 2px solid var(--dark);
+    border-bottom: 2px solid rgb(var(--dk-gray));
 }
 
 .photo-params.debug {

layouts/partials/photo_exif_table.html

@@ -1,4 +1,6 @@
-<table class="photo-params">
+<div class="photo-params">
+  <div class="container">
+    <table>
       <thead>
         <td class="make-model" colspan=4>{{ .Tags.Make }} {{ .Tags.Model }}</td>
       </thead>
@@ -25,3 +27,5 @@
         <td class="exposure-time">{{ with .Tags.ExposureTime }}{{ . }} s{{ end }}</td>
       </tr>
     </table>
+  </div>
+</div>

layouts/photos/list.html

@@ -5,11 +5,9 @@
 {{ define "main" }}
 <section class="photos">
   <ul class="grid">
-    {{- range .Pages -}}
-      {{- $thumbnailResource := (index (.Resources.ByType "image") 0) -}}
-      {{- $thumbnail := $thumbnailResource.Fit "600x600" -}}
-      {{- $thumbnail := $thumbnail.Crop "600x600" -}}
-      <li><a href="{{ .RelPermalink }}" title="{{ .Title }}"><img src="{{ $thumbnail.RelPermalink }}"></a></li>
+    {{- $pages = .Paginate (first 50 .Pages.ByDate) -}}
+    {{- range $pages.ByDate -}}
+      {{- .Render "li_thumbnail_in_grid" -}}
     {{- end -}}
   </ul>
 </section>

layouts/photos/single.html

@@ -1,3 +1,7 @@
+{{ define "header" }}
+  {{ partial "header.html" . }}
+{{ end }}
+
 {{ define "main" }}
 <article class="post-single">
 <nav class="post-nav">
@@ -44,3 +48,7 @@
 
 </article>
 {{ end }}
+
+{{ define "footer" }}
+  {{ partial "footer.html" . }}
+{{ end }}