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

Make margins/paddings automatically adapt in rtl

Browse Source 
No need for separate rules for rtl, yay!
This commit is contained in:
daudix
2024-07-05 05:54:19 +03:00
parent 4edb6e9760
commit 1758eb99a8
13 changed files with 40 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
sass/_alerts.scss
View File

@ -1,13 +1,8 @@
blockquote {
&.note {
border-left: 0.25rem solid var(--blue-fg);
border-inline-start: 0.25rem solid var(--blue-fg);
:root[dir*="rtl"] & {
border-right: 0.25rem solid var(--blue-fg);
border-left: unset;
}
.alert-name {
.alert-title {
color: var(--blue-fg);
}
@ -20,14 +15,9 @@ blockquote {
}
&.tip {
border-left: 0.25rem solid var(--green-fg);
border-inline-start: 0.25rem solid var(--green-fg);
:root[dir*="rtl"] & {
border-right: 0.25rem solid var(--green-fg);
border-left: unset;
}
.alert-name {
.alert-title {
color: var(--green-fg);
}
@ -40,14 +30,9 @@ blockquote {
}
&.important {
border-left: 0.25rem solid var(--purple-fg);
border-inline-start: 0.25rem solid var(--purple-fg);
:root[dir*="rtl"] & {
border-right: 0.25rem solid var(--purple-fg);
border-left: unset;
}
.alert-name {
.alert-title {
color: var(--purple-fg);
}
@ -60,14 +45,9 @@ blockquote {
}
&.warning {
border-left: 0.25rem solid var(--yellow-fg);
border-inline-start: 0.25rem solid var(--yellow-fg);
:root[dir*="rtl"] & {
border-right: 0.25rem solid var(--yellow-fg);
border-left: unset;
}
.alert-name {
.alert-title {
color: var(--yellow-fg);
}
@ -80,14 +60,9 @@ blockquote {
}
&.caution {
border-left: 0.25rem solid var(--red-fg);
border-inline-start: 0.25rem solid var(--red-fg);
:root[dir*="rtl"] & {
border-right: 0.25rem solid var(--red-fg);
border-left: unset;
}
.alert-name {
.alert-title {
color: var(--red-fg);
}
@ -99,9 +74,9 @@ blockquote {
}
}
.alert-name {
.alert-title {
font-weight: bold;
margin-bottom: -0.5rem;
margin-bottom: -0.75rem;
}
.icon {

11
sass/_article-list.scss
View File

@ -9,12 +9,7 @@
position: relative;
h3 {
margin-right: 8rem;
:root[dir*="rtl"] & {
margin-right: unset;
margin-left: 8rem;
}
margin-inline-end: 8rem;
}
}
@ -132,6 +127,7 @@
.icon {
vertical-align: -0.125em;
margin-inline-end: 0.25rem;
width: 1rem;
height: 1rem;
}
@ -159,7 +155,8 @@
color: var(--purple-fg);
.icon {
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%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='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%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='M2 1C.89 1 0 1.89 0 3v2c0 .751.41 1.402 1.018 1.744A2 2 0 0 0 1 7v7c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7a2 2 0 0 0-.018-.256A2 2 0 0 0 16 5V3c0-1.11-.89-2-2-2zm0 2h12v2H2zm1 4h10v7H3zm3 1v1h4V8z'/%3E%3C/svg%3E");
-webkit-mask-image: $icon;
mask-image: $icon;
background-color: var(--purple-fg);

11
sass/_comments.scss
View File

@ -43,16 +43,9 @@
&.comment-reply {
position: relative;
border-left: 0.25rem solid var(--fg-muted-2);
border-inline-start: 0.25rem solid var(--fg-muted-2);
border-radius: 0.25rem;
padding-left: 1rem;
:root[dir*="rtl"] & {
border-right: 0.25rem solid var(--fg-muted-2);
border-left: unset;
padding-right: 1rem;
padding-left: unset;
}
padding-inline-start: 1rem;
}
.avatar-link {

4
sass/_external.scss
View File

@ -6,7 +6,7 @@
opacity: 0.6;
mask-image: $icon;
mask-size: cover;
margin-left: 0.25rem;
margin-inline-start: 0.25rem;
background-color: var(--primary-color);
width: 0.75em;
height: 0.75em;
@ -14,7 +14,5 @@
:root[dir*="rtl"] & {
transform: scaleX(-100%);
margin-right: 0.25rem;
margin-left: unset;
}
}

21
sass/_nav.scss
View File

@ -9,6 +9,11 @@
border-radius: 1.625rem;
background-color: var(--nav-bg);
max-width: min(var(--container-width), 90%);
transition: var(--transition);
&:has(#search-container.active) {
border-radius: 1.625rem 1.625rem 0 0;
}
nav {
padding: 0.5rem;
@ -40,13 +45,15 @@
#search-container {
-webkit-backdrop-filter: var(--blur);
position: absolute;
top: 0;
top: calc(100% - 1rem);
left: 0;
opacity: 0;
z-index: 999;
backdrop-filter: var(--blur);
transition: var(--transition);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow:
// var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
border-radius: 1.625rem;
background-color: var(--nav-bg);
padding: 0.5rem;
@ -54,9 +61,10 @@
pointer-events: none;
&.active {
top: calc(100% + 0.5rem);
top: 100%;
opacity: 1;
pointer-events: unset;
border-radius: 0 0 1.625rem 1.625rem;
}
#search-bar {
@ -134,12 +142,7 @@
&#home {
position: relative;
margin-right: 0.625rem;
:root[dir*="rtl"] & {
margin-right: unset;
margin-left: 0.625rem;
}
margin-inline-end: 0.625rem;
&::after {
position: absolute;

5
sass/_not-found.scss
View File

@ -1,7 +1,4 @@
#not-found {
padding-top: 1rem;
padding-right: 35%;
padding-bottom: 1rem;
padding-left: 35%;
padding: 0 35%;
width: 100%;
}

12
sass/_post-nav.scss
View File

@ -16,12 +16,10 @@
&.post-nav-prev {
transform-origin: left;
padding-right: 1rem;
padding-inline-end: 1rem;
:root[dir*="rtl"] & {
transform-origin: right;
padding-right: unset;
padding-left: 1rem;
}
.nav-arrow::before {
@ -35,16 +33,12 @@
&.post-nav-next {
transform-origin: right;
margin-left: auto;
padding-left: 1rem;
margin-inline-start: auto;
padding-inline-start: 1rem;
text-align: end;
:root[dir*="rtl"] & {
transform-origin: left;
margin-right: auto;
margin-left: unset;
padding-right: 1rem;
padding-left: unset;
}
.nav-arrow::after {

3
sass/_statements.scss
View File

@ -34,7 +34,8 @@
color: var(--purple-fg);
.icon {
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%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='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%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='M2 1C.89 1 0 1.89 0 3v2c0 .751.41 1.402 1.018 1.744A2 2 0 0 0 1 7v7c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7a2 2 0 0 0-.018-.256A2 2 0 0 0 16 5V3c0-1.11-.89-2-2-2zm0 2h12v2H2zm1 4h10v7H3zm3 1v1h4V8z'/%3E%3C/svg%3E");
-webkit-mask-image: $icon;
mask-image: $icon;
background-color: var(--purple-fg);

7
sass/_tags.scss
View File

@ -7,12 +7,7 @@
list-style: none;
&.inline {
margin-left: 0.25rem;
:root[dir*="rtl"] & {
margin-right: 0.25rem;
margin-left: unset;
}
margin-inline-start: 0.25rem;
}
li {

33
sass/_typography.scss
View File

@ -45,21 +45,15 @@ figcaption {
blockquote {
margin: 0;
border-left: 0.25rem solid var(--primary-color);
border-inline-start: 0.25rem solid var(--primary-color);
border-radius: 0.25rem;
padding: 0 0.75rem;
color: var(--fg-muted-5);
:root[dir*="rtl"] & {
border-right: 0.25rem solid var(--primary-color);
border-left: unset;
}
}
mark,
del,
ins,
time,
samp,
q {
box-shadow: var(--edge-highlight);
@ -86,31 +80,6 @@ ins {
text-decoration-thickness: max(1px, 0.0625em);
}
time {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
font-weight: bold;
strong {
animation: clock-blink 1s infinite;
font-weight: bold;
@keyframes clock-blink {
from {
color: var(--primary-color);
}
25% {
color: var(--primary-color-alpha);
}
50% {
color: var(--primary-color);
}
}
}
}
samp {
background-color: var(--fg-muted-1);
color: var(--fg-muted-5);