Adding RTL support (probberechts#89)

cyjme · Apr 15, 2018 · b017371 · b017371
1 parent 9fffec8
commit b017371
Show file tree

Hide file tree

Showing 18 changed files with 87 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -184,6 +184,14 @@ Otherwise, you can follow the steps below (E.g., to add a Japanese (ja) translat
 
 **Note: Cactus does not support multi-language sites.**
 
+### RTL support
+This theme support RTL languages for Persian and Arabic language.
+If you would like to use RTL layout, change `direction` attribute in `_config.yml` to `rtl`.
+Note that this also will change the font to [Vazir](https://github.com/rastikerdar/vazir-font), wich is a Persian font.
+
+```
+direction: rtl
+```
 
 ### RSS
 

diff --git a/_config.yml b/_config.yml
@@ -7,6 +7,8 @@
 # page within your website.
 projects_url: http://github.com/probberechts
 
+# Set the page direction to RTL or LTR. default is LTR. (if you set it 'rtl', the 'vazir' font will be loaded.)
+direction: ltr
 # Configure the navigation menu.
 # A pair 'Key: url' will result in a link to 'url' with the name 'Key' in the
 # navigation menu. Optionally, you can add translations for the 'Key' in

diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -39,6 +39,10 @@
     <title><%= page.title ? page.title : config.title %></title>
     <!-- styles -->
     <%- css('css/style') %>
+    <!-- persian styles -->
+    <% if (theme.direction) { %>
+      <%- css('css/rtl') %>
+    <% } %>
     <!-- rss -->
     <% if (theme.rss === '' && config.feed && config.feed.path) { %>
       <% theme.rss = config.feed.path %>

diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html<%= config.language ? " lang=" + config.language.substring(0, 2) : ""%>>
 <%- partial('_partial/head') %>
-<body class="max-width mx-auto px3">
+<body class="max-width mx-auto px3 <%- theme.direction -%>">
     <% if (is_post()) { %>
       <%- partial('_partial/post/actions_desktop') %>
     <% } %>

diff --git a/source/css/_partial/index.styl b/source/css/_partial/index.styl
@@ -27,4 +27,4 @@
   list-style: none
 
   .project-item
-    margin-bottom: 5px
+    margin-bottom: 5px
diff --git a/source/css/rtl.styl b/source/css/rtl.styl
@@ -0,0 +1,71 @@
+@font-face 
+  font-family: Vazir
+  src: url('../lib/vazir-font/Vazir.eot')
+  src: url('../lib/vazir-font/Vazir.eot?#iefix') format('embedded-opentype'),
+       url('../lib/vazir-font/Vazir.woff2') format('woff2'),
+       url('../lib/vazir-font/Vazir.woff') format('woff'),
+       url('../lib/vazir-font/Vazir.ttf') format('truetype')
+  font-weight: normal
+
+@font-face 
+  font-family: Vazir;
+  src: url('../lib/vazir-font/Vazir-Bold.eot');
+  src: url('../lib/vazir-font/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
+       url('../lib/vazir-font/Vazir-Bold.woff2') format('woff2'),
+       url('../lib/vazir-font/Vazir-Bold.woff') format('woff'),
+       url('../lib/vazir-font/Vazir-Bold.ttf') format('truetype')
+  font-weight: bold
+
+@font-face 
+  font-family: Vazir;
+  src: url('../lib/vazir-font/Vazir-Light.eot')
+  src: url('../lib/vazir-font/Vazir-Light.eot?#iefix') format('embedded-opentype'),
+       url('../lib/vazir-font/Vazir-Light.woff2') format('woff2'),
+       url('../lib/vazir-font/Vazir-Light.woff') format('woff'),
+       url('../lib/vazir-font/Vazir-Light.ttf') format('truetype')
+  font-weight: 300
+
+.rtl
+  font-family: vazir, sans-serif
+  direction: rtl
+
+  #nav
+    li
+      padding-left: 15px
+      border-left: 1px dotted $color-accent-1
+      border-right: 0px
+      margin-right: 0px !important
+      border-right: none !important
+
+    li:last-child
+      margin-right: 15px !important;
+      border-left: 0 !important;
+
+  #header
+    #logo 
+      float: right
+
+  #footer
+    li
+      padding-left: 15px
+      border-left: 1px dotted $color-border
+      margin-right: 0px
+      border-right: 0px
+
+    li:last-child
+      margin-right: 15px !important;
+      border-left: 0 !important;
+
+    #logo 
+      float: right
+
+  article
+    .content
+      h2:before
+        right: -1rem;
+
+@media (min-width: 480px)
+  .post-list
+    .post-item
+      .meta
+        text-align: right
diff --git a/source/lib/vazir-font/Vazir-Bold.eot b/source/lib/vazir-font/Vazir-Bold.eot
diff --git a/source/lib/vazir-font/Vazir-Bold.ttf b/source/lib/vazir-font/Vazir-Bold.ttf
diff --git a/source/lib/vazir-font/Vazir-Bold.woff b/source/lib/vazir-font/Vazir-Bold.woff
diff --git a/source/lib/vazir-font/Vazir-Bold.woff2 b/source/lib/vazir-font/Vazir-Bold.woff2
diff --git a/source/lib/vazir-font/Vazir-Light.eot b/source/lib/vazir-font/Vazir-Light.eot
diff --git a/source/lib/vazir-font/Vazir-Light.ttf b/source/lib/vazir-font/Vazir-Light.ttf
diff --git a/source/lib/vazir-font/Vazir-Light.woff b/source/lib/vazir-font/Vazir-Light.woff
diff --git a/source/lib/vazir-font/Vazir-Light.woff2 b/source/lib/vazir-font/Vazir-Light.woff2
diff --git a/source/lib/vazir-font/Vazir.eot b/source/lib/vazir-font/Vazir.eot
diff --git a/source/lib/vazir-font/Vazir.ttf b/source/lib/vazir-font/Vazir.ttf
diff --git a/source/lib/vazir-font/Vazir.woff b/source/lib/vazir-font/Vazir.woff
diff --git a/source/lib/vazir-font/Vazir.woff2 b/source/lib/vazir-font/Vazir.woff2