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:
parent
a41f09bb99
commit
a153a7cc6f
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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" . }}
|
||||||
|
|
Loading…
Reference in New Issue