Reorganize the website to focus on the main No Agenda entities while …

…moving in-depth information to an About section, and integrate noagenda.stream

assets/app.scss

@@ -5,13 +5,15 @@
 @import "stylesheets/helpers";
 @import "stylesheets/icons";
 
+@import "stylesheets/components/about";
 @import "stylesheets/components/alert";
 @import "stylesheets/components/archive";
 @import "stylesheets/components/buttons";
 @import "stylesheets/components/call2action";
 @import "stylesheets/components/chapters";
 @import "stylesheets/components/chat";
 @import "stylesheets/components/episodes";
+@import "stylesheets/components/footer";
 @import "stylesheets/components/forms";
 @import "stylesheets/components/link-group";
 @import "stylesheets/components/notice";

assets/controllers/about_menu_controller.js

@@ -0,0 +1,44 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = [
+    'button',
+    'menu',
+  ];
+
+  connect() {
+    this.buttonTarget.setAttribute('role', 'button');
+    this.buttonTarget.setAttribute('aria-controls', 'about-menu');
+    this.menuTarget.setAttribute('aria-hidden', 'true');
+
+    this.hide();
+  }
+
+  toggle() {
+    if (this.hidden) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  show() {
+    this.menuTarget.style.maxHeight = `${this.menuTarget.scrollHeight}px`;
+
+    this.buttonTarget.setAttribute('title', 'Hide menu');
+    this.buttonTarget.setAttribute('aria-expanded', 'true');
+    this.menuTarget.setAttribute('aria-hidden', 'false');
+
+    this.hidden = false;
+  }
+
+  hide() {
+    this.menuTarget.style.maxHeight = null;
+
+    this.buttonTarget.setAttribute('title', 'Expand menu');
+    this.buttonTarget.setAttribute('aria-expanded', 'false');
+    this.menuTarget.setAttribute('aria-hidden', 'true');
+
+    this.hidden = true;
+  }
+}

assets/controllers/recording_time_controller.js

@@ -9,7 +9,12 @@ export default class extends Controller {
     const timezoneText = date.zoneName.split('/').pop().replace('_', ' ');
 
     if (currentlyRecording(date, window.recordingTimes)) {
-      this.element.innerHTML = '<em>The show is currently live!</em>';
+      this.element.innerHTML = `
+        <div>
+          <span class="fa-solid fa-circle inline-icon color-donate" aria-hidden="true"></span>
+          <em>The show is currently live!</em>
+        </div>
+      `;
     } else {
       const nextRecordingText = nextRecording(date, window.recordingTimes).toLocaleString({weekday: 'long', hour: 'numeric', minute: 'numeric'});
       this.element.innerHTML = `Next recording at: ${nextRecordingText} (${timezoneText} Time)`;

assets/stylesheets/components/about.scss

@@ -0,0 +1,87 @@
+@import "../mixins";
+@import "../variables";
+
+.about-row {
+  max-width: $container-max-width;
+  width: $container-width;
+  margin: 0 auto;
+
+  .about-menu {
+    display: flex;
+    flex-direction: column;
+    gap: $gap-tiny;
+
+    a {
+      padding: 6px $gap-tiny;
+      background-color: var(--accent-1);
+      border-radius: 4px;
+      text-decoration: none;
+
+      &:active,
+      &:hover {
+        background-color: var(--accent-2);
+      }
+
+      &.active {
+        background-color: var(--accent-2);
+
+        &:active,
+        &:hover {
+          background-color: var(--accent-3);
+        }
+      }
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $gap-small;
+      font-size: 1.3em;
+
+      @include breakpoint-large-up {
+        display: none;
+      }
+
+      &:hover {
+        color: var(--highlight-color);
+      }
+    }
+
+    .menu {
+      display: flex;
+      flex-direction: column;
+      gap: $gap-tiny;
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height .5s;
+
+      @include breakpoint-large-up {
+        max-height: none !important;
+      }
+    }
+
+    .spacer {
+      height: $gap;
+    }
+  }
+
+  @include breakpoint-large-down {
+    margin-top: $gap-huge;
+  }
+
+  @include breakpoint-large-up {
+    display: flex;
+    align-items: stretch;
+    gap: $gap;
+    margin: $gap-huge auto;
+
+    .about-menu {
+      padding-top: 5em;
+      width: 25%;
+    }
+
+    .about-content {
+      width: 75%;
+    }
+  }
+}

assets/stylesheets/components/buttons.scss

@@ -42,15 +42,25 @@
   }
 }
 
+.btn-small {
+  padding: $gap-tiny;
+  font-size: 0.9em;
+  line-height: 1.1em;
+}
+
 .btn-large {
   padding: $gap-large $gap-huge;
-  font-size: 1.3em
+  font-size: 1.3em;
 }
 
 .btn-accent {
   @include button-colors(var(--accent-1), var(--accent-2), var(--text-color));
 }
 
+.btn-accent-2 {
+  @include button-colors(var(--accent-2), var(--accent-3), var(--text-color));
+}
+
 .btn-donate {
   @include button-colors(var(--donate), var(--donate-accent), var(--donate-contrast));
 }

assets/stylesheets/components/footer.scss

@@ -0,0 +1,20 @@
+@import "../mixins";
+@import "../variables";
+
+.footer {
+  border-top: 1px solid var(--accent-2);
+  margin-bottom: $gap-giga !important;
+
+  ul {
+    padding-left: 0;
+
+    li {
+      font-size: 1.1em;
+      list-style-type: none;
+
+      + li {
+        margin-top: $gap-small;
+      }
+    }
+  }
+}

assets/stylesheets/components/sections.scss

@@ -10,7 +10,8 @@
   .section-buttons,
   .section-buttons-full,
   .section-buttons-separated,
-  .section-content {
+  .section-content,
+  .section-header {
     max-width: $container-max-width;
     width: $container-width;
     margin: 0 auto;
@@ -133,6 +134,26 @@
       margin: 0;
     }
   }
+
+  .section-header {
+    display: flex;
+    flex-direction: column;
+    gap: $gap-small;
+
+    .grow {
+      flex-grow: 1;
+    }
+
+    @include breakpoint-tiny-up {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    > * {
+      margin: 0;
+    }
+  }
 }
 
 .section-row {
@@ -240,3 +261,60 @@
     }
   }
 }
+
+.section-narrow {
+  .section-content,
+  .section-buttons,
+  .section-buttons-full {
+    @include breakpoint-medium-only {
+      width: calc($container-width * 0.8);
+    }
+
+    @include breakpoint-large-only {
+      width: calc($container-width * 0.7);
+    }
+
+    @include breakpoint-full {
+      width: calc($container-max-width * 0.7);
+    }
+  }
+}
+
+.intro {
+  gap: $gap-giga;
+  margin: 0;
+  padding: $gap-giga 0;
+  text-align: center;
+
+  &.intro-accent {
+    background-color: var(--accent-1);
+  }
+
+  .section-content,
+  .section-buttons-full {
+    @include breakpoint-medium-only {
+      width: calc($container-width * 0.7);
+    }
+
+    @include breakpoint-large-only {
+      width: calc($container-width * 0.6);
+    }
+
+    @include breakpoint-full {
+      width: calc($container-max-width * 0.6);
+    }
+  }
+
+  .section-content {
+    gap: $gap-huge;
+  }
+
+  .section-buttons-full {
+    justify-content: center;
+  }
+
+  p {
+    font-size: 1.2em;
+    line-height: 1.4em;
+  }
+}

assets/stylesheets/global.scss

@@ -45,6 +45,14 @@ a {
   opacity: 1;
 }
 
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: calc(100vh - 64px);
+  gap: $gap-huge;
+}
+
 html.is-animating {
   .swup-transition, .navbar {
     opacity: 0.6;

assets/stylesheets/helpers.scss

@@ -29,6 +29,10 @@
   width: 100%;
 }
 
+.color-donate {
+  color: var(--donate);
+}
+
 .light-only {
   display: block;
 }
@@ -46,3 +50,21 @@
     display: block;
   }
 }
+
+.lead {
+  font-size: 3rem !important;
+}
+
+.lead-small {
+  font-size: 2.3rem !important;
+}
+
+.inline-icon:not(:only-child) {
+  &:first-child {
+    margin-right: $gap-tiny;
+  }
+
+  &:last-child {
+    margin-left: $gap-tiny;
+  }
+}

assets/stylesheets/variables.scss

@@ -1,12 +1,8 @@
-/*
-https://coolors.co/palette/e63946-f1faee-a8dadc-457b9d-1d3557
-*/
-
 $primary: #457b9d;
 $donate: #e63946;
 
 $light-bg: #eeeeee;
-$dark-bg: #36393e;
+$dark-bg: #222222;
 
 $light-text: #444444;
 $dark-text: #d0d0d0;
@@ -33,6 +29,7 @@ $gap-small: 12px;
 $gap: 16px;
 $gap-large: 20px;
 $gap-huge: 24px;
+$gap-giga: 64px;
 
 $border-radius: 6px;