Add right-to-left layout support

config.toml

@@ -82,6 +82,9 @@ full_width = false
 # center theme with default width.
 center = false
 
+# whether layout is right-to-left or not
+rtl = false
+
 # set a custom favicon. Must be placed in root of static/ directory...
 # favicon = ""
 

content/rtl/index.md

@@ -0,0 +1,37 @@
++++
+title="... and we got rtl, too!"
+description="wanna check out right-to-left layout support? head over here!"
+date=2019-08-05
+author="mamins1376"
+
+[taxonomies]
+tags = ["rtl", "test"]
+# categories = ["misc."]
++++
+
+<style type="text/css" rel="stylesheet">
+:root:not([dir=rtl]) .only-rtl {
+	display: none;
+}
+:root[dir=rtl] .only-ltr {
+	display: none;
+}
+</style>
+
+Well, you might want to use this theme in a right-to-left language too, We got
+you covered! below are two paragraphs with the same content, in two languages
+(the other being Persian).
+
+This is the <span class="only-ltr">left-to-right</span>
+<span class="only-rtl">right-to-left</span> version of the blog. Since it's not
+practical to have two layouts applied at the same time, you can
+<a class="only-ltr" href="#">check the other layout (right-to-left) out</a>
+<a class="only-rtl" href="#">check the other layout (left-to-right) out</a>
+to see for yourself.
+
+این قالب <span class="only-ltr">چپ به راست</span>
+<span class="only-rtl">راست به چپ</span> این تم هست. چون عملاً ممکن نیست که هر دو
+قالب هم‌زمان اعمال شده باشن، می‌تونید
+<a class="only-ltr" href="#">قالب دیگر رو (راست به چپ)</a>
+<a class="only-rtl" href="#">قالب دیگر رو (چپ به راست)</a>
+امتحان کنید تا خودتون ببینید.

sass/_main.scss

@@ -178,6 +178,7 @@ pre {
   overflow: auto;
   border-top: 1px solid rgba(255, 255, 255, .1);
   border-bottom: 1px solid rgba(255, 255, 255, .1);
+  direction: ltr;
 
   + pre {
     border-top: 0;
@@ -205,16 +206,17 @@ blockquote {
   padding: 25px;
 
   @media (max-width: $phone-max-width) {
-    padding-right: 0;
+    @include on-dir(padding-, right, left, 0);
   }
 
   &:before {
     content: '”';
     font-family: Georgia, serif;
     font-size: 3.875rem;
     position: absolute;
-    left: -40px;
     top: -20px;
+
+    @include left-or-right(-40px);
   }
 
   p:first-of-type {
@@ -233,8 +235,9 @@ blockquote {
     content: '>';
     display: block;
     position: absolute;
-    left: -25px;
     color: var(--accent);
+
+    @include left-or-right(-25px);
   }
 }
 
@@ -255,17 +258,18 @@ th {
 }
 
 ul, ol {
-  margin-left: 30px;
   padding: 0;
 
+  @include on-dir-auto(margin-, 30px);
+
   li {
       position: relative;
       margin-top: 5px;
       margin-bottom: 5px;
   }
 
   @media (max-width: $phone-max-width) {
-    margin-left: 20px;
+    @include on-dir-auto(margin-, 20px);
   }
 
   ul, ol {
@@ -284,7 +288,8 @@ ol ol {
   padding: 40px;
   max-width: 864px;
   min-height: 100vh;
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
+
+  @include on-dir-auto(border-, 1px solid rgba(255, 255, 255, 0.1));
 
   &.full,
   &.center {

sass/_post.scss

@@ -6,7 +6,6 @@
 
 .post {
   width: 100%;
-  text-align: left;
   margin: 20px auto;
   padding: 20px 0;
 
@@ -55,7 +54,7 @@
       width: 100%;
       border-bottom: var(--border);
     }
-    
+
     a {
       text-decoration: none;
     }
@@ -71,25 +70,20 @@
     li:before {
       content: '⦿';
       position: absolute;
-      left: -20px;
       color: var(--accent);
+
+      @include left-or-right(-20px);
     }
     ul {
 
       li:before {
         content: '■';
-        position: absolute;
-        left: -20px;
-        color: var(--accent);
       }
 
       ul {
 
         li:before {
           content: '►';
-          position: absolute;
-          left: -20px;
-          color: var(--accent);
         }
       }
     }

sass/_root.scss

@@ -0,0 +1,6 @@
+@import 'variables';
+
+:root {
+  --phoneWidth: (max-width: #{$phone-max-width + 1px});
+  --tabletWidth: (max-width: #{$tablet-max-width + 1px});
+}

sass/_variables.scss

@@ -1,9 +1,30 @@
-:root {
-  // *NOTE*:
-  // ------------------------------------------------
-  //Keep the same as the values in variables.scss!!!!!
-  --phoneWidth: (max-width: 684px);
-  --tabletWidth: (max-width: 900px);
+@mixin if-rtl {
+  @at-root :root[dir=rtl] & {
+    @content;
+  }
+}
+
+@mixin if-not-rtl {
+  @at-root :root:not([dir=rtl]) & {
+    @content;
+  }
+}
+
+@mixin on-dir($prop, $ltr, $rtl, $value) {
+  @include if-rtl {
+    #{$prop}#{$rtl}: $value;
+  }
+  @include if-not-rtl {
+    #{$prop}#{$ltr}: $value;
+  }
+}
+
+@mixin on-dir-auto($prop, $value) {
+  @include on-dir($prop, left, right, $value);
+}
+
+@mixin left-or-right($value) {
+  @include on-dir-auto("", $value);
 }
 
 $phone-max-width: 683px;

sass/style.scss

@@ -1,3 +1,4 @@
+@import 'root';
 @import 'buttons';
 @import 'font';
 @import 'header';

templates/index.html

@@ -13,7 +13,7 @@
 {% import "macros/comments.html" as comments -%}
 
 <!DOCTYPE html>
-<html lang="{{ lang }}">
+<html lang="{{ lang }}"{% if config.extra.rtl %} dir="rtl"{% endif %}>
     <head>
         {%- block title -%}
             <title>{{ config.title }}</title>

templates/macros/arrow.html

@@ -0,0 +1,4 @@
+{#- TODO: use a variable for dir-based arrow when Keats/tera#573 closed -#}
+{#- TODO: maybe we could instead export namespaced variables? like arrow::next -#}
+{% macro prev() %}{% if config.extra.rtl %}→{% else %}←{%- endif -%}{%- endmacro prev -%}
+{% macro next() %}{% if config.extra.rtl %}←{% else %}→{%- endif -%}{%- endmacro next -%}

templates/macros/lists.html

@@ -1,8 +1,10 @@
+{% import "macros/arrow.html" as arrow -%}
+
 {% macro list_pages() %}
 <section class="posts">
 
     {%- for page in paginator.pages -%}
-    
+
     <div class="post on-list">
         <header>
             <h1 class="post-title">
@@ -12,7 +14,7 @@ <h1 class="post-title">
 
 
         {{ posts::meta(page=page, author=config.extra.show_author) }}
-        
+
         {#-                NOTE              -#}
         {#- --------------------------------  -#}
         {#- Skipping the Cover page implementation. Not included/covered for now. -#}
@@ -27,7 +29,7 @@ <h1 class="post-title">
         </div>
         {% if page.description or page.summary -%}
         <div>
-            <a class="read-more button" href="{{ page.permalink }}">{{ config.extra.read_more }} →</a>
+            <a class="read-more button" href="{{ page.permalink }}">{{ config.extra.read_more }} {{ arrow::next() }}</a>
         </div>
         {% endif -%}
     </div>

templates/macros/pagination.html

@@ -1,10 +1,12 @@
+{% import "macros/arrow.html" as arrow -%}
+
 {% macro paginate() %}
     <div class="pagination">
         <div class="pagination__buttons">
             {% if paginator.previous -%}
                 <span class="button previous">
                     <a href="{{ paginator.previous }}">
-                        <span class="button__icon">←</span>
+                        <span class="button__icon">{{ arrow::prev() }}</span>
                         <span class="button__text">newer</span>
                     </a>
                 </span>
@@ -15,7 +17,7 @@
                 <span class="button next">
                     <a href="{{ paginator.next }}">
                         <span class="button__text">older</span>
-                        <span class="button__icon">→</span>
+                        <span class="button__icon">{{ arrow::next() }}</span>
                     </a>
                 </span>
             {% endif-%}