diff --git a/shrines/cassettebeasts/css/style-cassettebeasts.css b/shrines/cassettebeasts/css/style-cassettebeasts.css
index 24b6ba7a..b9be816b 100644
--- a/shrines/cassettebeasts/css/style-cassettebeasts.css
+++ b/shrines/cassettebeasts/css/style-cassettebeasts.css
@@ -30,13 +30,10 @@
--clr-main-footer-bg: #9b59b6;
}
-.main-header {
- max-height: 20rem;
-}
-
.main-header img {
object-fit: cover;
object-position: top;
+ max-height: 20rem;
}
@media only screen and (min-width: 60rem) {
diff --git a/shrines/cassettebeasts/js/cb-components.js b/shrines/cassettebeasts/js/cb-components.js
index 7440f15c..965fbb80 100644
--- a/shrines/cassettebeasts/js/cb-components.js
+++ b/shrines/cassettebeasts/js/cb-components.js
@@ -1,7 +1,56 @@
/* ------ CASSETTE BEASTS SHRINE HEADER COMPONENT ------ */
-document.querySelector(".main-header").innerHTML = `
-
-`;
+const header = document.querySelector(".main-header");
+
+header.innerHTML = loadHeader();
+
+function loadHeader() {
+ const headerTopBar = `
`;
+ const headerImg = `
`;
+ const todayEvent = getTodayEvent();
+
+ if (todayEvent == "No event") {
+ return headerImg;
+ } else {
+ return headerTopBar + headerImg;
+ };
+}
+
+const todayEvent = getTodayEvent();
+const headerTopBarEl = document.querySelector(".main-header__top-bar");
+
+if (todayEvent != "No event") {
+ headerTopBarEl.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 Cassette Beasts!
+ `;
+ break;
+ case "Pier Anniversary":
+ return `
+ Today is the anniversary of the release of Pier of the Unknown, the first DLC expansion of Cassette Beasts!
+ `;
+ break;
+ default:
+ return ``;
+ }
+}
/* ------ CASSETTE BEASTS SHRINE NAVIGATION BAR COMPONENT ------ */
@@ -17,7 +66,6 @@ document.querySelector(".navbar").innerHTML = `
`;
// Make the navigation bar sticky
-const header = document.querySelector(".main-header");
const navbar = document.querySelector(".navbar");
window.addEventListener("scroll", e => {