Update font and related changes (#549)

source/_static/scss/includes/_font.scss

@@ -1,23 +1,20 @@
 @font-face {
      font-family: "Mark";
-     src: url("../fonts/Mark-Regular.woff2") format("woff2"),
-          url("../fonts/Mark-Regular.woff") format("woff");
+     src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
 }
 
  @font-face {
      font-family: "Mark";
-     src: url("../fonts/Mark-Medium.woff2") format("woff2"),
-          url("../fonts/Mark-Medium.woff") format("woff");
+     src: url("../fonts/inter/Inter-Medium.woff2") format("woff2");
      font-weight: 500;
      font-style: normal;
 }
 
 @font-face {
      font-family: "Mark";
-     src: url("../fonts/Mark-Bold.woff2") format("woff2"),
-          url("../fonts/Mark-Bold.woff") format("woff");
+     src: url("../fonts/inter/Inter-Bold.woff2") format("woff2");
      font-weight: 700;
      font-style: normal;
 }

source/_static/scss/includes/_header.scss

@@ -131,7 +131,7 @@
 			width: 100%;
 			height: $search-height;
 			padding: 0 var(--content-padding);
-			top: 3.3rem;
+			top: 3.25rem;
 			
 			& > h2 {
 				display: none;
@@ -143,7 +143,7 @@
 			}
 
 			@include breakpoint-max(breakpoints(lg)) {
-				top: 7.2rem
+				top: 7rem
 			}
 
 			&:not(.active) {

source/_static/scss/includes/_misc.scss

@@ -48,6 +48,7 @@
   cursor: pointer;
   font-size: 0;
   flex-shrink: 0;
+  padding: 0 0.3rem;
 
   &:not(.icon--switch) {
     & > svg {

source/_static/scss/includes/_nav.scss

@@ -420,12 +420,16 @@
 	align-items: center;
     flex: 1;
 
+	@include breakpoint-max(breakpoints(lg)) {
+		gap: 1.75rem;
+	}
+
     & > a {
         color: var(--text-muted-color);
         font-weight: $font-weight-medium;
         display: flex;
         align-items: center;
-        padding: 0.69rem 0;
+        padding: 0.85rem 0 0.7rem;
         border-bottom: 2px solid transparent;
         transition: color 300ms;
 

source/_static/scss/includes/_search.scss

@@ -32,6 +32,10 @@
 				background-image: var(--search-icon);
 				padding-left: 2.25rem;
 			}
+
+			&:focus-within {
+				box-shadow: 0 0 0 0.3rem var(--search-focus-shadow);
+			}
 		}
 	}
 }
@@ -46,9 +50,9 @@
 	border: 1px solid transparent;
 	align-items: center;
 	padding: 0 0.3rem;
-	background-position: center left 1rem;
+	background-position: top 0.825rem left 1rem;
 	background-repeat: no-repeat;
-	transition: box-shadow 200ms;
+	transition: box-shadow 200ms, border-color 200ms;
 
 	@include breakpoint-min(breakpoints(xl)) {
 		max-width: 31.5rem;
@@ -84,10 +88,6 @@
 			}
 		}
 	}
-
-	&:focus-within {
-		box-shadow: 0 0 0 0.3rem var(--search-focus-shadow);
-	}
 }
 
 .search__text {
@@ -98,7 +98,7 @@
     color: var(--search-color);
     font-size: 0.85rem;
     width: 100%;
-    padding: 0 0.5rem 0.15rem 0.25rem;
+    padding: 0 0.5rem 0 0.25rem;
 
 	&::placeholder {
 		color: var(--search-placeholder-color);

source/_static/scss/includes/_theme.scss

@@ -43,9 +43,9 @@ $theme-properties: (
 
     // Search
     --search-bg: $white $dark-100,
-    --search-border-color: $light-400 $dark-400,
-    --search-focus-border-color: $light-500 $dark-500,
-    --search-placeholder-color: #7e7e7e $text-dark-color,
+    --search-border-color: $light-300 $dark-300,
+    --search-focus-border-color: $light-400 $dark-400,
+    --search-placeholder-color: #7e7e7e #697995,
     --search-color: $black $text-dark-color,
     --search-icon: url(../img/icons/search.svg) url(../img/icons/search-dark.svg),
     --search-focus-shadow: rgba($white, 0.15) #1b232f,
@@ -57,7 +57,7 @@ $theme-properties: (
 
     // Docs nav
     --docs-nav-active-color: $theme-red $headings-dark-color,
-    --docs-nav-group-border-color: $light-300 $dark-500,
+    --docs-nav-group-border-color: $light-300 $dark-300,
 
     // Scrollbar
     --scrollbar-bg: #e5e5e5 #2e3747,

source/_static/scss/includes/_variables.scss

@@ -31,8 +31,8 @@ $breakpoints: (
 $z-index-header: 11;
 
 // Body
-$font-family-base: 'Mark', sans-serif;
-$font-family-headings: 'Mark', sans-serif;
+$font-family-base: 'Inter', sans-serif;
+$font-family-headings: 'Inter', sans-serif;
 $font-family-mono: Courier New, Courier ,monospace;
 $root-font-size: 16px;
 $body-font-size: 1rem;