refactor: add back rtl styling

Alexander Bilz

14.41.2022 76bec347b4cc5d8d75b8c1d63033f28892b02583

refactor: add back rtl styling

 assets/css/style.rtl.css

@@ -1,5 +1,5 @@
@charset "UTF-8";

/*
body {
  font-family: 'Tajawal', sans-serif;
  font-size: 1.5rem;
@@ -9,7 +9,6 @@
  border-right: 0.25em solid var(--blockquote-border-color);
  border-left: inherit;
}

.tag,
.category {
  margin: 5px 0 5px 8px;
@@ -26,6 +25,7 @@
  border-right: inherit;
}


.sidebar .social-links i {
  margin-left: 3px;
  margin-right: inherit;
@@ -79,13 +79,6 @@
  padding-right: inherit;
}

.pagination .pre {
  float: right;
}
.pagination .next {
  float: left;
}

.list-with-title .listing .listing-post .post-time {
  float: left;
  text-align: left;
@@ -95,9 +88,6 @@
  padding-right: 0px;
}

.triangle {
  display: none;
}

@media screen and (min-width: 961px), print {
  header {
@@ -105,15 +95,6 @@
    left: 0;
    right: auto;
  }
  /* header .nav__list li {
    padding-left: 20px;
  }
  header .nav__list li:not(:last-of-type) {
    padding-right: inherit;
  }
  .triangle {
    display: inline-block;
  } */
}

@media (min-width: 1921px) {
@@ -126,3 +107,4 @@
    padding-left: 20%;
  }
}
*/

 assets/scss/modules/_config.scss

@@ -24,3 +24,17 @@
    @content;
  }
}

$layout-direction: ltr !default;

@mixin ltr {
    @if $layout-direction == ltr {
        @content;
    }
}

@mixin rtl {
    @if $layout-direction == rtl {
        @content;
    }
}

 assets/scss/partials/_base.scss

@@ -1,6 +1,12 @@
@charset "UTF-8";

* {
  font-family: 'PingHei', 'PingFang SC', 'Helvetica Neue', 'Work Sans', 'Hiragino Sans GB', sans-serif;
  font-size: 1.6rem;
  @include ltr{
    font-family: 'PingHei', 'PingFang SC', 'Helvetica Neue', 'Work Sans', 'Hiragino Sans GB', sans-serif;
    font-size: 1.6rem;
  }
  @include rtl {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.5rem;
  }
}

 assets/scss/partials/_hugo.scss

@@ -14,7 +14,13 @@
blockquote {
  @include themed() {
    color: t('primary');
    border-left: t('border');
    @include ltr {
      border-left: t('border');
    } 
    @include rtl {
      border-right: t('border');
    }
    
  }
  padding: 0 1em;
}

 assets/scss/partials/components/_category.scss

@@ -9,5 +9,10 @@
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1;
  margin: 5px 8px 5px 0;
  @include ltr{
    margin: 5px 8px 5px 0;
  }
  @include rtl {
    margin: 5px 0 5px 8px;
  }
}

 assets/scss/partials/components/_info.scss

@@ -2,13 +2,24 @@
  margin: 1em;

  &__icon {
    margin-right: 4px;
    opacity: 0.5;
    @include ltr{
      margin-right: 4px;
    }
    @include rtl {
      margin-left: 4px;
    }
  }

  &__text {
    &:not(:last-child) {
      margin-right: 4px;
      @include ltr{
        margin-right: 4px;
      }
      @include rtl {
        margin-left: 4px;
      }
      
    }
  }
}

 assets/scss/partials/components/_post.scss

@@ -76,17 +76,31 @@

      &.right {
        @include desktop {
          float: right;
          margin-left: 1.5em;
          max-width: 50%;
          @include ltr {
            float: right;
            margin-left: 1.5em;
          }    
      
          @include rtl {
            float: left;
            margin-right: 1.5em;
          }
        }
      }

      &.left {
        @include desktop {
          float: left;
          margin-right: 1.5em;
          max-width: 50%;
          @include ltr {
            float: left;
            margin-right: 1.5em;
          }    
      
          @include rtl {
            float: right;
            margin-left: 1.5em;
          }
        }
      }
    }
@@ -100,8 +114,14 @@
    padding: 12px 0;

    &-date {
      margin-right: 10px;
      margin-left: 5px;
      @include ltr {
        margin-right: 10px;
        margin-left: 5px;
      }
      @include rtl {
        margin-left: 10px;
        margin-right: 5px;
      }
    }
  }
}

 assets/scss/partials/components/_sidebar.scss

@@ -14,14 +14,33 @@
    flex-direction: column;

    @include themed() {
      border-right: t('border');
      
      @include ltr {
        margin-right: 4px;
        border-right: t('border');
      }    

      @include rtl {
        margin-left: 4px;
        border-left: t('border');
      }
      
    }
  }

  @include widescreen {
    padding-left: 17%;
    padding-right: 3%;

    
    width: calc(var(--sidebar-width) - 20%);
    @include ltr {
      padding-left: 17%;
      padding-right: 3%;
    }    

    @include rtl {
      padding-right: 17%;
      padding-left: 3%;
    }
  }

  &__content {
@@ -45,7 +64,14 @@
      line-height: 0;

      i {
        margin-right: 3px;
        @include ltr {
          margin-right: 3px;
        }    
  
        @include rtl {
          margin-left: 3px;
        }

      }

      li {

 assets/scss/partials/components/_tag.scss

@@ -2,8 +2,13 @@
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1;
  margin: 5px 8px 5px 0;

  
  @include ltr{
    margin: 5px 8px 5px 0;
  }
  @include rtl {
    margin: 5px 0 5px 8px;
  }
  &::before {
    content: '#';
    opacity: 0.5;

 assets/scss/partials/layout/_nav.scss

@@ -56,7 +56,13 @@

      &-item {
        &:not(:last-child) {
          padding-right: 20px;
          @include ltr {
            padding-right: 20px;
          }
          @include rtl {
            padding-left: 20px;
          }
          
        }
      }