diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..6c7c4d158c342ad7b495ce505dafbd581c0d3066
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.hintrc
+hint-report
\ No newline at end of file
diff --git a/scripts.js b/scripts.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..facc21d577ce85ea3aab3365eebcfa14a6792636 100644
--- a/scripts.js
+++ b/scripts.js
@@ -0,0 +1,71 @@
+/*********************************************
+ * [Code to manipulate navigation show/hide.] *
+**********************************************/
+
+// Navigation Bar
+const navigation = document.getElementById('main-navigation');
+
+// Burger button
+const burger = document.querySelector('button.hamburger');
+
+// Scroll position for show/hide desktop nav
+let scrollStatus = window.scrollY;
+
+/**
+ * [Reset navbar if window resized.]
+**/
+
+window.addEventListener('resize', () => {
+ navigation.removeAttribute('style');
+ navigation.classList.remove('show');
+ burger.setAttribute('aria-expanded', 'false');
+ document.body.removeAttribute('style');
+});
+
+
+/**
+ * [Makes navbar hidden when you scroll down and visible when you scroll up on desktop.]
+**/
+function desktopNavControls() {
+ let scrollAmount = window.scrollY;
+ if (scrollAmount < scrollStatus) {
+ // Scrolled up
+ // Visibility must be toggled so screenreaders don't read the hidden menu
+ navigation.style.visibility = 'visible';
+ navigation.classList.add('show');
+ } else if (scrollAmount > navigation.offsetHeight) {
+ // Scrolled down and past original bottom of navbar
+ navigation.classList.remove('show');
+ // Prevent stutter by applying sticky after transition
+ setTimeout(() => {
+ navigation.style.position = 'sticky';
+ navigation.style.visibility = 'hidden';
+ }, 300);
+ } else {
+ // Reset position to static when user is at top of page
+ navigation.style.visibility = 'visible';
+ navigation.style.position = 'static';
+ }
+ scrollStatus = scrollAmount;
+}
+
+/**
+ * [Show navbar using burger button on tablet.]
+**/
+burger.addEventListener('click', () => {
+ navigation.classList.toggle('show');
+ if (navigation.classList.contains('show')) {
+ // Stops user from scrolling while nav is open
+ document.body.style.overflow = 'hidden';
+ burger.setAttribute('aria-expanded', 'true');
+ } else {
+ burger.setAttribute('aria-expanded', 'false');
+ document.body.style.overflow = 'initial';
+ }
+});
+
+document.addEventListener('scroll', () => {
+ if (window.innerWidth > 601) {
+ desktopNavControls();
+ }
+})
\ No newline at end of file
diff --git a/styles.css b/styles.css
index f456a5cec035545928f01a992e409ebbda40106e..56b245e10a6f5971643edabfe6ce37bee1f8d230 100644
--- a/styles.css
+++ b/styles.css
@@ -102,12 +102,37 @@
background-color: var(--footer-purple);
}
+ section, header, footer {
+ padding: 2rem;
+ }
+
+ header {
+ padding-block: 1rem;
+ }
+
h1, h2, h3, h4, h5, h6 {
font-family: "Poppins", sans-serif;
}
h2 {
- font-size: clamp(3rem, 2.4578rem + 2.4096vw, 4rem);
+ font-size: clamp(3rem, 2.8194rem + 0.8027vw, 3.3331rem);
+ }
+
+ p {
+ margin-bottom: 1em;
+ }
+
+ a {
+ color: var(--accent-blue);
+ text-decoration: none;
+ }
+
+ a:visited {
+ color: var(--accent-baby-blue);
+ }
+
+ ul {
+ list-style-type: none;
}
img {
@@ -116,29 +141,278 @@
border-width: 0.3rem 0.45rem 0.45rem 0.3rem;
}
+ button {
+ cursor: pointer;
+ }
+
+/*** Icons ***/
+
+ /** Defined extendable icon class **/
+ /** Icons created using mask can easily have their colour and size manipulated relative to their label **/
+ span[class|="icon"] {
+ display: inline-block;
+
+ height: 1em;
+ width: 1em;
+
+ margin-right: 0.5em;
+
+ background-color: #fff;
+
+ transform: translateY(15%);
+
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ }
+
+ /** Navigation **/
+ .icon--home {
+ -webkit-mask: url("assets/icons/house-solid.svg") no-repeat;
+ mask: url("assets/icons/house-solid.svg") no-repeat;
+ }
+
+ .icon--about {
+ -webkit-mask: url("assets/icons/circle-info-solid.svg") no-repeat;
+ mask: url("assets/icons/circle-info-solid.svg") no-repeat;
+ }
+
+ .icon--rules {
+ -webkit-mask: url("assets/icons/clipboard-list-solid.svg") no-repeat;
+ mask: url("assets/icons/clipboard-list-solid.svg") no-repeat;
+ }
+
+ .icon--location {
+ -webkit-mask: url("assets/icons/location-dot-solid.svg") no-repeat;
+ mask: url("assets/icons/location-dot-solid.svg") no-repeat;
+ }
+
+ /** Social **/
+
+ .icon--twitter {
+ -webkit-mask: url("assets/icons/twitter-logo-white.svg") no-repeat;
+ mask: url("assets/icons/twitter-logo-white.svg") no-repeat;
+ }
+
+ .icon--insta {
+ -webkit-mask: url("assets/icons/insta-logo-white.svg") no-repeat;
+ mask: url("assets/icons/insta-logo-white.svg") no-repeat;
+ }
+
+ .icon--fb {
+ -webkit-mask: url("assets/icons/fbook-logo.svg") no-repeat;
+ mask: url("assets/icons/fbook-logo.svg") no-repeat;
+ }
+
+/*** Main Navigation Styles ***/
+
+ #main-navigation {
+ top: -100%;
+
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+ transition: all .3s;
+ }
+
+ #main-navigation img {
+ width: calc(100%/3);
+ min-width: calc(64em/6);
-/*** Navigation Styles ***/
+ margin-right: auto;
+ }
-
+ #main-navigation .navbar {
+ display: flex;
+ }
+ #main-navigation .navbar li {
+ padding: 1em .5em;
+ }
+
+ #main-navigation .navbar a {
+ color: white;
+ }
+
+ #main-navigation .navbar a:hover,
+ #main-navigation .navbar a[aria-current="page"] {
+ color: var(--accent-pink);
+ }
+
+ #main-navigation .navbar a:hover span[class|="icon"],
+ #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
+ background-color: var(--accent-pink);
+ }
+
+ /** Toggleable class used to show and hide navbar **/
+ #main-navigation.show {
+ top: 0;
+ }
+
+ /** Hamburger button for tablet **/
+ .hamburger {
+ position: fixed;
+ top: 1.5rem;
+ right: 1.5rem;
+
+ display: none;
+
+ width: 2.5rem;
+
+ border: none;
+
+ background-color: transparent;
+ }
+
+ /** Create the bars of the hamburger button **/
+ div[class|="hamburger"] {
+ width: 100%;
+ height: .3rem;
+
+ margin-bottom: .5rem;
+
+ border-radius: .15rem;
+
+ background-color: white;
+
+ box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, 0.41);
+ }
+
+ /** Colours for each page **/
+ #home #main-navigation,
+ #rules #main-navigation {
+ background-color: var(--main-dark);
+ }
+
+ #about #main-navigation {
+ background-color: var(--section-purple);
+ }
+
+ #location #main-navigation {
+ background-color: var(--section-pink);
+ }
/* 64em == 1024px */
@media only screen and (min-width: 64em) {
/*** Global Styles ***/
section, header, footer {
/* Restrict content of website to max 64em */
- padding-block: calc((100vw - 64em) / 2);
+ padding-inline: calc((100vw - 64rem + 2rem) / 2);
}
}
/* 37.5625em == 601px */
-@media only screen and (max-width: 37.5625em) {
- /*** Global Styles -- Tablet ***/
+/* 22.5625 == 361px */
+/* Media query just for tablet navigation to minimise edits needed for mobile navigation */
+@media only screen and (max-width: 37.5625em) and (min-width: 22.5625em) {
+ #main-navigation nav {
+ position: fixed;
+ top: 0;
+ left: -100vw;
+ z-index: 2;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+
+ visibility: hidden;
+
+ width: 100vw;
+ height: 100vh;
+
+ background-color: inherit;
+
+ transition: all .3s;
+ }
+
+ #main-navigation.show nav {
+ left: 0;
+
+ visibility: initial;
+ }
+
+ #main-navigation .navbar {
+ flex-direction: column;
+
+ font-size: 1.75rem;
+ }
+
+ .hamburger {
+ z-index: 3;
+ display: initial;
+ }
}
/* 22.5em == 360px */
@media only screen and (max-width: 22.5em) {
/*** Global Styles -- Mobile ***/
+ /*** Main Navigation Styles ***/
+ #main-navigation nav {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ }
+ #main-navigation .navbar {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+
+ width: 100vw;
+ height: calc(100vh/12);
+
+ background-color: var(--footer-purple);
+ }
+
+ #main-navigation .navbar li {
+ padding: 0;
+
+ border-right: var(--main-dark) .1rem solid;
+ }
+
+ #main-navigation .navbar a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+ height: 100%;
+
+ }
+
+ #main-navigation .navbar span[class|="icon"] {
+ /* Remove margin so icons are centred properly */
+ margin: 0;
+
+ font-size: 1.5rem;
+
+ /* Remove transform so icons are centred properly */
+ transform: translateY(0);
+ }
+
+ #main-navigation .navbar li:last-of-type {
+ border-right: none;
+ }
+
+ /** Reset anchor tag styles in nav because the list background should be coloured instead **/
+ #main-navigation .navbar a:hover,
+ #main-navigation .navbar a[aria-current="page"] {
+ color: white;
+ }
+
+ #main-navigation .navbar a:hover span[class|="icon"],
+ #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
+ background-color: white;
+ }
+
+ /** Hover and current page states **/
+ #main-navigation .navbar a:hover,
+ #main-navigation .navbar a[aria-current="page"] {
+ background-color: var(--accent-pink);
+ }
+
+ .hideable-text {
+ display: none;
+ }
}
\ No newline at end of file