Enable RTL layout by providing 'rtl = true' in the config (#72)

This commit is contained in:
Khosrow Moossavi 2018-09-01 08:18:10 -04:00 committed by Luiz F. A. de Prá
parent 333e6358c8
commit 42d75aefe4
10 changed files with 81 additions and 10 deletions

View File

@ -53,6 +53,9 @@ disqusShortname = "yourdiscussshortname" # Enable or disable Disqus.
hideCredits = false hideCredits = false
hideCopyright = false hideCopyright = false
# to switch bewteen LTR and RTL layout
rtl = false
# Custom CSS # Custom CSS
custom_css = [] custom_css = []

View File

@ -0,0 +1,23 @@
body.rtl {
direction: rtl;
pre {
direction: ltr;
}
blockquote {
border-left: none;
border-right: 2px solid $alt-bg-color;
padding-left: 0;
padding-right: 1.6rem;
}
table tr td:first-child,
table tr th:first-child {
border-right: 0;
}
table tr td:last-child,
table tr th:last-child {
border-left: 0;
}
}

6
assets/scss/_colors.scss Normal file
View File

@ -0,0 +1,6 @@
// Colors
$bg-color: #fefefe !default;
$fg-color: #323232 !default;
$alt-bg-color: #dcdcdc !default;
$alt-fg-color: #000 !default;
$link-color: #3366CC !default;

View File

@ -46,8 +46,6 @@
width: 20.0rem; width: 20.0rem;
text-align: right; text-align: right;
margin-right: 3.0rem; margin-right: 3.0rem;
text-align: right;
margin-right: 3.0rem;
@media only screen and (max-device-width : 768px) { @media only screen and (max-device-width : 768px) {
display: block; display: block;
text-align: left; text-align: left;

View File

@ -0,0 +1,16 @@
body.rtl {
.list {
ul {
li {
span {
text-align: left;
margin-left: 3.0rem;
margin-right: 0;
@media only screen and (max-device-width : 768px) {
text-align: right;
}
}
}
}
}
}

View File

@ -0,0 +1,13 @@
body.rtl {
.navigation-list {
float: left;
@media only screen and (max-device-width : 768px) {
left: 0;
right: auto;
}
}
.navigation-item {
float: right;
}
}

View File

@ -0,0 +1,4 @@
@import "_colors";
@import "_base_rtl";
@import "_content_rtl";
@import "_navigation_rtl";

View File

@ -1,10 +1,4 @@
// Colors @import "_colors";
$bg-color: #fefefe !default;
$fg-color: #323232 !default;
$alt-bg-color: #dcdcdc !default;
$alt-fg-color: #000 !default;
$link-color: #3366CC !default;
@import "_base"; @import "_base";
@import "_content"; @import "_content";
@import "_navigation"; @import "_navigation";

View File

@ -25,6 +25,8 @@ disqusShortname = "yourdiscussshortname"
hideCredits = false hideCredits = false
hideCopyright = false hideCopyright = false
rtl = false
# Custom CSS # Custom CSS
custom_css = [] custom_css = []

View File

@ -28,6 +28,18 @@
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen"> <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
{{ end }} {{ end }}
{{ if .Site.Params.rtl }}
{{ if .Site.IsServer }}
{{ $cssOpts := (dict "targetPath" "css/coder-rtl.css" "enableSourceMap" true ) }}
{{ $styles := resources.Get "scss/coder-rtl.scss" | resources.ExecuteAsTemplate "style.coder-rtl.css" . | toCSS $cssOpts }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
{{ else }}
{{ $cssOpts := (dict "targetPath" "css/coder-rtl.css" ) }}
{{ $styles := resources.Get "scss/coder-rtl.scss" | resources.ExecuteAsTemplate "style.coder-rtl.css" . | toCSS $cssOpts | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
{{ end }}
{{ end }}
{{ range .Site.Params.custom_css }} {{ range .Site.Params.custom_css }}
<link rel="stylesheet" href="{{ . | absURL }}"> <link rel="stylesheet" href="{{ . | absURL }}">
{{ end }} {{ end }}
@ -43,7 +55,7 @@
{{ .Hugo.Generator }} {{ .Hugo.Generator }}
</head> </head>
<body> <body class="{{ if .Site.Params.rtl }}rtl{{ end }}">
<main class="wrapper"> <main class="wrapper">
{{ partial "header.html" . }} {{ partial "header.html" . }}