From 3e87d88825615a6e99c077f2c253db534af57cc8 Mon Sep 17 00:00:00 2001
From: venashial <venashial.levo@aleeas.com>
Date: Mon, 11 Jul 2022 13:23:19 -0700
Subject: [PATCH] Add .link underline

---
 docs/components/Example.svelte          |  2 +-
 docs/components/Header.svelte           |  4 ++--
 docs/components/Sidebar.svelte          |  4 ++--
 docs/layout/page.svelte                 |  2 +-
 docs/routes/setup.md                    |  2 +-
 docs/styles/gh-markdown.postcss         |  6 +++---
 src/components/Button.svelte            |  2 +-
 src/components/Checkbox.svelte          |  4 ++--
 src/components/CheckboxList.svelte      |  4 ++--
 src/components/Chips.svelte             |  2 +-
 src/components/Code.svelte              |  2 +-
 src/components/Field.svelte             |  4 ++--
 src/components/FileUpload.svelte        |  4 ++--
 src/components/Modal.svelte             |  4 ++--
 src/components/ModalDeletion.svelte     |  2 +-
 src/components/NavRow.svelte            |  2 +-
 src/components/Pagination.svelte        |  4 ++--
 src/components/Select.svelte            |  4 ++--
 src/components/Slider.svelte            |  2 +-
 src/components/TextInput.svelte         |  2 +-
 src/styles/classes/actions.postcss      |  2 +-
 src/styles/classes/button-group.postcss |  2 +-
 src/styles/classes/card.postcss         |  8 ++++----
 src/styles/classes/file.postcss         |  2 +-
 src/styles/classes/illustration.postcss |  2 +-
 src/styles/classes/info-table.postcss   |  2 +-
 src/styles/classes/link.postcss         | 16 +++++++++++++---
 src/styles/classes/markdown.postcss     |  2 +-
 src/styles/classes/member.postcss       |  2 +-
 src/styles/classes/stat.postcss         |  4 ++--
 src/styles/classes/tag.postcss          |  4 ++--
 31 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/docs/components/Example.svelte b/docs/components/Example.svelte
index e938d863..e2e2cecc 100644
--- a/docs/components/Example.svelte
+++ b/docs/components/Example.svelte
@@ -38,7 +38,7 @@
 			border: solid 2px hsl(0, 0%, 20%);
 			border-bottom: none;
 			display: flex;
-			gap: 1rem;
+			grid-gap: 1rem;
 			flex-wrap: wrap;
 			position: relative;
 			justify-content: flex-start;
diff --git a/docs/components/Header.svelte b/docs/components/Header.svelte
index e41517ef..23b3d97d 100644
--- a/docs/components/Header.svelte
+++ b/docs/components/Header.svelte
@@ -40,7 +40,7 @@
 <style lang="postcss">
 	.header {
 		display: flex;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 		align-items: center;
 		flex-wrap: wrap;
 		padding: 1rem 1.5rem;
@@ -74,7 +74,7 @@
 
 		&__links {
 			margin-left: auto;
-			gap: 1rem;
+			grid-gap: 1rem;
 			align-items: center;
 			justify-content: center;
 			display: flex;
diff --git a/docs/components/Sidebar.svelte b/docs/components/Sidebar.svelte
index e02a4d92..a77f4d1b 100644
--- a/docs/components/Sidebar.svelte
+++ b/docs/components/Sidebar.svelte
@@ -85,14 +85,14 @@
 			height: 100vh;
 			max-height: 100vh;
 			overflow-y: auto;
-			gap: 2.5rem;
+			grid-gap: 2.5rem;
 			display: flex;
 			flex-direction: column;
 
 			.section {
 				display: flex;
 				flex-direction: column;
-				gap: 0.5rem;
+				grid-gap: 0.5rem;
 
 				&__title {
 					text-transform: uppercase;
diff --git a/docs/layout/page.svelte b/docs/layout/page.svelte
index b66117f6..d096e7f9 100644
--- a/docs/layout/page.svelte
+++ b/docs/layout/page.svelte
@@ -114,7 +114,7 @@
 	.edit-link {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 		margin-bottom: 54px;
 		color: var(--accent-color);
 	}
diff --git a/docs/routes/setup.md b/docs/routes/setup.md
index 2d842cbe..80fbc655 100644
--- a/docs/routes/setup.md
+++ b/docs/routes/setup.md
@@ -180,4 +180,4 @@ Use a utility by importing from `omorphia/utils`.
 
 ### Using icons and styles
 
-Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.
+Follow the guides on the sidebar to learn how to use [icons](/usage/icons) and general concepts.
diff --git a/docs/styles/gh-markdown.postcss b/docs/styles/gh-markdown.postcss
index bc318f7e..8ddd4dac 100644
--- a/docs/styles/gh-markdown.postcss
+++ b/docs/styles/gh-markdown.postcss
@@ -1,5 +1,5 @@
-*:not(.example__preview *) {
-	:where(a) {
+*:not(.example__preview) * {
+	:where(a):not(.link) {
 		text-decoration: none;
 
 		&.absent {
@@ -378,7 +378,7 @@
 		background-color: var(--accent-color-transparent);
 	}
 
-	&:where(a) {
+	&:where(a):not(.link) {
 		color: var(--accent-color);
 
 		&:hover {
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 79bec209..26b3cf7e 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -93,7 +93,7 @@
 		justify-content: center;
 		padding: 0.5rem 1rem;
 		min-width: min-content;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 		cursor: pointer;
 		position: relative;
 		line-height: 100%;
diff --git a/src/components/Checkbox.svelte b/src/components/Checkbox.svelte
index c084413c..c0a4b358 100644
--- a/src/components/Checkbox.svelte
+++ b/src/components/Checkbox.svelte
@@ -25,12 +25,12 @@
 
 		display: inline-flex;
 		align-items: center;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 
 		&__label {
 			display: flex;
 			align-items: center;
-			gap: 0.5rem;
+			grid-gap: 0.5rem;
 
 			> :global(.icon) {
 				/* Icon on checkbox helps to be a little larger than normal icons 16px -> 18px */
diff --git a/src/components/CheckboxList.svelte b/src/components/CheckboxList.svelte
index 94dbdf7e..79681186 100644
--- a/src/components/CheckboxList.svelte
+++ b/src/components/CheckboxList.svelte
@@ -37,12 +37,12 @@
 	.checkbox-list {
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
+		grid-gap: 2px;
 
 		&.wrap {
 			flex-direction: row;
 			flex-wrap: wrap;
-			gap: 2rem;
+			grid-gap: 2rem;
 		}
 	}
 </style>
diff --git a/src/components/Chips.svelte b/src/components/Chips.svelte
index 7579e04c..0e2b58c8 100644
--- a/src/components/Chips.svelte
+++ b/src/components/Chips.svelte
@@ -40,6 +40,6 @@
 <style lang="postcss">
 	.chips {
 		display: flex;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 	}
 </style>
diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index c882d821..5b6f2081 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -26,7 +26,7 @@
 <style lang="postcss">
 	.code {
 		display: flex;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 		font-family: var(--mono-font);
 		padding: 0.25rem 0.5rem;
 		background-color: var(--color-code-bg);
diff --git a/src/components/Field.svelte b/src/components/Field.svelte
index feeb191d..77d3c6d1 100644
--- a/src/components/Field.svelte
+++ b/src/components/Field.svelte
@@ -22,13 +22,13 @@
 	.field {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 		min-width: 0;
 
 		&__label {
 			display: flex;
 			flex-direction: column;
-			gap: 0;
+			grid-gap: 0;
 
 			&__title {
 				font-weight: var(--font-weight-bold);
diff --git a/src/components/FileUpload.svelte b/src/components/FileUpload.svelte
index cea82c8a..5bf400d1 100644
--- a/src/components/FileUpload.svelte
+++ b/src/components/FileUpload.svelte
@@ -95,7 +95,7 @@
 	.file-dropzone {
 		display: flex;
 		flex-direction: column;
-		gap: 1rem;
+		grid-gap: 1rem;
 
 		&--constrained {
 			width: 27rem;
@@ -106,7 +106,7 @@
 			padding: 1.5rem 2rem;
 			justify-content: center;
 			align-items: center;
-			gap: 0.5rem;
+			grid-gap: 0.5rem;
 			background-color: var(--color-button-bg);
 			border-radius: var(--rounded-sm);
 			border: dashed 0.3rem var(--color-text-lightest);
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index f4092736..45680b63 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -121,7 +121,7 @@
 			padding: 1rem 1.25rem;
 			display: flex;
 			align-items: center;
-			gap: 1rem;
+			grid-gap: 1rem;
 			color: var(--color-danger-text);
 			border-color: var(--color-danger-text);
 			border-width: 0.15rem 0;
@@ -152,7 +152,7 @@
 			margin-top: 1rem;
 			display: flex;
 			justify-content: flex-end;
-			gap: 1rem;
+			grid-gap: 1rem;
 			flex-wrap: wrap;
 		}
 	}
diff --git a/src/components/ModalDeletion.svelte b/src/components/ModalDeletion.svelte
index 2214e6be..24e0d601 100644
--- a/src/components/ModalDeletion.svelte
+++ b/src/components/ModalDeletion.svelte
@@ -54,7 +54,7 @@
 		padding: 1rem 1.25rem;
 		display: flex;
 		align-items: center;
-		gap: 1rem;
+		grid-gap: 1rem;
 		color: var(--color-danger-text);
 		border-color: var(--color-danger-text);
 		border-width: 0.15rem 0;
diff --git a/src/components/NavRow.svelte b/src/components/NavRow.svelte
index dae04fdf..ee225c22 100644
--- a/src/components/NavRow.svelte
+++ b/src/components/NavRow.svelte
@@ -124,7 +124,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 1rem;
+		grid-gap: 1rem;
 		flex-wrap: wrap;
 		position: relative;
 
diff --git a/src/components/Pagination.svelte b/src/components/Pagination.svelte
index 01ebb14a..ad35bc71 100644
--- a/src/components/Pagination.svelte
+++ b/src/components/Pagination.svelte
@@ -55,7 +55,7 @@
 	.pagination {
 		align-self: center;
 		display: flex;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 		align-items: center;
 
 		:global(.button) {
@@ -72,7 +72,7 @@
 		}
 
 		@media (width <= 500px) {
-			gap: 0.25rem;
+			grid-gap: 0.25rem;
 
 			:global(> *:nth-child(4)),
 			:global(> *:nth-child(6)) {
diff --git a/src/components/Select.svelte b/src/components/Select.svelte
index 9077eebb..8f3ba81a 100644
--- a/src/components/Select.svelte
+++ b/src/components/Select.svelte
@@ -220,7 +220,7 @@
 			justify-content: space-between;
 			align-items: center;
 			padding: 0.25rem 1rem;
-			gap: 0.5rem;
+			grid-gap: 0.5rem;
 			background-color: var(--color-button-bg);
 			box-shadow: var(--shadow-inset-sm);
 			border-radius: var(--rounded);
@@ -265,7 +265,7 @@
 				padding: 0.25rem 1rem;
 				display: flex;
 				align-items: center;
-				gap: 0.5rem;
+				grid-gap: 0.5rem;
 
 				&:hover:not(.current, .is-selected) {
 					background-color: var(--color-brand-dark);
diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
index c19b3fa0..e3527be9 100644
--- a/src/components/Slider.svelte
+++ b/src/components/Slider.svelte
@@ -15,7 +15,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 
 		&__input {
 			-webkit-appearance: none;
diff --git a/src/components/TextInput.svelte b/src/components/TextInput.svelte
index e7c6856b..c083cb7c 100644
--- a/src/components/TextInput.svelte
+++ b/src/components/TextInput.svelte
@@ -28,7 +28,7 @@
 	.text-input {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 		position: relative;
 		width: 20rem;
 
diff --git a/src/styles/classes/actions.postcss b/src/styles/classes/actions.postcss
index 57066ef6..b0d3d51c 100644
--- a/src/styles/classes/actions.postcss
+++ b/src/styles/classes/actions.postcss
@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
-	gap: 0.5rem;
+	grid-gap: 0.5rem;
 	flex-wrap: wrap;
 	margin-left: auto;
 	min-width: fit-content;
diff --git a/src/styles/classes/button-group.postcss b/src/styles/classes/button-group.postcss
index d8a186f1..d7dbb97b 100644
--- a/src/styles/classes/button-group.postcss
+++ b/src/styles/classes/button-group.postcss
@@ -1,5 +1,5 @@
 .button-group {
 	display: flex;
-	gap: 0.5rem;
+	grid-gap: 0.5rem;
 	flex-wrap: wrap;
 }
diff --git a/src/styles/classes/card.postcss b/src/styles/classes/card.postcss
index 8ca41a21..e07237dd 100644
--- a/src/styles/classes/card.postcss
+++ b/src/styles/classes/card.postcss
@@ -10,7 +10,7 @@
 	box-shadow: var(--shadow-raised), var(--shadow-inset);
 
 	padding: var(--padding);
-	gap: 1rem;
+	grid-gap: 1rem;
 	max-width: 100%;
 
 	.profile-picture {
@@ -19,11 +19,11 @@
 
 	&--gap {
 		&-compressed {
-			gap: 0.5rem;
+			grid-gap: 0.5rem;
 		}
 
 		&-none {
-			gap: 0;
+			grid-gap: 0;
 		}
 	}
 
@@ -60,7 +60,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 
 		z-index: 2;
 
diff --git a/src/styles/classes/file.postcss b/src/styles/classes/file.postcss
index 92fd9651..735b86ce 100644
--- a/src/styles/classes/file.postcss
+++ b/src/styles/classes/file.postcss
@@ -15,7 +15,7 @@
 		display: flex;
 		align-items: center;
 		padding: 0.75rem 1rem;
-		gap: 1rem;
+		grid-gap: 1rem;
 		/* Prevents shifting in height when button added */
 		min-height: 3.5rem;
 
diff --git a/src/styles/classes/illustration.postcss b/src/styles/classes/illustration.postcss
index 188c42b6..b41cdad0 100644
--- a/src/styles/classes/illustration.postcss
+++ b/src/styles/classes/illustration.postcss
@@ -3,7 +3,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 2rem;
+	grid-gap: 2rem;
 
 	&__image {
 		max-width: 18.5rem;
diff --git a/src/styles/classes/info-table.postcss b/src/styles/classes/info-table.postcss
index afcf159e..acd1f990 100644
--- a/src/styles/classes/info-table.postcss
+++ b/src/styles/classes/info-table.postcss
@@ -1,7 +1,7 @@
 .info-table {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
-	gap: 0.25rem 2rem;
+	grid-gap: 0.25rem 2rem;
 	width: fit-content;
 
 	&__label {
diff --git a/src/styles/classes/link.postcss b/src/styles/classes/link.postcss
index 46968f9c..dc6c8931 100644
--- a/src/styles/classes/link.postcss
+++ b/src/styles/classes/link.postcss
@@ -2,11 +2,21 @@
 	color: var(--color-link);
 	display: flex;
 	align-items: center;
-	gap: 0.5rem;
+	grid-gap: 0.25rem;
 	line-height: 100%;
+	text-decoration: underline;
+	text-underline-offset: 3px;
 
 	&:hover {
-		text-decoration: underline;
+		text-decoration-thickness: 2px;
+
+		.icon > path {
+			stroke-width: 3px;
+		}
+	}
+
+	.icon {
+		margin-bottom: -3px;
 	}
 }
 
@@ -14,7 +24,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	gap: 1rem;
+	grid-gap: 1rem;
 
 	.link {
 		color: var(--color-text);
diff --git a/src/styles/classes/markdown.postcss b/src/styles/classes/markdown.postcss
index 73fb214c..67f0d9e6 100644
--- a/src/styles/classes/markdown.postcss
+++ b/src/styles/classes/markdown.postcss
@@ -1,7 +1,7 @@
 .markdown {
 	display: flex;
 	flex-direction: column;
-	gap: 1rem;
+	grid-gap: 1rem;
 
 	blockquote,
 	details,
diff --git a/src/styles/classes/member.postcss b/src/styles/classes/member.postcss
index d5311603..67082287 100644
--- a/src/styles/classes/member.postcss
+++ b/src/styles/classes/member.postcss
@@ -1,6 +1,6 @@
 .member {
 	display: flex;
-	gap: 1rem;
+	grid-gap: 1rem;
 
 	border-radius: var(--rounded-sm);
 	padding: 0.5rem;
diff --git a/src/styles/classes/stat.postcss b/src/styles/classes/stat.postcss
index 01447355..89034843 100644
--- a/src/styles/classes/stat.postcss
+++ b/src/styles/classes/stat.postcss
@@ -1,7 +1,7 @@
 .stat {
 	display: flex;
 	align-items: baseline;
-	gap: 0.5rem;
+	grid-gap: 0.5rem;
 
 	&--light {
 		color: var(--color-text-lightest);
@@ -18,6 +18,6 @@
 
 .stat-group {
 	display: flex;
-	gap: 0.5rem;
+	grid-gap: 0.5rem;
 	flex-wrap: wrap;
 }
diff --git a/src/styles/classes/tag.postcss b/src/styles/classes/tag.postcss
index 9df316ff..8cacee3f 100644
--- a/src/styles/classes/tag.postcss
+++ b/src/styles/classes/tag.postcss
@@ -1,7 +1,7 @@
 .tag {
 	display: flex;
 	align-items: center;
-	gap: 0.25rem;
+	grid-gap: 0.25rem;
 	color: var(--color-text-lightest);
 
 	svg {
@@ -14,5 +14,5 @@
 	display: inline-flex;
 	flex-wrap: wrap;
 	margin-top: auto;
-	gap: 0.25rem 0.5rem;
+	grid-gap: 0.25rem 0.5rem;
 }