hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A set of style fixes for rtl langs

Browse Source
This commit is contained in:
daudix
2024-06-17 05:21:54 +03:00
parent f7dcab6c1d
commit 2abb4d234c
8 changed files with 108 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
sass/_article-list.scss
View File

@ -20,6 +20,11 @@
&:has(.draft-badge, .archive-badge) h3 { &:has(.draft-badge, .archive-badge) h3 {
margin-right: 7rem; margin-right: 7rem;
body[dir="rtl"] & {
margin-right: unset;
margin-left: 7rem;
}
} }
.draft-badge, .draft-badge,
@ -37,6 +42,11 @@
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }
body[dir="rtl"] & {
right: unset;
left: 0;
}
} }
.draft-badge { .draft-badge {

12
sass/_comments.scss
View File

@ -7,6 +7,11 @@ section#comments {
width: 150px; width: 150px;
height: 150px; height: 150px;
body[dir="rtl"] & {
float: left;
margin: 3rem 1rem 0 0;
}
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
display: none; display: none;
} }
@ -35,6 +40,13 @@ section#comments {
border-left: 0.25rem solid var(--fg-muted-2); border-left: 0.25rem solid var(--fg-muted-2);
border-radius: 0.25rem; border-radius: 0.25rem;
padding-left: 1rem; 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 { .avatar-link {

5
sass/_containers.scss
View File

@ -21,6 +21,11 @@
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
padding: 0.5rem; padding: 0.5rem;
body[dir="rtl"] & {
right: unset;
left: 0.5rem;
}
&:hover { &:hover {
background-color: var(--fg-muted-2); background-color: var(--fg-muted-2);

7
sass/_external.scss
View File

@ -6,9 +6,14 @@
opacity: 0.6; opacity: 0.6;
mask-image: $icon; mask-image: $icon;
mask-size: cover; mask-size: cover;
margin-left: 3px; margin-left: 0.25rem;
background-color: var(--primary-color); background-color: var(--primary-color);
width: 0.75rem; width: 0.75rem;
height: 0.75rem; height: 0.75rem;
content: ""; content: "";
body[dir="rtl"] & {
margin-right: 0.25rem;
margin-left: unset;
}
} }

10
sass/_nav.scss
View File

@ -100,6 +100,11 @@
position: relative; position: relative;
margin-right: 0.625rem; margin-right: 0.625rem;
body[dir="rtl"] & {
margin-right: unset;
margin-left: 0.625rem;
}
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
@ -108,6 +113,11 @@
width: 1px; width: 1px;
height: 110%; height: 110%;
content: ""; content: "";
body[dir="rtl"] & {
right: unset;
left: -0.5rem;
}
} }
a { a {

4
sass/_post-nav.scss
View File

@ -18,6 +18,10 @@
padding-right: 0; padding-right: 0;
padding-left: 1rem; padding-left: 1rem;
text-align: right; text-align: right;
body[dir="rtl"] & {
text-align: left;
}
} }
.nav-arrow { .nav-arrow {

14
sass/_typography.scss
View File

@ -48,6 +48,11 @@ blockquote {
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0 0.75rem; padding: 0 0.75rem;
color: var(--fg-muted-5); color: var(--fg-muted-5);
body[dir="rtl"] & {
border-right: 0.25rem solid var(--primary-color);
border-left: unset;
}
} }
mark { mark {
@ -102,6 +107,11 @@ hr {
background: var(--bg-color), var(--primary-color); background: var(--bg-color), var(--primary-color);
padding: 0 0.25rem; padding: 0 0.25rem;
content: "☙❧"; content: "☙❧";
// An ugly hack to fix mirroring in rtl
body[dir="rtl"] & {
content: "❧☙";
}
} }
} }
@ -122,6 +132,10 @@ aside {
padding: 1rem; padding: 1rem;
width: 30%; width: 30%;
body[dir="rtl"] & {
float: left;
}
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
float: none; float: none;
margin-inline-start: 0; margin-inline-start: 0;

4
templates/base.html
View File

@ -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"] %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ lang }}"> <html lang="{{ lang }}">
{% include "partials/head.html" %} {% include "partials/head.html" %}
<body {% if lang in rtl %}dir="rtl"{% endif %}> <body {% if lang in rtl_langs %}dir="rtl"{% endif %}>
{% include "partials/nav.html" %} {% include "partials/nav.html" %}
<div id="main" class="container"> <div id="main" class="container">
{% block custom %}{%- endblock -%} {% block custom %}{%- endblock -%}