Add right-to-left layout support

ejmg · Jan 23, 2021 · 8f8c8b7 · 8f8c8b7
1 parent 824dd03
commit 8f8c8b7
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 24 deletions.
diff --git a/config.toml b/config.toml
@@ -79,6 +79,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 = ""
 

diff --git a/sass/_main.scss b/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-auto(padding-, 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 {

diff --git a/sass/_post.scss b/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;
     }
@@ -110,25 +109,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);
         }
       }
     }

diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -1,3 +1,32 @@
+@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);
+}
+
 :root {
   // *NOTE*:
   // ------------------------------------------------

diff --git a/templates/index.html b/templates/index.html
@@ -12,7 +12,7 @@
 {% import "macros/extended_footer.html" as extended_footer -%}
 
 <!DOCTYPE html>
-<html lang="{{ config.default_language }}">
+<html lang="{{ config.default_language }}"{% if config.extra.rtl %} dir="rtl"{% endif %}>
     <head>
         {%- block title -%}
             <title>{{ config.title }}</title>

diff --git a/templates/macros/arrow.html b/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 -%}
diff --git a/templates/macros/lists.html b/templates/macros/lists.html
@@ -1,16 +1,17 @@
+{% import "macros/arrow.html" as arrow -%}
+
 {% macro list_pages() %}
 <div class="posts">
-    
+
     {%- for page in paginator.pages -%}
-    
+
     <div class="post on-list">
         <h1 class="post-title">
             <a href="{{ page.permalink }}">{{ page.title }}</a>
         </h1>
-
-
+
         {{ posts::meta(page=page, author=config.extra.show_author) }}
-        
+
         {#-                NOTE              -#}
         {#- --------------------------------  -#}
         {#- Skipping the Cover page implementation. Not included/covered for now. -#}
@@ -23,7 +24,7 @@ <h1 class="post-title">
         </div>
         {% if page.description -%}
         <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>

diff --git a/templates/macros/pagination.html b/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-%}