Add .link underline

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;

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;

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;

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);
 	}

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.

docs/styles/gh-markdown.postcss

@@ -1,5 +1,5 @@
-*:not(.example__preview *) {
+*:not(.example__preview) * {
-	:where(a) {
+	: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 {

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%;

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 */

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>

src/components/Chips.svelte

@@ -40,6 +40,6 @@
 <style lang="postcss">
 	.chips {
 		display: flex;
-		gap: 0.5rem;
+		grid-gap: 0.5rem;
 	}
 </style>

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);

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);

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);

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;
 		}
 	}

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;

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;
 

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)) {

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);

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;

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;
 

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;

src/styles/classes/button-group.postcss

@@ -1,5 +1,5 @@
 .button-group {
 	display: flex;
-	gap: 0.5rem;
+	grid-gap: 0.5rem;
 	flex-wrap: wrap;
 }

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;
 

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;
 

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;

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 {

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);

src/styles/classes/markdown.postcss

@@ -1,7 +1,7 @@
 .markdown {
 	display: flex;
 	flex-direction: column;
-	gap: 1rem;
+	grid-gap: 1rem;
 
 	blockquote,
 	details,

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;

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;
 }

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;
 }