Add RTL support for multilingual mode (#47)

Usage: 
in site config:
languages:
  ar:
    languagedirection: rtl
    title: مدونتي
    weight: 2

* ref: https://gohugo.io/content-management/multilingual/#configure-languages
This commit is contained in:
Mehdy Khoshnoody 2020-10-19 12:47:23 +03:30 committed by GitHub
parent a41f09bb99
commit a153a7cc6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 34 additions and 22 deletions

View File

@ -11,8 +11,8 @@
} }
.footer span { .footer span {
margin-left: 1px; margin-inline-start: 1px;
margin-right: 1px; margin-inline-end: 1px;
} }
.footer a { .footer a {

View File

@ -5,8 +5,8 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
max-width: calc(var(--nav-width) + var(--gap) * 2); max-width: calc(var(--nav-width) + var(--gap) * 2);
margin-left: auto; margin-inline-start: auto;
margin-right: auto; margin-inline-end: auto;
} }
.nav a { .nav a {
@ -31,7 +31,7 @@
pointer-events: none; pointer-events: none;
transform: translate(0, -10%); transform: translate(0, -10%);
border-radius: 6px; border-radius: 6px;
margin-right: 8px; margin-inline-end: 8px;
} }
.theme-toggle svg{ .theme-toggle svg{
@ -56,7 +56,7 @@ body:not(.dark) #sun {
} }
.menu li+li { .menu li+li {
margin-left: var(--gap); margin-inline-start: var(--gap);
} }
.menu a { .menu a {

View File

@ -36,7 +36,7 @@
} }
.pagination .next { .pagination .next {
margin-left: auto; margin-inline-start: auto;
} }
.social-icons { .social-icons {
@ -44,10 +44,22 @@
} }
.social-icons a:not(:last-of-type) { .social-icons a:not(:last-of-type) {
margin-right: 12px; margin-inline-end: 12px;
} }
.social-icons a svg { .social-icons a svg {
height: 26px; height: 26px;
width: 26px; width: 26px;
} }
.direction-rtl {
direction: rtl;
}
.direction-ltr {
direction: ltr;
}
code {
direction: ltr;
}

View File

@ -85,7 +85,7 @@
.post-content ul, .post-content ul,
.post-content ol { .post-content ol {
padding-left: 20px; padding-inline-start: 20px;
} }
.post-content li { .post-content li {
@ -109,8 +109,8 @@
.post-content dd { .post-content dd {
width: 75%; width: 75%;
margin-left: 0; margin-inline-start: 0;
padding-left: 10px; padding-inline-start: 10px;
} }
.post-content dt~dt, .post-content dt~dt,
@ -147,11 +147,11 @@
} }
.post-content li>.highlight { .post-content li>.highlight {
margin-right: 0 margin-inline-end: 0
} }
.post-content ul pre { .post-content ul pre {
margin-left: calc(var(--gap) * -2); margin-inline-start: calc(var(--gap) * -2);
} }
.post-content .highlight pre { .post-content .highlight pre {
@ -168,7 +168,7 @@
} }
.post-content .highlighttable td .linenodiv { .post-content .highlighttable td .linenodiv {
padding-right: 0 !important; padding-inline-end: 0 !important;
} }
.post-content .highlighttable td .linenodiv pre, .post-content .highlighttable td .linenodiv pre,
@ -236,7 +236,7 @@
.toc details summary { .toc details summary {
cursor: zoom-in; cursor: zoom-in;
margin-left: 20px; margin-inline-start: 20px;
} }
.toc details[open] summary { .toc details[open] summary {
@ -254,7 +254,7 @@
} }
.toc li ul { .toc li ul {
margin-left: var(--gap); margin-inline-start: var(--gap);
} }
.post-footer { .post-footer {
@ -263,14 +263,14 @@
.post-tags li { .post-tags li {
display: inline-block; display: inline-block;
margin-right: 3px; margin-inline-end: 3px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.post-tags a { .post-tags a {
display: block; display: block;
padding-left: 14px; padding-inline-start: 14px;
padding-right: 14px; padding-inline-end: 14px;
color: var(--secondary); color: var(--secondary);
font-size: 14px; font-size: 14px;
line-height: 34px; line-height: 34px;
@ -297,7 +297,7 @@
} }
.share-buttons a:not(:last-of-type) { .share-buttons a:not(:last-of-type) {
margin-right: 12px; margin-inline-end: 12px;
} }
.share-buttons a svg { .share-buttons a svg {

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ .Site.Language }}"> <html lang="{{ .Site.Language }}" class="direction-{{ .Language.LanguageDirection | default "ltr" }}">
<head> <head>
{{- partial "head.html" . }} {{- partial "head.html" . }}