leilukin-site/_site/shrines/asummersend/trivia/index.html

588 lines
20 KiB
HTML
Raw Normal View History

2024-04-20 10:10:34 +00:00
<!DOCTYPE html>
<html lang="en" dir="ltr" id="page-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2024-05-06 15:43:57 +00:00
<meta property="og:title" content="Trivia | A Summers End — Hong Kong 1986 Shrine">
2024-04-20 10:10:34 +00:00
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
2024-05-06 15:43:57 +00:00
<meta name="description" content="A collection of trivia about A Summers End — Hong Kong 1986.">
2024-04-20 10:10:34 +00:00
<meta name="generator" content="Eleventy v2.0.1">
<meta property="og:type" content="website">
<meta property="og:url" content="https://leilukin.neocities.org/shrines/asummersend/trivia/">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:locale" content="en_MY">
2024-05-06 15:43:57 +00:00
<meta property="og:description" content="A collection of trivia about A Summers End — Hong Kong 1986.">
2024-04-20 10:10:34 +00:00
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://leilukin.neocities.org/shrines/asummersend/trivia/">
2024-05-06 15:43:57 +00:00
<meta name="twitter:description" content="A collection of trivia about A Summers End — Hong Kong 1986.">
2024-04-20 10:10:34 +00:00
<link rel="canonical" href="https://leilukin.neocities.org/shrines/asummersend/trivia/">
2024-05-17 18:49:53 +00:00
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
2024-04-20 10:10:34 +00:00
<link rel="stylesheet" href="/assets/css/asummersend.css">
<link rel="stylesheet" href="/assets/fonts/noto-sans/noto-sans.css">
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/shrines/asummersend/images/ase-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/shrines/asummersend/images/ase-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/shrines/asummersend/images/ase-icon.png">
2024-04-20 10:10:34 +00:00
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<title>
2024-05-06 15:43:57 +00:00
Trivia | A Summers End — Hong Kong 1986 Shrine | Leilukin's Hub
2024-04-20 10:10:34 +00:00
</title>
</head>
<body>
<header class="hero">
<div class="hero__top-bar hidden"></div>
<div class="hero__img">
<picture>
<source srcset="/assets/shrines/asummersend/images/asummersend-header-320.png" media="(orientation: landscape)" />
2024-05-06 15:43:57 +00:00
<img src="/assets/shrines/asummersend/images/asummersend-header.png" alt="Banner of A Summers End — Hong Kong 1986 Shrine" />
2024-04-20 10:10:34 +00:00
</picture>
</div>
</header>
<style>
.hero {
width: 100%;
background-color: var(--clr-hero-bg);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.hero__top-bar {
background-color: var(--clr-navbar-bg);
width: 100%;
2024-04-23 07:57:54 +00:00
padding: 0.5em 0.7em;
2024-04-20 10:10:34 +00:00
}
.hero__img {
display: grid;
place-content: center;
}
.hero img {
2024-04-20 11:43:13 +00:00
object-fit: contain;
2024-04-20 10:10:34 +00:00
overflow: hidden;
2024-04-20 11:43:13 +00:00
max-height: 16rem;
2024-04-20 10:10:34 +00:00
}
</style>
<script defer>
const hero = document.querySelector(".hero");
const heroTopBarEl = document.querySelector(".hero__top-bar");
const headerImgEl = document.querySelector(".hero__img");
const todayEvent = getTodayEvent();
if (todayEvent) {
2024-04-20 10:10:34 +00:00
heroTopBarEl.classList.remove('hidden');
heroTopBarEl.innerHTML = todayEvent;
2024-04-20 10:10:34 +00:00
}
function getTodayEvent() {
const date = new Date();
const month = date.getMonth() + 1;
const day = date.getDate();
const year = date.getFullYear();
2024-04-20 10:10:34 +00:00
const aseReleaseDate = new Date("2020-04-23").getFullYear();
const aseAnniversary = year - aseReleaseDate;
if (month === 2 && day === 16)
return `
Today is Michelle Cheung's birthday. Happy Birthday Michelle!
`;
else if (month === 4 && day === 23)
return `
2024-05-06 15:43:57 +00:00
Today is the ${aseAnniversary}-year anniversary of the release of <cite>A Summers End — Hong Kong 1986</cite>!
`;
else if (month === 8 && day === 9)
return `
Today is Cecelia Cortes' birthday. Happy Birthday Cecelia!
`;
else if (month === 12 && day === 28)
return `
Today is Sam Wong's birthday. Happy Birthday Sam!
`;
2024-04-20 10:10:34 +00:00
else
return null;
2024-04-20 10:10:34 +00:00
}
</script>
<nav class="navbar">
<button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i>
<h2 class="navbar__title">Navigation</h2>
</button>
<ul class="navbar__links">
2024-04-20 10:10:34 +00:00
<li>
<a href="/shrines/asummersend/">Shrine Home</a>
</li>
<li>
<a href="/shrines/asummersend/playlists/">Playlists</a>
</li>
<li>
<a aria-current="page" href="/shrines/asummersend/trivia/">Trivia</a>
</li>
<li>
<a href="/shrines/asummersend/gallery/">Gallery</a>
</li>
<li><a href="/shrines/">Shrine Index</a></li>
<li><a href="/">Main Site</a></li>
</ul>
</nav>
<style>
.navbar {
background: var(--clr-navbar-bg);
padding: 0.6em 1em;
2024-04-20 10:10:34 +00:00
width: 100%;
z-index: 999;
position: sticky;
top: 0;
}
.navbar__toggle,
.navbar__title {
color: var(--clr-navbar-link);
font-size: 1.3rem;
}
.navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none;
padding: 0;
margin: 0;
background-color: inherit;
}
.navbar__toggle:focus,
.navbar a:focus {
outline: 0.15em solid var(--clr-navbar-link);
}
2024-04-20 10:10:34 +00:00
.navbar a {
color: var(--clr-navbar-link);
text-decoration: none;
cursor: pointer;
}
.navbar a:hover {
color: var(--clr-link-hover);
}
.navbar a:focus {
outline-offset: 0.3em;
}
.navbar__links {
2024-04-20 10:10:34 +00:00
list-style: none;
display: none;
gap: 1em;
padding: 0.5em 1.8em;
overflow: auto;
2024-04-20 10:10:34 +00:00
}
.navbar__links--show {
display: grid;
}
/* Tablet screen size */
@media only screen and (min-width: 43.75rem) {
.navbar {
padding: 0 0.6em;
}
.navbar__toggle {
display: none;
}
.navbar__links {
display: flex;
justify-content: space-evenly;
gap: 0.5em;
flex-wrap: wrap;
padding: 0;
overflow: unset;
}
}
2024-04-20 10:10:34 +00:00
</style>
<script defer>
const navbarToggle = document.querySelector('.navbar__toggle');
const navbarLinks = document.querySelector(".navbar__links");
navbarToggle.addEventListener('click', () => {
navbarLinks.classList.toggle("navbar__links--show");
});
</script>
2024-04-20 10:10:34 +00:00
<main>
<header class="main__header">
2024-05-06 15:43:57 +00:00
<h1>A Summers End — Hong Kong 1986 Trivia</h1>
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
<p>A collection of trivia about A Summers End — Hong Kong 1986.</p>
2024-04-20 10:10:34 +00:00
</header>
<div class="content__wrapper">
<aside class="left-sidebar">
<details class="toc__wrapper sidebar--sticky">
<summary class="toc__heading">
On This Page
</summary>
<nav class="toc">
<ol>
<li><a href="#movies-and-music-references">Movies and Music References</a>
</li>
<li><a href="#character-trivia">Character Trivia</a>
<ol>
<li><a href="#chinese-names">Chinese Names</a>
</li>
<li><a href="#birthdays">Birthdays</a>
</li>
<li><a href="#zodiac-signs">Zodiac Signs</a>
</li>
<li><a href="#myers-briggs-type-indicator">MyersBriggs Type Indicator</a>
</li>
<li><a href="#inspirations">Inspirations</a>
</li>
</ol>
</li>
<li><a href="#footnotes">Footnotes</a>
</li>
2024-04-20 10:10:34 +00:00
</ol>
</nav>
</details>
</aside>
<style>
.toc__wrapper {
max-height: 89vh;
overflow: auto;
background-color: var(--clr-content-bg);
padding: 1rem 1.3rem;
}
.toc__heading {
font-size: 1.3rem;
font-weight: 700;
color: var(--clr-sub-heading);
cursor: pointer;
}
.toc ol,
.toc ol ol {
display: grid;
gap: 0.3em;
}
.toc ol {
border-top: 0.1em solid var(--clr-title-border);
padding-left: 1.3em;
padding-top: 1em;
}
.toc ol ol {
border-top: none;
list-style-type: disc;
padding-left: 1em;
padding-top: 0.3em;
}
.toc ol a {
font-size: 1.1rem;
padding-left: 0.3em;
}
.toc ol ol a {
padding: 0;
font-size: 1rem;
}
</style>
<div class="content ">
2024-05-10 12:31:53 +00:00
<p>Here is a collection of trivia about the characters from <cite>A Summers End — Hong Kong 1986</cite> provided by the developer Oracle and Bone on their social media pages, especially <a href="https://oracleandbone.tumblr.com/">Tumblr</a>.</p>
2024-04-20 10:10:34 +00:00
<div class="heading-wrapper h2">
<h2 id="movies-and-music-references">Movies and Music References</h2>
<a class="heading-anchor" href="#movies-and-music-references" aria-labelledby="movies-and-music-references"><span hidden>#</span></a></div>
<p>A Summers End contains many references to movies and music. This community post on Steam compiles a list of the movie and music references made in the game. Please be aware it contains spoilers!</p>
2024-05-06 15:43:57 +00:00
<p><a href="https://steamcommunity.com/sharedfiles/filedetails/?id=2213828067">Movies and Music in A Summers End Hong Kong 1986</a></p>
2024-04-20 10:10:34 +00:00
<div class="heading-wrapper h2">
<h2 id="character-trivia">Character Trivia</h2>
<a class="heading-anchor" href="#character-trivia" aria-labelledby="character-trivia"><span hidden>#</span></a></div>
<div class="heading-wrapper h3">
<h3 id="chinese-names">Chinese Names</h3>
<a class="heading-anchor" href="#chinese-names" aria-labelledby="chinese-names"><span hidden>#</span></a></div>
2024-05-10 12:31:53 +00:00
<p>Michelle Cheung's Chinese name is 張鳳霞, while Sam Wong's Chinese name is 黃嘉欣. Oracle and Bone had commented on their idea behind the characters' Chinese names on <a href="https://oracleandbone.tumblr.com/post/625313027310436352/hi-im-curious-how-you-came-up-with-sam-and">this Tumblr post</a>:</p>
2024-04-20 10:10:34 +00:00
<blockquote>
<p>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 Michelles name to have metaphoric meaning that reflected her story as well as the themes of the game.</p>
</blockquote>
<div class="heading-wrapper h3">
<h3 id="birthdays">Birthdays</h3>
<a class="heading-anchor" href="#birthdays" aria-labelledby="birthdays"><span hidden>#</span></a></div>
<ul>
<li>Michelle: February 16<sup class="footnote-ref"><a href="#fn1" id="fnref1">[<span class="visually-hidden">Footnote </span>1]</a></sup></li>
<li>Sam: December 28<sup class="footnote-ref"><a href="#fn2" id="fnref2">[<span class="visually-hidden">Footnote </span>2]</a></sup></li>
<li>Cecelia: August 9<sup class="footnote-ref"><a href="#fn3" id="fnref3">[<span class="visually-hidden">Footnote </span>3]</a></sup></li>
2024-04-20 10:10:34 +00:00
</ul>
<div class="heading-wrapper h3">
<h3 id="zodiac-signs">Zodiac Signs</h3>
<a class="heading-anchor" href="#zodiac-signs" aria-labelledby="zodiac-signs"><span hidden>#</span></a></div>
<ul>
<li>Michelle: Aquarius<sup class="footnote-ref"><a href="#fn4" id="fnref4">[<span class="visually-hidden">Footnote </span>4]</a></sup></li>
<li>Sam: Capricorn<sup class="footnote-ref"><a href="#fn4" id="fnref4:1">[<span class="visually-hidden">Footnote </span>4:1]</a></sup></li>
<li>Cecilia: Leo<sup class="footnote-ref"><a href="#fn4" id="fnref4:2">[<span class="visually-hidden">Footnote </span>4:2]</a></sup></li>
<li>Joey: Cancer<sup class="footnote-ref"><a href="#fn5" id="fnref5">[<span class="visually-hidden">Footnote </span>5]</a></sup></li>
2024-04-20 10:10:34 +00:00
</ul>
<div class="heading-wrapper h3">
<h3 id="myers-briggs-type-indicator">MyersBriggs Type Indicator</h3>
<a class="heading-anchor" href="#myers-briggs-type-indicator" aria-labelledby="myers-briggs-type-indicator"><span hidden>#</span></a></div>
<ul>
<li>Michelle: ISTJ<sup class="footnote-ref"><a href="#fn6" id="fnref6">[<span class="visually-hidden">Footnote </span>6]</a></sup></li>
<li>Sam: ESFP<sup class="footnote-ref"><a href="#fn6" id="fnref6:1">[<span class="visually-hidden">Footnote </span>6:1]</a></sup></li>
<li>Cecelia: ESTJ<sup class="footnote-ref"><a href="#fn6" id="fnref6:2">[<span class="visually-hidden">Footnote </span>6:2]</a></sup></li>
2024-04-20 10:10:34 +00:00
</ul>
<div class="heading-wrapper h3">
<h3 id="inspirations">Inspirations</h3>
<a class="heading-anchor" href="#inspirations" aria-labelledby="inspirations"><span hidden>#</span></a></div>
<ul>
<li>The character and fashion of Cecelia has been largely inspired by Anita Mui.<sup class="footnote-ref"><a href="#fn7" id="fnref7">[<span class="visually-hidden">Footnote </span>7]</a></sup></li>
2024-04-20 10:10:34 +00:00
</ul>
<section class="footnotes">
<div class="heading-wrapper h2">
<h2 id="footnotes" class="footnotes__title">Footnotes</h2>
<a class="heading-anchor" href="#footnotes" aria-labelledby="footnotes"><span hidden="">#</span></a>
</div>
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://oracleandbone.tumblr.com/post/643241885438197760/spring-day-february-16-is-michelles-birthday">Oracle and Bone's art for Michelle's Birthday</a> on 16 February 2021 <a aria-label="Back to content" href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p><a href="https://oracleandbone.tumblr.com/post/638707575113891840/hit-rewind-december-28-is-sams-birthday-happy">Oracle and Bone's art for Sam's Birthday</a> on 28 December 2020 <a aria-label="Back to content" href="#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p><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">Oracle and Bone's art for Cecelia's Birthday</a> on 9 August 2020 <a aria-label="Back to content" href="#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p><a href="https://oracleandbone.tumblr.com/post/616522957953679360/hey-what-zodiac-signs-are-sam-michelle">Oracle and Bone's Tumblr post</a> on 27 April 2020 <a aria-label="Back to content" href="#fnref4" class="footnote-backref">↩︎</a> <a aria-label="Back to content" href="#fnref4:1" class="footnote-backref">↩︎</a> <a aria-label="Back to content" href="#fnref4:2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn5" class="footnote-item"><p><a href="https://oracleandbone.tumblr.com/post/616711590970081280/hey-its-the-anon-that-asked-about-the-zodiac">Oracle and Bone's Tumblr post</a> on 29 April 2020 <a aria-label="Back to content" href="#fnref5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn6" class="footnote-item"><p><a href="https://oracleandbone.tumblr.com/post/622234880967950336/hey-first-of-all-i-just-wanted-to-say-i-adore-a">Oracle and Bone's Tumblr post</a> on 29 June 2020 <a aria-label="Back to content" href="#fnref6" class="footnote-backref">↩︎</a> <a aria-label="Back to content" href="#fnref6:1" class="footnote-backref">↩︎</a> <a aria-label="Back to content" href="#fnref6:2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn7" class="footnote-item"><p><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">Oracle and Bone's art for Cecelia's birthday</a> on 9 August 2021 <a aria-label="Back to content" href="#fnref7" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
2024-04-20 10:10:34 +00:00
</div>
<aside class="right-sidebar">
<div class="shrine__info sidebar--sticky">
<h2>About</h2>
2024-05-06 15:43:57 +00:00
<p>Welcome to Leilukin's shrine for <cite>A Summers End — Hong Kong 1986</cite>, an indie visual novel developed by Oracle and Bone. Set in 1980s Hong Kong, it tells of a love story between two women.</p>
2024-04-20 10:10:34 +00:00
<h3>Links</h3>
<ul>
2024-05-10 12:31:53 +00:00
<li><a href="https://www.asummersend.com/">Official Website</a>
2024-04-20 10:10:34 +00:00
</li>
2024-05-10 12:31:53 +00:00
<li><a href="https://store.steampowered.com/app/1111370/A_Summers_End__Hong_Kong_1986/">Steam</a></li>
<li><a href="https://oracleandbone.itch.io/a-summers-end">itch.io</a></li>
2024-04-20 10:10:34 +00:00
</ul>
</div>
</aside>
<style>
.right-sidebar {
background-color: var(--clr-content-bg);
font-size: clamp(0.9rem, 0.9rem + 3vw, 1rem);
}
.shrine__info {
padding: 1rem;
}
.shrine__info h2 {
font-size: clamp(1.5rem, 1rem + 3vw, 1.7rem);
margin-bottom: 0.2em;
}
.shrine__info h3 {
font-size: clamp(1.3rem, 1rem + 3vw, 1.5rem);
margin-top: 1em;
}
.shrine__info ul {
margin-top: 0.5em;
}
</style>
</div>
<style>
.breadcrumbs {
list-style: none;
padding: 0;
margin: 0 0 0.7em 0;
display: flex;
gap: 0.5em;
flex-wrap: wrap;
justify-content: center;
}
.breadcrumbs li::after {
content: '➔';
padding-left: 0.3em;
}
2024-04-20 10:10:34 +00:00
</style>
</main>
<footer class="footer">
<p>Made with ♥ by Leilukin | Shrine Launched: 16 February 2023</p>
<p>Back to: <a href="/shrines/">Shrine Index</a> | <a href="/">Leilukin&#39;s Hub</a></p>
2024-04-20 10:10:34 +00:00
</footer>
<style>
.footer {
margin-top: auto;
2024-05-09 17:13:56 +00:00
width: 100%;
2024-04-20 10:10:34 +00:00
background: var(--clr-main-footer-bg);
2024-05-09 17:13:56 +00:00
padding: 1rem 1rem 3rem 1rem;
2024-04-20 10:10:34 +00:00
text-align: center;
display: grid;
}
.footer p {
padding: 0;
}
.footer__links {
justify-self: center;
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 0.7em;
}
.footer__links li:not(:last-child)::after {
content: '|';
padding-left: 0.6em;
}
2024-05-09 17:13:56 +00:00
/* Screen sizes larger than mobile */
@media only screen and (min-width: 30rem) {
.footer {
padding: 1rem 1rem 2rem 1rem;
}
}
/* Tablet screen size */
@media only screen and (min-width: 43.75rem) {
2024-04-20 10:10:34 +00:00
.footer {
2024-05-09 17:13:56 +00:00
padding: 1rem;
2024-04-20 10:10:34 +00:00
}
}
</style>
<button class="top-btn hidden" aria-label="Scroll to top">
<i class="fa-solid fa-chevron-up"></i>
2024-04-20 10:10:34 +00:00
</button>
<style>
.top-btn {
position: fixed;
margin: 0;
padding: 0;
2024-04-21 19:08:40 +00:00
bottom: 0.5rem;
right: 0.5rem;
2024-04-20 10:10:34 +00:00
z-index: 999;
border: none;
background-color: var(--clr-top-btn-bg);
color: var(--clr-top-btn-txt);
2024-04-20 10:10:34 +00:00
border-radius: 50em;
2024-04-21 19:08:40 +00:00
width: 2rem;
aspect-ratio: 1 / 1;
2024-04-20 10:10:34 +00:00
}
.top-btn:focus {
outline: 0.25em solid var(--clr-top-btn-bg);
2024-04-20 10:10:34 +00:00
outline-offset: 0.15em;
}
</style>
<script defer>
const topButton = document.querySelector(".top-btn");
window.onscroll = () => {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topButton.classList.remove("hidden");
} else {
topButton.classList.add("hidden");
}
}
topButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth",
});
});
</script>
</body>
</html>