From 6b1bb37deeba8ae685e73afe1dc75b819573ee41 Mon Sep 17 00:00:00 2001
From: Leilukin <contact@leilukin.com>
Date: Thu, 10 Aug 2023 11:09:56 +0800
Subject: [PATCH] Format reference citations

---
 changelog/index.html            |  5 +++
 css/style-main.css              |  5 +++
 home.html                       |  5 ++-
 shrines/asummersend/trivia.html | 60 ++++++++++++++++++++++++++-------
 4 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/changelog/index.html b/changelog/index.html
index 58e3eedd..679c133c 100644
--- a/changelog/index.html
+++ b/changelog/index.html
@@ -39,6 +39,11 @@
                     Archive: <span class="date-style">Latest</span> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a>
                 </p>
 
+                <p class="date-style">August 10, 2023:</p>
+                <ul>
+                    <li>Reformat source and reference citations, such as the <a href="/shrines/asummersend/trivia.html">Trivia</a> page on the A Summer’s End — Hong Kong 1986 shrine.</li>
+                </ul>
+
                 <p class="date-style">August 8, 2023:</p>
                 <ul>
                     <li>Added <a href="/shrines/cassettebeasts/featured.html">Featured</a> page to the <a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite> shrine</a>.</li>
diff --git a/css/style-main.css b/css/style-main.css
index ff97b7cd..2caddb10 100644
--- a/css/style-main.css
+++ b/css/style-main.css
@@ -503,6 +503,11 @@ article, .content-container {
     padding-left: 1.25rem;
 }
 
+/* REFERENCES LIST */
+.references-list {
+    font-size: 0.96em;
+}
+
 /* FOOTER COMPONENT */
 footer {
     background-color: var(--clr-footer-bg);
diff --git a/home.html b/home.html
index 23d5b18a..c2012e99 100644
--- a/home.html
+++ b/home.html
@@ -64,10 +64,9 @@
                 <section class="content-section">
                     <h2>Updates</h2>
                     <div class="text-box">
-                        <p class="date-style">August 8, 2023:</p>
+                        <p class="date-style">August 10, 2023:</p>
                         <ul>
-                            <li>Added <a href="/shrines/cassettebeasts/featured.html">Featured</a> page to the <a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite> shrine</a>.</li>
-                            <li>Added new resource: <a href="/resources/web-building-resources.html">Web Building Resources</a>.</li>
+                            <li>Reformat source and reference citations, such as the <a href="/shrines/asummersend/trivia.html">Trivia</a> page on the A Summer’s End — Hong Kong 1986 shrine.</li>
                         </ul>
                     </div>
                     <a href="/changelog">View all site changelog</a>
diff --git a/shrines/asummersend/trivia.html b/shrines/asummersend/trivia.html
index 30b31b64..46ecba27 100644
--- a/shrines/asummersend/trivia.html
+++ b/shrines/asummersend/trivia.html
@@ -55,33 +55,67 @@
                         A part of how we came up with their names was by referencing names of Hong Kong film actresses from their time period as a little homage to them. We also thought of how their names might reflect their upbringing. For example, despite Michelle being younger than Sam, she has a more old fashioned sounding Chinese name. The meaning of their Chinese names was also important to us. We particularly wanted Michelle’s name to have metaphoric meaning that reflected her story as well as the themes of the game.
                     </blockquote>
 
-                    <h3>Birthdays</h3>
+                    <h3>Birthdays:</h3>
                     <ul>
-                        <li>Michelle: February 16 <sup><a href="https://oracleandbone.tumblr.com/post/643241885438197760/spring-day-february-16-is-michelles-birthday" target="_blank">[Source]</a></sup></li>
-                        <li>Sam: December 28 <sup><a href="https://oracleandbone.tumblr.com/post/638707575113891840/hit-rewind-december-28-is-sams-birthday-happy" target="_blank">[Source]</a></sup></li>
-                        <li>Cecelia: August 9 <sup><a href="https://oracleandbone.tumblr.com/post/625985188093214720/%E9%BB%91%E5%A4%9C%E7%9A%84%E8%B1%B9-night-leopard-august-9-is-cecilias-birthday" target="_blank">[Source]</a></sup></li>
+                        <li>Michelle: February 16 <sup id="cite_ref-1"><a href="#cite_note-1">[1]</a></sup></li>
+                        <li>Sam: December 28 <sup id="cite_ref-2"><a href="#cite_note-2">[2]</a></sup></li>
+                        <li>Cecelia: August 9 <sup id="cite_ref-3"><a href="#cite_note-3">[3]</a></sup></li>
                     </ul>
 
                     <h3>Zodiac Signs:</h3>
                     <ul>
-                        <li>Michelle: Aquarius <sup><a href="https://oracleandbone.tumblr.com/post/616522957953679360/hey-what-zodiac-signs-are-sam-michelle" target="_blank">[Source]</a></sup></li>
-                        <li>Sam: Capricorn <sup><a href="https://oracleandbone.tumblr.com/post/616522957953679360/hey-what-zodiac-signs-are-sam-michelle" target="_blank">[Source]</a></sup></li>
-                        <li>Cecilia: Leo <sup><a href="https://oracleandbone.tumblr.com/post/616522957953679360/hey-what-zodiac-signs-are-sam-michelle" target="_blank">[Source]</a></sup></li>
-                        <li>Joey: Cancer <sup><a href="https://oracleandbone.tumblr.com/post/616711590970081280/hey-its-the-anon-that-asked-about-the-zodiac" target="_blank">[Source]</a></sup></li>
+                        <li>Michelle: Aquarius <sup id="cite_ref-4"><a href="#cite_note-4">[4]</a></sup></li>
+                        <li>Sam: Capricorn <sup id="cite_ref-4"><a href="#cite_note-4">[4]</a></sup></li>
+                        <li>Cecilia: Leo <sup id="cite_ref-4"><a href="#cite_note-4">[4]</a></sup></li>
+                        <li>Joey: Cancer <sup id="cite_ref-5"><a href="#cite_note-5">[5]</a></sup></li>
                     </ul>
 
                     <h3>Myers–Briggs Type Indicator:</h3>
                     <ul>
-                        <li>Michelle: ISTJ <sup><a href="https://oracleandbone.tumblr.com/post/622234880967950336/hey-first-of-all-i-just-wanted-to-say-i-adore-a" target="_blank">[Source]</a></sup></li>
-                        <li>Sam: ESFP <sup><a href="https://oracleandbone.tumblr.com/post/622234880967950336/hey-first-of-all-i-just-wanted-to-say-i-adore-a" target="_blank">[Source]</a></sup></li>
-                        <li>Cecelia: ESTJ <sup><a href="https://oracleandbone.tumblr.com/post/622234880967950336/hey-first-of-all-i-just-wanted-to-say-i-adore-a" target="_blank">[Source]</a></sup></li>
+                        <li>Michelle: ISTJ <sup id="cite_ref-6"><a href="#cite_note-6">[6]</a></sup></li>
+                        <li>Sam: ESFP <sup id="cite_ref-6"><a href="#cite_note-6">[6]</a></sup></li>
+                        <li>Cecelia: ESTJ <sup id="cite_ref-6"><a href="#cite_note-6">[6]</a></sup></li>
                     </ul>
 
                     <h3>Inspirations</h3>
                     <ul>
-                        <li>The character and fashion of Cecelia has been largely inspired by Anita Mui. <sup><a href="https://oracleandbone.tumblr.com/post/659052064213696512/%E7%83%88%E7%84%B0%E7%B4%85%E5%94%87-august-9-is-cecilias-birthday-happy" target="_blank">[Source]</a></sup></li>
+                        <li>The character and fashion of Cecelia has been largely inspired by Anita Mui. <sup id="cite_ref-7"><a href="#cite_note-7" target="_blank">[7]</a></sup></li>
                     </ul>
-            </section>
+                </section>
+
+                <section class="content-section">
+                    <h3>References:</h3>
+                    <ol class="references-list">
+                        <li id="cite_note-1">
+                            <a href="#cite_ref-1">↑</a>
+                            <a href="https://oracleandbone.tumblr.com/post/643241885438197760/spring-day-february-16-is-michelles-birthday" target="_blank">Michelle's birthday art on Oracle and Bone official Tumblr account</a> (February 15, 2021)
+                        </li>
+                        <li id="cite_note-2">
+                            <a href="#cite_ref-2">↑</a>
+                            <a href="https://oracleandbone.tumblr.com/post/638707575113891840/hit-rewind-december-28-is-sams-birthday-happy" target="_blank">Sam's birthday art on Oracle and Bone official Tumblr account</a> (December 27, 2020)
+                        </li>
+                        <li id="cite_note-3">
+                            <a href="#cite_ref-3">↑</a>
+                            <a href="https://oracleandbone.tumblr.com/post/625985188093214720/%E9%BB%91%E5%A4%9C%E7%9A%84%E8%B1%B9-night-leopard-august-9-is-cecilias-birthday" target="_blank">Cecelia's birthday art on Oracle and Bone official Tumblr account</a> (August 9, 2020)
+                        </li>
+                        <li id="cite_note-4">
+                            <a href="#cite_ref-4">↑</a>
+                            <a href="https://oracleandbone.tumblr.com/post/616522957953679360/hey-what-zodiac-signs-are-sam-michelle" target="_blank">Anonymous ask on Oracle and Bone official Tumblr account</a> (April 27, 2020)
+                        </li>
+                        <li id="cite_note-5">
+                            <a href="#cite_ref-5">↑</a>
+                            <a href="https://oracleandbone.tumblr.com/post/616711590970081280/hey-its-the-anon-that-asked-about-the-zodiac" target="_blank">Anonymous ask on Oracle and Bone official Tumblr account</a> (April 29, 2020)
+                        </li>
+                        <li id="cite_note-6">
+                            <a href="#cite_ref-6">↑</a>
+                            <a href="https://oracleandbone.tumblr.com/post/622234880967950336/hey-first-of-all-i-just-wanted-to-say-i-adore-a" target="_blank">Anonymous ask on Oracle and Bone official Tumblr account</a> (June 29, 2020)
+                        </li>
+                        <li id="cite_note-6">
+                            <a href="#cite_ref-7">↑</a>
+                            <a href="https://oracleandbone.tumblr.com/post/659052064213696512/%E7%83%88%E7%84%B0%E7%B4%85%E5%94%87-august-9-is-cecilias-birthday-happy" target="_blank">Cecelia's birthday art on Oracle and Bone official Tumblr account</a> (August 9, 2021)
+                        </li>
+                    </ol>
+                </section>
             </div>
 
             <aside class="right-sidebar"></aside>