Rework main navigation menu

_collections/_events/ball.md

@@ -17,3 +17,7 @@ Plus, thanks to extra funding from the School, we can keep prices low so everybo
 can get involved.
 
 Dress to impress for an unforgettable night!
+
+Past CSS Balls: [2026](/ball/2026), [2025](/ball/2025),
+[2024](/ball/2024), [2023](/ball/2023), [2022](/ball/2022),
+[2021](/ball/2021), and [2020](/ball/2020).

_config.yml

@@ -21,43 +21,26 @@ menu:
     class: freshers-nav
     image: /assets/images/freshers-2026/freshers-week-2026-lockup.png
     image_alt: Freshers Week
-  - name: News
-    link: /newsletter
   - name: Events
     link: /events
-    children:
-      - name: Calendar
-        link: /calendar
-  - name: Ball
-    link: /ball
-    children:
-      - name: 2026
-        link: /ball/2026
-      - name: 2025
-        link: /ball/2025
-      - name: 2024
-        link: /ball/2024
-      - name: 2023
-        link: /ball/2023
-      - name: 2022
-        link: /ball/2022
-      - name: 2021
-        link: /ball/2021
-      - name: 2020
-        link: /ball/2020
-  - name: Merch
-    link: /merch
-  - name: Committee
-    link: /committee
+  - name: News
+    link: /newsletter
   - name: Sponsor
     link: /sponsor
+  - name: Committee
+    link: /committee
   - name: About
-    link: /about
     children:
-      - name: Membership
-        link: /membership
+      - name: Overview
+        link: /about
+      - name: Merch
+        link: /merch
       - name: Links
         link: /links
+
+  - name: Join CSS
+    link: /membership
+    class: join-nav
 baseurl: /
 root: /
 

_includes/header.html

@@ -1,45 +1,49 @@
 <header>
-<span class="left">
+  <div class="left">
     <a class="logo" href="{{ site.base_url }}/">
-        <img alt="CSS logo" src="{{ '/assets/header-logo.svg' | relative_url }}">
+      <img alt="CSS logo" src="{{ '/assets/header-logo.svg' | relative_url }}">
     </a>
-</span>
-<span class="right">
-    {% for item in site.menu %}
-    {% if item.children %}
-    <div class="nav dropdown {{ item.class }}">
-	<a href="{{ item.link | relative_url }}">{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}</a>
-    <div class="dropdown-content">
-      {% for sub in item.children %}
-      <a href="{{ sub.link }}">{{ sub.name }}</a>
+  </div>
+  <nav class="right" aria-label="Primary navigation">
+    <ul class="navigation-list">
+      {% for item in site.menu %}
+      {% if item.children %}
+      <li class="nav dropdown {{ item.class }}">
+        <button type="button" aria-expanded="false" aria-controls="desktop-dropdown-{{ forloop.index }}"><span class="nav-label"><span class="nav-bracket nav-bracket-open" aria-hidden="true">[</span>{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}<img class="dropdown-chevron" src="{{ '/assets/down-arrowhead.svg' | relative_url }}" alt="" aria-hidden="true"><span class="nav-bracket nav-bracket-close" aria-hidden="true">]</span></span></button>
+        <ul class="dropdown-content" id="desktop-dropdown-{{ forloop.index }}">
+          {% for sub in item.children %}
+          <li><a href="{{ sub.link }}"><span class="nav-label"><span class="nav-bracket nav-bracket-open" aria-hidden="true">[</span>{{ sub.name }}<span class="nav-bracket nav-bracket-close" aria-hidden="true">]</span></span></a></li>
+          {% endfor %}
+        </ul>
+      </li>
+      {% else %}
+      <li class="nav {{ item.class }}">
+        <a href="{{ item.link | relative_url }}"><span class="nav-label"><span class="nav-bracket nav-bracket-open" aria-hidden="true">[</span>{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}<span class="nav-bracket nav-bracket-close" aria-hidden="true">]</span></span></a>
+      </li>
+      {% endif %}
       {% endfor %}
-    </div>
-    </div>
-    {% else %}
-    <div class="nav {{ item.class }}">
-	<a href="{{ item.link | relative_url }}">{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}</a>
-    </div>
-    {% endif %}
-    {% endfor %}
-</span>
-<div id="hamburger" class="hamburger">
-    <img alt="Hamburger menu" src="{{ '/assets/hamburger.svg' | relative_url }}">
-</div>
-<div id="hamburger-menu" class="mobile-menu">
-    {% for item in site.menu %}
-    <div class="nav {{ item.class }}">
-	{% if item.children %}
-	<a onclick="toggleShow({{ forloop.index }})">{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}</a>
-	<div class="dropdown" style="display: none" id="hbdd_{{ forloop.index }}">
-        <a href="{{ item.link | relative_url }}">- {{ item.name }}</a><br/>
-	  {% for sub in item.children %}
-          <a href="{{ sub.link | relative_url }}">- {{ sub.name }}</a><br/>
-	  {% endfor %}
-	</div>
-	{% else %}
-        <a href="{{ item.link | relative_url }}">{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}</a>
-	{% endif %}
-    </div>
-    {% endfor %}
-</div>
+    </ul>
+  </nav>
+  <button id="hamburger" class="hamburger" type="button" aria-expanded="false" aria-controls="hamburger-menu" aria-label="Open navigation menu">
+    <img class="hamburger-icon hamburger-icon-open" src="{{ '/assets/hamburger.svg' | relative_url }}" alt="" aria-hidden="true">
+    <img class="hamburger-icon hamburger-icon-close" src="{{ '/assets/cross.svg' | relative_url }}" alt="" aria-hidden="true">
+  </button>
+  <nav id="hamburger-menu" class="mobile-menu" aria-label="Mobile navigation">
+    <ul class="navigation-list">
+      {% for item in site.menu %}
+      <li class="nav {{ item.class }}">
+        {% if item.children %}
+        <button type="button" onclick="toggleShow({{ forloop.index }})" aria-expanded="false" aria-controls="hbdd_{{ forloop.index }}"><span class="nav-label"><span class="nav-bracket nav-bracket-open" aria-hidden="true">[</span>{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}<img class="dropdown-chevron" src="{{ '/assets/down-arrowhead.svg' | relative_url }}" alt="" aria-hidden="true"><span class="nav-bracket nav-bracket-close" aria-hidden="true">]</span></span></button>
+        <ul class="dropdown mobile-dropdown" style="display: none" id="hbdd_{{ forloop.index }}">
+          {% for sub in item.children %}
+          <li><a href="{{ sub.link | relative_url }}"><span class="nav-label"><span class="nav-bracket nav-bracket-open" aria-hidden="true">[</span>{{ sub.name }}<span class="nav-bracket nav-bracket-close" aria-hidden="true">]</span></span></a></li>
+          {% endfor %}
+        </ul>
+        {% else %}
+        <a href="{{ item.link | relative_url }}"><span class="nav-label"><span class="nav-bracket nav-bracket-open" aria-hidden="true">[</span>{% if item.image %}<img class="nav-item-image" src="{{ item.image | relative_url }}" alt="{{ item.image_alt | default: item.name }}">{% else %}{{ item.name }}{% endif %}<span class="nav-bracket nav-bracket-close" aria-hidden="true">]</span></span></a>
+        {% endif %}
+      </li>
+      {% endfor %}
+    </ul>
+  </nav>
 </header>

css/ball/main.scss

@@ -26,7 +26,11 @@ html {
 }
 
 header {
-  background-color: $secondary-lowlight;
+  --nav-background: #79651b;
+  --nav-panel-background: #79651b;
+  --nav-hover: #241040;
+  --nav-accent: #e4d05f;
+  --nav-font: "Ovo", serif;
 }
 
 body {
@@ -119,19 +123,6 @@ body {
     }
   }
 
-  .dropdown {
-    font-family: $font-secondary;
-  }
-
-  .dropdown-content {
-    background-color: $secondary-lowlight;
-
-    a {
-      font-family: $font-secondary;
-      font-size: 20px;
-    }
-  }
-
   .flex {
     display: flex;
     flex-direction: row;

css/events.scss

@@ -198,6 +198,29 @@
   }
 }
 
+@media only screen and (min-width: 1201px) {
+  .event.ball.event-long {
+    .event-image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 50%;
+      height: 100%;
+      float: none;
+    }
+
+    .details {
+      box-sizing: border-box;
+      width: 50%;
+      position: static;
+      max-width: none;
+      height: auto;
+      padding-bottom: 5px;
+    }
+  }
+}
+
 @media only screen and (max-width: 1200px) {
   .events-listing {
     grid-template-columns: 1fr;

css/freshers.scss

@@ -26,15 +26,6 @@ body {
     $ink;
 }
 
-body > header {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(9, 11, 24, 0.86);
-  backdrop-filter: blur(18px);
-}
-
 main {
   width: 100%;
   max-width: none;