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

398 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<meta property="og:title" content="Gallery | A Summer's End — Hong Kong 1986 Shrine">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="My gallery for A Summer's End — Hong Kong 1986.">
<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/gallery/">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:locale" content="en_MY">
<meta property="og:description" content="My gallery for A Summer's End — Hong Kong 1986.">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://leilukin.neocities.org/shrines/asummersend/gallery/">
<meta name="twitter:description" content="My gallery for A Summer's End — Hong Kong 1986.">
<link rel="canonical" href="https://leilukin.neocities.org/shrines/asummersend/gallery/">
<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" />
<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">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<title>
Gallery | A Summer's End — Hong Kong 1986 Shrine | Leilukin's Hub
</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)" />
<img src="/assets/shrines/asummersend/images/asummersend-header.png" alt="Banner of A Summer's End — Hong Kong 1986 Shrine" />
</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%;
padding: 0.5em 0.7em;
}
.hero__img {
display: grid;
place-content: center;
}
.hero img {
object-fit: contain;
overflow: hidden;
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
max-height: 16rem;
}
</style>
<script defer>
const hero = document.querySelector(".hero");
const todayEvent = getTodayEvent();
const heroTopBarEl = document.querySelector(".hero__top-bar");
const headerImgEl = document.querySelector(".hero__img");
if (todayEvent != "No event") {
heroTopBarEl.classList.remove('hidden');
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
}
function getTodayEvent() {
const date = new Date();
const month = date.getMonth() + 1;
const day = date.getDate();
if (month == 2 && day == 16)
return "Michelle's Birthday";
else if (month == 4 && day == 23)
return "ASE Anniversary";
else if (month == 8 && day == 9)
return "Cecelia's Birthday";
else if (month == 12 && day == 28)
return "Sam's Birthday";
else
return "No event";
}
function getBlurbHtml(day) {
const releaseDate = new Date("2020-04-23").getFullYear();
const currentYear = new Date().getFullYear();
const anniversary = currentYear - releaseDate;
switch (day) {
case "Michelle's Birthday":
return `
Today is Michelle Cheung's birthday. Happy Birthday Michelle!
`;
break;
case "ASE Anniversary":
return `
Today is the ${anniversary}-year anniversary of the release of <cite>A Summers End — Hong Kong 1986</cite>!
`;
break;
case "Cecelia's Birthday":
return `
Today is Cecelia Cortes' birthday. Happy Birthday Cecelia!
`;
break;
case "Sam's Birthday":
return `
Today is Sam Wong's birthday. Happy Birthday Sam!
`;
break;
default:
return ``;
}
}
</script>
<nav class="navbar">
<ul class="nav__menu">
<li>
<a 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 aria-current="page" 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 0.6rem;
width: 100%;
z-index: 999;
position: sticky;
top: 0;
}
.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;
outline: 0.15em solid var(--clr-navbar-link);
}
.nav__menu {
list-style: none;
padding: 0;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 0.5rem;
}
</style>
<main>
<header class="main__header">
<h1>A Summer&#39;s End — Hong Kong 1986 Gallery</h1>
<p>My gallery for A Summer&#39;s End — Hong Kong 1986.</p>
</header>
<div class="content__wrapper">
<div class="content ">
<p>A Summers End — Hong Kong 1986 was lovingly crafted by its developer Oracle and Bone with gorgeous art, so i want to make a page dedicated to my appreciation for the visual novels art.</p>
<p>The game has an in-game gallery that gradually unlocks as you progress the story, though certain scene art only unlocks if you pick certain dialogue options. Check out <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=2072736837">Dialog Choices Guide (AKA Lesbianism 101)</a> on Steam for how to unlock all scenes, and thus the entire in-game gallery.</p>
<p>I also highly recommend checking out the <a href="https://www.asummersend.com/">official site</a> of A Summer's End and the social media accounts of Oracle and Bone's for more beauriful art about the visual novel!</p>
<div class="heading-wrapper h2">
<h2 id="in-game-screenshots">In-Game Screenshots</h2>
<a class="heading-anchor" href="#in-game-screenshots" aria-labelledby="in-game-screenshots"><span hidden>#</span></a></div>
<p><img src="/assets/shrines/asummersend/screenshots/ASE-Screenshot-01.png" alt="In-Game Screenshot of A Summer's End 01"></p>
<p><img src="/assets/shrines/asummersend/screenshots/ASE-Screenshot-02.png" alt="In-Game Screenshot of A Summer's End 02"></p>
<p><img src="/assets/shrines/asummersend/screenshots/ASE-Screenshot-03.png" alt="In-Game Screenshot of A Summer's End 03"></p>
<p><img src="/assets/shrines/asummersend/screenshots/ASE-Screenshot-04.png" alt="In-Game Screenshot of A Summer's End 04"></p>
<p><img src="/assets/shrines/asummersend/screenshots/ASE-Screenshot-05.png" alt="In-Game Screenshot of A Summer's End 05"></p>
<p><img src="/assets/shrines/asummersend/screenshots/ASE-Screenshot-06.png" alt="In-Game Screenshot of A Summer's End 06"></p>
<p><img src="/assets/shrines/asummersend/screenshots/ASE-Screenshot-07.png" alt="In-Game Screenshot of A Summer's End 07"></p>
<p><img src="/assets/shrines/asummersend/screenshots/ASE-Screenshot-08.png" alt="In-Game Screenshot of A Summer's End 08"></p>
<p><img src="/assets/shrines/asummersend/screenshots/ASE-Screenshot-09.png" alt="In-Game Screenshot of A Summer's End 09"></p>
</div>
<aside class="right-sidebar">
<div class="shrine__info sidebar--sticky">
<h2>About</h2>
<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>
<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;
}
</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>
</footer>
<style>
.footer {
margin-top: auto;
background: var(--clr-main-footer-bg);
padding: 0.8rem;
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;
}
@media only screen and (min-width: 600px) {
.footer {
width: 100%;
}
}
</style>
<button class="top-btn hidden" aria-label="Scroll to top">
<i class="fa-solid fa-chevron-up"></i>
</button>
<style>
.top-btn {
position: fixed;
margin: 0;
padding: 0;
bottom: 0.5rem;
right: 0.5rem;
z-index: 999;
border: none;
background-color: var(--clr-top-btn-bg);
color: var(--clr-top-btn-txt);
border-radius: 50em;
width: 2rem;
aspect-ratio: 1 / 1;
}
.top-btn:focus {
outline: 0.25em solid var(--clr-top-btn-bg);
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>