From 7988251cafc4f21aaf8166dadc740d13aeef4e0d Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Sat, 27 Aug 2022 12:56:49 +0900
Subject: [PATCH] Add published date to reviews

---
 layouts/404.html            |  2 +-
 layouts/reviews/single.html |  3 +++
 static/review.css           |  1 -
 static/style.css            | 18 ++++++++++++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/layouts/404.html b/layouts/404.html
index a904c6c..258cd01 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -3,6 +3,6 @@
     <header class="http-header">
       <h1 title="404" class="http-status">4📀4</h1>
     </header>
-    <p>The page you were looking for could not be found</p>
+    <p class="color:deemphasize">The page you were looking for could not be found</p>
   </section>
 {{ end }}
diff --git a/layouts/reviews/single.html b/layouts/reviews/single.html
index 706501a..0b8bf3a 100644
--- a/layouts/reviews/single.html
+++ b/layouts/reviews/single.html
@@ -7,6 +7,9 @@
       </div>
     {{ end }}
     <h1>{{- .Title -}}</h1>
+    <h3 class="subtitle-small color:deemphasize" style="margin-top: -30px">
+      {{- .PublishDate.Format "August 2, 2006" -}}
+    </h3>
     {{ partial "quicklook.html" . }}
   </header>
   <div class="core-content">
diff --git a/static/review.css b/static/review.css
index cb8df54..e1924c6 100644
--- a/static/review.css
+++ b/static/review.css
@@ -31,4 +31,3 @@
   height: 100%;
   object-fit: cover;
 }
-
diff --git a/static/style.css b/static/style.css
index e80308e..08e1f83 100644
--- a/static/style.css
+++ b/static/style.css
@@ -17,6 +17,12 @@
   --subtitle-font-size: 24px;
   --subtitle-font-letter-spacing: -0.02em;
 
+  --subtitle-small-font-family: 'Rufina', serif;
+  --subtitle-small-font-weight: 400;
+  --subtitle-small-line-height: 1.25;
+  --subtitle-small-font-size: 20px;
+  --subtitle-small-font-letter-spacing: -0.02em;
+
   --body-font-family: 'Inika', serif;
   --body-font-weight: 400;
   --body-font-line-height: 1.625;
@@ -49,6 +55,7 @@
   --color-light-background: #f2f2f2;
   --color-dark-background: #333;
   --color-link: #2F7BD5;
+  --color-deemphasize: #707070;
   font-size: var(--body-font-size);
 }
 
@@ -103,6 +110,14 @@ main {
   font-size: var(--subtitle-font-size);
   letter-spacing: var(--subtitle-font-letter-spacing);
 }
+.subtitle-small {
+  font-family: var(--subtitle-small-font-family);
+  font-weight: var(--subtitle-small-font-weight);
+  line-height: var(--subtitle-small-font-line-height);
+  font-size: var(--subtitle-small-font-size);
+  letter-spacing: var(--subtitle-small-font-letter-spacing);
+}
+
 .caption {
   font-family: var(--caption-font-family);
   font-weight: var(--caption-font-weight);
@@ -169,6 +184,9 @@ a:hover {
 .bg\:secondary {
   background: var(--color-secondary);
 }
+.color\:deemphasize {
+  color: var(--color-deemphasize);
+}
 .navbar {
   display: flex;
 }