Skip to content

Refactor work.html #492

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tripledoublev wants to merge 2 commits into
base: staging
Choose a base branch
from
Open

Refactor work.html #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
980886c
Refactor work.html
tripledoublev Oct 27, 2025
56ca782
simplify the menu layout by removing dropdown functionality
tripledoublev Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 9 additions & 110 deletions _includes/sections/navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,14 @@ <h2 id="menu-heading" class="clip">Main navigation menu</h2>
{% assign current_page_slug = page.url | split: '/' %}
{%- for page in pages -%}
{% if page.menu_title %}
{% if page.menu_title == "Work" %}
<li class="dropdown-container relative" role="none">
<a class="pa3 pv0-l db no-underline underline-hover hover-accent mid-gray {% if current_page_slug[1] == 'work' %}accent underline{% endif %}"
href="{{ page.url | relative_url }}"
role="menuitem"
aria-haspopup="true"
aria-expanded="false">
{{ page.menu_title }}&nbsp;&#9662;
</a>
<ul class="dropdown-menu absolute bg-white list pa0 mt1-nl mb1-nl dn flex-column z-1 ml4-ns"
role="menu"
aria-label="Work submenu">
<li role="none" class="dn-l">
<a class="pa3 pl0 db no-underline underline-hover hover-accent mid-gray"
href="{{ page.url | relative_url }}"
role="menuitem">
View all work
</a>
</li>
{%- for page in pages -%}
{% if page.work_menu_title %}
<li role="none">
<a class="ml4-nl pa2 pa3-l f4 f3-l lb db no-underline underline-hover hover-accent mid-gray {% if current_page contains page.url %}accent underline{% endif %}"
href="{{ page.url | relative_url }}"
role="menuitem">
{{ page.title }}
</a>
</li>
{% endif %}
{%- endfor -%}
</ul>
</li>
{% else %}
<li role="none">
<a class="pa3 pv0-l db no-underline underline-hover hover-accent mid-gray {% if page.url contains current_page_slug[1] or page.url == current_page %}accent underline{% endif %}"
href="{{ page.url | relative_url }}"
role="menuitem"
{% if page.url == current_page %}aria-current="page"{% endif %}>
{{ page.menu_title }}
</a>
</li>
{% endif %}
<li role="none">
<a class="pa3 pv0-l db no-underline underline-hover hover-accent mid-gray {% if page.url contains current_page_slug[1] or page.url == current_page %}accent underline{% endif %}"
href="{{ page.url | relative_url }}"
role="menuitem"
{% if page.url == current_page %}aria-current="page"{% endif %}>
{{ page.menu_title }}
</a>
</li>
{% endif %}
{%- endfor -%}
{% if site.openings != empty %}
Expand All @@ -58,71 +24,4 @@ <h2 id="menu-heading" class="clip">Main navigation menu</h2>
</li>
{% endif %}
</ul>
<p class="gray b sans-serif db dn-l"><span class="dib mr2">Email</span><a class="accent no-underline underline-hover dib sans dn-l normal" href="mailto:{{ site.email-hidden }}">{{ site.email }}</a></p>

<!-- CSS for dropdown functionality -->
<style>
/* Desktop dropdown behavior */
@media screen and (min-width: 75em) {
.dropdown-container {
position: relative;
}

.dropdown-container:hover .dropdown-menu {
display: flex;
}

.dropdown-menu {
top: 100%;
left: 0;
margin-top: 0;
line-height: 0.5;
}
.dropdown-menu a {
width: max-content;
}
}

/* Mobile dropdown behavior */
@media screen and (max-width: 75em) {
.dropdown-container {
display: flex;
flex-direction: column;
align-items: end;
}

.dropdown-container.active .dropdown-menu {
display: flex;
}

.dropdown-menu {
position: static;
box-shadow: none;
margin-left: 1rem;
border-radius: 0;
}

.dropdown-menu .lb {
border-left: 2px solid #ccc;
}
}
</style>

<!-- JavaScript for mobile dropdown toggle -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const dropdownToggle = document.querySelector('.dropdown-container > a');

if (dropdownToggle) {
dropdownToggle.addEventListener('click', function(e) {
// Only prevent default on mobile
if (window.innerWidth < 1200) {
e.preventDefault();
const isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
this.parentElement.classList.toggle('active');
}
});
}
});
</script>
<p class="gray b sans-serif db dn-l"><span class="dib mr2">Email</span><a class="accent no-underline underline-hover dib sans dn-l normal" href="mailto:{{ site.email-hidden }}">{{ site.email }}</a></p>
41 changes: 3 additions & 38 deletions work.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,44 +27,9 @@ <h3 class="f2 f1-m f-subheadline-l accent normal sans-serif mb4 lh-solid">
</div>
</header>
<div class="flex flex-wrap justify-left mb4 pv4">
{% assign index_page = site.pages | where: "title", "Home" | first %}
{% assign what_we_do = index_page.what_we_do | sort: 'order' %}
{% assign works_by_practice_area = site.work | group_by: 'practice_area' %}
{% for practice in what_we_do %}
{% assign practice_area = practice.title %}
{% assign matching_practice_area = works_by_practice_area | where: 'name', practice_area %}
{% if matching_practice_area.size > 0 %}
<div class="flex flex-column mb3">
{% if practice.slug %}
<a href="/{{ practice.slug }}/" class="">
{% endif %}
<h2 class="f2 sans-serif accent mb3 mt4">
{{ practice.title }}
</h2>
{% if practice.slug %}
</a>
{% endif %}

{% if practice.slug %}
{% capture practice_page_path %}{{ practice.slug }}.html{% endcapture %}
{% assign practice_page = site.pages | where: "path", practice_page_path | first %}
{% if practice_page %}
<p class="measure-wide mt2 mb2 f3">
{{ practice_page.excerpt }}
</p>
{% endif %}
<p class="measure-wide mt2 mb2 f3">
<a href="/{{ practice.slug }}/" class="accent link">Read more</a>
</p>
{% endif %}
</div>
<div class="flex flex-wrap">
{% assign works = matching_practice_area.first.items %}
{% for project in works %}
{%- include sections/project.html project=project -%}
{% endfor %}
</div>
{% endif %}
{% assign sorted_projects = site.work | sort: 'title' %}
{% for project in sorted_projects %}
{%- include sections/project.html project=project -%}
{% endfor %}
</div>
</section>
Expand Down