Merge pull request #12692 from netchampfaris/typography-markdown
fix: Typography for markdown content
This commit is contained in:
mergify[bot]
GitHub
commit
fb354003e7
4 changed files with 118 additions and 103 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
> ul > * + *,
|
||||
> ol > * + * {
|
||||
margin-top: 1rem;
|
||||
li > ul, li > ol {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue