Use start/end for text-align and padding to handle rtl etc. better.
This commit is contained in:
parent
3012cad52e
commit
8ca27a65c3
5 changed files with 23 additions and 8 deletions
|
|
@ -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.
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue