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 = "A Summer’ ’ >
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 = "My shrine for A Summer’ >
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/" >
< 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 = "My shrine for A Summer’ >
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/" >
2024-05-06 15:43:57 +00:00
< meta name = "twitter:description" content = "My shrine for A Summer’ >
2024-04-20 10:10:34 +00:00
< link rel = "canonical" href = "https://leilukin.neocities.org/shrines/asummersend/" >
< link rel = "stylesheet" href = "/assets/css/main.css" >
< 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" / >
2024-04-21 23:15:48 +00:00
< 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
A Summer’ ’
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 >
2024-04-21 23:15:48 +00:00
< 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 Summer’ / >
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-26 16:12:13 +00:00
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");
2024-04-29 03:16:44 +00:00
const todayEvent = getTodayEvent();
2024-04-29 03:39:05 +00:00
if (todayEvent) {
2024-04-20 10:10:34 +00:00
heroTopBarEl.classList.remove('hidden');
2024-04-29 03:39:05 +00:00
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();
2024-04-29 05:14:21 +00:00
const year = date.getFullYear();
2024-04-20 10:10:34 +00:00
2024-04-29 05:14:21 +00:00
const aseReleaseDate = new Date("2020-04-23").getFullYear();
const aseAnniversary = year - aseReleaseDate;
2024-04-29 03:39:05 +00:00
2024-04-29 03:41:17 +00:00
if (month === 2 & & day === 16)
2024-04-29 03:39:05 +00:00
return `
Today is Michelle Cheung's birthday. Happy Birthday Michelle!
`;
2024-04-29 03:41:17 +00:00
else if (month === 4 & & day === 23)
2024-04-29 03:39:05 +00:00
return `
2024-05-06 15:43:57 +00:00
Today is the ${aseAnniversary}-year anniversary of the release of < cite > A Summer’ < / cite > !
2024-04-29 03:39:05 +00:00
`;
2024-04-29 03:41:17 +00:00
else if (month === 8 & & day === 9)
2024-04-29 03:39:05 +00:00
return `
Today is Cecelia Cortes' birthday. Happy Birthday Cecelia!
`;
2024-04-29 03:41:17 +00:00
else if (month === 12 & & day === 28)
2024-04-29 03:39:05 +00:00
return `
Today is Sam Wong's birthday. Happy Birthday Sam!
`;
2024-04-20 10:10:34 +00:00
else
2024-04-29 03:39:05 +00:00
return null;
2024-04-20 10:10:34 +00:00
}
< / script >
< nav class = "navbar" >
2024-05-10 09:06:10 +00:00
< button class = "navbar__toggle" aria-label = "Navigation menu toggle" >
< i class = "fa-solid fa-bars" > < / i >
2024-04-29 10:01:46 +00:00
< h2 class = "navbar__title" > Navigation< / h2 >
2024-05-10 09:06:10 +00:00
< / button >
2024-04-29 10:01:46 +00:00
< ul class = "navbar__links" >
2024-04-20 10:10:34 +00:00
< li >
< a aria-current = "page" href = "/shrines/asummersend/" > Shrine Home< / a >
< / li >
< li >
< a href = "/shrines/asummersend/playlists/" > Playlists< / a >
< / li >
< li >
< a 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);
2024-04-29 10:01:46 +00:00
padding: 0.6em 1em;
2024-04-20 10:10:34 +00:00
width: 100%;
z-index: 999;
position: sticky;
top: 0;
}
2024-05-10 09:06:10 +00:00
.navbar__toggle,
.navbar__title {
color: var(--clr-navbar-link);
font-size: 1.3rem;
2024-04-29 10:01:46 +00:00
}
.navbar__toggle {
2024-05-10 09:06:10 +00:00
display: flex;
align-items: center;
gap: 0.5em;
2024-04-29 10:01:46 +00:00
border: none;
padding: 0;
margin: 0;
background-color: inherit;
}
2024-04-29 10:23:26 +00:00
.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;
}
2024-04-29 10:01:46 +00:00
.navbar__links {
2024-04-20 10:10:34 +00:00
list-style: none;
2024-04-29 10:01:46 +00:00
display: none;
gap: 1em;
padding: 0.5em 2em;
overflow: auto;
2024-04-20 10:10:34 +00:00
}
2024-04-29 10:01:46 +00:00
.navbar__links--show {
display: grid;
}
/* Tablet screen size */
@media only screen and (min-width: 43.75rem) {
.navbar {
padding: 0 0.6em;
}
2024-05-10 09:06:10 +00:00
.navbar__toggle {
2024-04-29 10:01:46 +00:00
display: none;
}
.navbar__links {
display: flex;
justify-content: space-evenly;
gap: 0.5em;
flex-wrap: wrap;
padding: 0;
2024-04-29 10:12:51 +00:00
overflow: unset;
2024-04-29 10:01:46 +00:00
}
}
2024-04-20 10:10:34 +00:00
< / style >
2024-04-29 10:01:46 +00:00
< 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 Summer’ < / h1 >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< p > My shrine for A Summer’ < / p >
2024-04-20 10:10:34 +00:00
< / header >
< div class = "content__wrapper" >
< div class = "content content--divided" >
< section class = "content__section" >
2024-05-06 15:43:57 +00:00
< h2 > Welcome to Leilukin's < cite > A Summer’ < / cite > Shrine!< / h2 >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< img src = "/assets/shrines/asummersend/images/ASE_Key_art_intro.png" alt = "Promotional image of A Summer’ >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< p > < cite > A Summer’ < / cite > is a visual novel developed by Oracle and Bone, a Canada-based independent studio consists of two Asian queer women, Charissa So and Tida Kietsungden. The visual novel tells of a lesbian romance story between Michelle Cheung, an office worker, and Sam Wong, a video store owner, that takes place in Hong Kong in the year of 1986.< / p >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< p > Initially released in English on 23 April 2020, < cite > A Summer’ < / cite > has also been translated into Simplified Chinese, Traditional Chinese, Cantonese and Korean. The Chinese translations were released on 9 July 2021, while the Korean translation was released on 21 December 2023.< / p >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< p > < cite > A Summer’ < / cite > is available on < a href = "https://store.steampowered.com/app/1111370/A_Summers_End__Hong_Kong_1986/" target = "_blank" > Steam< / a > and < a href = "https://oracleandbone.itch.io/a-summers-end" target = "_blank" > itch.io< / a > . It also has an < a href = "https://www.asummersend.com/" target = "_blank" > official website< / a > .< / p >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< p > On 22 April 2023, a day before < cite > A Summer’ < / cite > 's third year anniversary, Oracle and Bone < a href = "https://www.asummersend.com/blog-intheocean/a-message-from-oracle-and-bone" target = "blank" > announced< / a > a spiritual sequel: < a href = "https://www.asummersend.com/about-intheocean" target = "blank" > < cite > In the Ocean I Learned to Float< / cite > < / a > , which takes place in the winter of 1988, two years after the events of < cite > A Summer’ < / cite > .< / p >
2024-04-20 10:10:34 +00:00
< / section >
< section class = "content__section" >
2024-05-06 15:43:57 +00:00
< h2 > How I Discovered < cite > A Summer’ < / cite > < / h2 >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< img src = "/assets/shrines/asummersend/images/ASE_Key_art_main.png" alt = "Key art of A Summer’ >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< p > I first learned about < cite > A Summer’ < / cite > through < a href = "https://linuxgameconsortium.com/a-summers-end-hong-kong-1986-just-announced/" target = "_blank" > Linux Game Consortium< / a > , a Linux gaming news website. There was a period where I set up my gaming laptop to dual boot Windows 10 and Linux, so I ended up following Linux gaming news for a while. While Windows is still my main platform for gaming, the discovery of < cite > A Summer’ < / cite > was the biggest unexpected benefit and surprise when I tried out Linux.< / p >
2024-04-20 10:10:34 +00:00
< p > As a lesbian, the premise of a visual novel about a sapphic romance already caught my interest, but what urged me to play it even more was the Hong Kong setting, which made my interest in the game personal, since I am a Cantonese-speaking Chinese lesbian who grew up with Hong Kong media. Not to mention, it is rare to see a fiction that tells of a sapphic love story that takes place in Hong Kong.< / p >
< / section >
< section class = "content__section" >
2024-05-06 15:43:57 +00:00
< h2 > Why < cite > A Summer’ < / cite > Means a Great Deal to Me< / h2 >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< img src = "/assets/shrines/asummersend/screenshots/ASE-Screenshot-05.png" alt = "Screenshot of A Summer’ >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< p > As a Chinese lesbian who speaks Cantonese and had engaged with a lot of Hong Kong media during my teenage years, < cite > A Summer’ < / cite > is the lesbian story that I relate to and feel represented the most.< / p >
2024-04-20 10:10:34 +00:00
< p > I relate to both the protagonists, Michelle and Sam, as their characters represent different parts of my life as a Chinese lesbian. I also relate to the story's theme of hoping for the future of our homeland despite the political uncertainties.< / p >
2024-05-06 15:43:57 +00:00
< p > My standards for lesbian representation in media has also become much higher because of this visual novel, since < cite > A Summer’ < / cite > is also a perfect example of how some of the best representations of minority groups are actually found in media made by indie creators, especially those who are part of those minority groups, so we shouldn't rely on mainstream media for representation especially when big name media companies are going to just give us scraps.< / p >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< p > If you ask me to list just one piece of queer art that means everything to me, that gives me comfort, inspiration, and strength the most, < cite > A Summer’ < / cite > would be it.< / p >
2024-04-20 10:10:34 +00:00
2024-05-06 15:43:57 +00:00
< p > I seriously cannot recommend < cite > A Summer’ < / cite > enough, especially for Asian sapphic women.< / p >
2024-04-20 10:10:34 +00:00
< / section >
< / 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 Summer’ < / 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 >
< li > < a href = "https://www.asummersend.com/" target = "_blank" > Official Website< / a >
< / li >
< li > < a href = "https://store.steampowered.com/app/1111370/A_Summers_End__Hong_Kong_1986/" target = "_blank" > Steam< / a > < / li >
< li > < a href = "https://oracleandbone.itch.io/a-summers-end" target = "_blank" > itch.io< / a > < / li >
< / 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;
}
2024-04-24 17:31:54 +00:00
.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 >
2024-04-26 09:31:18 +00:00
< p > Back to: < a href = "/shrines/" > Shrine Index< / a > | < a href = "/" > Leilukin' 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;
}
2024-04-20 10:59:51 +00:00
.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 >
2024-04-21 19:05:20 +00:00
< 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;
2024-04-21 19:05:20 +00:00
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;
2024-04-21 19:05:20 +00:00
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;
2024-04-21 19:05:20 +00:00
aspect-ratio: 1 / 1;
2024-04-20 10:10:34 +00:00
}
.top-btn:focus {
2024-04-21 19:05:20 +00:00
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 >
