Use start/end for text-align and padding to handle rtl etc. better.

This commit is contained in:
Fredrik Jonsson 2023-04-23 16:47:14 +02:00
commit 8ca27a65c3
5 changed files with 23 additions and 8 deletions

View file

@ -63,7 +63,7 @@ article {
.tags { .tags {
@include respond-to(s) { @include respond-to(s) {
display: inline-block; display: inline-block;
padding-right: 1rem; padding-inline-end: 1rem;
} }
} }
@ -94,7 +94,7 @@ article {
} }
.content-dates { .content-dates {
text-align: right; text-align: end;
} }
// Figure and image. // Figure and image.

View file

@ -6,11 +6,10 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--gap); gap: var(--gap);
padding: 0; padding: 0;
text-align: left; text-align: start;
@include rtl() { @include rtl() {
flex-direction: row-reverse; flex-direction: row-reverse;
text-align: right;
} }
&__item, &__item,

View file

@ -9,7 +9,7 @@
display: table-row; display: table-row;
&::before { &::before {
@include padding-right(.5); @include padding-inline-end(.5);
display: table-cell; display: table-cell;
content: '\2022'; content: '\2022';
font-size: var(--fs-s); font-size: var(--fs-s);
@ -27,11 +27,11 @@
counter-increment: table-ol; counter-increment: table-ol;
&::before { &::before {
@include padding-right(.5); @include padding-inline-end(.5);
display: table-cell; display: table-cell;
content: counter(table-ol) '.'; content: counter(table-ol) '.';
font-size: var(--fs-s); font-size: var(--fs-s);
text-align: right; text-align: end;
} }
} }
} }

View file

@ -47,6 +47,14 @@
@include spacing(margin-right, $x); @include spacing(margin-right, $x);
} }
@mixin margin-inline-start($x) {
@include spacing(margin-inline-start, $x);
}
@mixin margin-inline-end($x) {
@include spacing(margin-inline-end, $x);
}
@mixin padding($x) { @mixin padding($x) {
@include spacing(padding, $x); @include spacing(padding, $x);
} }
@ -74,3 +82,11 @@
@mixin padding-right($x) { @mixin padding-right($x) {
@include spacing(padding-right, $x); @include spacing(padding-right, $x);
} }
@mixin padding-inline-start($x) {
@include spacing(padding-inline-start, $x);
}
@mixin padding-inline-end($x) {
@include spacing(padding-inline-end, $x);
}

View file

@ -142,7 +142,7 @@
&__navbar { &__navbar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 0; padding-inline-start: 0;
margin-block: 0; margin-block: 0;
li { li {