From ee70e5fe46565bf7fc9d89db5b5d510c7f3c6c93 Mon Sep 17 00:00:00 2001 From: daudix Date: Tue, 18 Jun 2024 07:52:13 +0300 Subject: [PATCH] More RTL improvements and some style tweaks --- sass/_article-list.scss | 4 ++-- sass/_comments.scss | 4 ++-- sass/_containers.scss | 2 +- sass/_external.scss | 3 ++- sass/_footer.scss | 10 +++++++++- sass/_nav.scss | 8 ++++++-- sass/_post-nav.scss | 44 ++++++++++++++++++++++++++++++++--------- sass/_tags.scss | 9 +++++++++ sass/_typography.scss | 6 +++--- templates/article.html | 4 ++-- templates/base.html | 4 ++-- 11 files changed, 73 insertions(+), 25 deletions(-) diff --git a/sass/_article-list.scss b/sass/_article-list.scss index 3aecc56..e647d95 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -21,7 +21,7 @@ &:has(.draft-badge, .archive-badge) h3 { margin-right: 7rem; - body[dir="rtl"] & { + :root[dir="rtl"] & { margin-right: unset; margin-left: 7rem; } @@ -44,7 +44,7 @@ height: 1rem; } - body[dir="rtl"] & { + :root[dir="rtl"] & { right: unset; left: 0; } diff --git a/sass/_comments.scss b/sass/_comments.scss index 88f2670..5a3b2c6 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -8,7 +8,7 @@ width: 125px; height: 125px; - body[dir="rtl"] & { + :root[dir="rtl"] & { float: left; margin: 3rem 1rem 0 0; } @@ -47,7 +47,7 @@ border-radius: 0.25rem; padding-left: 1rem; - body[dir="rtl"] & { + :root[dir="rtl"] & { border-right: 0.25rem solid var(--fg-muted-2); border-left: unset; padding-right: 1rem; diff --git a/sass/_containers.scss b/sass/_containers.scss index c6345b2..ba7824d 100644 --- a/sass/_containers.scss +++ b/sass/_containers.scss @@ -21,7 +21,7 @@ padding: 0.5rem; line-height: 0; - body[dir="rtl"] & { + :root[dir="rtl"] & { right: unset; left: 0.5rem; } diff --git a/sass/_external.scss b/sass/_external.scss index 5aa5339..a35df5d 100644 --- a/sass/_external.scss +++ b/sass/_external.scss @@ -12,7 +12,8 @@ height: 0.75rem; content: ""; - body[dir="rtl"] & { + :root[dir="rtl"] & { + transform: scaleX(-100%); margin-right: 0.25rem; margin-left: unset; } diff --git a/sass/_footer.scss b/sass/_footer.scss index 98d95cb..8f9123f 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -29,10 +29,18 @@ &:first-of-type a { border-radius: 1.125rem 0 0 1.125rem; + + :root[dir="rtl"] & { + border-radius: 0 1.125rem 1.125rem 0; + } } &:last-of-type a { border-radius: 0 1.125rem 1.125rem 0; + + :root[dir="rtl"] & { + border-radius: 1.125rem 0 0 1.125rem; + } } a { @@ -43,7 +51,7 @@ &:hover { box-shadow: var(--edge-highlight); - border-radius: 1.125rem; + border-radius: 1.125rem !important; background-color: var(--primary-color); color: var(--fg-color); text-decoration: none; diff --git a/sass/_nav.scss b/sass/_nav.scss index d9dd986..4d6c965 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -46,7 +46,7 @@ position: relative; margin-right: 0.625rem; - body[dir="rtl"] & { + :root[dir="rtl"] & { margin-right: unset; margin-left: 0.625rem; } @@ -60,7 +60,7 @@ height: calc(100% + 0.25rem); content: ""; - body[dir="rtl"] & { + :root[dir="rtl"] & { right: unset; left: -0.5rem; } @@ -151,6 +151,10 @@ $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: $icon; mask-image: $icon; + + :root[dir="rtl"] & { + transform: scaleX(-100%); + } } &#dropdown { diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss index c3d72a1..1fdb475 100644 --- a/sass/_post-nav.scss +++ b/sass/_post-nav.scss @@ -2,6 +2,7 @@ display: flex; .post-nav-item { + transition: var(--transition); width: 50%; text-decoration: none; @@ -9,18 +10,43 @@ color: var(--primary-color); } - &:nth-child(2n + 1) { - padding-right: 1rem; - padding-left: 0; + &:active { + transform: scale(var(--active)); } - &:nth-child(2n) { - padding-right: 0; - padding-left: 1rem; - text-align: right; + &.post-nav-prev { + transform-origin: left; - body[dir="rtl"] & { - text-align: left; + :root[dir="rtl"] & { + transform-origin: right; + } + + .nav-arrow::before { + content: "← "; + + :root[dir="rtl"] & { + content: "→ "; + } + } + } + + &.post-nav-next { + transform-origin: right; + margin-left: auto; + text-align: end; + + :root[dir="rtl"] & { + transform-origin: left; + margin-right: auto; + margin-left: unset; + } + + .nav-arrow::after { + content: " →"; + + :root[dir="rtl"] & { + content: " ←"; + } } } diff --git a/sass/_tags.scss b/sass/_tags.scss index 5ae7b5f..de47c96 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -47,6 +47,10 @@ &::before { content: "#"; } + + :root[dir="rtl"] & { + padding: 0.25rem 0.75rem 0.25rem 0.5rem; + } } .count { @@ -57,6 +61,11 @@ padding: 0.25rem 0.625rem 0.25rem 0.5rem; color: var(--fg-muted-4); font-variant-numeric: tabular-nums; + + :root[dir="rtl"] & { + border-radius: 999px 0 0 999px; + padding: 0.25rem 0.5rem 0.25rem 0.625rem; + } } } } diff --git a/sass/_typography.scss b/sass/_typography.scss index bb08dc8..f8dc267 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -49,7 +49,7 @@ blockquote { padding: 0 0.75rem; color: var(--fg-muted-5); - body[dir="rtl"] & { + :root[dir="rtl"] & { border-right: 0.25rem solid var(--primary-color); border-left: unset; } @@ -109,7 +109,7 @@ hr { content: "☙❧"; // An ugly hack to fix mirroring in rtl - body[dir="rtl"] & { + :root[dir="rtl"] & { content: "❧☙"; } } @@ -132,7 +132,7 @@ aside { padding: 1rem; width: 30%; - body[dir="rtl"] & { + :root[dir="rtl"] & { float: left; } diff --git a/templates/article.html b/templates/article.html index b2a4722..75e3e81 100644 --- a/templates/article.html +++ b/templates/article.html @@ -90,13 +90,13 @@