Added Cassette Beasts shrine
This commit is contained in:
parent
512e91eaa5
commit
08c37e2c7f
|
@ -1,3 +1,2 @@
|
||||||
.DS_Store
|
.DS_Store
|
||||||
**/__Source
|
**/__Source
|
||||||
**/shrines/cassettebeasts
|
|
|
@ -39,6 +39,11 @@
|
||||||
Archive: <span class="date-style">Latest</span> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a>
|
Archive: <span class="date-style">Latest</span> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<p class="date-style">August 3, 2023:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Launched new <a href="/shrines/">shrine</a>: <a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite></a>.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<p class="date-style">July 28, 2023:</p>
|
<p class="date-style">July 28, 2023:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>New blog post: <a href="/blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html">My First Birthday After the Launch of Leilukin's Hub</a>.</li>
|
<li>New blog post: <a href="/blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html">My First Birthday After the Launch of Leilukin's Hub</a>.</li>
|
||||||
|
|
|
@ -64,10 +64,9 @@
|
||||||
<section class="content-section">
|
<section class="content-section">
|
||||||
<h2>Updates</h2>
|
<h2>Updates</h2>
|
||||||
<div class="text-box">
|
<div class="text-box">
|
||||||
<p class="date-style">July 28, 2023:</p>
|
<p class="date-style">August 3, 2023:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>New blog post: <a href="/blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html">My First Birthday After the Launch of Leilukin's Hub</a>.</li>
|
<li>Launched new <a href="/shrines/">shrine</a>: <a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite></a>.</li>
|
||||||
<li>Added shrine launch date to the footer of each <a href="/shrines/">shrine</a>.</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<a href="/changelog">View all site changelog</a>
|
<a href="/changelog">View all site changelog</a>
|
||||||
|
|
|
@ -0,0 +1,49 @@
|
||||||
|
@import url(/css/style-main.css);
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--clr-body-bg: #1f0033;
|
||||||
|
--img-body-bg: url(/shrines/cassettebeasts/img/cassettebeasts-bg.jpg);
|
||||||
|
--clr-body-txt: #000000;
|
||||||
|
--clr-content-bg: #ffffff;
|
||||||
|
|
||||||
|
--clr-main-heading: #000000;
|
||||||
|
--clr-sub-heading: #000000;
|
||||||
|
--clr-title-border: #797979;
|
||||||
|
--clr-bold-txt: #F2814C;
|
||||||
|
--clr-link: #AB75E8;
|
||||||
|
--clr-link-hover: #6914cb;
|
||||||
|
--clr-quote-bg: #dddddd;
|
||||||
|
--clr-quote-border: #777777;
|
||||||
|
|
||||||
|
--clr-code-bg: #dddddd;
|
||||||
|
--clr-code-border: #777777;
|
||||||
|
--clr-dates: rgb(58, 150, 255);
|
||||||
|
|
||||||
|
--clr-link-btn-bg: #873eb5;
|
||||||
|
--clr-link-btn-txt: white;
|
||||||
|
--clr-link-btn-hover: #241445;
|
||||||
|
|
||||||
|
--clr-header-bg: #AB75E8;
|
||||||
|
--clr-nav-bg: #AB75E8;
|
||||||
|
--clr-nav-link: white;
|
||||||
|
|
||||||
|
--clr-footer-bg: #AB75E8;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
max-height: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header img {
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: top;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
color: var(--clr-nav-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: var(--clr-nav-link);
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
After Width: | Height: | Size: 38 KiB |
|
@ -0,0 +1,71 @@
|
||||||
|
<!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:url" content="https://leilukin.neocities.org/shrines/cassettebeasts">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:site_name" content="Leilukin's Hub">
|
||||||
|
<meta property="og:title" content="Cassette Beasts Shrine">
|
||||||
|
<meta property="og:description" content="My shrine for Cassette Beasts">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="cassettebeasts.css" type="text/css" media="all">
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="./img/cb-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="./img/cb-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="./img/cb-icon.png">
|
||||||
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
<script src="js/header.js" defer></script>
|
||||||
|
<script src="js/sidebar-content.js" defer></script>
|
||||||
|
<script src="js/footer.js" defer></script>
|
||||||
|
|
||||||
|
<title>Cassette Beasts Shrine | Leilukin's Hub</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header></header>
|
||||||
|
<nav></nav>
|
||||||
|
<main>
|
||||||
|
<!-- <aside class="left-sidebar">
|
||||||
|
Left sidebar content here
|
||||||
|
</aside> -->
|
||||||
|
|
||||||
|
<div class="content-container">
|
||||||
|
<section class="content-section">
|
||||||
|
<h1>Welcome to Leilukin's <cite>Cassette Beasts</cite> Shrine!</h1>
|
||||||
|
<img src="./img/cassettebeasts_header.png" alt="Promotional image of Cassette Beasts">
|
||||||
|
<p><cite>Cassette Beasts</cite> is a 2D/3D hybrid creature collector open-world role-playing game developed by Bytten Studio, an indie team based in Brighton, United Kingdom, co-founded by Jay Baylis and Tom Coxon, and published by Raw Fury.</p>
|
||||||
|
|
||||||
|
<p>First released on Steam and Windows on April 26, 2023, later on console on May 25, 2023, <cite>Casette Beasts</cite> is available on Windows, Linux, Steam, Xbox Series X|S, Xbox One, Gamepass and Nintendo Switch.</p>
|
||||||
|
|
||||||
|
<p><cite>A Summer’s End</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.cassettebeasts.com/" target="_blank">official website</a>.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content-section">
|
||||||
|
<h2>How I Got into <cite>Cassette Beasts</cite></h2>
|
||||||
|
|
||||||
|
<p>On June 30, 2023, when the Steam Summer Sale 2023 just started, I received <cite>Cassette Beasts</cite> as a Steam gift from a generous friend, who knew that I had been looking for independant monster-collecting games, since I mostly play indie games instead of AAA games nowadays.</p>
|
||||||
|
|
||||||
|
<p>I started my first playthrough of <cite>Cassette Beasts</cite> on July 18, 2023, and I was immediately hooked. I could already feel that this game has like everything I could ask for in an indie alternative to <cite>Pokémon</cite>.</p>
|
||||||
|
|
||||||
|
<p>I ended up spending around 34 hours to beat the main campaign, and that was because I made the deliberate decision to max out the companion characters' relationship level before advancing to the final level of the main story, because this game has more focus on human characters and relationships than what you may expect in a monster-collecting game.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content-section">
|
||||||
|
<h2>Why You Should Play <cite>Cassette Beasts</cite></h2>
|
||||||
|
|
||||||
|
<p><cite>Cassette Beasts</cite> is a masterpiece of a monster collector game, rivalling if not even surpassing <cite>Pokémon</cite> at its best, because while it is obvious that Cassette Beasts is inspired by <cite>Pokémon</cite>, it utilises various aspects of <cite>Pokémon</cite> games with its own unique takes that are sometimes even better than <cite>Pokémon</cite>, from monster collecting mechanic, battle system, elemental type match ups, story, characters, lore, world building, map design, etc, with an amazing soundtrack that goes along with the game. As a result, <cite>Cassette Beasts</cite> is perfectly capable of standing on its own.</p>
|
||||||
|
|
||||||
|
<p>I cannot recommend <cite>Cassette Beasts</cite> enough if you like monster-collecting games, including, if not especially, if you like <cite>Pokémon</cite> but want an indie alternative, or something different after finding <cite>Pokémon</cite> games getting stale or becoming jaded by the direction of the <cite>Pokémon</cite> games.</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="right-sidebar"></aside>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,5 @@
|
||||||
|
// Footer component content
|
||||||
|
document.querySelector("footer").innerHTML = `
|
||||||
|
<p>Made with ♥ by Leilukin | Shrine Launched: August 3, 2023</p>
|
||||||
|
<p><a href="#page-top">Back to top</a></p>
|
||||||
|
`;
|
|
@ -0,0 +1,29 @@
|
||||||
|
/* Header component content */
|
||||||
|
document.querySelector("header").innerHTML = `
|
||||||
|
<img src="./img/cassettebeasts-header.png" alt="">
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
/* Navigation component content */
|
||||||
|
document.querySelector("nav").innerHTML = `
|
||||||
|
<ul class="nav__menu">
|
||||||
|
<li><a href="/shrines/cassettebeasts/">Shrine Home</a></li>
|
||||||
|
<!-- <li><a href="./playlists.html">Playlists</a></li> -->
|
||||||
|
<li><a href="/home.html">Main Site</a></li>
|
||||||
|
</ul>
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
/* MAKE THE NAVBAR STICKY */
|
||||||
|
const header = document.querySelector("header");
|
||||||
|
const navbar = document.querySelector("nav");
|
||||||
|
|
||||||
|
window.addEventListener("scroll", e => {
|
||||||
|
const scrollPos = window.scrollY || document.documentElement.scrollTop;
|
||||||
|
const stickyLine = header.scrollHeight - navbar.scrollHeight;
|
||||||
|
if (scrollPos > stickyLine) {
|
||||||
|
navbar.classList.add("sticky-nav");
|
||||||
|
} else {
|
||||||
|
navbar.classList.remove("sticky-nav");
|
||||||
|
}
|
||||||
|
});
|
|
@ -0,0 +1,15 @@
|
||||||
|
// Sidebar content
|
||||||
|
document.querySelector(".right-sidebar").innerHTML = `
|
||||||
|
<div class="sidebar--sticky">
|
||||||
|
<h2>About</h2>
|
||||||
|
<p><cite>Cassette Beasts</cite> is an 80’s vibe Creature Collector turn-based RPG set in a vast and colourful open world. Record and collect awesome monster forms to use in turn-based battles, or for their abilities to traverse the world. Use the Fusion System to create unique and powerful by combining any two monsters.</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>
|
||||||
|
`;
|
|
@ -39,20 +39,25 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="content-section">
|
<section class="content-section">
|
||||||
<h2><a href="./asummersend/" target="_blank"><em>A Summer’s End — Hong Kong 1986</em></a></h2>
|
<h2><a href="./asummersend/" target="_blank"><cite>A Summer’s End — Hong Kong 1986</cite></a></h2>
|
||||||
<a href="./asummersend/" target="_blank"><img src="./asummersend/img/ASE_Key_art_intro.png" alt="Header of A Summer’s End — Hong Kong 1986" width="100%"></a>
|
<a href="./asummersend/" target="_blank"><img src="./asummersend/img/ASE_Key_art_intro.png" alt="Header of A Summer’s End — Hong Kong 1986" width="100%"></a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="content-section">
|
<section class="content-section">
|
||||||
<h2><a href="./starwarskotor/" target="_blank"><em>Star Wars: Knights of the Old Republic</em></a></h2>
|
<h2><a href="./starwarskotor/" target="_blank"><cite>Star Wars: Knights of the Old Republic</cite></a></h2>
|
||||||
<a href="./starwarskotor/" target="_blank"><img src="./starwarskotor/img/swkotor-header.jpg" alt="Header of the Star Wars: Knights of the Old Republic series" width="100%"></a>
|
<a href="./starwarskotor/" target="_blank"><img src="./starwarskotor/img/swkotor-header.jpg" alt="Header of the Star Wars: Knights of the Old Republic series" width="100%"></a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="content-section">
|
||||||
|
<h2><a href="./cassettebeasts/" target="_blank"><cite>Cassette Beasts</cite></a></h2>
|
||||||
|
<a href="./cassettebeasts/" target="_blank"><img src="./cassettebeasts/img/cassettebeasts-header.png" alt="Header of the Star Wars: Knights of the Old Republic series" width="100%"></a>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <aside class="right-sidebar">
|
<!-- <aside class="right-sidebar">
|
||||||
Right sidebar content here
|
Right sidebar content here
|
||||||
</aside> -->
|
</aside> -->
|
||||||
</main>
|
</main>
|
||||||
<footer-component></footer-component>
|
<footer></footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -48,8 +48,8 @@
|
||||||
<li><a href="/mycreations/">My Creations</a></li>
|
<li><a href="/mycreations/">My Creations</a></li>
|
||||||
<li><a href="/mymods/">My Mods</a></li>
|
<li><a href="/mymods/">My Mods</a></li>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/mymods/kotor1mods/"><em>Star Wars: Knights of the Old Republic</em></a></li>
|
<li><a href="/mymods/kotor1mods/"><cite>Star Wars: Knights of the Old Republic</cite></a></li>
|
||||||
<li><a href="/mymods/kotor2mods/"><em>Star Wars: Knights of the Old Republic II: The Sith Lords</em></a></li>
|
<li><a href="/mymods/kotor2mods/"><cite>Star Wars: Knights of the Old Republic II: The Sith Lords</cite></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<li><a href="/playlists/">Playlists</a></li>
|
<li><a href="/playlists/">Playlists</a></li>
|
||||||
<li><a href="/featured/">Featured</a></li>
|
<li><a href="/featured/">Featured</a></li>
|
||||||
|
@ -63,13 +63,13 @@
|
||||||
</ul>
|
</ul>
|
||||||
<li><a href="/shrines/">Shrines</a></li>
|
<li><a href="/shrines/">Shrines</a></li>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/shrines/asummersend/"><em>A Summer’s End — Hong Kong 1986</em></a></li>
|
<li><a href="/shrines/asummersend/"><cite>A Summer’s End — Hong Kong 1986</cite></a></li>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/shrines/asummersend/playlists.html">Playlists</a></li>
|
<li><a href="/shrines/asummersend/playlists.html">Playlists</a></li>
|
||||||
<li><a href="/shrines/asummersend/trivia.html">Trivia</a></li>
|
<li><a href="/shrines/asummersend/trivia.html">Trivia</a></li>
|
||||||
<li><a href="/shrines/asummersend/gallery.html">Gallery</a></li>
|
<li><a href="/shrines/asummersend/gallery.html">Gallery</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<li><a href="/shrines/starwarskotor/"><em>Star Wars: Knights of the Old Republic</em></a></li>
|
<li><a href="/shrines/starwarskotor/"><cite>Star Wars: Knights of the Old Republic</cite></a></li>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/shrines/starwarskotor/articles/">Articles</a></li>
|
<li><a href="/shrines/starwarskotor/articles/">Articles</a></li>
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -94,6 +94,7 @@
|
||||||
<li><a href="/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music.html">The Sith Lords Restored Content Mod + M4-78 Enhancement Project Modules, Warp Codes & Music Overview</a></li>
|
<li><a href="/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music.html">The Sith Lords Restored Content Mod + M4-78 Enhancement Project Modules, Warp Codes & Music Overview</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</ul>
|
</ul>
|
||||||
|
<li><a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<li><a href="/links/">Links</a></li>
|
<li><a href="/links/">Links</a></li>
|
||||||
<li><a href="/changelog/">Changelog</a></li>
|
<li><a href="/changelog/">Changelog</a></li>
|
||||||
|
|
Loading…
Reference in New Issue