From 42d75aefe4529d94480d1cab4df1e5f725e4d072 Mon Sep 17 00:00:00 2001
From: Khosrow Moossavi <khos2ow@gmail.com>
Date: Sat, 01 Sep 2018 12:18:10 +0000
Subject: [PATCH] Enable RTL layout by providing 'rtl = true' in the config (#72)
---
assets/scss/_colors.scss | 6 +++
exampleSite/config.toml | 2 +
layouts/_default/baseof.html | 14 ++++++
assets/scss/coder.scss | 8 ---
assets/scss/coder-rtl.scss | 4 ++
assets/scss/_content_rtl.scss | 16 ++++++++
assets/scss/_base_rtl.scss | 23 +++++++++++
assets/scss/_content.scss | 2 -
assets/scss/_navigation_rtl.scss | 13 ++++++
README.md | 3 +
10 files changed, 81 insertions(+), 10 deletions(-)
diff --git a/README.md b/README.md
index 8d94ad7..08e0078 100644
--- a/README.md
+++ b/README.md
@@ -53,6 +53,9 @@
hideCredits = false
hideCopyright = false
+ # to switch bewteen LTR and RTL layout
+ rtl = false
+
# Custom CSS
custom_css = []
diff --git a/assets/scss/_base_rtl.scss b/assets/scss/_base_rtl.scss
new file mode 100644
index 0000000..a7305f3
--- /dev/null
+++ b/assets/scss/_base_rtl.scss
@@ -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;
+ }
+}
diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
new file mode 100644
index 0000000..3e2eeb6
--- /dev/null
+++ b/assets/scss/_colors.scss
@@ -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;
diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index 17c1d9b..12f0a24 100644
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -46,8 +46,6 @@
width: 20.0rem;
text-align: right;
margin-right: 3.0rem;
- text-align: right;
- margin-right: 3.0rem;
@media only screen and (max-device-width : 768px) {
display: block;
text-align: left;
diff --git a/assets/scss/_content_rtl.scss b/assets/scss/_content_rtl.scss
new file mode 100644
index 0000000..f7c70ef
--- /dev/null
+++ b/assets/scss/_content_rtl.scss
@@ -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;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/assets/scss/_navigation_rtl.scss b/assets/scss/_navigation_rtl.scss
new file mode 100644
index 0000000..0393925
--- /dev/null
+++ b/assets/scss/_navigation_rtl.scss
@@ -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;
+ }
+}
diff --git a/assets/scss/coder-rtl.scss b/assets/scss/coder-rtl.scss
new file mode 100644
index 0000000..0881620
--- /dev/null
+++ b/assets/scss/coder-rtl.scss
@@ -0,0 +1,4 @@
+@import "_colors";
+@import "_base_rtl";
+@import "_content_rtl";
+@import "_navigation_rtl";
diff --git a/assets/scss/coder.scss b/assets/scss/coder.scss
index 0bdc158..938c8ca 100644
--- a/assets/scss/coder.scss
+++ b/assets/scss/coder.scss
@@ -1,10 +1,4 @@
-// Colors
-$bg-color: #fefefe !default;
-$fg-color: #323232 !default;
-$alt-bg-color: #dcdcdc !default;
-$alt-fg-color: #000 !default;
-$link-color: #3366CC !default;
-
+@import "_colors";
@import "_base";
@import "_content";
@import "_navigation";
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index cf16b75..3169c6a 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -25,6 +25,8 @@
hideCredits = false
hideCopyright = false
+ rtl = false
+
# Custom CSS
custom_css = []
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 32674d6..3679df1 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -28,6 +28,18 @@
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
{{ 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 }}
<link rel="stylesheet" href="{{ . | absURL }}">
{{ end }}
@@ -43,7 +55,7 @@
{{ .Hugo.Generator }}
</head>
- <body>
+ <body class="{{ if .Site.Params.rtl }}rtl{{ end }}">
<main class="wrapper">
{{ partial "header.html" . }}
--
Gitblit v1.10.0