Tweak gallery page

assets/scss/partials/_header.scss

@@ -23,7 +23,7 @@
     }
   }
   >a.active {
-    color: #fff;
+    color: var(--c-txt-em);
     &:hover {
       color: $accent;
     }

assets/scss/partials/_list.scss

@@ -51,6 +51,7 @@
 }
 
 .album-info {
+  display: inline-block;
   margin-top: .5em;
   margin-bottom: .8em;
   font-size: .8em;

assets/scss/partials/_single.scss

@@ -56,6 +56,11 @@
     margin-top: 1.5rem;
     margin-bottom: 1rem;
   }
+
+  blockquote {
+    text-align: left;
+  }
+
   figure {
     height: auto;
     margin: 0;
@@ -68,7 +73,6 @@
     font-style: italic;
     color: var(--c-txt-alt);
   }
-
   figure.left {
     float: left;
     margin-right: 1em;

assets/scss/style.scss

@@ -15,6 +15,7 @@ body {
   --c-bg-alt: #dee8e5;
   --c-txt: #545250;
   --c-txt-alt: #6d6b69;
+  --c-txt-em: #000;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -23,6 +24,7 @@ body {
     --c-bg-alt: #364045;
     --c-txt: #c8c6c4;
     --c-txt-alt: #a19f9d;
+    --c-txt-em: #fff;
   }
   #page img {
     filter: brightness(.9);
@@ -290,6 +292,16 @@ h1#page-title {
   .wrapper {
     max-width: 980px;
   }
+  #home-btn {
+    top: .2em;
+    right: .8em;
+    &>img{
+      width: 1.5em;
+    }
+  }
+  #site-header {
+    display: block;
+  }
   .content a.anchor {
     float: left;
     margin-left: -1em;
@@ -316,30 +328,23 @@ h1#page-title {
   .wrapper {
     margin-left: var(--offset);
   }
-  #home-btn {
-    top: .2em;
-    right: .8em;
-    &>img{
-      width: 1.5em;
-    }
-  }
-  #site-header {
-    display: block;
+  .sidebar {
+    position: sticky;
+    float: left;
+    top: 2em;
+    width: calc(var(--offset) - 2em);
+    padding: 0 .5rem;
+    margin-left: calc(0px - var(--offset));
+    text-align: right;
   }
   #toc-btn {
     display: none;
   }
   #toc {
     display: block!important;
-    position: sticky;
-    float: left;
-    top: 2em;
-    width: calc(var(--offset) - 2em);
     padding: 0 0 0 1em;
-    margin-left: calc(0px - var(--offset));
     border-right: 2px solid var(--c-bg-alt);
     background: transparent;
-    text-align: right;
     .toc-title {
       display: block;
     }
@@ -352,14 +357,24 @@ h1#page-title {
       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;
+  .album {
+    width: calc(var(--vw) * 100 - var(--offset) - 1em);
+    margin-top: 3em;
+  }
+  .album-title {
+    margin-top: 0;
+    margin-bottom: .5em;
+  }
+  .album-info {
+    display: block;
+    margin: 0;
+    line-height: 1.5;
+    > .separator {
+      display: none;
+    }
+  }
+  .album-row {
+    gap: 1em;
   }
   .content > figure {
     text-align: left;

layouts/gallery/list.html

@@ -15,11 +15,14 @@
 		{{- end }}
 		{{- range (.Pages.ByParam "shot_date").Reverse}}
 		<div class="album">
-			<h2 class="album-title">
-				{{ $abulmLink := .Permalink -}}
-				<a href="{{ $abulmLink }}">{{.Title}}</a>
-			</h2>
-			<p class="album-info">{{ time.Format .Site.Params.dateform .Params.shot_date }} &#183; In {{.Params.location}}</p>
+			<div class="sidebar">
+				<h2 class="album-title">
+					{{ $abulmLink := .Permalink -}}
+					<a href="{{ $abulmLink }}">{{.Title}}</a>
+				</h2>
+				<p class="album-info">{{ time.Format .Site.Params.dateform .Params.shot_date }}</p>
+				<p class="album-info"><span class="separator"> &#183; </span>In {{.Params.location}}</p>
+			</div>
 			<a href="{{ $abulmLink }}" class="album-row">
 				{{- range .Params.images -}}
 				<div class="img-tile"><img src="{{. | absURL}}" loading="lazy"></div>

layouts/gallery/single.html

@@ -13,7 +13,7 @@
 					</div>
 				</div>
 			</header>
-			<div class="album-meta">
+			<div class="album-meta sidebar">
 				{{ 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 -}}

layouts/writing/single.html

@@ -26,7 +26,7 @@
 				{{- end }}
 			</header>
 			{{- if .Params.toc }}
-			<div id="toc">
+			<div id="toc" class="sidebar">
 				<p class="toc-title">目录</p>
 				{{ .TableOfContents }}
 			</div>