Remove style.css; put all styles in app.css; add post_figure shortcode

layouts/partials/head.html

@@ -16,7 +16,6 @@
   {{ end }}
 
   <link rel="preload stylesheet" as="style" href="/app.css" />
-  <link rel="preload stylesheet" as="style" href="/style.css" />
   {{ if .IsHome }}
   <link rel="preload stylesheet" as="style" href="/home.css" />
   {{ end }}
@@ -30,9 +29,6 @@
   ></script>
   {{ end }}
 
-  <!-- Preload -->
-  <link rel="preload" as="image" href="{{ `theme.png` | absURL }}" />
-
   {{ range $.Scratch.Get "social-list" }}
   <link rel="preload" as="image" href="{{ printf `%s.svg` . | absURL }}" />
   {{ end }}

layouts/shortcodes/post_figure.html

@@ -0,0 +1,12 @@
+<figure>
+    {{ $img := (.Page.Resources.GetMatch (.Get "name")) }}
+    {{ $resized_img := $img.Fit "576x576" }}
+    <a href="{{ $img.RelPermalink }}">
+        <img src="{{ $resized_img.RelPermalink }}" />
+    </a>
+    <figcaption>
+        {{ if $img.Title }}
+        <h4>{{ $img.Title }}</h4>
+        {{ end }}
+    </figcaption>
+</figure>

static/app.css

@@ -170,11 +170,6 @@ textarea:-webkit-autofill {
   box-shadow: 0 0 0 6rem var(--white) inset;
 }
 
-img {
-  display: block;
-  max-width: 100%;
-}
-
 /* Header
  -------------------------------------------------- */
 .header {
@@ -483,7 +478,8 @@ img {
 }
 
 .post-content a {
-  padding-bottom: 0.2rem;
+    color: var(--link-color);
+    padding-bottom: 0.2rem;
 }
 
 .post-content a:hover {
@@ -671,6 +667,49 @@ img {
   border-bottom: 1px solid var(--pro);
 }
 
+.flex-date {
+    display: flex;
+    align-items: baseline;
+}
+
+.flex-date .date {
+    margin-left: auto;
+    font-size: 80%;
+    font-style: italic;
+}
+
+.draft {
+    text-transform: uppercase;
+    font-size: 80%;
+    color: white;
+    font-weight: 800;
+    /*border: 2px solid #aaa;*/
+    border-radius: 4px;
+    padding: 0.2rem 0.8rem;
+    margin-left: 0.5rem;
+    background-color: #aaa;
+}
+
+figure {
+    padding: 6px;
+    border: 1px solid var(--fog);
+    border-radius: 4px;
+}
+
+.post-content figcaption > h4 {
+    margin: 0;
+    margin-block: 0;
+    margin-top: 6px;
+    font-size: 2rem;
+}
+
+img {
+    border-radius: 4px;
+    display: block;
+    max-width: 100%;
+}
+
+
 /* 404
  -------------------------------------------------- */
 .title-404 {

static/style.css

@@ -1,38 +0,0 @@
-/* Place custom css here. */
-
-figure {
-    padding: 6px;
-    border: 1px solid var(--fog);
-    border-radius: 4px;
-}
-
-img {
-    border-radius: 4px;
-}
-
-.draft {
-    text-transform: uppercase;
-    font-size: 80%;
-    color: white;
-    font-weight: 800;
-    /*border: 2px solid #aaa;*/
-    border-radius: 4px;
-    padding: 0.2rem 0.8rem;
-    margin-left: 0.5rem;
-    background-color: #aaa;
-}
-
-.flex-date {
-    display: flex;
-    align-items: baseline;
-}
-
-.flex-date .date {
-    margin-left: auto;
-    font-size: 80%;
-    font-style: italic;
-}
-
-.post-content a {
-    color: var(--link-color);
-}