Apply stylelint fixes

src/css/custom.css

@@ -1,32 +1,37 @@
+/* stylelint-disable selector-class-pattern */
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
 
+/* Tailwind base styles */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* You can override the default Infima variables here. */
 :root {
 	--ifm-color-primary: #327eff;
 	--ifm-color-primary-dark: #2a2978;
 	--ifm-color-primary-darker: #362771;
-	--ifm-color-primary-darkest: #000000;
+	--ifm-color-primary-darkest: #000;
-	--ifm-color-primary-light: hwb(216 27% 39%);
+	--ifm-color-primary-light: hwb(216deg 27% 39%);
 	--ifm-footer-background-color: #111;
 	--ifm-color-primary-lighter: #7062c8;
 	--ifm-color-primary-lightest: #6c87c5;
 	--ifm-link-color: #333;
 	--ifm-code-font-size: 95%;
-	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+	--docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%);
 	--ifm-hover-overlay: #fafafa;
 	--ifm-heading-color: #111;
+	--ifm-font-family-base: "Archivo";
+	--ifm-global-shadow-md: 0px; /* Remove shadow on the left */
 }
 
 [data-theme="light"] {
@@ -34,7 +39,7 @@
 }
 
 .theme-doc-sidebar-container {
-	border-width: 0px !important;
+	border-width: 0 !important;
 }
 
 /* .hiring-link {
@@ -59,30 +64,35 @@
 	--ifm-color-primary-lighter: #32d8b4;
 	--ifm-color-primary-lightest: #4fddbf;
 	--ifm-link-color: #ccc;
-	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+	--docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%);
 	--ifm-heading-color: #fff;
 }
 
 code {
 	color: #eb5757;
-	border-width: 0px;
+	border-width: 0;
 	padding: 3px 8px;
 	font-size: 0.8em;
 	font-weight: 600;
 }
+
 [data-theme="light"] code {
 	background-color: #f0f0f0;
 }
+
 [data-theme="dark"] code {
 	background-color: #111;
 }
+
 .theme-code-block {
 	font-family: "IBM Plex Mono", monospace;
 	font-size: 0.9em;
 }
+
 .theme-code-block .token {
 	font-family: "IBM Plex Mono", monospace;
 }
+
 [data-theme="light"] .theme-code-block pre {
 	background-color: #fafafa;
 }
@@ -98,7 +108,7 @@ code {
 
 nav.menu {
 	margin-right: 1px;
-	padding: 0px;
+	padding: 0;
 }
 
 nav.menu::-webkit-scrollbar {
@@ -108,10 +118,10 @@ nav.menu::-webkit-scrollbar {
 .menu__link {
 	transition-property: none;
 	line-height: 1.5;
-	border-radius: 0px 0px 0px 0px;
 	padding-left: 20px;
+
 	/* word-spacing: 7px; */
-	margin: 0px 10px;
+	margin: 0 10px;
 	border-radius: 3px;
 }
 
@@ -127,24 +137,20 @@ blockquote {
 	margin-left: 20px;
 	margin-right: 20px;
 }
+
 [data-theme="light"] blockquote {
 	background-color: #f0f0f0;
 	color: #000;
 }
+
 [data-theme="dark"] blockquote {
 	background-color: #111;
 }
 
-[data-theme="light"] .pagination-nav__link:hover {
-	border-color: #000;
-}
-[data-theme="dark"] .pagination-nav__link:hover {
-	border-color: #fff;
-}
-
 [data-theme="light"] .navbar__brand:hover {
 	color: #000;
 }
+
 [data-theme="dark"] .navbar__brand:hover {
 	color: #fff;
 }
@@ -152,17 +158,20 @@ blockquote {
 .iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module {
 	display: none;
 }
+
 /* .navbar__items svg {
    display: none;
  } */
 
 .pagination-nav__link {
-	border-radius: 0px;
+	border-radius: 0;
-	border: 0px;
+	border: 0;
 }
+
 [data-theme="light"] .pagination-nav__link {
 	border-top: 1px solid #ccc;
 }
+
 [data-theme="dark"] .pagination-nav__link {
 	border-top: 1px solid #ccc;
 }
@@ -170,6 +179,7 @@ blockquote {
 [data-theme="light"] .pagination-nav__link:hover {
 	border-top: 1px solid #000;
 }
+
 [data-theme="dark"] .pagination-nav__link:hover {
 	border-top: 1px solid #fff;
 }
@@ -179,25 +189,31 @@ blockquote {
 	margin-bottom: 40px;
 	margin-top: 30px;
 }
+
 [data-theme="light"] .hero__subtitle {
 	color: #000;
 }
+
 [data-theme="dark"] .hero__subtitle {
 	color: #fff !important;
 }
+
 .btn--black {
 	background-color: #000;
 	color: #fff;
 }
+
 .btn--black:hover {
 	background-color: #000;
 	color: #fff;
 }
+
 .iconExternalLink_nPIU {
 	display: none;
 }
+
 .btn--landing {
-	border-radius: 0px;
+	border-radius: 0;
 	margin-right: 8px;
 	margin-left: 8px;
 	border-color: #000;
@@ -206,109 +222,11 @@ blockquote {
 [data-theme="light"] .hero--bg {
 	background-color: #fafafa;
 }
+
 [data-theme="dark"] .hero--bg {
 	background-color: #111 !important;
 }
 
-.hero--banner {
-	padding: 10px !important;
-}
-.hero--banner,
-.hero--banner a {
-	margin: 0px;
-
-	color: #fff;
-	background-color: #000;
-	width: 100%;
-}
-
-.homepage-svg svg {
-	height: auto !important;
-	width: 100% !important;
-	padding: 20px;
-	max-width: 200px;
-}
-[data-theme="light"] .homepage-svg svg {
-	background-color: #fafafa;
-	color: #000;
-}
-[data-theme="dark"] .homepage-svg svg {
-	background-color: #111 !important;
-	color: #fff !important;
-}
-[data-theme="dark"] .homepage-svg path {
-	filter: invert(1);
-}
-.index-buttons {
-	padding: 0px !important;
-}
-.hero--container-small img {
-	max-width: 100%;
-}
-
-.footer__item .hiring-link {
-	margin-top: 20px;
-}
-.hiring-link {
-	background-color: #ffde2d;
-	color: #000;
-	font-weight: 600;
-	padding: 5px 10px;
-	border-radius: 1px;
-}
-
-@media screen and (min-width: 997px) {
-	.hero--container {
-		padding-left: 200px;
-		padding-right: 200px;
-		padding-top: 80px;
-		padding-bottom: 80px;
-	}
-	.hero--container-small {
-		padding-left: 200px;
-		padding-right: 200px;
-		padding-top: 40px;
-		padding-bottom: 40px;
-	}
-}
-@media screen and (max-width: 996px) {
-	.hero--container {
-		padding-left: 0px;
-		padding-right: 0px;
-		padding-top: 20px;
-		padding-bottom: 0px;
-	}
-	.hero--container h2,
-	.hero--container-small h2 {
-		font-size: 1.2em;
-	}
-	.hero--container-small {
-		padding-left: 40px;
-		padding-right: 40px;
-		padding-top: 20px;
-		padding-bottom: 20px;
-	}
-	.index-buttons {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	.index-buttons a {
-		margin-bottom: 10px;
-	}
-	.hero--banner a {
-		font-size: 0.8em;
-	}
-	.hero__subtitle {
-		font-size: 1.3rem;
-		margin-bottom: 25px;
-	}
-	.homepage-svg svg {
-		max-width: 120px;
-		margin-left: 15px;
-	}
-}
-
 article a {
 	/* background-color: #f6f3d2; */
 	text-decoration: underline;
@@ -319,19 +237,130 @@ article p a {
 	font-weight: 600;
 	text-underline-position: under;
 	margin-bottom: 5px;
+
 	/* display: block; */
 }
+
+.hero--banner {
+	padding: 10px !important;
+}
+
+.hero--banner,
+.hero--banner a {
+	margin: 0;
+	color: #fff;
+	background-color: #000;
+	width: 100%;
+}
+
+.homepage-svg svg {
+	height: auto !important;
+	width: 100% !important;
+	padding: 20px;
+	max-width: 200px;
+}
+
+[data-theme="light"] .homepage-svg svg {
+	background-color: #fafafa;
+	color: #000;
+}
+
+[data-theme="dark"] .homepage-svg svg {
+	background-color: #111 !important;
+	color: #fff !important;
+}
+
+[data-theme="dark"] .homepage-svg path {
+	filter: invert(1);
+}
+
+.index-buttons {
+	padding: 0 !important;
+}
+
+.hero--container-small img {
+	max-width: 100%;
+}
+
+.hiring-link {
+	background-color: #ffde2d;
+	color: #000;
+	font-weight: 600;
+	padding: 5px 10px;
+	border-radius: 1px;
+}
+
+.footer__item .hiring-link {
+	margin-top: 20px;
+}
+
+@media screen and (width >= 997px) {
+	.hero--container {
+		padding: 80px 200px;
+	}
+
+	.hero--container-small {
+		padding: 40px 200px;
+	}
+}
+
+@media screen and (width < 997px) {
+	.hero--container {
+		padding: 20px 0 0;
+	}
+
+	.hero--container h2,
+	.hero--container-small h2 {
+		font-size: 1.2em;
+	}
+
+	.hero--container-small {
+		padding: 20px 40px;
+	}
+
+	.index-buttons {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.index-buttons a {
+		margin-bottom: 10px;
+	}
+
+	.hero--banner a {
+		font-size: 0.8em;
+	}
+
+	.hero__subtitle {
+		font-size: 1.3rem;
+		margin-bottom: 25px;
+	}
+
+	.homepage-svg svg {
+		max-width: 120px;
+		margin-left: 15px;
+	}
+}
+
+.notbold a {
+	font-weight: 400 !important;
+}
+
 [data-theme="light"] article p a {
 	color: #333;
 	text-decoration-color: #bfbfbf;
 }
+
 [data-theme="dark"] article p a {
 	color: #ccc;
 	text-decoration-color: #454545;
 }
+
 [data-theme="light"] article p a:hover {
 	color: #111;
 }
+
 [data-theme="dark"] article p a:hover {
 	color: #fff;
 }
@@ -340,17 +369,14 @@ article p a {
 	font-weight: 600;
 }
 
-.margin-bottom--sm {
-	margin-top: 200px !important;
-	margin-bottom: 200px !important;
-}
-
 .footer__title {
 	color: #fff;
 }
+
 [data-theme="light"] a.footer__link-item {
 	color: #fff;
 }
+
 [data-theme="dark"] a.footer__link-item {
 	color: #fff;
 }
@@ -359,45 +385,51 @@ article p a {
 	color: #000;
 	background-color: #f0f0f0;
 }
+
 [data-theme="dark"] .menu__link--active {
 	color: #fff;
 	background-color: #111;
 }
 
-@media screen and (min-width: 997px) {
+@media screen and (width >= 997px) {
 	.menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module {
-		padding: 0px !important;
+		padding: 0 !important;
 	}
+
 	.menu__list-item:not(:first-child) {
-		margin-top: 0px;
+		margin-top: 0;
 	}
 }
 
 .docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module {
-	border-right-width: 0px !important;
+	border-right-width: 0 !important;
 }
 
 /* from here - https://theochu.com/docusaurus/styling/ */
-@media screen and (max-width: 996px) {
+@media screen and (width <= 996px) {
 	h1 {
 		font-size: 1.5rem !important;
 		font-weight: 600;
 	}
+
 	.hero .hero__title {
 		font-size: 2.5rem;
 	}
 }
 
-@media screen and (min-width: 997px) {
+@media screen and (width >= 997px) {
 	h1 {
 		font-size: 2rem !important;
 	}
+
 	h2 {
 		font-size: 1.5rem !important;
 	}
+
 	h3 {
 		font-size: 1rem !important;
 	}
+
 	article {
 		max-width: 700px;
 		margin-left: auto;
@@ -406,32 +438,25 @@ article p a {
 	}
 }
 
-:root {
-	--ifm-font-family-base: "Archivo";
-}
-
 /* Header Dropdown Menu */
 .dropdown__link {
 	font-size: inherit;
 }
 
-/* Remove shadow on the left */
+@media screen and (width >= 997px) {
-:root {
-	--ifm-global-shadow-md: 0px;
-}
-
-@media screen and (min-width: 997px) {
 	/* Show inline table of contents on mobile only */
 	div[class^="tableOfContentsInline"] {
 		display: none;
 	}
 }
 
+/* 
 .tabs {
 }
+*/
 
 .tabs__item {
-	padding: 3px 15px 2px 15px;
+	padding: 3px 15px 2px;
 	font-weight: 600;
 	font-size: 0.9em;
 	border-radius: 30px;
@@ -439,15 +464,18 @@ article p a {
 	margin-right: 8px;
 	background-color: #f0f0f0;
 }
+
 .tabs__item:hover {
 	background-color: #e5e5e5;
 }
+
 .tabs__item--active {
-	border-bottom: 0px;
+	border-bottom: 0;
 	background-color: rgb(50 125 255);
 	border-radius: 30px;
-	color: #ffffff;
+	color: #fff;
 }
+
 .tabs__item--active:hover {
 	background-color: rgb(50 125 255);
 }
@@ -455,9 +483,10 @@ article p a {
 .tabs + .margin-top--md {
 	margin-top: 5px !important;
 }
+
 .tabs + .margin-top--md pre {
-	border-top-right-radius: 0px;
+	border-top-right-radius: 0;
-	border-top-left-radius: 0px;
+	border-top-left-radius: 0;
 }
 
 .margin-bottom--xl {
@@ -474,46 +503,49 @@ article p a {
 }
 
 .markdown hr {
-	background-color: rgba(120, 120, 120, 0.2);
+	background-color: rgb(120 120 120 / 20%);
 }
 
 div.special_table + table {
 	border: none;
 
 	/* border-collapse: separate; */
+
 	/* border-spacing: 0px; */
 }
 
 div.special_table + table thead {
-	background: rgba(120, 120, 120, 0.1);
+	background: rgb(120 120 120 / 10%);
 	border-top-right-radius: 10px;
 	overflow: hidden;
 }
 
 div.special_table + table thead tr {
-	background: rgba(255, 255, 255, 0);
+	background: rgb(255 255 255 / 0%);
-	border-top: 0px;
+	border-top: 0;
-	border-bottom: 0px;
+	border-bottom: 0;
 }
+
 div.special_table + table tr th {
-	background: rgba(255, 255, 255, 0);
+	background: rgb(255 255 255 / 0%);
 	color: #000;
 	font-weight: 600;
 	padding: 5px 20px;
 }
+
 div.special_table + table tr td {
 	padding: 5px 20px;
 	text-align: left;
 }
 
 div.special_table + table tr:nth-child(even) {
-	background: rgba(255, 255, 255, 0);
+	background: rgb(255 255 255 / 0%);
 }
 
 div.special_table + table,
 th,
 td {
-	border-width: 0px !important;
+	border-width: 0 !important;
 }
 
 .custom-tag {
@@ -523,6 +555,7 @@ td {
 	margin-right: 5px;
 	border-radius: 8px;
 	font-size: 0.7em;
+
 	/* text-transform: uppercase; */
 	font-weight: 900;
 	color: #000;
@@ -539,15 +572,11 @@ td {
 }
 
 .navbar__link:has(div.custom-tag) {
-	padding: 0px;
+	padding: 0;
-	margin: 0px;
+	margin: 0;
 	margin-left: 5px;
 }
 
-.notbold a {
-	font-weight: 400 !important;
-}
-
 .small-text {
 	font-size: 0.8em;
 }
@@ -567,14 +596,13 @@ td {
 	margin-top: 40px;
 }
 
-.category-header .menu__link--sublist-caret:after {
+.category-header .menu__link--sublist-caret::after {
 	display: none;
 }
 
 .category-link a::after {
 	content: "\2192";
 	font-size: 20px;
-	margin-left: 5px; /* for spacing */
 	transform: scaleX(-1) rotate(180deg);
 	margin-left: 9px;
 	position: absolute;
@@ -607,6 +635,7 @@ td {
 	height: 24px;
 	display: flex;
 	background-color: var(--ifm-navbar-link-color);
+
 	/* URL encode an svg https://yoksel.github.io/url-encoder/ */
 	mask-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21.4-.4.8-.58 1.21-1.69-.25-3.4-.25-5.1 0-.18-.41-.37-.82-.59-1.2-1.6.27-3.14.75-4.6 1.43A19.04 19.04 0 0 0 .96 17.7a18.43 18.43 0 0 0 5.63 2.87c.46-.62.86-1.28 1.2-1.98-.65-.25-1.29-.55-1.9-.92.17-.12.32-.24.47-.37 3.58 1.7 7.7 1.7 11.28 0l.46.37c-.6.36-1.25.67-1.9.92.35.7.75 1.35 1.2 1.98 2.03-.63 3.94-1.6 5.64-2.87.47-4.87-.78-9.09-3.3-12.83ZM8.3 15.12c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.89 2.27-2 2.27Zm7.4 0c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.88 2.27-2 2.27Z' %3E%3C/path%3E%3C/svg%3E");
 	transition: background-color var(--ifm-transition-fast)