Add RTL Support (#4886)
Signed-off-by: Hamed Faramarzi <hamed.faramarzi@gmail.com> Co-authored-by: Hamed Faramarzi <hamed.faramarzi@gmail.com> Co-authored-by: iBug <git@ibugone.com>
This commit is contained in:
Yash
GitHub
parent
ef5018ee6f
commit
621529aaf2
@ -16,6 +16,7 @@ minimal_mistakes_skin : "default" # "air", "aqua", "contrast", "dark", "dirt"
|
||||
|
||||
# Site Settings
|
||||
locale : "en-US"
|
||||
rtl : # true, false (default) # turns direction of the page into right to left for RTL languages
|
||||
title : "Site Title"
|
||||
title_separator : "-"
|
||||
subtitle : # site tagline that appears below site title in masthead
|
||||
|
||||
@ -1400,7 +1400,7 @@ fa: &DEFAULT_FA
|
||||
toc_label : "در این صفحه"
|
||||
ext_link_label : "لینک مستقیم"
|
||||
less_than : " "
|
||||
minute_read : "(طول مطالعه (دقیقه"
|
||||
minute_read : "دقیقه، طول مطالعه"
|
||||
share_on_label : "اشتراک گذاری در"
|
||||
meta_label :
|
||||
tags_label : "تگ ها: "
|
||||
@ -1427,9 +1427,9 @@ fa: &DEFAULT_FA
|
||||
comment_btn_submitted : "ارسال شد"
|
||||
comment_success_msg : ".باتشکر از ارسال دیدگاه! پس از تأیید، این دیدگاه در سایت نشان داده خواهد شد"
|
||||
comment_error_msg : ".متاسفانه در ارسال شما خطایی بود. لطفا مطمئن شوید تمام فیلدهای مورد نیاز تکمیل شده و دوباره امتحان کنید"
|
||||
loading_label : "...بارگذاری"
|
||||
loading_label : "بارگذاری..."
|
||||
search_label_text :
|
||||
search_placeholder_text : "...عبارت جستجوی خود را وارد کنید"
|
||||
search_placeholder_text : "عبارت جستجوی خود را وارد کنید..."
|
||||
search_algolia_no_results :
|
||||
results_found : "نتایج"
|
||||
back_to_top : "بازگشت به بالا"
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
{% include head/custom.html %}
|
||||
</head>
|
||||
|
||||
<body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}">
|
||||
<body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}" dir="{% if site.rtl %}rtl{% else %}ltr{% endif %}">
|
||||
{% include_cached skip-links.html %}
|
||||
{% include_cached masthead.html %}
|
||||
|
||||
|
||||
@ -10,11 +10,21 @@
|
||||
float: right;
|
||||
width: calc(100% - #{$right-sidebar-width-narrow});
|
||||
padding-right: $right-sidebar-width-narrow;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-right: 0;
|
||||
padding-left: $right-sidebar-width-narrow;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: calc(100% - #{$right-sidebar-width});
|
||||
padding-right: $right-sidebar-width;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-right: 0;
|
||||
padding-left: $right-sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -113,6 +113,12 @@ blockquote {
|
||||
font-style: italic;
|
||||
border-left: 0.25em solid $primary-color;
|
||||
|
||||
[dir=rtl] & {
|
||||
border-left: none;
|
||||
border-right: .25em solid $primary-color;
|
||||
margin: 2em 0 2em 1em;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-style: italic;
|
||||
|
||||
|
||||
@ -194,10 +194,20 @@
|
||||
&.site-logo {
|
||||
margin-left: 0;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
[dir=rtl] & {
|
||||
margin-right: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.site-title {
|
||||
margin-left: 0;
|
||||
|
||||
[dir=rtl] & {
|
||||
margin-left: 1rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -553,21 +563,46 @@
|
||||
li ul > li a {
|
||||
padding-left: 1.25rem;
|
||||
font-weight: normal;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-left: 0;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
li ul li ul > li a {
|
||||
padding-left: 1.75rem;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-left: 0;
|
||||
padding-right: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
li ul li ul li ul > li a {
|
||||
padding-left: 2.25rem;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-left: 0;
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
li ul li ul li ul li ul > li a {
|
||||
padding-left: 2.75rem;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-left: 0;
|
||||
padding-right: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
li ul li ul li ul li ul li ul > li a {
|
||||
padding-left: 3.25rem
|
||||
padding-left: 3.25rem;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-left: 0;
|
||||
padding-right: 3.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,11 +40,21 @@ body {
|
||||
float: right;
|
||||
width: calc(100% - #{$right-sidebar-width-narrow});
|
||||
padding-right: $right-sidebar-width-narrow;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-right: 0;
|
||||
padding-left: $right-sidebar-width-narrow;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: calc(100% - #{$right-sidebar-width});
|
||||
padding-right: $right-sidebar-width;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-right: 0;
|
||||
padding-left: $right-sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.page__inner-wrap {
|
||||
@ -103,6 +113,11 @@ body {
|
||||
-moz-transition: opacity 0.2s ease-in-out 0.1s;
|
||||
-o-transition: opacity 0.2s ease-in-out 0.1s;
|
||||
transition: opacity 0.2s ease-in-out 0.1s;
|
||||
|
||||
[dir=rtl] & {
|
||||
left: 0;
|
||||
right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .header-link {
|
||||
@ -335,6 +350,11 @@ body {
|
||||
|
||||
strong {
|
||||
margin-right: 10px;
|
||||
|
||||
[dir=rtl] & {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -347,6 +367,11 @@ body {
|
||||
border: 1px solid mix(#000, $border-color, 25%);
|
||||
border-radius: $border-radius;
|
||||
|
||||
[dir=rtl] & {
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $link-color-hover;
|
||||
@ -530,9 +555,17 @@ body {
|
||||
padding-top: 1em;
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
[dir=rtl] & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@include breakpoint($large) {
|
||||
float: right;
|
||||
width: calc(100% - #{$right-sidebar-width-narrow});
|
||||
|
||||
[dir=rtl] & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
|
||||
@ -23,6 +23,10 @@
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
[dir=rtl] & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -83,6 +87,15 @@
|
||||
padding-left: 1em;
|
||||
z-index: 10;
|
||||
|
||||
[dir=rtl] & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: -1 * $right-sidebar-width-narrow;
|
||||
padding-left: 0;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
@include clearfix();
|
||||
position: -webkit-sticky;
|
||||
@ -90,6 +103,10 @@
|
||||
top: 2em;
|
||||
float: right;
|
||||
|
||||
[dir=rtl] & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.toc {
|
||||
.toc__menu {
|
||||
overflow-y: auto;
|
||||
@ -102,6 +119,11 @@
|
||||
@include breakpoint($x-large) {
|
||||
width: $right-sidebar-width;
|
||||
margin-right: -1 * $right-sidebar-width;
|
||||
|
||||
[dir=rtl] & {
|
||||
margin-right: 0;
|
||||
margin-left: -1 * $right-sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,6 +225,11 @@
|
||||
.author__urls {
|
||||
span.label {
|
||||
padding-left: 5px;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-left: 0;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -318,6 +345,11 @@
|
||||
font-size: $type-size-5;
|
||||
text-decoration: none;
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-right: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -13,6 +13,10 @@ figure.highlight {
|
||||
line-height: 1.8;
|
||||
border-radius: $border-radius;
|
||||
|
||||
[dir=rtl] & {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
> pre,
|
||||
pre.highlight {
|
||||
margin: 0;
|
||||
|
||||
@ -117,6 +117,11 @@ body:hover .visually-hidden button {
|
||||
.task-list-item-checkbox {
|
||||
margin-right: 0.5em;
|
||||
opacity: 1;
|
||||
|
||||
[dir=rtl] & {
|
||||
margin-left: .5em;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -183,6 +188,11 @@ body:hover .visually-hidden button {
|
||||
.full {
|
||||
@include breakpoint($large) {
|
||||
margin-right: -1 * span(2.5 of 12) !important;
|
||||
|
||||
[dir=rtl] & {
|
||||
margin-right: 0 !important;
|
||||
margin-left: -1 * span(2.5 of 12) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -215,6 +215,12 @@ By default your site title is used in the masthead. You can override this text b
|
||||
masthead_title: "My Custom Title"
|
||||
```
|
||||
|
||||
### Site RTL direction
|
||||
|
||||
`site.rtl` is used to turn the direction of the page into right to left. This option can be used for RTL languages (like Arabic, Persian, etc)
|
||||
|
||||
_Example:_ `rtl: true` sets the direction of the page to right to left. By default this option is `rtl: false`.
|
||||
|
||||
### Breadcrumb navigation (beta)
|
||||
|
||||
Enable breadcrumb links to help visitors better navigate deep sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user