Photos WIP

content/photos/photos.css

@@ -1,44 +1,81 @@
 :root {
-    --photo-params-background: #ddd;
+    --body-code-background-color: rgb(var(--dk-gray));
-    --photo-params-border-color: #aaa;
+    --box-shadow-color: rgba(var(--dk-gray), 0.8);
-}
+
-@media (prefers-color-scheme: dark) {
+    --heading-color: rgb(var(--white));
-    :root {
+
-        --photo-params-background: #444;
+    --html-color: rgb(var(--white));
-        --photo-params-background: #777;
+    --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 {
+main.photos.list {
-    align-items: center;
+    display: inline-block;
-    display: flex;
+    max-width: none;
-    flex-direction: row;
+    margin: var(--body-item-spacing) 0;
-    flex-wrap: wrap;
+    padding: 0 var(--body-item-spacing);
-    gap: 5px;
+    width: 100%;
-    justify-content: flex-start;
+}
+
+main.photos.list ul.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 0.8rem;
     margin: 0;
     padding: 0;
 }
-
+@media (max-width: 415px) {
-.photos .grid li {
+    .photos ul.grid {
-    display: block;
+        grid-template-columns: repeat(2, 1fr);
-    height: 210px;
+    }
-    list-style: none;
-    width: 210px;
 }
 
-.grid li img {
+.photos .grid li {
-    border-radius: 0.5rem;
+    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,27 +1,31 @@
-<table class="photo-params">
+<div class="photo-params">
-    <thead>
+  <div class="container">
+    <table>
+      <thead>
         <td class="make-model" colspan=4>{{ .Tags.Make }} {{ .Tags.Model }}</td>
-    </thead>
+      </thead>
-    <tr>
+      <tr>
         <td colspan="2" class="location">
-            {{ $lat := float .Lat }}{{ $latDir := cond (eq $lat 0) "" (cond (gt $lat 0) "N" "S") }}
+          {{ $lat := float .Lat }}{{ $latDir := cond (eq $lat 0) "" (cond (gt $lat 0) "N" "S") }}
-            <data class="latitude" value="{{ $lat }}">{{ .Lat | lang.FormatNumber (cond (ne $lat 0) 3 0) }}º{{ $latDir }}</data>,
+          <data class="latitude" value="{{ $lat }}">{{ .Lat | lang.FormatNumber (cond (ne $lat 0) 3 0) }}º{{ $latDir }}</data>,
-            {{ $long := float .Long }}{{ $longDir := cond (eq $long 0) "" (cond (gt $long 0) "E" "W") }}
+          {{ $long := float .Long }}{{ $longDir := cond (eq $long 0) "" (cond (gt $long 0) "E" "W") }}
-            <data class="longitude" value="{{ $long }}">{{ .Long | lang.FormatNumber (cond (ne $long 0) 3 0) }}º{{ $longDir }}</data>
+          <data class="longitude" value="{{ $long }}">{{ .Long | lang.FormatNumber (cond (ne $long 0) 3 0) }}º{{ $longDir }}</data>
         </td>
         <td colspan="2" class="size">
-            {{ $widthpx := .Tags.PixelXDimension }}
+          {{ $widthpx := .Tags.PixelXDimension }}
-            {{ $heightpx := .Tags.PixelYDimension }}
+          {{ $heightpx := .Tags.PixelYDimension }}
-            {{ if and (gt $widthpx 0) (gt $heightpx 0) }}
+          {{ if and (gt $widthpx 0) (gt $heightpx 0) }}
-                {{ $megapixels := div (mul $widthpx $heightpx) 1e6 }}
+          {{ $megapixels := div (mul $widthpx $heightpx) 1e6 }}
-                <data value="{{ $megapixels }}">{{ $megapixels | lang.FormatNumber 0 }} MP</data> • {{ $widthpx }} × {{ $heightpx }}
+          <data value="{{ $megapixels }}">{{ $megapixels | lang.FormatNumber 0 }} MP</data> • {{ $widthpx }} × {{ $heightpx }}
-            {{ end }}
+          {{ end }}
         </td>
-    </tr>
+      </tr>
-    <tr class="exposure-attributes">
+      <tr class="exposure-attributes">
         <td class="iso">{{ with .Tags.ISOSpeedRatings }}ISO {{ . }}{{ end }}</td>
         <td class="focal-length">{{ with .Tags.FocalLengthIn35mmFilm }}{{ . }} mm{{ end }}</td>
         <td class="f-number">{{ with .Tags.FNumber }}ƒ{{ . }}{{ end }}</td>
         <td class="exposure-time">{{ with .Tags.ExposureTime }}{{ . }} s{{ end }}</td>
-    </tr>
+      </tr>
-</table>
+    </table>
+  </div>
+</div>

layouts/photos/list.html

@@ -5,11 +5,9 @@
 {{ define "main" }}
 <section class="photos">
   <ul class="grid">
-    {{- range .Pages -}}
+    {{- $pages = .Paginate (first 50 .Pages.ByDate) -}}
-      {{- $thumbnailResource := (index (.Resources.ByType "image") 0) -}}
+    {{- range $pages.ByDate -}}
-      {{- $thumbnail := $thumbnailResource.Fit "600x600" -}}
+      {{- .Render "li_thumbnail_in_grid" -}}
-      {{- $thumbnail := $thumbnail.Crop "600x600" -}}
-      <li><a href="{{ .RelPermalink }}" title="{{ .Title }}"><img src="{{ $thumbnail.RelPermalink }}"></a></li>
     {{- 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">
@@ -5,13 +9,13 @@
 </nav>
 
 {{ if .Title }}
-    <header>
+<header>
-        {{ partial "development/draft_tag.html" . }}
+  {{ partial "development/draft_tag.html" . }}
-        <div class="post-title">
+  <div class="post-title">
-            <h1>{{ .Title }}</h1>
+    <h1>{{ .Title }}</h1>
-            <div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
+    <div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
-        </div>
+  </div>
-    </header>
+</header>
 {{ end }}
 
 {{ $photos := .Resources.ByType "image" }}
@@ -21,26 +25,30 @@
 
 {{ if eq (len $photos) 1 }}
 {{ $img := index $photos 0 }}
-    <figure>
+<figure>
-        <img src="{{ $img.RelPermalink }}">
+  <img src="{{ $img.RelPermalink }}">
-    </figure>
+</figure>
 
-    {{ .Content }}
+{{ .Content }}
 
-    {{ partial "photo_exif_table.html" $img.Exif }}
+{{ partial "photo_exif_table.html" $img.Exif }}
 
-    {{ if in ($.Site.BaseURL | string) "localhost" }}
+{{ if in ($.Site.BaseURL | string) "localhost" }}
-    {{ partial "development/photo_exif_table.html" $img.Exif }}
+{{ partial "development/photo_exif_table.html" $img.Exif }}
-    {{ end }}
+{{ end }}
 {{ else }}
-    <figure>
+<figure>
-        <ul class="carousel">
+  <ul class="carousel">
-            {{ range $photos }}
+    {{ range $photos }}
-            <li>{{ . }}</li>
+    <li>{{ . }}</li>
-            {{ end }}
+    {{ end }}
-        </ul>
+  </ul>
-    </figure>
+</figure>
 {{ end }}
 
 </article>
 {{ end }}
+
+{{ define "footer" }}
+  {{ partial "footer.html" . }}
+{{ end }}