From ee545f620c77c51958aebe6556a2bb3592b32b49 Mon Sep 17 00:00:00 2001
From: Robin King <robin2.king@live.uwe.ac.uk>
Date: Sun, 19 Mar 2023 22:53:04 +0000
Subject: [PATCH] feat(*.html): add markup for navbar
---
about.html | 32 +++++++++++++++++++++++++++++++-
index.html | 38 ++++++++++++++++++++++++++++++++++----
location.html | 32 +++++++++++++++++++++++++++++++-
rules.html | 32 +++++++++++++++++++++++++++++++-
4 files changed, 127 insertions(+), 7 deletions(-)
diff --git a/about.html b/about.html
index 2ba9ac0..5bf3da0 100644
--- a/about.html
+++ b/about.html
@@ -13,8 +13,38 @@
<body>
<header>
- <!-- Navigation Bar -- uses id="main-navigation" class="navbar" -- index.html && about.html && rules.html && location.html -->
+ <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
+ <nav id="main-navigation" class="navbar" aria-label="Create Against Hate Main Navigation">
+ <ul role="menubar">
+ <li role="none">
+ <a href="#" role="menuitem">
+ <!-- .hideable-text exists for the mobile navigation which contains no text -->
+ <span class="icon--home"></span><span class="hideable-text"> Home</span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="about.html" role="menuitem">
+ <span></span><span class="hideable-text"> About <i>Stop Hate UK</i></span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="rules.html" role="menuitem">
+ <span></span><span class="hideable-text"> Jam Rules</span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="location.html" role="menuitem">
+ <span></span><span class="hideable-text"> How to find us</span>
+ </a>
+ </li>
+ </ul>
<!-- Burger Menu -->
+ <button class="hamburger" aria-label="Open Main Navigation" aria-expanded="false">
+ <div class="hamburger--top"></div>
+ <div class="hamburger--middle"></div>
+ <div class="hamburger--bottom"></div>
+ </button>
+ </nav>
</header>
<main>
<!-- Hero -- uses class="hero" -- index.html && about.html -->
diff --git a/index.html b/index.html
index e427c3f..e6a4e69 100644
--- a/index.html
+++ b/index.html
@@ -13,8 +13,38 @@
<body>
<header>
- <!-- Navigation Bar -- uses id="main-navigation" class="navbar" -- index.html && about.html && rules.html && location.html -->
+ <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
+ <nav id="main-navigation" class="navbar" aria-label="Create Against Hate Main Navigation">
+ <ul role="menubar">
+ <li role="none">
+ <a href="#" role="menuitem">
+ <!-- .hideable-text exists for the mobile navigation which contains no text -->
+ <span class="icon--home"></span><span class="hideable-text"> Home</span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="about.html" role="menuitem">
+ <span></span><span class="hideable-text"> About <i>Stop Hate UK</i></span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="rules.html" role="menuitem">
+ <span></span><span class="hideable-text"> Jam Rules</span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="location.html" role="menuitem">
+ <span></span><span class="hideable-text"> How to find us</span>
+ </a>
+ </li>
+ </ul>
<!-- Burger Menu -->
+ <button class="hamburger" aria-label="Open Main Navigation" aria-expanded="false">
+ <div class="hamburger--top"></div>
+ <div class="hamburger--middle"></div>
+ <div class="hamburger--bottom"></div>
+ </button>
+ </nav>
</header>
<main>
<!-- Hero -- uses class="hero" -- index.html && about.html -->
@@ -23,9 +53,9 @@
</main>
<footer>
<!-- Footer -- index.html && about.html && rules.html && location.html -->
- <!-- Copyright -->
- <!-- Sitemap -->
- <!-- Socials -->
+ <!-- Copyright -->
+ <!-- Sitemap -->
+ <!-- Socials -->
</footer>
</body>
diff --git a/location.html b/location.html
index f309c66..9caeb72 100644
--- a/location.html
+++ b/location.html
@@ -13,8 +13,38 @@
<body>
<header>
- <!-- Navigation Bar -- uses id="main-navigation" class="navbar" -- index.html && about.html && rules.html && location.html -->
+ <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
+ <nav id="main-navigation" class="navbar" aria-label="Create Against Hate Main Navigation">
+ <ul role="menubar">
+ <li role="none">
+ <a href="#" role="menuitem">
+ <!-- .hideable-text exists for the mobile navigation which contains no text -->
+ <span class="icon--home"></span><span class="hideable-text"> Home</span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="about.html" role="menuitem">
+ <span></span><span class="hideable-text"> About <i>Stop Hate UK</i></span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="rules.html" role="menuitem">
+ <span></span><span class="hideable-text"> Jam Rules</span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="location.html" role="menuitem">
+ <span></span><span class="hideable-text"> How to find us</span>
+ </a>
+ </li>
+ </ul>
<!-- Burger Menu -->
+ <button class="hamburger" aria-label="Open Main Navigation" aria-expanded="false">
+ <div class="hamburger--top"></div>
+ <div class="hamburger--middle"></div>
+ <div class="hamburger--bottom"></div>
+ </button>
+ </nav>
</header>
<main>
<!-- Map -->
diff --git a/rules.html b/rules.html
index a19f869..401ffcb 100644
--- a/rules.html
+++ b/rules.html
@@ -13,8 +13,38 @@
<body>
<header>
- <!-- Navigation Bar -- uses id="main-navigation" class="navbar" -- index.html && about.html && rules.html && location.html -->
+ <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
+ <nav id="main-navigation" class="navbar" aria-label="Create Against Hate Main Navigation">
+ <ul role="menubar">
+ <li role="none">
+ <a href="#" role="menuitem">
+ <!-- .hideable-text exists for the mobile navigation which contains no text -->
+ <span class="icon--home"></span><span class="hideable-text"> Home</span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="about.html" role="menuitem">
+ <span></span><span class="hideable-text"> About <i>Stop Hate UK</i></span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="rules.html" role="menuitem">
+ <span></span><span class="hideable-text"> Jam Rules</span>
+ </a>
+ </li>
+ <li role="none">
+ <a href="location.html" role="menuitem">
+ <span></span><span class="hideable-text"> How to find us</span>
+ </a>
+ </li>
+ </ul>
<!-- Burger Menu -->
+ <button class="hamburger" aria-label="Open Main Navigation" aria-expanded="false">
+ <div class="hamburger--top"></div>
+ <div class="hamburger--middle"></div>
+ <div class="hamburger--bottom"></div>
+ </button>
+ </nav>
</header>
<main>
<!-- Rules -- uses class="text-section" -- about.html && rules.html && location.html -->
--
GitLab