diff --git a/css/style-main.css b/css/style-main.css index f224999a..dfc99410 100644 --- a/css/style-main.css +++ b/css/style-main.css @@ -247,7 +247,6 @@ summary { /* HEADER COMPONENT */ .main-header { width: 100%; - max-height: 20rem; background-color: var(--clr-main-header-bg); display: flex; flex-direction: column; @@ -255,6 +254,17 @@ summary { text-align: center; } +.main-header__top-bar { + background-color: var(--clr-navbar-bg); + width: 100%; + padding: 0.5em 0; +} + +.main-header__img { + display: grid; + place-content: center; +} + .main-header img { object-fit: scale-down; overflow: hidden; @@ -624,6 +634,16 @@ article, .content-container { ); } +.flag-progress { + background: + conic-gradient(at 14% 50%, #0000 221.25deg, #ffffff 222deg 318deg, #0000 318.25deg), + conic-gradient(at 23% 50%, #0000 221.25deg, #f5a9b8 222deg 318deg, #0000 318.25deg), + conic-gradient(at 32% 50%, #0000 221.25deg, #5bcefa 222deg 318deg, #0000 318.25deg), + conic-gradient(at 41% 50%, #0000 221.25deg, #784F17 222deg 318deg, #0000 318.25deg), + conic-gradient(at 50% 50%, #0000 221.25deg, black 222deg 318deg, #0000 318.25deg), + linear-gradient(#e40303 0 16.66%, #ff8c00 0 33.33%, #ffed00 0 50%, #008026 0 66.66%, #004dff 0 83.33%, #750787 0); +} + /* FOOTER COMPONENT */ .main-footer { background: var(--clr-main-footer-bg); diff --git a/js/main-components.js b/js/main-components.js index 50238e9a..3833b11b 100644 --- a/js/main-components.js +++ b/js/main-components.js @@ -1,7 +1,196 @@ /* ------ MAIN 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; + }; +} + +document.addEventListener('DOMContentLoaded', () => { + const todayEvent = getTodayEvent(); + const headerTopBarEl = document.querySelector(".main-header__top-bar"); + const headerImgEl = document.querySelector(".main-header__img"); + + if (todayEvent != "No event") { + if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") { + headerTopBarEl.innerHTML = getBlurbHtml(todayEvent); + } else { + headerImgEl.classList.add(getBanner(todayEvent)); + headerTopBarEl.innerHTML = getBlurbHtml(todayEvent); + } + }; +}); + +function getTodayEvent() { + const date = new Date(); + const month = date.getMonth() + 1; + const day = date.getDate(); + + if (month == 3 && day == 1) + return "Zero Discrimination Day"; + else if (month == 3 && day == 31) + return "Trans Day of Visibility"; + else if (month == 4 && day == 6) + return "International Asexuality Day"; + else if (month == 4 && day == 26) + return "Lesbian Visibility Day"; + else if (month == 5 && day == 17) + return "IDAHOBIT"; + else if (month == 5 && day == 25) + return "Pansexual and Panromantic Awareness & Visibility Day"; + else if (month == 6) + return "Pride Month"; + else if (month == 7 && day == 14) + return "Non-Binary People's Day"; + else if (month == 7 && day == 28) + return "Leilukin's Birthday"; + else if (month == 9 && day == 11) + return "Leilukin's Hub Anniversary"; + else if (month == 9 && day == 23) + return "Bi Visibility Day"; + else if (month == 10 && day == 8) + return "International Lesbian Day"; + else if (month == 10 && day == 11) + return "National Coming Out Day"; + else if (month == 10 && day == 26) + return "Intersex Awareness Day"; + else + return "No event"; +} + +function getBanner(day) { + switch (day) { + case "Zero Discrimination Day": + return "flag-progress"; + break; + case "Trans Day of Visibility": + return "flag-trans"; + break; + case "International Asexuality Day": + return "flag-ace"; + break; + case "Lesbian Visibility Day": + return "flag-lesbian"; + break; + case "IDAHOBIT": + return "flag-progress"; + break; + case "Pansexual and Panromantic Awareness & Visibility Day": + return "flag-pan"; + break; + case "Pride Month": + return "flag-progress"; + break; + case "Non-Binary People's Day": + return "flag-non-binary"; + break; + case "Bi Visibility Day": + return "flag-bi"; + break; + case "International Lesbian Day": + return "flag-lesbian"; + break; + case "National Coming Out Day": + return "flag-rainbow"; + break; + case "Intersex Awareness Day": + return "flag-intersex"; + break; + default: + return ""; + } +} + +function getBlurbHtml(day) { + switch (day) { + case "Zero Discrimination Day": + return ` + Today is Zero Discrimination Day + `; + break; + case "Trans Day of Visibility": + return ` + Today is Trans Day of Visibility + `; + break; + case "International Asexuality Day": + return ` + Today is International Asexuality Day + `; + break; + case "Lesbian Visibility Day": + return ` + Today is Lesbian Visibility Day + `; + break; + case "IDAHOBIT": + return ` + Today is International Day Against Homophobia, Biphobia and Transphobia + `; + break; + case "Pansexual and Panromantic Awareness & Visibility Day": + return ` + Today is Pansexual and Panromantic Visibility Day + `; + break; + case "Pride Month": + return ` + Happy Pride Month! + `; + break; + case "Non-Binary People's Day": + return ` + Today is Non-Binary People's Day + `; + break; + case "Leilukin's Birthday": + return ` + Today is Leilukin's birthday + `; + break; + case "Leilukin's Hub Anniversary": + return ` + Today is the anniversary of the launch of Leilukin's Hub + `; + break; + case "Bi Visibility Day": + return ` + Today is Bi Visibility Day + `; + break; + case "International Lesbian Day": + return ` + Today is International Lesbian Day + `; + break; + case "National Coming Out Day": + return ` + Today is National Coming Out Day + `; + break; + case "Intersex Awareness Day": + return ` + Today is Intersex Awareness Day + `; + break; + default: + return ``; + } +} + /* ------ MAIN NAVIGATION BAR COMPONENT ------ */ @@ -21,7 +210,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 => {