mirror of
https://git.coop/cotech/website.git
synced 2025-08-10 15:36:48 +00:00
7253e408cb
Creative Co-op have recently prepared some brand guidelines for CoTech, including a new logo, typography suggestions and background images. This commit restyles the site to apply, as best we can, these guidelines. It's hard to split this into smaller commits because the decision to use a black background colour means many things have to change. Notably we've removed the "about/join" footer, as it was hard to choose a bg colour and without one it became more apparent that this footer was more in the way than useful. Co-authored-by: Natasha Natarajan <natasha@outlandish.com>
43 lines
1.5 KiB
HTML
43 lines
1.5 KiB
HTML
<header class="header">
|
|
<div>
|
|
<a class="header_logo-link" href="/">
|
|
<img width="100" src="/assets/img/Logo-CoTech-Secondary-White.svg">
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<button class="header_burger-btn" aria-label="Toggle menu">
|
|
<svg class="header_burger-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<svg class="header_close-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
<ul class="header_menu-list">
|
|
<li><a href="/#members">Members</a></li>
|
|
<li><a href="/about">About</a></li>
|
|
<li><a href="/join">Join</a></li>
|
|
<li><a href="/#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const burgerBtn = document.querySelector('.header_burger-btn');
|
|
const menuList = document.querySelector('.header_menu-list');
|
|
|
|
burgerBtn.addEventListener('click', function() {
|
|
menuList.classList.toggle('active');
|
|
burgerBtn.classList.toggle('active');
|
|
});
|
|
|
|
const menuLinks = document.querySelectorAll('.header_menu-list a');
|
|
menuLinks.forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
menuList.classList.remove('active');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</header>
|