Skip to content

Commit

Permalink
Right-to-Left support (addresses #51) (#73)
Browse files Browse the repository at this point in the history
* ♻️ move avatar source into dash namespace

* ✨ introduce RTL support

* add readme info

* ♻️ use boolean instead
  • Loading branch information
bitbrain committed Oct 6, 2021
1 parent 8ad49db commit d511508
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 34 deletions.
23 changes: 17 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,24 @@ tag_page_layout: tag_page
tag_page_dir: tag

dash:
# the way how dates should be displayed
date_format: "%b %-d, %Y"

# (optional) discqus comment configuration
disqus:
shortname: <your-disqus-shortname>
shortname: <your-disqus-shortname>

# the animation speed of the post scroll-in effect
animation_speed: 50

# wether to enable Right-to-Left support or not
rtl: false

# Replaces the default avatar provider (gravatar)
#avatar_source: github
#github_username: bitbrain
#avatar_source: local
#avatar_path: /assets/avatar.png

# generate social links in footer
# supported colors: green, red, orange, blue, cyan, pink, teal, yellow, indigo, purple
Expand All @@ -77,12 +91,9 @@ dash:
- url: https://github.com/bitbrain
icon: github-square
color: purple


# wether the author box should be displayed or not
show_author: true

# Replaces the default avatar provider (gravatar)
#avatar_source: github
#github_username: bitbrain
```
## Using this theme directly on Github Pages
Expand Down
19 changes: 13 additions & 6 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@ tag_page_dir: tag
# jekyll-dash date format
# refer to http://shopify.github.io/liquid/filters/date/ if you want to customize this
dash:
# the way how dates should be displayed
date_format: "%b %-d, %Y"

# (optional) discqus comment configuration
disqus:
shortname: bitbrain-github-io

Expand All @@ -35,10 +37,21 @@ dash:
icon: github-square
color: purple

# wether the author box should be displayed
show_author: true

# the animation speed of the scroll-in effect
animation_speed: 50

# wether to enable Right-to-Left support or not
rtl: false

# Replaces the default avatar provider (gravatar)
#avatar_source: github
#github_username: bitbrain
#avatar_source: local
#avatar_path: /assets/avatar.png

# Build settings
theme: jekyll-dash

Expand All @@ -48,9 +61,3 @@ plugins:
- jekyll-paginate
- liquid-md5
- jekyll/tagging

# Replaces the default avatar provider (gravatar)
#avatar_source: github
#github_username: bitbrain
#avatar_source: local
#avatar_path: /assets/avatar.png
24 changes: 7 additions & 17 deletions _includes/author.html
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
<div class="author-box">
{% if site.avatar_source == "github" and site.github_username %}
{% capture avatar_image %}
https://github.com/{{ site.github_username }}.png
{% endcapture %}
{% elsif site.avatar_source == "local" and site.avatar_path %}
{% capture avatar_image %}
{{site.avatar_path}}
{% endcapture %}
{% elsif site.plugins contains "liquid-md5" %}
{% capture avatar_image %}
https://gravatar.com/avatar/{{ site.email | downcase | md5 }}?s=256
{% endcapture %}
{% endif %}
{% if avatar_image %}
<img src="{{ avatar_image }}" class="author-avatar" alt="Avatar" />
{% endif %}
{{ site.description }}
{% if site.dash.rtl %}
<div class="description">{{ site.description }}</div>
{%- include avatar.html -%}
{% else %}
{%- include avatar.html -%}
<div class="description">{{ site.description }}</div>
{% endif %}
</div>
16 changes: 16 additions & 0 deletions _includes/avatar.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{% if site.dash.avatar_source == "github" and site.dash.github_username %}
{% capture avatar_image %}
https://github.com/{{ site.github_username }}.png
{% endcapture %}
{% elsif site.dash.avatar_source == "local" and site.dash.avatar_path %}
{% capture avatar_image %}
{{site.dash.avatar_path}}
{% endcapture %}
{% elsif site.plugins contains "liquid-md5" %}
{% capture avatar_image %}
https://gravatar.com/avatar/{{ site.email | downcase | md5 }}?s=256
{% endcapture %}
{% endif %}
{% if avatar_image %}
<img src="{{ avatar_image }}" class="author-avatar" alt="Avatar" />
{% endif %}
2 changes: 1 addition & 1 deletion _layouts/default.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
<html class="{% if site.dash.rtl %}direction--rtl{% else %}direction--ltr{% endif %}"lang="{{ page.lang | default: site.lang | default: "en" }}">

{%- include head.html -%}

Expand Down
62 changes: 58 additions & 4 deletions _sass/dash/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,21 +52,75 @@
}

/**
* Author box
* Right-to-Left support
*/

html.direction--rtl {
.author-box {
text-align: right;
& > .description {
direction: rtl;
}
& > img {
margin-right: 0em;
margin-left: 1em;
}
}
ol > li, ul > li {
text-align: right;
direction: rtl;
&::before {
float: right;
margin-left: 0.5em;
}
}
h1, h2, h3, h4, h5, h6 {
direction: rtl;
text-align: right;
}
.post-link-wrapper {
direction: rtl;
}
.post {
direction: rtl;
}
.pagination {
text-align: right;
}
.tag-cloud {
direction: rtl;
text-align: right;
}
.related-posts {
direction: rtl;
text-align: right;

& > li::before {
margin-right: 0;
margin-left: 0.5em;
}
}
pre {
direction: ltr;
text-align: left;
}
}

.author-box {
margin-bottom: 1em;
text-align: left;
min-height: 72px;
font-style: italic;
display: inline-flex;
& > .description {
flex:8;
}
& > .author-avatar {
float: left;
white-space: pre-line;
margin-right: 1em;
width: 72px;
height: 72px;
height: 100%;
border-radius: 0.3em;
flex: 1;
}
}

Expand Down

0 comments on commit d511508

Please sign in to comment.