465 lines
13 KiB
HTML
465 lines
13 KiB
HTML
<!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="Game Log | Cassette Beasts 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="A catalogue of my Cassette Beasts characters and save profiles.">
|
|
<meta name="generator" content="Eleventy v2.0.1">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://leilukin.neocities.org/shrines/cassettebeasts/gamelog/">
|
|
<meta property="og:site_name" content="Leilukin's Hub">
|
|
<meta property="og:locale" content="en_MY">
|
|
<meta property="og:description" content="A catalogue of my Cassette Beasts characters and save profiles.">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:url" content="https://leilukin.neocities.org/shrines/cassettebeasts/gamelog/">
|
|
<meta name="twitter:description" content="A catalogue of my Cassette Beasts characters and save profiles.">
|
|
<link rel="canonical" href="https://leilukin.neocities.org/shrines/cassettebeasts/gamelog/">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|
|
|
<link rel="stylesheet" href="/assets/css/cassettebeasts.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/cassettebeasts/images/cb-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/shrines/cassettebeasts/images/cb-icon.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/shrines/cassettebeasts/images/cb-icon.png">
|
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
|
|
|
|
|
<title>
|
|
|
|
Game Log | Cassette Beasts 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/cassettebeasts/images/cassettebeasts-header-320.png" media="(orientation: landscape)" />
|
|
<img src="/assets/shrines/cassettebeasts/images/cassettebeasts-header-640.png" alt="Banner of Cassette Beasts 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;
|
|
}
|
|
|
|
.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 == 4 && day == 26)
|
|
return "CB Anniversary";
|
|
else if (month == 9 && day == 12)
|
|
return "Pier Anniversary";
|
|
else
|
|
return "No event";
|
|
}
|
|
|
|
function getBlurbHtml(day) {
|
|
switch (day) {
|
|
case "CB Anniversary":
|
|
return `
|
|
Today is the anniversary of the release of <cite>Cassette Beasts</cite>!
|
|
`;
|
|
break;
|
|
case "Pier Anniversary":
|
|
return `
|
|
Today is the anniversary of the release of <cite>Pier of the Unknown</cite>, the first DLC expansion of <cite>Cassette Beasts</cite>!
|
|
`;
|
|
break;
|
|
default:
|
|
return ``;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<nav class="navbar">
|
|
<ul class="nav__menu">
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href="/shrines/cassettebeasts/">Shrine Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/cassettebeasts/articles/">Articles</a>
|
|
</li>
|
|
<li>
|
|
<a aria-current="page" href="/shrines/cassettebeasts/gamelog/">Game Log</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/cassettebeasts/featured/">Featured</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/cassettebeasts/trivia/">Trivia</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/cassettebeasts/resources/">Resources</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>Cassette Beasts Game Log</h1>
|
|
|
|
<p>A catalogue of my Cassette Beasts characters and save profiles.</p>
|
|
|
|
|
|
</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="#character-profile-kristine">Character Profile: Kristine</a>
|
|
</li>
|
|
|
|
<li><a href="#bootleg-record">Bootleg Record</a>
|
|
</li>
|
|
</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 ">
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="character-profile-kristine">Character Profile: Kristine</h2>
|
|
<a class="heading-anchor" href="#character-profile-kristine" aria-labelledby="character-profile-kristine"><span hidden>#</span></a></div>
|
|
<p><img src="/assets/shrines/cassettebeasts/gamelog/cb-character-kristine.png" alt="Cassette Beasts screenshot of Kristine, a custom player character"></p>
|
|
<p>My first and main character for Cassette Beasts. The first save file was created on 18 July 2023, and the main story was beaten on 30 July 2023. The second save file was created on 18 October 2023.</p>
|
|
<dl>
|
|
<dt>Name</dt>
|
|
<dd>Kristine</dd>
|
|
<dt>Pronouns</dt>
|
|
<dd>They/Them</dd>
|
|
<dt>Starter Monster Tape</dt>
|
|
<dd>Bansheep</dd>
|
|
<dt>Romance</dt>
|
|
<dd>Meredith</dd>
|
|
<dt>Final Station Location</dt>
|
|
<dd>Behind the tree stump to the top right of Autumn Hill</dd>
|
|
<dt>Gift Bootleg Received</dt>
|
|
<dd>Glitter-type Pombomb</dd>
|
|
<dt>First Wild Bootleg</dt>
|
|
<dd>Air-type Weevillite (obtained on August 14, 2023)</dd>
|
|
</dl>
|
|
<p>Character Trivia:</p>
|
|
<ul>
|
|
<li>I named Kristine after <a href="https://bulbapedia.bulbagarden.net/wiki/Kris_(game)">Kris</a>, the female player character of Pokémon Crystal and the first female player character of the Pokémon video game series.</li>
|
|
</ul>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="bootleg-record">Bootleg Record</h2>
|
|
<a class="heading-anchor" href="#bootleg-record" aria-labelledby="bootleg-record"><span hidden>#</span></a></div>
|
|
<p>I have kept track of all the bootleg monsters I have encountered in my saves. <a href="https://leilukin.notion.site/1d00ceca98764820be1cb8522c6d84f5?v=3b216d3d667647fb9337489fcd859578&pvs=4">You can check out my bootleg record here</a>.</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<aside class="right-sidebar">
|
|
<div class="shrine__info sidebar--sticky">
|
|
<h2>About</h2>
|
|
|
|
<p>Welcome to Leilukin's shrine for <cite>Cassette Beasts</cite>, an indie monster collecting turn-based open-world role-playing video game developed by Bytten Studio and published by Raw Fury.</p>
|
|
|
|
<h3>Links</h3>
|
|
<ul>
|
|
|
|
<li><a href="https://www.cassettebeasts.com/" target="_blank">Official Website</a>
|
|
</li>
|
|
<li><a href="https://wiki.cassettebeasts.com/" target="_blank">Official Wiki</a></li>
|
|
<li><a href="https://store.steampowered.com/app/1321440/Cassette_Beasts/" target="_blank">Steam</a></li>
|
|
<li><a href="https://bytten-studio.com/" target="_blank">Bytten Studio</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: 3 August 2023</p>
|
|
<p>Back to: <a href="/shrines/">Shrine Index</a> | <a href="/">Leilukin'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> |