feat(whatislove-dev): add report issue link to footer wd-435 (#436)

apps/whatislove-dev/src/data/global.js

@@ -3,6 +3,7 @@ let data = {
 	description: `Interface Developer`,
 	domain: `https://whatislove.dev`,
 	email: `[email protected]`,
+	repo: `https://github.com/what1s1ove/whatislove.dev`,
 	socials: [
 		{
 			key: `github`,

apps/whatislove-dev/src/includes/footer.njk

@@ -1,18 +1,23 @@
 <footer class="footer column">
+	<ul class="footer__links-list">
+		<li class="footer__links-item">
+			<a class="footer__link" href="{{ global.repo }}/issues/new" target="_blank">Report Issue</a>
+		</li>
+	</ul>
 	<div class="footer__webring">
 		<a
 			class="footer__webring-link footer__webring-link--previous action"
 			href="https://🕸💍.ws/previous"
 			aria-label="Webring go previous"
 		></a>
-		<a class="footer__webring-main" target="_blank" href="https://🕸💍.ws">🕸️ IndieWeb Webring 💍</a>
+		<a class="footer__webring-main" href="https://🕸💍.ws" target="_blank">🕸️ IndieWeb Webring 💍</a>
 		<a
 			class="footer__webring-link footer__webring-link--next action"
 			href="https://🕸💍.ws/next"
 			aria-label="Webring go next"
 		></a>
 	</div>
-	<p class="footer__copyrigng">&copy; 2018 – {{ global.currentYear }} Vladyslav Zubko. All rights reserved.</p>
+	<p class="footer__copyright">&copy; 2020 – {{ global.currentYear }} Vladyslav Zubko. All rights reserved.</p>
 	<p class="footer__credits">
 		Built using {{ eleventy.generator }} with <span class="footer__credits-icon">❤️</span> / Design by
 		<a class="footer__credits-designer" href="https://t.me/listiqq" target="_blank"> Dima Listiq </a>

apps/whatislove-dev/src/pages/not-found.njk

@@ -12,9 +12,7 @@ permalink: 404.html
 	<h1 class="section-header__title">Not found.</h1>
 	<p class="section-header__desc">
 		Yes, I also don't like broken links. Please,
-		<a href="https://github.com/what1s1ove/whatislove.dev/issues" target="_blank" rel="noreferrer noopener"
-			>create an issue</a
-		>
+		<a href="{{ global.repo }}/issues/new" target="_blank" rel="noreferrer noopener">create an issue</a>
 		if you truly ended up here <i>unexpectedly</i>.
 	</p>
 </main>

apps/whatislove-dev/src/styles/blocks/aside.css

@@ -37,6 +37,10 @@
 		content: "";
 		background-color: var(--color);
 	}
+
+	@media (--width-tablet) {
+		width: 95%;
+	}
 }
 
 .aside__border--top {

apps/whatislove-dev/src/styles/blocks/footer.css

@@ -2,6 +2,7 @@
 	display: grid;
 	gap: 30px;
 	padding-block: 25px;
+	color: hsl(var(--color-gray-100));
 
 	@media (--width-tablet) {
 		grid-template-columns: repeat(2, 1fr);
@@ -14,32 +15,48 @@
 	}
 }
 
-.footer__webring {
-	--color: hsl(var(--color-gray-100));
+.footer__links-list {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 15px 50px;
+	padding: 15px 50px;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
 
+.footer__link {
+	color: inherit;
+	text-underline-offset: 5px;
+}
+
+.footer__webring {
 	display: flex;
 	gap: 10px;
-	place-self: center;
 	align-items: center;
+	margin-block: 0 50px;
 
 	@media (--width-tablet) {
-		grid-column-start: span 2;
+		place-self: start end;
+		margin: 0;
 	}
 }
 
 .footer__webring-main {
-	color: var(--color);
+	color: inherit;
 	text-underline-offset: 5px;
 }
 
 .footer__webring-link {
 	--size-icon: 20px;
 
+	color: inherit;
+
 	&::before {
 		width: var(--size-icon);
 		height: var(--size-icon);
 		content: "";
-		background-color: var(--color);
+		background-color: currentcolor;
 		mask-image: url("/images/icons.svg#arrow");
 		mask-repeat: no-repeat;
 		mask-size: contain;
@@ -54,7 +71,6 @@
 	margin: 0;
 	font-size: var(--font-size-text-small);
 	font-style: italic;
-	color: hsl(var(--color-gray-100));
 	text-underline-offset: 5px;
 
 	@media (--width-tablet) {
@@ -70,11 +86,10 @@
 	color: inherit;
 }
 
-.footer__copyrigng {
+.footer__copyright {
 	order: calc(infinity);
 	margin: 0;
 	font-size: var(--font-size-text-small);
-	color: hsl(var(--color-gray-100));
 
 	@media (--width-tablet) {
 		order: initial;