From 2abb4d234cb7abfcb1559ed65ba54bf8ec9f6b2a Mon Sep 17 00:00:00 2001 From: daudix Date: Mon, 17 Jun 2024 05:21:54 +0300 Subject: [PATCH] A set of style fixes for rtl langs --- sass/_article-list.scss | 10 +++++ sass/_comments.scss | 12 ++++++ sass/_containers.scss | 95 ++++++++++++++++++++++------------------- sass/_external.scss | 7 ++- sass/_nav.scss | 10 +++++ sass/_post-nav.scss | 4 ++ sass/_typography.scss | 14 ++++++ templates/base.html | 4 +- 8 files changed, 108 insertions(+), 48 deletions(-) diff --git a/sass/_article-list.scss b/sass/_article-list.scss index ccf66fe..286a005 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -20,6 +20,11 @@ &:has(.draft-badge, .archive-badge) h3 { margin-right: 7rem; + + body[dir="rtl"] & { + margin-right: unset; + margin-left: 7rem; + } } .draft-badge, @@ -37,6 +42,11 @@ width: 1rem; height: 1rem; } + + body[dir="rtl"] & { + right: unset; + left: 0; + } } .draft-badge { diff --git a/sass/_comments.scss b/sass/_comments.scss index 07b9036..6fb72c9 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -7,6 +7,11 @@ section#comments { width: 150px; height: 150px; + body[dir="rtl"] & { + float: left; + margin: 3rem 1rem 0 0; + } + @media only screen and (max-width: 720px) { display: none; } @@ -35,6 +40,13 @@ section#comments { border-left: 0.25rem solid var(--fg-muted-2); border-radius: 0.25rem; padding-left: 1rem; + + body[dir="rtl"] & { + border-right: 0.25rem solid var(--fg-muted-2); + border-left: unset; + padding-right: 1rem; + padding-left: unset; + } } .avatar-link { diff --git a/sass/_containers.scss b/sass/_containers.scss index 28b2389..760e41a 100644 --- a/sass/_containers.scss +++ b/sass/_containers.scss @@ -1,57 +1,62 @@ .container { - margin: 0 auto; - width: min(var(--container-width), 90%); + margin: 0 auto; + width: min(var(--container-width), 90%); } .pre-container { - position: relative; + position: relative; - button { - -webkit-backdrop-filter: var(--blur); - display: inline-flex; - position: absolute; - top: 0.5rem; - right: 0.5rem; - backdrop-filter: var(--blur); - transition: var(--transition); - cursor: pointer; - box-shadow: var(--edge-highlight); - border: none; - border-radius: 50%; - background-color: var(--fg-muted-1); - padding: 0.5rem; + button { + -webkit-backdrop-filter: var(--blur); + display: inline-flex; + position: absolute; + top: 0.5rem; + right: 0.5rem; + backdrop-filter: var(--blur); + transition: var(--transition); + cursor: pointer; + box-shadow: var(--edge-highlight); + border: none; + border-radius: 50%; + background-color: var(--fg-muted-1); + padding: 0.5rem; - &:hover { - background-color: var(--fg-muted-2); + body[dir="rtl"] & { + right: unset; + left: 0.5rem; + } - i { - background-color: var(--fg-muted-5); - } - } + &:hover { + background-color: var(--fg-muted-2); - &:active { - transform: scale(var(--active)); - } + i { + background-color: var(--fg-muted-5); + } + } - &.active { - background-color: var(--primary-color-alpha); + &:active { + transform: scale(var(--active)); + } - .icon { - $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); - -webkit-mask-image: $icon; - mask-image: $icon; - background-color: var(--primary-color); - } - } + &.active { + background-color: var(--primary-color-alpha); - .icon { - $icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); - -webkit-mask-image: $icon; - mask-image: $icon; - transition: var(--transition); - background-color: var(--fg-muted-4); - width: 1rem; - height: 1rem; - } - } + .icon { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--primary-color); + } + } + + .icon { + $icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + transition: var(--transition); + background-color: var(--fg-muted-4); + width: 1rem; + height: 1rem; + } + } } diff --git a/sass/_external.scss b/sass/_external.scss index 3eab1c6..5aa5339 100644 --- a/sass/_external.scss +++ b/sass/_external.scss @@ -6,9 +6,14 @@ opacity: 0.6; mask-image: $icon; mask-size: cover; - margin-left: 3px; + margin-left: 0.25rem; background-color: var(--primary-color); width: 0.75rem; height: 0.75rem; content: ""; + + body[dir="rtl"] & { + margin-right: 0.25rem; + margin-left: unset; + } } diff --git a/sass/_nav.scss b/sass/_nav.scss index d4616aa..fdb2bfe 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -100,6 +100,11 @@ position: relative; margin-right: 0.625rem; + body[dir="rtl"] & { + margin-right: unset; + margin-left: 0.625rem; + } + &::after { position: absolute; top: 0; @@ -108,6 +113,11 @@ width: 1px; height: 110%; content: ""; + + body[dir="rtl"] & { + right: unset; + left: -0.5rem; + } } a { diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss index 33022bc..c3d72a1 100644 --- a/sass/_post-nav.scss +++ b/sass/_post-nav.scss @@ -18,6 +18,10 @@ padding-right: 0; padding-left: 1rem; text-align: right; + + body[dir="rtl"] & { + text-align: left; + } } .nav-arrow { diff --git a/sass/_typography.scss b/sass/_typography.scss index 93d6adb..76150bf 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -48,6 +48,11 @@ blockquote { border-radius: 0.25rem; padding: 0 0.75rem; color: var(--fg-muted-5); + + body[dir="rtl"] & { + border-right: 0.25rem solid var(--primary-color); + border-left: unset; + } } mark { @@ -102,6 +107,11 @@ hr { background: var(--bg-color), var(--primary-color); padding: 0 0.25rem; content: "☙❧"; + + // An ugly hack to fix mirroring in rtl + body[dir="rtl"] & { + content: "❧☙"; + } } } @@ -122,6 +132,10 @@ aside { padding: 1rem; width: 30%; + body[dir="rtl"] & { + float: left; + } + @media only screen and (max-width: 720px) { float: none; margin-inline-start: 0; diff --git a/templates/base.html b/templates/base.html index b28be57..0e2f7ea 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,9 +1,9 @@ -{% set rtl = ["ar", "arc", "az", "dv", "ff", "he", "ku", "nqo", "fa", "rhg", "syc", "ur"] %} +{% set rtl_langs = ["ar", "arc", "az", "dv", "ff", "he", "ku", "nqo", "fa", "rhg", "syc", "ur"] %} {% include "partials/head.html" %} - + {% include "partials/nav.html" %}
{% block custom %}{%- endblock -%}