-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/ref/button/script.js b/ref/button/script.js
deleted file mode 100644
index f878536..0000000
--- a/ref/button/script.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const button = document.querySelector("button")
-
-button.addEventListener("click", () => {
- const isExpanded = button.getAttribute("aria-expanded")
- if (isExpanded === "false") {
- button.setAttribute("aria-expanded", "true")
- } else {
- button.setAttribute("aria-expanded", "false")
- }
-})
diff --git a/ref/button/style-5.css b/ref/button/style-5.css
deleted file mode 100644
index b590c89..0000000
--- a/ref/button/style-5.css
+++ /dev/null
@@ -1,104 +0,0 @@
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-:root {
- --clr-dark: rgb(30, 39, 39);
- --clr-light-green: rgb(239, 250, 250);
- --clr-green: rgb(4, 167, 167);
- --button-colour: var(--clr-dark);
- --button-border: var(--clr-green);
- --line-colour: var(--clr-light-green);
-}
-
-body {
- min-height: 100vh;
- display: grid;
- place-content: center;
- background: black;
-}
-
-.examples {
- padding: 3rem;
- max-width: 1200px;
- display: flex;
- gap: clamp(2rem, 8vw, 4rem);
-}
-
-button {
- background-color: var(--button-colour);
- appearance: none;
- border: 5px solid var(--button-border);
- border-radius: 10px;
- cursor: pointer;
-}
-
-button:focus-visible {
- outline: 2px solid var(--line-colour);
-}
-
-.hamburger {
- width: 50px;
- fill: var(--line-colour);
-}
-
-.line {
- width: 80px;
-
- height: 10px;
-
- x: 10px;
-
- rx: 5px;
-}
-
-.top {
- y: 28px;
-}
-
-.middle {
- y: 47px;
-}
-
-.bottom {
- y: 68px;
-}
-
-/* button one */
-
-/* .button-one {
- --button-color: #333;
-} */
-
-.button-one .line {
- transition:
- y 300ms ease-in 300ms,
- rotate 300ms ease-in,
- opacity 0ms 300ms;
- transform-origin: center;
-}
-
-.button-one[aria-expanded="true"] .line {
- transition:
- y 300ms ease-in,
- rotate 300ms ease-in 300ms,
- opacity 0ms 300ms;
-}
-
-.button-one[aria-expanded="true"] :is(.top, .bottom) {
- y: 47;
-}
-
-.button-one[aria-expanded="true"] .top {
- rotate: 45deg;
-}
-
-.button-one[aria-expanded="true"] .middle {
- opacity: 0;
-}
-
-.button-one[aria-expanded="true"] .bottom {
- rotate: -45deg;
-}
diff --git a/ref/css/hamburger-menu.css b/ref/css/hamburger-menu.css
deleted file mode 100644
index 0ad158a..0000000
--- a/ref/css/hamburger-menu.css
+++ /dev/null
@@ -1,107 +0,0 @@
-*,
-*::after,
-*::before {
- box-sizing: border-box;
-}
-
-body {
- margin: 0;
-}
-
-:root {
- --bar-width: 60px;
- --bar-height: 8px;
- --hamburger-gap: 6px;
- --foreground: #333;
- --background: white;
- --hamburger-margin: 8px;
- --animation-timing: 200ms ease-in-out;
- --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
-}
-
-.hamburger-menu {
- --x-width: calc(var(--hamburger-height) * 1.41421356237);
-
- display: flex;
- flex-direction: column;
- gap: var(--hamburger-gap);
- width: max-content;
- position: absolute;
- top: var(--hamburger-margin);
- left: var(--hamburger-margin);
- z-index: 2;
- cursor: pointer;
-}
-
-.hamburger-menu:has(input:checked) {
- --foreground: white;
- --background: #333;
-}
-
-.hamburger-menu:has(input:focus-visible)::before,
-.hamburger-menu:has(input:focus-visible)::after,
-.hamburger-menu input:focus-visible {
- border: 1px solid var(--background);
- box-shadow: 0 0 0 1px var(--foreground);
-}
-
-.hamburger-menu::before,
-.hamburger-menu::after,
-.hamburger-menu input {
- content: "";
- width: var(--bar-width);
- height: var(--bar-height);
- background-color: var(--foreground);
- border-radius: 9999px;
- transform-origin: left center;
- transition:
- opacity var(--animation-timing),
- width var(--animation-timing),
- rotate var(--animation-timing),
- translate var(--animation-timing),
- background-color var(--animation-timing);
-}
-
-.hamburger-menu input {
- appearance: none;
- padding: 0;
- margin: 0;
- outline: none;
- pointer-events: none;
-}
-
-.hamburger-menu:has(input:checked)::before {
- rotate: 45deg;
- width: var(--x-width);
- translate: 0 calc(var(--bar-height) / -2);
-}
-
-.hamburger-menu:has(input:checked)::after {
- rotate: -45deg;
- width: var(--x-width);
- translate: 0 calc(var(--bar-height) / 2);
-}
-
-.hamburger-menu input:checked {
- opacity: 0;
- width: 0;
-}
-
-.sidebar {
- transition: translate var(--animation-timing);
- translate: -100%;
- padding: 0.5rem 1rem;
- padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
- background-color: var(--foreground);
- color: var(--background);
- max-width: 10rem;
- min-height: 100vh;
-}
-
-/* .hamburger-menu:has(input:checked) + .sidebar {
- translate: 0;
-} */
-
-.translateZero {
- translate: 0;
-}
diff --git a/ref/css/style-5.css b/ref/css/style-5.css
deleted file mode 100644
index b590c89..0000000
--- a/ref/css/style-5.css
+++ /dev/null
@@ -1,104 +0,0 @@
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-:root {
- --clr-dark: rgb(30, 39, 39);
- --clr-light-green: rgb(239, 250, 250);
- --clr-green: rgb(4, 167, 167);
- --button-colour: var(--clr-dark);
- --button-border: var(--clr-green);
- --line-colour: var(--clr-light-green);
-}
-
-body {
- min-height: 100vh;
- display: grid;
- place-content: center;
- background: black;
-}
-
-.examples {
- padding: 3rem;
- max-width: 1200px;
- display: flex;
- gap: clamp(2rem, 8vw, 4rem);
-}
-
-button {
- background-color: var(--button-colour);
- appearance: none;
- border: 5px solid var(--button-border);
- border-radius: 10px;
- cursor: pointer;
-}
-
-button:focus-visible {
- outline: 2px solid var(--line-colour);
-}
-
-.hamburger {
- width: 50px;
- fill: var(--line-colour);
-}
-
-.line {
- width: 80px;
-
- height: 10px;
-
- x: 10px;
-
- rx: 5px;
-}
-
-.top {
- y: 28px;
-}
-
-.middle {
- y: 47px;
-}
-
-.bottom {
- y: 68px;
-}
-
-/* button one */
-
-/* .button-one {
- --button-color: #333;
-} */
-
-.button-one .line {
- transition:
- y 300ms ease-in 300ms,
- rotate 300ms ease-in,
- opacity 0ms 300ms;
- transform-origin: center;
-}
-
-.button-one[aria-expanded="true"] .line {
- transition:
- y 300ms ease-in,
- rotate 300ms ease-in 300ms,
- opacity 0ms 300ms;
-}
-
-.button-one[aria-expanded="true"] :is(.top, .bottom) {
- y: 47;
-}
-
-.button-one[aria-expanded="true"] .top {
- rotate: 45deg;
-}
-
-.button-one[aria-expanded="true"] .middle {
- opacity: 0;
-}
-
-.button-one[aria-expanded="true"] .bottom {
- rotate: -45deg;
-}
diff --git a/ref/question.txt b/ref/question.txt
deleted file mode 100644
index e36d1b8..0000000
--- a/ref/question.txt
+++ /dev/null
@@ -1,228 +0,0 @@
-I have a question about web accessibility for screen reader users.
-
-Given this CSS:
-
-```CSS
-
-.visually-hidden {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: clip;
- clip-path: inset(0);
- border: 0;
-}
-
-```
-
-and this HTML:
-
-```HTML
-
-
-```
-
-Will a screen reader user be able to click on / interact with the links?
-
-
-
-Following on from our previous chat, create a readme file in markdown using the Git Hub markdown format.
-
-Base the readme on the following HTML, CSS and JavaScript:
-
-```HTML
-
-
-
Menu
-
-
-
-
-
-```
-
-```CSS
-:root {
- --animation-timing: 200ms;
-}
-
-.primary-navigation {
- position: relative;
- width: 100%;
-
- &.padding {
- padding-block-end: 1.8rem;
- }
-
- & nav {
- width: fit-content;
- margin: 0 auto;
- @media screen and (width <= 768px) {
- flex-direction: column;
- margin: 0 auto 0 2rem;
- }
- }
-
- & ul {
- list-style: none;
- padding-left: 0;
- display: flex;
- gap: 2rem;
- align-items: baseline;
-
- @media screen and (width <= 768px) {
- flex-direction: column;
- }
- }
- & a {
- text-decoration: none;
- color: var(--clr-lightest);
- border-bottom: 5px solid transparent;
- padding-block-end: 0.5rem;
- margin-bottom: 1rem;
-
- &:hover {
- border-bottom-color: var(--clr-lightest);
- }
-
- &.current-page,
- &.current-page:hover {
- text-decoration: none;
- cursor: default;
- border-bottom-color: var(--clr-lightest);
- font-weight: 600;
- }
- }
-
- @media screen and (width <= 768px) {
- max-width: 100%;
- margin: 0;
- }
-}
-
-.hamburger-button-wrapper {
- display: none;
-}
-
-@media screen and (width <= 768px) {
- .hamburger-button-wrapper {
- width: fit-content;
- display: flex;
- gap: 1rem;
- align-items: center;
- margin: 0 auto;
- position: absolute;
- top: -1.2rem;
- right: 2rem;
-
- & h2 {
- font-size: 1.6rem;
- font-weight: normal;
- margin-bottom: 1rem;
- }
- }
-
- .hamburger-button {
- cursor: pointer;
- width: 5rem;
-
- & .line {
- width: 80%;
- height: 1rem;
- fill: var(--hamburger-line-colour);
- transition:
- y var(--animation-timing) ease-in var(--animation-timing),
- rotate var(--animation-timing) ease-in,
- opacity 0ms var(--animation-timing);
- transform-origin: center;
- }
-
- &[aria-expanded="true"] .line {
- transition:
- y var(--animation-timing) ease-in,
- rotate var(--animation-timing) ease-in var(--animation-timing),
- opacity 0ms var(--animation-timing);
- }
- &[aria-expanded="true"] :is(.top, .bottom) {
- y: 47;
- }
- &[aria-expanded="true"] .top {
- rotate: 45deg;
- }
- &[aria-expanded="true"] .bottom {
- rotate: -45deg;
- }
- &[aria-expanded="true"] .middle {
- opacity: 0;
- }
- }
-
- .menu-hidden {
- position: absolute;
- width: 1px;
- height: 1px;
- margin: -1px;
- overflow: clip;
- clip-path: inset(0);
- border: 0;
- opacity: 0;
- }
- .menu-visible {
- position: static;
- width: auto;
- height: auto;
- margin: inherit;
- overflow: visible;
- clip-path: none;
- transition: opacity var(--animation-timing) var(--animation-timing) ease-in;
- }
-}
-
-```
-
-```JAVASCRIPT
-function btnHamburger() {
- const hamburgerButton = document.getElementById("hamburger-button")
- const primaryNavigation = document.getElementById("primary-navigation")
- const siteNavigation = document.getElementById("site-navigation")
-
- hamburgerButton.addEventListener("click", () => {
- const isExpanded = hamburgerButton.getAttribute("aria-expanded")
- isExpanded === "false"
- ? hamburgerButton.setAttribute("aria-expanded", "true")
- : hamburgerButton.setAttribute("aria-expanded", "false")
- siteNavigation.classList.toggle("menu-hidden")
- siteNavigation.classList.toggle("menu-visible")
- primaryNavigation.classList.toggle("padding")
- })
-}
-btnHamburger()
-```
-The hamburger menu button appears at screens less than 768px wide. At this point the menu itself is hidden and is brought into view by clicking the button.
-Describe how the menu is accessible to screen readers and keyboard users even when it is not visible.
-Also mention the various 'aria-' attributes.
\ No newline at end of file
diff --git a/ref/snippet.html b/ref/snippet.html
deleted file mode 100644
index 5ed14a2..0000000
--- a/ref/snippet.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
-
-
-
-
Document
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file