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 {
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 {

12
sass/_comments.scss
View File

@ -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 {

95
sass/_containers.scss
View File

@ -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;
}
}
}

7
sass/_external.scss
View File

@ -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;
}
}

10
sass/_nav.scss
View File

@ -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 {

4
sass/_post-nav.scss
View File

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

14
sass/_typography.scss
View File

@ -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;