From 6bca1a818ff76855d4a0aaa48b18103ef477dc85 Mon Sep 17 00:00:00 2001
From: Vladyslav Zubko <42296182+what1s1ove@users.noreply.github.com>
Date: Mon, 10 Jun 2024 12:20:31 +0300
Subject: [PATCH] fix(whatislove-dev): edit fonts according to the design
 wd-582 (#587)

---
 apps/whatislove-dev/src/includes/footer.njk        |  9 +++------
 .../src/includes/pagination-list.njk               |  9 +++------
 .../src/styles/blocks/article-list.css             |  2 +-
 apps/whatislove-dev/src/styles/blocks/button.css   | 14 +++++++++++++-
 apps/whatislove-dev/src/styles/blocks/channel.css  |  2 +-
 apps/whatislove-dev/src/styles/blocks/footer.css   |  6 ++++--
 apps/whatislove-dev/src/styles/blocks/header.css   |  1 +
 .../src/styles/blocks/pagination.css               |  2 ++
 .../src/styles/blocks/social-list.css              |  6 +++++-
 .../src/styles/globals/variables.css               |  9 ++++-----
 10 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/apps/whatislove-dev/src/includes/footer.njk b/apps/whatislove-dev/src/includes/footer.njk
index 69135a70..2975b7a3 100644
--- a/apps/whatislove-dev/src/includes/footer.njk
+++ b/apps/whatislove-dev/src/includes/footer.njk
@@ -19,18 +19,15 @@
 	</ul>
 	<div class="footer__webring">
 		<a
-			class="footer__webring-link footer__webring-link--previous action"
+			class="footer__webring-link action"
 			href="https://🕸💍.ws/previous"
+			rel="prev"
 			aria-label="Webring go previous"
 		></a>
 		<a class="footer__webring-main" href="https://🕸💍.ws" target="_blank" rel="noreferrer noopener">
 			🕸️ IndieWeb Webring 💍
 		</a>
-		<a
-			class="footer__webring-link footer__webring-link--next action"
-			href="https://🕸💍.ws/next"
-			aria-label="Webring go next"
-		></a>
+		<a class="footer__webring-link action" href="https://🕸💍.ws/next" rel="next" aria-label="Webring go next"></a>
 	</div>
 	<p class="footer__copyright">&copy; 2020 – {{ global.currentYear }} {{ global.author }}. All rights reserved.</p>
 	<p class="footer__credits">
diff --git a/apps/whatislove-dev/src/includes/pagination-list.njk b/apps/whatislove-dev/src/includes/pagination-list.njk
index 54541792..6e4c51d6 100644
--- a/apps/whatislove-dev/src/includes/pagination-list.njk
+++ b/apps/whatislove-dev/src/includes/pagination-list.njk
@@ -2,8 +2,9 @@
 	<nav class="{{ className }} pagination" aria-label="{{ name }}">
 		{% if pagination.href.previous %}
 			<a
-				class="pagination__link pagination__link--previous action"
+				class="pagination__link action"
 				href="{{ pagination.href.previous }}"
+				rel="prev"
 				aria-label="Previous page"
 			></a>
 		{% else %}
@@ -27,11 +28,7 @@
 			{% endfor %}
 		</ul>
 		{% if pagination.href.next %}
-			<a
-				class="pagination__link pagination__link--next action"
-				href="{{ pagination.href.next }}"
-				aria-label="Next page"
-			></a>
+			<a class="pagination__link action" href="{{ pagination.href.next }}" rel="next" aria-label="Next page"></a>
 		{% else %}
 			<span class="pagination__link pagination__link--next"></span>
 		{% endif %}
diff --git a/apps/whatislove-dev/src/styles/blocks/article-list.css b/apps/whatislove-dev/src/styles/blocks/article-list.css
index 9aa1ca2c..08e9bb53 100644
--- a/apps/whatislove-dev/src/styles/blocks/article-list.css
+++ b/apps/whatislove-dev/src/styles/blocks/article-list.css
@@ -1,6 +1,6 @@
 .article-list {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
 	gap: 20px;
 	padding: 0;
 	margin: 0;
diff --git a/apps/whatislove-dev/src/styles/blocks/button.css b/apps/whatislove-dev/src/styles/blocks/button.css
index cc7e32cf..120c3a5c 100644
--- a/apps/whatislove-dev/src/styles/blocks/button.css
+++ b/apps/whatislove-dev/src/styles/blocks/button.css
@@ -1,6 +1,8 @@
 .button {
+	--button-background-color-opacity: 6%;
 	--button-color: var(--color-red-100);
-	--button-background-color: var(--color-red-100) / 6%;
+	--button-background-color: var(--color-red-100) /
+		var(--button-background-color-opacity);
 
 	padding: 10px;
 	font-weight: 700;
@@ -8,4 +10,14 @@
 	text-decoration: none;
 	background-color: hsl(var(--button-background-color));
 	border-radius: 5px;
+
+	@media (hover: hover) {
+		&:hover {
+			--button-background-color-opacity: 12%;
+		}
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		transition: background-color 0.2s ease-in;
+	}
 }
diff --git a/apps/whatislove-dev/src/styles/blocks/channel.css b/apps/whatislove-dev/src/styles/blocks/channel.css
index be0c27b5..408778d1 100644
--- a/apps/whatislove-dev/src/styles/blocks/channel.css
+++ b/apps/whatislove-dev/src/styles/blocks/channel.css
@@ -85,7 +85,7 @@
 		min-inline-size: 140px;
 		padding-block: 15px;
 		padding-inline: 25px 40px;
-		font-weight: 500;
+		font-weight: 600;
 		text-align: center;
 		background-image: linear-gradient(
 			to var(--direction-gradient-text),
diff --git a/apps/whatislove-dev/src/styles/blocks/footer.css b/apps/whatislove-dev/src/styles/blocks/footer.css
index b5d316e9..21dca942 100644
--- a/apps/whatislove-dev/src/styles/blocks/footer.css
+++ b/apps/whatislove-dev/src/styles/blocks/footer.css
@@ -20,6 +20,7 @@
 }
 
 .footer__link {
+	font-weight: 600;
 	color: inherit;
 	text-underline-offset: 4px;
 	white-space: nowrap;
@@ -39,6 +40,7 @@
 }
 
 .footer__webring-main {
+	font-weight: 600;
 	color: inherit;
 	text-underline-offset: 5px;
 }
@@ -57,11 +59,11 @@
 		mask-size: contain;
 	}
 
-	&[class*="--previous"]::before {
+	&[rel="prev"]::before {
 		mask-image: url("/images/icons.svg#arrow-left");
 	}
 
-	&[class*="--next"]::before {
+	&[rel="next"]::before {
 		mask-image: url("/images/icons.svg#arrow-right");
 	}
 }
diff --git a/apps/whatislove-dev/src/styles/blocks/header.css b/apps/whatislove-dev/src/styles/blocks/header.css
index 702c5dbb..eb08dc84 100644
--- a/apps/whatislove-dev/src/styles/blocks/header.css
+++ b/apps/whatislove-dev/src/styles/blocks/header.css
@@ -185,6 +185,7 @@
 
 .header__menu-link {
 	font-size: var(--font-size-heading-3);
+	font-weight: 600;
 	color: inherit;
 	text-underline-offset: 5px;
 
diff --git a/apps/whatislove-dev/src/styles/blocks/pagination.css b/apps/whatislove-dev/src/styles/blocks/pagination.css
index 23b46921..547ecb10 100644
--- a/apps/whatislove-dev/src/styles/blocks/pagination.css
+++ b/apps/whatislove-dev/src/styles/blocks/pagination.css
@@ -27,10 +27,12 @@
 		mask-size: 20px;
 	}
 
+	&[rel="prev"]::before,
 	&[class*="--previous"]::before {
 		mask-image: url("/images/icons.svg#arrow-left");
 	}
 
+	&[rel="next"]::before,
 	&[class*="--next"]::before {
 		mask-image: url("/images/icons.svg#arrow-right");
 	}
diff --git a/apps/whatislove-dev/src/styles/blocks/social-list.css b/apps/whatislove-dev/src/styles/blocks/social-list.css
index bad5a0cd..63d3e373 100644
--- a/apps/whatislove-dev/src/styles/blocks/social-list.css
+++ b/apps/whatislove-dev/src/styles/blocks/social-list.css
@@ -6,6 +6,10 @@
 	margin: 0;
 	list-style: none;
 
+	@media (--width-tablet) {
+		gap: 20px 60px;
+	}
+
 	&[class*="--icons"] {
 		gap: 20px;
 	}
@@ -21,7 +25,7 @@
 	display: inline-flex;
 	gap: 12px;
 	align-items: center;
-	font-weight: 600;
+	font-weight: 700;
 	color: inherit;
 	text-decoration: none;
 
diff --git a/apps/whatislove-dev/src/styles/globals/variables.css b/apps/whatislove-dev/src/styles/globals/variables.css
index 5327443a..72c384ef 100644
--- a/apps/whatislove-dev/src/styles/globals/variables.css
+++ b/apps/whatislove-dev/src/styles/globals/variables.css
@@ -6,7 +6,7 @@
 	--size-inline-box-wide: 1120px;
 	--size-inline-box-normal: 960px;
 	--size-inline-box: var(--size-inline-box-normal);
-	--padding-inline-box: 20px;
+	--padding-inline-box: 22px;
 	--padding-block-box: 25px;
 
 	@media (--width-tablet) {
@@ -23,8 +23,7 @@
 	--color-red-100: 0 90.91% 61.18%;
 	--color-red-200: 0 60.32% 51.57%;
 	--color-white-100: 0 0% 100%;
-	--color-white-200: 0 0% 97%;
-	--color-white-300: 30 1% 98%;
+	--color-white-200: 30 1% 98%;
 	--color-blue-100: 199.68 74.7% 50.39%;
 	--color-blue-200: 211.41 60.32% 48.43%;
 	--color-yellow-100: 51 100% 50%;
@@ -72,9 +71,9 @@
 
 	--color-page-background: var(--color-white-100);
 	--color-page-background-highlight: var(--color-black-100) / 5%;
-	--color-page-background-code: var(--color-white-300);
+	--color-page-background-code: var(--color-white-200);
 	--color-scroll-shadow: var(--color-black-100);
-	--color-intro-background: var(--color-white-200);
+	--color-intro-background: var(--color-white-100) / 60%;
 	--color-intro-image-mask: var(--color-white-100);
 	--color-technology-background: var(--color-black-100);
 	--color-icon: var(--color-black-200);