Adjusted Cassette Beasts shrine page images

changelog/index.html

@@ -46,6 +46,7 @@
                 <p class="date-style">August 28, 2023:</p>
                 <ul>
                     <li><a href="/shrines/asummersend/"><cite>A Summer’s End — Hong Kong 1986</cite> shrine</a>: Updated the main page with a new section: The Importance of LGBTQ+ Adult Coming Out Story</li>
+                    <li><a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite> shrine</a>: Adjusted header image and added more images to the home page</li>
                 </ul>
 
                 <p class="date-style">August 26, 2023:</p>

home.html

@@ -71,6 +71,7 @@
                         <p class="date-style">August 28, 2023:</p>
                         <ul>
                             <li><a href="/shrines/asummersend/"><cite>A Summer’s End — Hong Kong 1986</cite> shrine</a>: Updated the main page with a new section: The Importance of LGBTQ+ Adult Coming Out Story</li>
+                            <li><a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite> shrine</a>: Adjusted header image and added more images to the home page</li>
                         </ul>
                     </div>
                     <a href="/changelog">View all site changelog</a>

shrines/cassettebeasts/css/style-cassettebeasts.css

@@ -40,6 +40,12 @@
     height: 100%;
 }
 
+@media only screen and (min-width: 60rem) {
+    .main-header img {
+        object-position: top -4.5rem right 0;
+    }
+}
+
 .main-footer {
     color: var(--clr-navbar-link);
 }

shrines/cassettebeasts/index.html

@@ -39,7 +39,7 @@
             <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">
+                    <img src="./img/CassetteBeasts_keyart_16_9.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>
@@ -58,6 +58,8 @@
                 <section class="content-section">
                     <h2>How I Got into <cite>Cassette Beasts</cite></h2>
 
+                    <img src="./img/cassettebeasts-website_screenshot_02.png" alt="Official screenshot of Cassette Beasts">
+
                     <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>
@@ -70,6 +72,8 @@
                 <section class="content-section">
                     <h2>Why You Should Play <cite>Cassette Beasts</cite></h2>
 
+                    <img src="./img/cassettebeasts-website-header-bg.jpg" alt="Header of the Cassette Beasts official website">
+
                     <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>

shrines/index.html

@@ -44,17 +44,17 @@
 
                 <section class="content-section">
                     <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"></a>
                 </section>
 
                 <section class="content-section">
                     <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"></a>
                 </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>
+                    <a href="./cassettebeasts/" target="_blank"><img src="./cassettebeasts/img/CassetteBeasts_keyart_16_9.png" alt="Header of the Star Wars: Knights of the Old Republic series"></a>
                 </section>
             </div>