From 1bd3b794c0c417078fc77662763b60ea52cea9eb Mon Sep 17 00:00:00 2001
From: robee <robin.code22@gmail.com>
Date: Fri, 31 Mar 2023 15:56:58 +0100
Subject: [PATCH] fix(*.html-&&-styles.css): clean up code with W3C validator
---
about.html | 13 ++++++-------
index.html | 15 +++++++--------
location.html | 13 ++++++-------
rules.html | 13 ++++++-------
styles.css | 41 +++++++++++++++++++++++------------------
5 files changed, 48 insertions(+), 47 deletions(-)
diff --git a/about.html b/about.html
index 93e6899..c5fdd77 100644
--- a/about.html
+++ b/about.html
@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" async></script>
@@ -12,7 +11,7 @@
<body id="about">
<header id="main-navigation">
- <img src="assets\main-logo\logo-long.min.svg" alt="Create Against Hate Logo">
+ <img src="assets/main-logo/logo-long.min.svg" alt="Create Against Hate Logo">
<!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
<nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar">
@@ -42,9 +41,9 @@
</nav>
<!-- Burger Menu -->
<button type="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>
+ <span class="hamburger--top"></span>
+ <span class="hamburger--middle"></span>
+ <span class="hamburger--bottom"></span>
</button>
</header>
<main>
@@ -92,13 +91,13 @@
<nav id="sitemap" class="navbar" aria-label="Create Against Hate Sitemap">
<ul role="menubar">
<li role="none">
- <a href="index.html" role="menuitem">Home</span></a>
+ <a href="index.html" role="menuitem">Home</a>
</li>
<li role="none">
<a href="#" role="menuitem" aria-current="page">About <i>Stop Hate UK</i></a>
</li>
<li role="none">
- <a href="rules.html" role="menuitem">Jam Rules</span></a>
+ <a href="rules.html" role="menuitem">Jam Rules</a>
</li>
<li role="none">
<a href="location.html" role="menuitem">How to find us</a>
diff --git a/index.html b/index.html
index 34ffdb9..c732a72 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" async></script>
@@ -41,9 +40,9 @@
</nav>
<!-- Burger Menu -->
<button type="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>
+ <span class="hamburger--top"></span>
+ <span class="hamburger--middle"></span>
+ <span class="hamburger--bottom"></span>
</button>
</header>
<main>
@@ -69,7 +68,7 @@
<section id="home__about">
<h2>About the Jam</h2>
<article class="grid-2x2">
- <img src="assets\img\placeholder-sketches\gaming.jpg"
+ <img src="assets/img/placeholder-sketches/gaming.jpg"
alt="Drawing of two characters playing a video game and having a good time">
<div>
<p>
@@ -97,7 +96,7 @@
Hate UK</i> at checkout.
</p>
</div>
- <img src="assets\img\placeholder-sketches\donations.jpg"
+ <img src="assets/img/placeholder-sketches/donations.jpg"
alt="Drawing of a group of characters gathering donations for 'Stop Hate UK'">
</article>
</section>
@@ -154,13 +153,13 @@
<nav id="sitemap" class="navbar" aria-label="Create Against Hate Sitemap">
<ul role="menubar">
<li role="none">
- <a href="#" role="menuitem" aria-current="page">Home</span></a>
+ <a href="#" role="menuitem" aria-current="page">Home</a>
</li>
<li role="none">
<a href="about.html" role="menuitem">About <i>Stop Hate UK</i></a>
</li>
<li role="none">
- <a href="rules.html" role="menuitem">Jam Rules</span></a>
+ <a href="rules.html" role="menuitem">Jam Rules</a>
</li>
<li role="none">
<a href="location.html" role="menuitem">How to find us</a>
diff --git a/location.html b/location.html
index e740f2b..22b1aaf 100644
--- a/location.html
+++ b/location.html
@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" async></script>
@@ -12,7 +11,7 @@
<body id="location">
<header id="main-navigation">
- <img src="assets\main-logo\logo-long-dark.min.svg" alt="Create Against Hate Logo">
+ <img src="assets/main-logo/logo-long-dark.min.svg" alt="Create Against Hate Logo">
<!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
<nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar">
@@ -42,9 +41,9 @@
</nav>
<!-- Burger Menu -->
<button type="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>
+ <span class="hamburger--top"></span>
+ <span class="hamburger--middle"></span>
+ <span class="hamburger--bottom"></span>
</button>
</header>
<main>
@@ -60,13 +59,13 @@
<nav id="sitemap" class="navbar" aria-label="Create Against Hate Sitemap">
<ul role="menubar">
<li role="none">
- <a href="index.html" role="menuitem">Home</span></a>
+ <a href="index.html" role="menuitem">Home</a>
</li>
<li role="none">
<a href="about.html" role="menuitem">About <i>Stop Hate UK</i></a>
</li>
<li role="none">
- <a href="rules.html" role="menuitem">Jam Rules</span></a>
+ <a href="rules.html" role="menuitem">Jam Rules</a>
</li>
<li role="none">
<a href="#" role="menuitem" aria-current="page">How to find us</a>
diff --git a/rules.html b/rules.html
index b83f6b9..ebdb844 100644
--- a/rules.html
+++ b/rules.html
@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" async></script>
@@ -12,7 +11,7 @@
<body id="rules">
<header id="main-navigation">
- <img src="assets\main-logo\logo-long-dark.min.svg" alt="Create Against Hate Logo">
+ <img src="assets/main-logo/logo-long-dark.min.svg" alt="Create Against Hate Logo">
<!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
<nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar">
@@ -42,9 +41,9 @@
</nav>
<!-- Burger Menu -->
<button type="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>
+ <span class="hamburger--top"></span>
+ <span class="hamburger--middle"></span>
+ <span class="hamburger--bottom"></span>
</button>
</header>
<main>
@@ -91,13 +90,13 @@
<nav id="sitemap" class="navbar" aria-label="Create Against Hate Sitemap">
<ul role="menubar">
<li role="none">
- <a href="index.html" role="menuitem">Home</span></a>
+ <a href="index.html" role="menuitem">Home</a>
</li>
<li role="none">
<a href="about.html" role="menuitem">About <i>Stop Hate UK</i></a>
</li>
<li role="none">
- <a href="#" role="menuitem" aria-current="page">Jam Rules</span></a>
+ <a href="#" role="menuitem" aria-current="page">Jam Rules</a>
</li>
<li role="none">
<a href="location.html" role="menuitem">How to find us</a>
diff --git a/styles.css b/styles.css
index 6d956f5..794343d 100644
--- a/styles.css
+++ b/styles.css
@@ -186,44 +186,47 @@
-webkit-mask-size: contain;
mask-size: contain;
+
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
}
/** Navigation **/
.icon--home {
- -webkit-mask: url("assets/icons/house-solid.svg") no-repeat;
- mask: url("assets/icons/house-solid.svg") no-repeat;
+ -webkit-mask: url("assets/icons/house-solid.svg");
+ mask: url("assets/icons/house-solid.svg");
}
.icon--about {
- -webkit-mask: url("assets/icons/circle-info-solid.svg") no-repeat;
- mask: url("assets/icons/circle-info-solid.svg") no-repeat;
+ -webkit-mask: url("assets/icons/circle-info-solid.svg");
+ mask: url("assets/icons/circle-info-solid.svg");
}
.icon--rules {
- -webkit-mask: url("assets/icons/clipboard-list-solid.svg") no-repeat;
- mask: url("assets/icons/clipboard-list-solid.svg") no-repeat;
+ -webkit-mask: url("assets/icons/clipboard-list-solid.svg");
+ mask: url("assets/icons/clipboard-list-solid.svg");
}
.icon--location {
- -webkit-mask: url("assets/icons/location-dot-solid.svg") no-repeat;
- mask: url("assets/icons/location-dot-solid.svg") no-repeat;
+ -webkit-mask: url("assets/icons/location-dot-solid.svg");
+ mask: url("assets/icons/location-dot-solid.svg");
}
/** Social **/
.icon--twitter {
- -webkit-mask: url("assets/icons/twitter-logo-white.svg") no-repeat;
- mask: url("assets/icons/twitter-logo-white.svg") no-repeat;
+ -webkit-mask: url("assets/icons/twitter-logo-white.svg");
+ mask: url("assets/icons/twitter-logo-white.svg");
}
.icon--insta {
- -webkit-mask: url("assets/icons/insta-logo-white.svg") no-repeat;
- mask: url("assets/icons/insta-logo-white.svg") no-repeat;
+ -webkit-mask: url("assets/icons/insta-logo-white.svg");
+ mask: url("assets/icons/insta-logo-white.svg");
}
.icon--fb {
- -webkit-mask: url("assets/icons/fbook-logo.svg") no-repeat;
- mask: url("assets/icons/fbook-logo.svg") no-repeat;
+ -webkit-mask: url("assets/icons/fbook-logo.svg");
+ mask: url("assets/icons/fbook-logo.svg");
}
/** Links **/
@@ -482,7 +485,9 @@
}
/** Create the bars of the hamburger button **/
- div[class|="hamburger"] {
+ span[class|="hamburger"] {
+ display: block;
+
width: 100%;
height: .3rem;
@@ -499,16 +504,16 @@
/** Animate hamburger **/
- .hamburger.open div[class|="hamburger"]:nth-of-type(1) {
+ .hamburger.open span[class|="hamburger"]:nth-of-type(1) {
transform: rotate(-35deg) scaleX(.5) translate(-55%, 0);
}
- .hamburger.open div[class|="hamburger"]:nth-of-type(2) {
+ .hamburger.open span[class|="hamburger"]:nth-of-type(2) {
transform-origin: left;
transform: scaleX(.85);
}
- .hamburger.open div[class|="hamburger"]:nth-of-type(3) {
+ .hamburger.open span[class|="hamburger"]:nth-of-type(3) {
transform: rotate(35deg) scaleX(.5) translate(-55%, 0);
}
--
GitLab