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

16
content/demo/index.md
View File

@ -367,22 +367,6 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
<del>Text deleted</del> <ins>Text added</ins> <del>Text deleted</del> <ins>Text added</ins>
## Time
```html
<time>13:37</time>
```
<time>13:37</time>
For blinking animation, make the time bold
```html
<time>**13:37**</time>
```
<time>**13:37**</time>
## Progress bar ## Progress bar
```html ```html

49
sass/_alerts.scss
View File

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

11
sass/_article-list.scss
View File

@ -9,12 +9,7 @@
position: relative; position: relative;
h3 { h3 {
margin-right: 8rem; margin-inline-end: 8rem;
:root[dir*="rtl"] & {
margin-right: unset;
margin-left: 8rem;
}
} }
} }
@ -132,6 +127,7 @@
.icon { .icon {
vertical-align: -0.125em; vertical-align: -0.125em;
margin-inline-end: 0.25rem;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }
@ -159,7 +155,8 @@
color: var(--purple-fg); color: var(--purple-fg);
.icon { .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; -webkit-mask-image: $icon;
mask-image: $icon; mask-image: $icon;
background-color: var(--purple-fg); background-color: var(--purple-fg);

11
sass/_comments.scss
View File

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

4
sass/_external.scss
View File

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

21
sass/_nav.scss
View File

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

5
sass/_not-found.scss
View File

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

12
sass/_post-nav.scss
View File

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

3
sass/_statements.scss
View File

@ -34,7 +34,8 @@
color: var(--purple-fg); color: var(--purple-fg);
.icon { .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; -webkit-mask-image: $icon;
mask-image: $icon; mask-image: $icon;
background-color: var(--purple-fg); background-color: var(--purple-fg);

7
sass/_tags.scss
View File

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

33
sass/_typography.scss
View File

@ -45,21 +45,15 @@ figcaption {
blockquote { blockquote {
margin: 0; margin: 0;
border-left: 0.25rem solid var(--primary-color); border-inline-start: 0.25rem solid var(--primary-color);
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);
:root[dir*="rtl"] & {
border-right: 0.25rem solid var(--primary-color);
border-left: unset;
}
} }
mark, mark,
del, del,
ins, ins,
time,
samp, samp,
q { q {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
@ -86,31 +80,6 @@ ins {
text-decoration-thickness: max(1px, 0.0625em); 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 { samp {
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
color: var(--fg-muted-5); color: var(--fg-muted-5);

2
static/.domains
View File

@ -1,2 +0,0 @@
duckquill.daudix.one
duckquill.daudix.codeberg.page

2
templates/shortcodes/alert.html
View File

@ -12,7 +12,7 @@
{% if warning %}warning{% endif %} {% if warning %}warning{% endif %}
{% if caution %}caution{% endif %} {% if caution %}caution{% endif %}
"> ">
<p class="alert-name"> <p class="alert-title">
<i class="icon"></i> <i class="icon"></i>
{%- if note -%} {%- if note -%}
{{ macros_translate::translate(key="note", default="Note", language_strings=language_strings) }} {{ macros_translate::translate(key="note", default="Note", language_strings=language_strings) }}