From 76bec347b4cc5d8d75b8c1d63033f28892b02583 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Mon, 14 Feb 2022 18:41:54 +0000
Subject: [PATCH] refactor: add back rtl styling
---
assets/scss/partials/_hugo.scss | 8 ++
assets/scss/partials/components/_sidebar.scss | 34 ++++++++++-
assets/css/style.rtl.css | 24 +-------
assets/scss/modules/_config.scss | 14 ++++
assets/scss/partials/_base.scss | 10 ++
assets/scss/partials/components/_category.scss | 7 ++
assets/scss/partials/components/_post.scss | 32 ++++++++--
assets/scss/partials/layout/_nav.scss | 8 ++
assets/scss/partials/components/_tag.scss | 9 ++
assets/scss/partials/components/_info.scss | 15 ++++
10 files changed, 121 insertions(+), 40 deletions(-)
diff --git a/assets/css/style.rtl.css b/assets/css/style.rtl.css
index dca66a2..2c3f801 100644
--- a/assets/css/style.rtl.css
+++ b/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%;
}
}
+*/
\ No newline at end of file
diff --git a/assets/scss/modules/_config.scss b/assets/scss/modules/_config.scss
index 2839379..fa47c53 100644
--- a/assets/scss/modules/_config.scss
+++ b/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;
+ }
+}
diff --git a/assets/scss/partials/_base.scss b/assets/scss/partials/_base.scss
index 407d0a3..740edfb 100644
--- a/assets/scss/partials/_base.scss
+++ b/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;
+ }
}
diff --git a/assets/scss/partials/_hugo.scss b/assets/scss/partials/_hugo.scss
index 70dfac8..0dfd6f6 100644
--- a/assets/scss/partials/_hugo.scss
+++ b/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;
}
diff --git a/assets/scss/partials/components/_category.scss b/assets/scss/partials/components/_category.scss
index 9d8c0d7..58332cd 100644
--- a/assets/scss/partials/components/_category.scss
+++ b/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;
+ }
}
diff --git a/assets/scss/partials/components/_info.scss b/assets/scss/partials/components/_info.scss
index fcd31b0..5c0f002 100644
--- a/assets/scss/partials/components/_info.scss
+++ b/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;
+ }
+
}
}
}
diff --git a/assets/scss/partials/components/_post.scss b/assets/scss/partials/components/_post.scss
index 05bf23e..7702cca 100644
--- a/assets/scss/partials/components/_post.scss
+++ b/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;
+ }
}
}
}
diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
index a17aeec..781bf24 100644
--- a/assets/scss/partials/components/_sidebar.scss
+++ b/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 {
diff --git a/assets/scss/partials/components/_tag.scss b/assets/scss/partials/components/_tag.scss
index 6979820..a4884cc 100644
--- a/assets/scss/partials/components/_tag.scss
+++ b/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;
diff --git a/assets/scss/partials/layout/_nav.scss b/assets/scss/partials/layout/_nav.scss
index b123938..fafcb20 100644
--- a/assets/scss/partials/layout/_nav.scss
+++ b/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;
+ }
+
}
}
--
Gitblit v1.10.0