feat: chart toggles

src/assets/scripts/media-toggles.js

@@ -0,0 +1,30 @@
+window.onload = () => {
+  const initializeButtonSet = (buttonSet) => {
+    const buttons = buttonSet.querySelectorAll('button')
+    const buttonIds = Array.from(buttons).map(button => button.getAttribute('data-toggle'))
+
+    buttons.forEach(button => {
+      button.addEventListener('click', function () {
+        const targetId = this.getAttribute('data-toggle')
+        const targetContent = document.getElementById(targetId)
+
+        buttons.forEach(btn => {
+          btn.classList.remove('active')
+          btn.classList.add('secondary')
+        })
+
+        buttonIds.forEach(id => {
+          document.getElementById(id).classList.add('hidden')
+        })
+
+        this.classList.remove('secondary')
+        this.classList.add('active')
+
+        targetContent.classList.remove('hidden')
+      })
+    })
+  }
+
+  const buttonSets = document.querySelectorAll('.now__section--header-buttons')
+  buttonSets.forEach(initializeButtonSet)
+}

src/assets/styles/components/buttons.css

@@ -0,0 +1,48 @@
+button:not(.theme__toggle, .share) {
+  border-radius: var(--rounded-full);
+  padding: var(--sizing-sm) var(--sizing-lg);
+  margin: 0 var(--sizing-xs) var(--sizing-md) 0;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-base);
+  color: var(--color-lightest);
+  background-color: var(--accent-color);
+  appearance: none;
+  border: 2px solid var(--accent-color);
+  transition-property: all;
+}
+
+button:not(.theme__toggle, .share, .active):hover,
+button:not(.theme__toggle, .share, .active):active,
+button:not(.theme__toggle, .share, .active):focus {
+  background-color: var(--accent-color-hover);
+  border-color: var(--accent-color-hover);
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+button.small {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  padding: var(--sizing-xs) var(--sizing-sm);
+}
+
+button.secondary {
+  color: var(--accent-color);
+  background: transparent;
+}
+
+button.secondary:not(.theme__toggle, .share):hover,
+button.secondary:not(.theme__toggle, .share):active,
+button.secondary:not(.theme__toggle, .share):focus {
+  color: var(--accent-color-hover);
+  background: transparent;
+}
+
+button.active {
+  cursor: not-allowed;
+}

src/assets/styles/components/forms.css

@@ -31,33 +31,6 @@ textarea:focus {
   border: 1px solid var(--accent-color-hover);
 }
 
-button:not(.theme__toggle, .share) {
-  border-radius: var(--rounded-full);
-  padding: var(--sizing-sm) var(--sizing-lg);
-  margin: 0 var(--sizing-xs) var(--sizing-md) 0;
-  cursor: pointer;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-base);
-  color: var(--color-lightest);
-  background-color: var(--accent-color);
-  appearance: none;
-  border: none;
-  transition-property: background-color;
-}
-
-button:not(.theme__toggle, .share):hover,
-button:not(.theme__toggle, .share):active,
-button:not(.theme__toggle, .share):focus {
-  color: var(--color-lightest);
-  background-color: var(--accent-color-hover);
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
-}
-
 .search__results {
   margin-top: 0;
   padding: 0;

src/assets/styles/components/media-grid.css

@@ -4,12 +4,22 @@
 }
 
 .now__section--header,
+.now__section--header-buttons,
 .recent__links-header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
-.now__section--header:first-of-type {
-  margin-top: 0;
+.now__section--header-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.now__section--header-buttons > button {
+  margin-bottom: 0 !important;
+}
+
+.now__section--header-buttons > button:last-of-type {
+  margin-right: 0 !important;
 }
 
 .media__grid {

src/assets/styles/pages/now.css

@@ -19,7 +19,7 @@
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
-.now__section--header:first-of-type {
+.default__wrapper > .now__section--header:first-of-type {
   margin-top: 0;
 }