Update gallery page

assets/scss/partials/_single.scss

@@ -26,14 +26,16 @@
 }
 .toc-title {
   display: none;
+  padding-right: 1em;
+  margin-top: 0;
+  line-height: 1;
+  font-weight: bold;
 }
 
 #TableOfContents {
   font-size: .9em;
-  line-height: 1.3;
   a {
     display: block;
-    padding-bottom: .3em;
     border-bottom: none;
     color: var(--c-txt-alt);
     &:hover {
@@ -149,12 +151,10 @@
     box-shadow: none;
     text-decoration: underline;
     transition-property: color;
-
     &:hover {
       box-shadow: none;
       color: $accent;
     }
-
     &.footnote-backref {
       text-decoration: none;
     }
@@ -202,10 +202,8 @@ hr.post-end {
     }
   }
 
-
   .tag {
     margin-right: .5em;
-
     &::before {
       content: "#"
     }
@@ -254,18 +252,22 @@ hr.post-end {
   background: transparent;
   cursor: pointer;
   animation: slideIn .2s ease-out;
+  &:hover {
+    color: $accent;
+  }
 }
 
 // Gallery Page
 //
 .album-meta {
   color: var(--c-txt-alt);
-  font-size: .8em;
+  font-size: .8rem;
   > p {
     margin: 0;
     &.album-desc {
       margin-top: 1em;
       line-height: normal;
+      font-size: 1rem;
     }
     > .feather {
       margin-right: 1em;

assets/scss/style.scss

@@ -327,18 +327,25 @@ h1#page-title {
     text-align: right;
     .toc-title {
       display: block;
-      padding-right: 1em;
-      margin-top: 0;
-      font-weight: bold;
     }
   }
   #TableOfContents {
     direction: rtl;
     font-size: .8em;
+    line-height: 1.4;
     a {
       display: inline;
     }
   }
+  .album-meta {
+    position: sticky;
+    float: left;
+    top: 2em;
+    width: calc(var(--offset) - 2em);
+    padding: 0 .5rem;
+    margin-left: calc(0px - var(--offset));
+    text-align: right;
+  }
   .content > figure {
     text-align: left;
     &>img {

layouts/gallery/single.html

@@ -12,19 +12,19 @@
 						<h1 id="page-title">{{ .Title }}</h1>
 					</div>
 				</div>
-				<div class="album-meta">
-					{{ with .Params.location -}}
-					<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>{{ . }}</p>
-					{{ end -}}
-					<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>{{ dateFormat .Site.Params.dateform .Date }}</p>
-					{{ with .Params.shot_on -}}
-					<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>{{ . }}</p>
-					{{ end -}}
-					{{ with .Params.description -}}
-					<p class="album-desc">{{ . }}</p>
-					{{ end -}}
-				</div>
 			</header>
+			<div class="album-meta">
+				{{ with .Params.location -}}
+				<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg><b>{{ . }}</b></p>
+				{{ end -}}
+				<p>on {{ dateFormat .Site.Params.dateform .Date }}</p>
+				{{ with .Params.shot_with -}}
+				<p>with {{ . }}</p>
+				{{ end -}}
+				{{ with .Params.description -}}
+				<p class="album-desc">{{ . }}</p>
+				{{ end -}}
+			</div>
 			<div class="content">
 				{{ .Content }}
 			</div>