Photos WIP
This commit is contained in:
parent
dd1e4ee40f
commit
ae19e1a777
4 changed files with 119 additions and 72 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,31 @@
|
|||
<table class="photo-params">
|
||||
<thead>
|
||||
<div class="photo-params">
|
||||
<div class="container">
|
||||
<table>
|
||||
<thead>
|
||||
<td class="make-model" colspan=4>{{ .Tags.Make }} {{ .Tags.Model }}</td>
|
||||
</thead>
|
||||
<tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td colspan="2" class="location">
|
||||
{{ $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>,
|
||||
{{ $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>
|
||||
{{ $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>,
|
||||
{{ $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>
|
||||
</td>
|
||||
<td colspan="2" class="size">
|
||||
{{ $widthpx := .Tags.PixelXDimension }}
|
||||
{{ $heightpx := .Tags.PixelYDimension }}
|
||||
{{ if and (gt $widthpx 0) (gt $heightpx 0) }}
|
||||
{{ $megapixels := div (mul $widthpx $heightpx) 1e6 }}
|
||||
<data value="{{ $megapixels }}">{{ $megapixels | lang.FormatNumber 0 }} MP</data> • {{ $widthpx }} × {{ $heightpx }}
|
||||
{{ end }}
|
||||
{{ $widthpx := .Tags.PixelXDimension }}
|
||||
{{ $heightpx := .Tags.PixelYDimension }}
|
||||
{{ if and (gt $widthpx 0) (gt $heightpx 0) }}
|
||||
{{ $megapixels := div (mul $widthpx $heightpx) 1e6 }}
|
||||
<data value="{{ $megapixels }}">{{ $megapixels | lang.FormatNumber 0 }} MP</data> • {{ $widthpx }} × {{ $heightpx }}
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="exposure-attributes">
|
||||
</tr>
|
||||
<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>
|
||||
</table>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
{{ partial "development/draft_tag.html" . }}
|
||||
<div class="post-title">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
|
||||
</div>
|
||||
</header>
|
||||
<header>
|
||||
{{ partial "development/draft_tag.html" . }}
|
||||
<div class="post-title">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
|
||||
</div>
|
||||
</header>
|
||||
{{ end }}
|
||||
|
||||
{{ $photos := .Resources.ByType "image" }}
|
||||
|
|
@ -21,26 +25,30 @@
|
|||
|
||||
{{ if eq (len $photos) 1 }}
|
||||
{{ $img := index $photos 0 }}
|
||||
<figure>
|
||||
<img src="{{ $img.RelPermalink }}">
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="{{ $img.RelPermalink }}">
|
||||
</figure>
|
||||
|
||||
{{ .Content }}
|
||||
{{ .Content }}
|
||||
|
||||
{{ partial "photo_exif_table.html" $img.Exif }}
|
||||
{{ partial "photo_exif_table.html" $img.Exif }}
|
||||
|
||||
{{ if in ($.Site.BaseURL | string) "localhost" }}
|
||||
{{ partial "development/photo_exif_table.html" $img.Exif }}
|
||||
{{ end }}
|
||||
{{ if in ($.Site.BaseURL | string) "localhost" }}
|
||||
{{ partial "development/photo_exif_table.html" $img.Exif }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<figure>
|
||||
<ul class="carousel">
|
||||
{{ range $photos }}
|
||||
<li>{{ . }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</figure>
|
||||
<figure>
|
||||
<ul class="carousel">
|
||||
{{ range $photos }}
|
||||
<li>{{ . }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</figure>
|
||||
{{ end }}
|
||||
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
{{ define "footer" }}
|
||||
{{ partial "footer.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue