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

More RTL improvements and some style tweaks

Browse Source
This commit is contained in:
daudix
2024-06-18 07:52:13 +03:00
parent fbed171669
commit ee70e5fe46
11 changed files with 73 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
sass/_article-list.scss
View File

@ -21,7 +21,7 @@
&:has(.draft-badge, .archive-badge) h3 { &:has(.draft-badge, .archive-badge) h3 {
margin-right: 7rem; margin-right: 7rem;
body[dir="rtl"] & { :root[dir="rtl"] & {
margin-right: unset; margin-right: unset;
margin-left: 7rem; margin-left: 7rem;
} }
@ -44,7 +44,7 @@
height: 1rem; height: 1rem;
} }
body[dir="rtl"] & { :root[dir="rtl"] & {
right: unset; right: unset;
left: 0; left: 0;
} }

4
sass/_comments.scss
View File

@ -8,7 +8,7 @@
width: 125px; width: 125px;
height: 125px; height: 125px;
body[dir="rtl"] & { :root[dir="rtl"] & {
float: left; float: left;
margin: 3rem 1rem 0 0; margin: 3rem 1rem 0 0;
} }
@ -47,7 +47,7 @@
border-radius: 0.25rem; border-radius: 0.25rem;
padding-left: 1rem; padding-left: 1rem;
body[dir="rtl"] & { :root[dir="rtl"] & {
border-right: 0.25rem solid var(--fg-muted-2); border-right: 0.25rem solid var(--fg-muted-2);
border-left: unset; border-left: unset;
padding-right: 1rem; padding-right: 1rem;

2
sass/_containers.scss
View File

@ -21,7 +21,7 @@
padding: 0.5rem; padding: 0.5rem;
line-height: 0; line-height: 0;
body[dir="rtl"] & { :root[dir="rtl"] & {
right: unset; right: unset;
left: 0.5rem; left: 0.5rem;
} }

3
sass/_external.scss
View File

@ -12,7 +12,8 @@
height: 0.75rem; height: 0.75rem;
content: ""; content: "";
body[dir="rtl"] & { :root[dir="rtl"] & {
transform: scaleX(-100%);
margin-right: 0.25rem; margin-right: 0.25rem;
margin-left: unset; margin-left: unset;
} }

10
sass/_footer.scss
View File

@ -29,10 +29,18 @@
&:first-of-type a { &:first-of-type a {
border-radius: 1.125rem 0 0 1.125rem; border-radius: 1.125rem 0 0 1.125rem;
:root[dir="rtl"] & {
border-radius: 0 1.125rem 1.125rem 0;
}
} }
&:last-of-type a { &:last-of-type a {
border-radius: 0 1.125rem 1.125rem 0; border-radius: 0 1.125rem 1.125rem 0;
:root[dir="rtl"] & {
border-radius: 1.125rem 0 0 1.125rem;
}
} }
a { a {
@ -43,7 +51,7 @@
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 1.125rem; border-radius: 1.125rem !important;
background-color: var(--primary-color); background-color: var(--primary-color);
color: var(--fg-color); color: var(--fg-color);
text-decoration: none; text-decoration: none;

8
sass/_nav.scss
View File

@ -46,7 +46,7 @@
position: relative; position: relative;
margin-right: 0.625rem; margin-right: 0.625rem;
body[dir="rtl"] & { :root[dir="rtl"] & {
margin-right: unset; margin-right: unset;
margin-left: 0.625rem; margin-left: 0.625rem;
} }
@ -60,7 +60,7 @@
height: calc(100% + 0.25rem); height: calc(100% + 0.25rem);
content: ""; content: "";
body[dir="rtl"] & { :root[dir="rtl"] & {
right: unset; right: unset;
left: -0.5rem; 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"); $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; -webkit-mask-image: $icon;
mask-image: $icon; mask-image: $icon;
:root[dir="rtl"] & {
transform: scaleX(-100%);
}
} }
&#dropdown { &#dropdown {

44
sass/_post-nav.scss
View File

@ -2,6 +2,7 @@
display: flex; display: flex;
.post-nav-item { .post-nav-item {
transition: var(--transition);
width: 50%; width: 50%;
text-decoration: none; text-decoration: none;
@ -9,18 +10,43 @@
color: var(--primary-color); color: var(--primary-color);
} }
&:nth-child(2n + 1) { &:active {
padding-right: 1rem; transform: scale(var(--active));
padding-left: 0;
} }
&:nth-child(2n) { &.post-nav-prev {
padding-right: 0; transform-origin: left;
padding-left: 1rem;
text-align: right;
body[dir="rtl"] & { :root[dir="rtl"] & {
text-align: left; 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: " ←";
}
} }
} }

9
sass/_tags.scss
View File

@ -47,6 +47,10 @@
&::before { &::before {
content: "#"; content: "#";
} }
:root[dir="rtl"] & {
padding: 0.25rem 0.75rem 0.25rem 0.5rem;
}
} }
.count { .count {
@ -57,6 +61,11 @@
padding: 0.25rem 0.625rem 0.25rem 0.5rem; padding: 0.25rem 0.625rem 0.25rem 0.5rem;
color: var(--fg-muted-4); color: var(--fg-muted-4);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
:root[dir="rtl"] & {
border-radius: 999px 0 0 999px;
padding: 0.25rem 0.5rem 0.25rem 0.625rem;
}
} }
} }
} }

6
sass/_typography.scss
View File

@ -49,7 +49,7 @@ blockquote {
padding: 0 0.75rem; padding: 0 0.75rem;
color: var(--fg-muted-5); color: var(--fg-muted-5);
body[dir="rtl"] & { :root[dir="rtl"] & {
border-right: 0.25rem solid var(--primary-color); border-right: 0.25rem solid var(--primary-color);
border-left: unset; border-left: unset;
} }
@ -109,7 +109,7 @@ hr {
content: "☙❧"; content: "☙❧";
// An ugly hack to fix mirroring in rtl // An ugly hack to fix mirroring in rtl
body[dir="rtl"] & { :root[dir="rtl"] & {
content: "❧☙"; content: "❧☙";
} }
} }
@ -132,7 +132,7 @@ aside {
padding: 1rem; padding: 1rem;
width: 30%; width: 30%;
body[dir="rtl"] & { :root[dir="rtl"] & {
float: left; float: left;
} }

4
templates/article.html
View File

@ -90,13 +90,13 @@
<nav id="post-nav"> <nav id="post-nav">
{% if page.higher %} {% if page.higher %}
<a class="post-nav-item post-nav-prev" href="{{ page.higher.permalink }}"> <a class="post-nav-item post-nav-prev" href="{{ page.higher.permalink }}">
<div class="nav-arrow">← {{ trans(key="page_previous", lang=lang) }}</div> <div class="nav-arrow">{{ trans(key="page_previous", lang=lang) }}</div>
<span class="post-title">{{ page.higher.title }}</span> <span class="post-title">{{ page.higher.title }}</span>
</a> </a>
{% endif %} {% endif %}
{% if page.lower %} {% if page.lower %}
<a class="post-nav-item post-nav-next" href="{{ page.lower.permalink }}"> <a class="post-nav-item post-nav-next" href="{{ page.lower.permalink }}">
<div class="nav-arrow">{{ trans(key="page_next", lang=lang) }} →</div> <div class="nav-arrow">{{ trans(key="page_next", lang=lang) }}</div>
<span class="post-title">{{ page.lower.title }}</span> <span class="post-title">{{ page.lower.title }}</span>
</a> </a>
{% endif %} {% endif %}

4
templates/base.html
View File

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