From 9d7468eb3dec0c2195c270c9ec20d28366b0e88b Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 17 Mar 2021 16:04:19 +0530
Subject: [PATCH 1/9] fix: Typography for markdown content

---
 frappe/public/scss/website/doc.scss      |  49 ----------
 frappe/public/scss/website/markdown.scss | 119 +++++++++++++++++------
 2 files changed, 89 insertions(+), 79 deletions(-)

diff --git a/frappe/public/scss/website/doc.scss b/frappe/public/scss/website/doc.scss
index 1585f428f9df..8cc12e7e553f 100644
--- a/frappe/public/scss/website/doc.scss
+++ b/frappe/public/scss/website/doc.scss
@@ -169,25 +169,6 @@ $navbar-height-lg: 4.5rem;
 		margin-top: 3rem;
 	}
 
-	h1 {
-		font-size: $font-size-3xl;
-		font-weight: 500;
-	}
-
-	h1 + p {
-		font-size: $font-size-lg;
-	}
-
-	h2 {
-		font-size: $font-size-2xl;
-		font-weight: 500;
-	}
-
-	h3 {
-		font-size: $font-size-xl;
-		font-weight: 500;
-	}
-
 	h1,
 	h2,
 	h3,
@@ -202,36 +183,6 @@ $navbar-height-lg: 4.5rem;
 			visibility: hidden;
 		}
 	}
-
-	h4 {
-		font-size: $font-size-lg;
-		font-weight: 500;
-	}
-
-	strong {
-		font-weight: 600;
-	}
-
-	table {
-		border-color: $gray-200;
-	}
-
-	table thead {
-		background-color: $light;
-	}
-
-	.table-bordered,
-	.table-bordered th,
-	.table-bordered td {
-		border-left: none;
-		border-right: none;
-		border-color: $gray-200;
-	}
-
-	.table-bordered thead th,
-	.table-bordered thead td {
-		border-bottom-width: 1px;
-	}
 }
 
 // next links
diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index 4b0c20cbc4a9..87a15ea275b5 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -1,9 +1,19 @@
+$font-sizes: (
+	"sm": 0.75rem,
+	"base": 1rem,
+	"lg": 1.125rem,
+	"xl": 1.41rem,
+	"2xl": 1.6rem,
+	"3xl": 2rem
+);
+
 .from-markdown {
 	color: $gray-700;
-	line-height: 1.625;
+	line-height: 1.7;
+	letter-spacing: -0.011em;
 
 	> * + * {
-		margin-top: 1rem;
+		margin-top: 0.875rem;
 	}
 
 	> :first-child {
@@ -27,13 +37,17 @@
 		list-style: decimal;
 	}
 
+	li {
+		text-indent: 0.25rem;
+	}
+
 	li > * + * {
-		margin-top: 1rem;
+		margin-top: 0.75rem;
 	}
 
-	> ul > * + *,
-	> ol > * + * {
-		margin-top: 1rem;
+	ul > * + *,
+	ol > * + * {
+		margin-top: 0.75rem;
 	}
 
 	> blockquote {
@@ -55,60 +69,84 @@
 
 	b, strong {
 		color: $gray-800;
+		font-weight: 600;
 	}
 
 	h1, h2, h3, h4, h5, h6 {
 		color: $gray-900;
+		font-weight: 500;
 	}
 
-	h1 + p {
-		margin-top: 0.75rem;
-		font-size: $font-size-base;
-
-		@include media-breakpoint-up(sm) {
-			margin-top: 1.25rem;
-			font-size: 1.125rem;
-		}
-		@include media-breakpoint-up(md) {
-			font-size: 1.25rem;
+	h1 {
+		font-size: map-get($font-sizes, '3xl');
+		line-height: 1.5;
+		letter-spacing: -0.024em;
+
+		// for byline
+		& + p {
+			margin-top: 1.5rem;
+			margin-bottom: 1.25rem;
+			font-size: map-get($font-sizes, 'xl');
+			letter-spacing: -0.0175em;
+
+			// @include media-breakpoint-up(sm) {
+			// 	margin-top: 1.25rem;
+			// 	font-size: 1.125rem;
+			// }
+			// @include media-breakpoint-up(md) {
+			// 	font-size: 1.25rem;
+			// }
 		}
 	}
 
 	h2 {
+		font-size: map-get($font-sizes, '2xl');
+		line-height: 1.56;
+		letter-spacing: -0.0195em;
 		margin-bottom: 1rem;
-		margin-top: 3.5rem;
+		margin-top: 3rem;
 	}
 
 	h3 {
-		margin-top: 3rem;
+		font-size: map-get($font-sizes, 'xl');
+		line-height: 1.56;
+		letter-spacing: -0.0175em;
+		margin-top: 1.5rem;
 		margin-bottom: 1rem;
-		font-weight: 600;
-		line-height: 1.25;
-		font-size: $font-size-xl;
 	}
 
 	h4 {
+		font-size: map-get($font-sizes, 'lg');
+		line-height: 1.56;
+		letter-spacing: -0.014em;
 		margin-top: 2.5rem;
 		margin-bottom: 1rem;
-		font-size: 1.125rem;
-		font-weight: 600;
-		line-height: 1.25;
 	}
 
 	h5 {
+		font-size: map-get($font-sizes, 'base');
+		line-height: 1.5;
+		letter-spacing: -0.011em;
+		font-weight: 600;
 		margin-top: 2rem;
 		margin-bottom: 1rem;
-		font-size: $font-size-base;
-		font-weight: 600;
-		line-height: 1.25;
 	}
 
 	h6 {
+		font-size: map-get($font-sizes, 'sm');
+		line-height: 1.35;
+		font-weight: 600;
+		text-transform: uppercase;
 		margin-top: 1.5rem;
 		margin-bottom: 1rem;
-		font-size: $font-size-sm;
-		font-weight: 600;
-		line-height: 1.25;
+	}
+
+	p + h3 {
+		margin-top: 3rem;
+	}
+
+	h3 + p {
+		margin-top: 1rem;
 	}
 
 	tr > td,
@@ -138,4 +176,25 @@
 		background: $light;
 		border-radius: 0.125rem;
 	}
+
+	table {
+		border-color: $gray-200;
+	}
+
+	table thead {
+		background-color: $light;
+	}
+
+	.table-bordered,
+	.table-bordered th,
+	.table-bordered td {
+		border-left: none;
+		border-right: none;
+		border-color: $gray-200;
+	}
+
+	.table-bordered thead th,
+	.table-bordered thead td {
+		border-bottom-width: 1px;
+	}
 }

From 8ce75ba2d2c8b6313a99dcb9231f87c4df422357 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 23 Mar 2021 14:36:06 +0530
Subject: [PATCH 2/9] fix: Styles for list items

---
 frappe/public/scss/website/markdown.scss | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index 87a15ea275b5..bf03ad3cae39 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -26,7 +26,7 @@ $font-sizes: (
 
 	ul,
 	ol {
-		padding-left: 2.5rem;
+		padding-left: 2rem;
 	}
 
 	ul {
@@ -39,15 +39,21 @@ $font-sizes: (
 
 	li {
 		text-indent: 0.25rem;
+		padding-top: 1px;
+		padding-bottom: 1px;
 	}
 
-	li > * + * {
-		margin-top: 0.75rem;
+	li > ul, li > ol {
+		padding-left: 1.5rem;
+	}
+
+	ul > li:first-child {
+		margin-top: 3px;
 	}
 
 	ul > * + *,
 	ol > * + * {
-		margin-top: 0.75rem;
+		margin-top: 2px;
 	}
 
 	> blockquote {

From 68387f767a33b519f55e56be245646e8d63779f2 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 23 Mar 2021 15:04:34 +0530
Subject: [PATCH 3/9] fix: Vertical spacing for headings and paragraphs

---
 frappe/public/scss/website/markdown.scss | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index bf03ad3cae39..19e213360638 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -13,7 +13,8 @@ $font-sizes: (
 	letter-spacing: -0.011em;
 
 	> * + * {
-		margin-top: 0.875rem;
+		margin-top: 0.75rem;
+		margin-bottom: 0;
 	}
 
 	> :first-child {
@@ -109,16 +110,14 @@ $font-sizes: (
 		font-size: map-get($font-sizes, '2xl');
 		line-height: 1.56;
 		letter-spacing: -0.0195em;
-		margin-bottom: 1rem;
-		margin-top: 3rem;
+		margin-top: 4rem;
 	}
 
 	h3 {
 		font-size: map-get($font-sizes, 'xl');
 		line-height: 1.56;
 		letter-spacing: -0.0175em;
-		margin-top: 1.5rem;
-		margin-bottom: 1rem;
+		margin-top: 2.25rem;
 	}
 
 	h4 {
@@ -126,7 +125,6 @@ $font-sizes: (
 		line-height: 1.56;
 		letter-spacing: -0.014em;
 		margin-top: 2.5rem;
-		margin-bottom: 1rem;
 	}
 
 	h5 {
@@ -135,7 +133,6 @@ $font-sizes: (
 		letter-spacing: -0.011em;
 		font-weight: 600;
 		margin-top: 2rem;
-		margin-bottom: 1rem;
 	}
 
 	h6 {
@@ -144,15 +141,6 @@ $font-sizes: (
 		font-weight: 600;
 		text-transform: uppercase;
 		margin-top: 1.5rem;
-		margin-bottom: 1rem;
-	}
-
-	p + h3 {
-		margin-top: 3rem;
-	}
-
-	h3 + p {
-		margin-top: 1rem;
 	}
 
 	tr > td,

From ab52f02b29d06223c8d29ec92e16954ce9cc2fc2 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 23 Mar 2021 15:09:41 +0530
Subject: [PATCH 4/9] fix: Top spacing for screenshots

---
 frappe/public/scss/website/markdown.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index 19e213360638..fe3c5c63c0c4 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -156,6 +156,7 @@ $font-sizes: (
 	.screenshot {
 		border: 1px solid $gray-400;
 		border-radius: 0.375rem;
+		margin-top: 0.5rem;
 	}
 
 	.screenshot + em {

From 495ef5d5a82b430c78cd5829a9bc67f99c31937f Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 23 Mar 2021 15:21:37 +0530
Subject: [PATCH 5/9] fix: Blockquote spacing

---
 frappe/public/scss/website/markdown.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index fe3c5c63c0c4..09fe8f0c9f7d 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -58,7 +58,7 @@ $font-sizes: (
 	}
 
 	> blockquote {
-		padding: 1.25rem 1rem;
+		padding: 0.75rem 1rem 0.75rem 1.25rem;
 		font-size: $font-size-sm;
 		font-weight: 500;
 		border: 1px solid $gray-200;

From 6000abcf9f20e1af8c2a3607721148d093cff0a1 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 23 Mar 2021 15:21:52 +0530
Subject: [PATCH 6/9] fix: Font weights for headings

---
 frappe/public/scss/website/markdown.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index 09fe8f0c9f7d..0595f969147c 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -81,7 +81,14 @@ $font-sizes: (
 
 	h1, h2, h3, h4, h5, h6 {
 		color: $gray-900;
-		font-weight: 500;
+	}
+
+	h1 {
+		font-weight: 700;
+	}
+
+	h2, h3, h4, h5, h6 {
+		font-weight: 600;
 	}
 
 	h1 {

From f9464cbbb485250e160e4134153bef17772f948d Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 23 Mar 2021 15:25:17 +0530
Subject: [PATCH 7/9] fix: Spacing for byline

---
 frappe/public/scss/website/markdown.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index 0595f969147c..585baaadedcf 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -99,9 +99,9 @@ $font-sizes: (
 		// for byline
 		& + p {
 			margin-top: 1.5rem;
-			margin-bottom: 1.25rem;
 			font-size: map-get($font-sizes, 'xl');
 			letter-spacing: -0.0175em;
+			line-height: 1.4;
 
 			// @include media-breakpoint-up(sm) {
 			// 	margin-top: 1.25rem;

From 9ffe8e91f78accfaf4593e25dce5bc93b26ff443 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Fri, 26 Mar 2021 11:55:05 +0530
Subject: [PATCH 8/9] fix: Styles for mobile

---
 frappe/public/scss/website/markdown.scss | 64 +++++++++++++++---------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index 585baaadedcf..c5f44d20d845 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -1,4 +1,4 @@
-$font-sizes: (
+$font-sizes-desktop: (
 	"sm": 0.75rem,
 	"base": 1rem,
 	"lg": 1.125rem,
@@ -7,6 +7,15 @@ $font-sizes: (
 	"3xl": 2rem
 );
 
+$font-sizes-mobile: (
+	"sm": 0.75rem,
+	"base": 1rem,
+	"lg": 1.125rem,
+	"xl": 1.25rem,
+	"2xl": 1.5rem,
+	"3xl": 1.75rem
+);
+
 .from-markdown {
 	color: $gray-700;
 	line-height: 1.7;
@@ -83,59 +92,68 @@ $font-sizes: (
 		color: $gray-900;
 	}
 
-	h1 {
-		font-weight: 700;
-	}
-
 	h2, h3, h4, h5, h6 {
 		font-weight: 600;
 	}
 
 	h1 {
-		font-size: map-get($font-sizes, '3xl');
+		font-size: map-get($font-sizes-mobile, '3xl');
 		line-height: 1.5;
-		letter-spacing: -0.024em;
+		letter-spacing: -0.021em;
+		font-weight: 700;
+
+		@include media-breakpoint-up(md) {
+			font-size: map-get($font-sizes-desktop, '3xl');
+			letter-spacing: -0.024em;
+		}
 
 		// for byline
 		& + p {
 			margin-top: 1.5rem;
-			font-size: map-get($font-sizes, 'xl');
-			letter-spacing: -0.0175em;
+			font-size: map-get($font-sizes-mobile, 'xl');
+			letter-spacing: -0.014em;
 			line-height: 1.4;
 
-			// @include media-breakpoint-up(sm) {
-			// 	margin-top: 1.25rem;
-			// 	font-size: 1.125rem;
-			// }
-			// @include media-breakpoint-up(md) {
-			// 	font-size: 1.25rem;
-			// }
+			@include media-breakpoint-up(md) {
+				font-size: map-get($font-sizes-desktop, 'xl');
+				letter-spacing: -0.0175em;
+			}
 		}
 	}
 
 	h2 {
-		font-size: map-get($font-sizes, '2xl');
+		font-size: map-get($font-sizes-mobile, '2xl');
 		line-height: 1.56;
-		letter-spacing: -0.0195em;
+		letter-spacing: -0.015em;
 		margin-top: 4rem;
+
+		@include media-breakpoint-up(md) {
+			font-size: map-get($font-sizes-desktop, '2xl');
+			letter-spacing: -0.0195em;
+		}
 	}
 
 	h3 {
-		font-size: map-get($font-sizes, 'xl');
+		font-size: map-get($font-sizes-mobile, 'xl');
 		line-height: 1.56;
-		letter-spacing: -0.0175em;
+		letter-spacing: -0.014em;
 		margin-top: 2.25rem;
+
+		@include media-breakpoint-up(md) {
+			font-size: map-get($font-sizes-desktop, 'xl');
+			letter-spacing: -0.0175em;
+		}
 	}
 
 	h4 {
-		font-size: map-get($font-sizes, 'lg');
+		font-size: map-get($font-sizes-mobile, 'lg');
 		line-height: 1.56;
 		letter-spacing: -0.014em;
 		margin-top: 2.5rem;
 	}
 
 	h5 {
-		font-size: map-get($font-sizes, 'base');
+		font-size: map-get($font-sizes-mobile, 'base');
 		line-height: 1.5;
 		letter-spacing: -0.011em;
 		font-weight: 600;
@@ -143,7 +161,7 @@ $font-sizes: (
 	}
 
 	h6 {
-		font-size: map-get($font-sizes, 'sm');
+		font-size: map-get($font-sizes-mobile, 'sm');
 		line-height: 1.35;
 		font-weight: 600;
 		text-transform: uppercase;

From 3c33393084f60609244a0cf66dc1304c4e735f32 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Fri, 26 Mar 2021 14:42:54 +0530
Subject: [PATCH 9/9] fix: Search icon in search bar

---
 frappe/templates/doc.html    | 15 ---------------
 frappe/website/js/website.js |  6 +++---
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/frappe/templates/doc.html b/frappe/templates/doc.html
index 3a566a12273f..f3a8ab8cc8d2 100644
--- a/frappe/templates/doc.html
+++ b/frappe/templates/doc.html
@@ -23,21 +23,6 @@
 			<div class="col-12 col-lg-8">
 				<div class="doc-search-container">
 					<div class="website-search doc-search" id="search-container">
-						<div class="dropdown">
-							<div class="search-icon">
-								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor" stroke-width="2" stroke-linecap="round"
-									stroke-linejoin="round"
-									class="feather feather-search">
-									<circle cx="11" cy="11" r="8"></circle>
-									<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-								</svg>
-							</div>
-							<input type="search" class="form-control" placeholder="Search the docs (Press / to focus)" />
-							<div class="overflow-hidden shadow dropdown-menu w-100">
-							</div>
-						</div>
 					</div>
 					<button class="navbar-toggler" type="button"
 						data-toggle="collapse"
diff --git a/frappe/website/js/website.js b/frappe/website/js/website.js
index bcbf7f762f4f..b8360e68ca3f 100644
--- a/frappe/website/js/website.js
+++ b/frappe/website/js/website.js
@@ -385,6 +385,9 @@ frappe.setup_search = function (target, search_scope) {
 	}
 
 	let $search_input = $(`<div class="dropdown" id="dropdownMenuSearch">
+			<input type="search" class="form-control" placeholder="Search the docs (Press / to focus)" />
+			<div class="overflow-hidden shadow dropdown-menu w-100" aria-labelledby="dropdownMenuSearch">
+			</div>
 			<div class="search-icon">
 				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
 					fill="none"
@@ -395,9 +398,6 @@ frappe.setup_search = function (target, search_scope) {
 					<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 				</svg>
 			</div>
-			<input type="search" class="form-control" placeholder="Search the docs (Press / to focus)" />
-			<div class="overflow-hidden shadow dropdown-menu w-100" aria-labelledby="dropdownMenuSearch">
-			</div>
 		</div>`);
 
 	target.empty();