From a153a7cc6fe6498029105f8af73587291d7276b0 Mon Sep 17 00:00:00 2001 From: Mehdy Khoshnoody Date: Mon, 19 Oct 2020 12:47:23 +0330 Subject: [PATCH] Add RTL support for multilingual mode (#47) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Usage: in site config: languages: ar: languagedirection: rtl title: مدونتي weight: 2 * ref: https://gohugo.io/content-management/multilingual/#configure-languages --- assets/css/footer.css | 4 ++-- assets/css/header.css | 8 ++++---- assets/css/main.css | 18 +++++++++++++++--- assets/css/post-single.css | 24 ++++++++++++------------ layouts/_default/baseof.html | 2 +- 5 files changed, 34 insertions(+), 22 deletions(-) diff --git a/assets/css/footer.css b/assets/css/footer.css index 4fd3ace..cf7197f 100644 --- a/assets/css/footer.css +++ b/assets/css/footer.css @@ -11,8 +11,8 @@ } .footer span { - margin-left: 1px; - margin-right: 1px; + margin-inline-start: 1px; + margin-inline-end: 1px; } .footer a { diff --git a/assets/css/header.css b/assets/css/header.css index e5061d4..ef68ef4 100644 --- a/assets/css/header.css +++ b/assets/css/header.css @@ -5,8 +5,8 @@ flex-wrap: wrap; justify-content: space-between; max-width: calc(var(--nav-width) + var(--gap) * 2); - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; } .nav a { @@ -31,7 +31,7 @@ pointer-events: none; transform: translate(0, -10%); border-radius: 6px; - margin-right: 8px; + margin-inline-end: 8px; } .theme-toggle svg{ @@ -56,7 +56,7 @@ body:not(.dark) #sun { } .menu li+li { - margin-left: var(--gap); + margin-inline-start: var(--gap); } .menu a { diff --git a/assets/css/main.css b/assets/css/main.css index 8b6c492..68f8a2f 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -36,7 +36,7 @@ } .pagination .next { - margin-left: auto; + margin-inline-start: auto; } .social-icons { @@ -44,10 +44,22 @@ } .social-icons a:not(:last-of-type) { - margin-right: 12px; + margin-inline-end: 12px; } .social-icons a svg { height: 26px; width: 26px; -} \ No newline at end of file +} + +.direction-rtl { + direction: rtl; +} + +.direction-ltr { + direction: ltr; +} + +code { + direction: ltr; +} diff --git a/assets/css/post-single.css b/assets/css/post-single.css index e472704..57269dd 100644 --- a/assets/css/post-single.css +++ b/assets/css/post-single.css @@ -85,7 +85,7 @@ .post-content ul, .post-content ol { - padding-left: 20px; + padding-inline-start: 20px; } .post-content li { @@ -109,8 +109,8 @@ .post-content dd { width: 75%; - margin-left: 0; - padding-left: 10px; + margin-inline-start: 0; + padding-inline-start: 10px; } .post-content dt~dt, @@ -147,11 +147,11 @@ } .post-content li>.highlight { - margin-right: 0 + margin-inline-end: 0 } .post-content ul pre { - margin-left: calc(var(--gap) * -2); + margin-inline-start: calc(var(--gap) * -2); } .post-content .highlight pre { @@ -168,7 +168,7 @@ } .post-content .highlighttable td .linenodiv { - padding-right: 0 !important; + padding-inline-end: 0 !important; } .post-content .highlighttable td .linenodiv pre, @@ -236,7 +236,7 @@ .toc details summary { cursor: zoom-in; - margin-left: 20px; + margin-inline-start: 20px; } .toc details[open] summary { @@ -254,7 +254,7 @@ } .toc li ul { - margin-left: var(--gap); + margin-inline-start: var(--gap); } .post-footer { @@ -263,14 +263,14 @@ .post-tags li { display: inline-block; - margin-right: 3px; + margin-inline-end: 3px; margin-bottom: 5px; } .post-tags a { display: block; - padding-left: 14px; - padding-right: 14px; + padding-inline-start: 14px; + padding-inline-end: 14px; color: var(--secondary); font-size: 14px; line-height: 34px; @@ -297,7 +297,7 @@ } .share-buttons a:not(:last-of-type) { - margin-right: 12px; + margin-inline-end: 12px; } .share-buttons a svg { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 6deb9a9..cd99982 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{- partial "head.html" . }}