fix: web styles espresso

- added Inter & Inter V on website and font-stack
- added flex to logged-in to center avatar
- decreased brand logo height to 22px
- added primary border-bottom to active navbar link
- added underline to links for blog content
  and added to from-markdown for web pages

frappe/public/scss/common/css_variables.scss

@@ -25,6 +25,9 @@ $disabled-input-height: 22px;
 	--btn-shadow: var(--shadow-xs);
 
 
+	// navbar
+	--navbar-height: 48px;
+
 	// SVG Colors
 	--icon-fill: transparent;
 	--icon-fill-bg: var(--fg-color);

frappe/public/scss/common/global.scss

@@ -3,6 +3,7 @@
 
 html, body {
 	height: 100%;
+	font-family: var(--font-stack);
 	font-variation-settings: "opsz" 24;
 }
 

frappe/public/scss/desk/css_variables.scss

@@ -10,7 +10,6 @@
 	--sm-width: #{map-get($grid-breakpoints, 'sm')};
 	--xs-width: #{map-get($grid-breakpoints, 'xs')};
 
-	--navbar-height: 48px;
 
 
 

frappe/public/scss/website/blog.scss

@@ -104,6 +104,9 @@
 			margin-bottom: 3rem;
 			margin-top: 5rem;
 		}
+		a {
+			text-decoration: underline;
+		}
 	}
 
 	.blog-comments {

frappe/public/scss/website/index.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import "frappe/public/css/fonts/inter/inter.css";
 @import '../common/quill';
 @import '~bootstrap/scss/bootstrap';
 @import '~cropperjs/dist/cropper.min';

frappe/public/scss/website/markdown.scss

@@ -2,6 +2,9 @@
 .section-markdown > .from-markdown {
 	max-width: 50rem;
 	margin: auto;
+	a {
+		text-decoration: underline;
+	}
 }
 
 .from-markdown {

frappe/public/scss/website/navbar.scss

@@ -1,5 +1,22 @@
 .navbar {
 	padding: 0;
+	.navbar-nav {
+		align-items: center;
+		.nav-item {
+			height: var(--navbar-height);
+			display: flex;
+			align-items: center;
+
+			&.active {
+				border-bottom: 1px solid var(--primary);
+			}
+
+			.nav-link {
+				vertical-align: middle;
+				line-height: 1;
+			}
+		}
+	}
 }
 
 @media (max-width: map-get($grid-breakpoints, "lg")) {
@@ -60,7 +77,7 @@
 	img {
 		display: inline-block;
 		max-width: 150px;
-		max-height: 25px;
+		max-height: 22px;
 	}
 }
 
@@ -117,9 +134,14 @@
 	padding-bottom: 0px;
 }
 
-.logged-in > .nav-link {
-	max-width: 200px;
-	@extend .ellipsis;
-	max-width: 100%;
-	vertical-align: middle;
+.logged-in {
+	display: flex;
+    justify-content: center;
+    align-items: center;
+	.nav-link {
+		max-width: 200px;
+		@extend .ellipsis;
+		max-width: 100%;
+		vertical-align: middle;
+	}
 }

frappe/public/scss/website/variables.scss

@@ -11,6 +11,7 @@ $border-color: $gray-300 !default;
 $headings-color: $gray-900 !default;
 $breadcrumb-bg: transparent !default;
 $navbar-bg: white !default;
+$navbar-height: 48px;
 
 $container-max-widths: (
 	sm: 540px,

frappe/website/js/website.js

@@ -333,9 +333,9 @@ $.extend(frappe, {
 	},
 	make_navbar_active: function () {
 		var pathname = window.location.pathname;
-		$(".navbar-nav a.active").removeClass("active");
-		$(".navbar-nav a").each(function () {
-			var href = $(this).attr("href");
+		$(".navbar-nav li.active").removeClass("active");
+		$(".navbar-nav li").each(function () {
+			var href = $(this.getElementsByTagName("a")).attr("href");
 			if (href === pathname) {
 				$(this).addClass("active");
 				return false;