Merge pull request #12692 from netchampfaris/typography-markdown

fix: Typography for markdown content

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

frappe/public/scss/website/markdown.scss

@@ -1,9 +1,29 @@
+$font-sizes-desktop: (
+	"sm": 0.75rem,
+	"base": 1rem,
+	"lg": 1.125rem,
+	"xl": 1.41rem,
+	"2xl": 1.6rem,
+	"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.625;
+	line-height: 1.7;
+	letter-spacing: -0.011em;
 
 	> * + * {
-		margin-top: 1rem;
+		margin-top: 0.75rem;
+		margin-bottom: 0;
 	}
 
 	> :first-child {
@@ -16,7 +36,7 @@
 
 	ul,
 	ol {
-		padding-left: 2.5rem;
+		padding-left: 2rem;
 	}
 
 	ul {
@@ -27,17 +47,27 @@
 		list-style: decimal;
 	}
 
-	li > * + * {
-		margin-top: 1rem;
+	li {
+		text-indent: 0.25rem;
+		padding-top: 1px;
+		padding-bottom: 1px;
+	}
+
+	li > ul, li > ol {
+		padding-left: 1.5rem;
 	}
 
-	> ul > * + *,
-	> ol > * + * {
-		margin-top: 1rem;
+	ul > li:first-child {
+		margin-top: 3px;
+	}
+
+	ul > * + *,
+	ol > * + * {
+		margin-top: 2px;
 	}
 
 	> 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;
@@ -55,60 +85,87 @@
 
 	b, strong {
 		color: $gray-800;
+		font-weight: 600;
 	}
 
 	h1, h2, h3, h4, h5, h6 {
 		color: $gray-900;
 	}
 
-	h1 + p {
-		margin-top: 0.75rem;
-		font-size: $font-size-base;
+	h2, h3, h4, h5, h6 {
+		font-weight: 600;
+	}
+
+	h1 {
+		font-size: map-get($font-sizes-mobile, '3xl');
+		line-height: 1.5;
+		letter-spacing: -0.021em;
+		font-weight: 700;
 
-		@include media-breakpoint-up(sm) {
-			margin-top: 1.25rem;
-			font-size: 1.125rem;
-		}
 		@include media-breakpoint-up(md) {
-			font-size: 1.25rem;
+			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-mobile, 'xl');
+			letter-spacing: -0.014em;
+			line-height: 1.4;
+
+			@include media-breakpoint-up(md) {
+				font-size: map-get($font-sizes-desktop, 'xl');
+				letter-spacing: -0.0175em;
+			}
 		}
 	}
 
 	h2 {
-		margin-bottom: 1rem;
-		margin-top: 3.5rem;
+		font-size: map-get($font-sizes-mobile, '2xl');
+		line-height: 1.56;
+		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 {
-		margin-top: 3rem;
-		margin-bottom: 1rem;
-		font-weight: 600;
-		line-height: 1.25;
-		font-size: $font-size-xl;
+		font-size: map-get($font-sizes-mobile, 'xl');
+		line-height: 1.56;
+		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-mobile, '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 {
-		margin-top: 2rem;
-		margin-bottom: 1rem;
-		font-size: $font-size-base;
+		font-size: map-get($font-sizes-mobile, 'base');
+		line-height: 1.5;
+		letter-spacing: -0.011em;
 		font-weight: 600;
-		line-height: 1.25;
+		margin-top: 2rem;
 	}
 
 	h6 {
-		margin-top: 1.5rem;
-		margin-bottom: 1rem;
-		font-size: $font-size-sm;
+		font-size: map-get($font-sizes-mobile, 'sm');
+		line-height: 1.35;
 		font-weight: 600;
-		line-height: 1.25;
+		text-transform: uppercase;
+		margin-top: 1.5rem;
 	}
 
 	tr > td,
@@ -124,6 +181,7 @@
 	.screenshot {
 		border: 1px solid $gray-400;
 		border-radius: 0.375rem;
+		margin-top: 0.5rem;
 	}
 
 	.screenshot + em {
@@ -138,4 +196,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;
+	}
 }

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"

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