steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Replace '[dir=rtl] &' with CSS logical properties where it makes sense

Browse Source
This commit is contained in:
iBug
2024-06-25 22:49:22 +08:00
parent 97f0f35498
commit ded2d87b2b
6 changed files with 32 additions and 160 deletions

14
_sass/minimal-mistakes/_archive.scss

@ -9,22 +9,12 @@
@include breakpoint($large) { @include breakpoint($large) {
float: right; float: right;
width: calc(100% - #{$right-sidebar-width-narrow}); width: calc(100% - #{$right-sidebar-width-narrow});
padding-right: $right-sidebar-width-narrow; padding-inline-end: $right-sidebar-width-narrow;
[dir=rtl] & {
padding-right: 0;
padding-left: $right-sidebar-width-narrow;
}
} }
@include breakpoint($x-large) { @include breakpoint($x-large) {
width: calc(100% - #{$right-sidebar-width}); width: calc(100% - #{$right-sidebar-width});
padding-right: $right-sidebar-width; padding-inline-end: $right-sidebar-width;
[dir=rtl] & {
padding-right: 0;
padding-left: $right-sidebar-width;
}
} }
} }

14
_sass/minimal-mistakes/_base.scss

@ -107,17 +107,11 @@ abbr[data-original-title] {
/* blockquotes */ /* blockquotes */
blockquote { blockquote {
margin: 2em 1em 2em 0; margin-block: 2em;
padding-left: 1em; margin-inline-start: 1em;
padding-right: 1em; padding-inline: 1em;
font-style: italic; font-style: italic;
border-left: 0.25em solid $primary-color; border-inline-start: 0.25em solid $primary-color;
[dir=rtl] & {
border-left: none;
border-right: .25em solid $primary-color;
margin: 2em 0 2em 1em;
}
cite { cite {
font-style: italic; font-style: italic;

51
_sass/minimal-mistakes/_navigation.scss

@ -192,22 +192,12 @@
} }
&.site-logo { &.site-logo {
margin-left: 0; margin-inline-start: 0;
margin-right: 0.5rem; margin-inline-end: 0.5rem;
[dir=rtl] & {
margin-right: 0;
margin-left: 0.5rem;
}
} }
&.site-title { &.site-title {
margin-left: 0; margin-inline-start: 0;
[dir=rtl] & {
margin-left: 1rem;
margin-right: 0;
}
} }
} }
@ -561,48 +551,23 @@
} }
li ul > li a { li ul > li a {
padding-left: 1.25rem; padding-inline-start: 1.25rem;
font-weight: normal; font-weight: normal;
[dir=rtl] & {
padding-left: 0;
padding-right: 1.25rem;
}
} }
li ul li ul > li a { li ul li ul > li a {
padding-left: 1.75rem; padding-inline-start: 1.75rem;
[dir=rtl] & {
padding-left: 0;
padding-right: 1.75rem;
}
} }
li ul li ul li ul > li a { li ul li ul li ul > li a {
padding-left: 2.25rem; padding-inline-start: 2.25rem;
[dir=rtl] & {
padding-left: 0;
padding-right: 2.25rem;
}
} }
li ul li ul li ul li ul > li a { li ul li ul li ul li ul > li a {
padding-left: 2.75rem; padding-inline-start: 2.75rem;
[dir=rtl] & {
padding-left: 0;
padding-right: 2.75rem;
}
} }
li ul li ul li ul li ul li ul > li a { li ul li ul li ul li ul li ul > li a {
padding-left: 3.25rem; padding-inline-start: 3.25rem;
[dir=rtl] & {
padding-left: 0;
padding-right: 3.25rem;
}
} }
} }

47
_sass/minimal-mistakes/_page.scss

@ -39,22 +39,12 @@ body {
@include breakpoint($large) { @include breakpoint($large) {
float: right; float: right;
width: calc(100% - #{$right-sidebar-width-narrow}); width: calc(100% - #{$right-sidebar-width-narrow});
padding-right: $right-sidebar-width-narrow; padding-inline-end: $right-sidebar-width-narrow;
[dir=rtl] & {
padding-right: 0;
padding-left: $right-sidebar-width-narrow;
}
} }
@include breakpoint($x-large) { @include breakpoint($x-large) {
width: calc(100% - #{$right-sidebar-width}); width: calc(100% - #{$right-sidebar-width});
padding-right: $right-sidebar-width; padding-inline-end: $right-sidebar-width;
[dir=rtl] & {
padding-right: 0;
padding-left: $right-sidebar-width;
}
} }
.page__inner-wrap { .page__inner-wrap {
@ -106,18 +96,13 @@ body {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
.header-link { .header-link {
position: relative; position: relative;
left: 0.5em; inset-inline-start: 0.5em;
opacity: 0; opacity: 0;
font-size: 0.8em; font-size: 0.8em;
-webkit-transition: opacity 0.2s ease-in-out 0.1s; -webkit-transition: opacity 0.2s ease-in-out 0.1s;
-moz-transition: opacity 0.2s ease-in-out 0.1s; -moz-transition: opacity 0.2s ease-in-out 0.1s;
-o-transition: opacity 0.2s ease-in-out 0.1s; -o-transition: opacity 0.2s ease-in-out 0.1s;
transition: opacity 0.2s ease-in-out 0.1s; transition: opacity 0.2s ease-in-out 0.1s;
[dir=rtl] & {
left: 0;
right: .5em;
}
} }
&:hover .header-link { &:hover .header-link {
@ -349,29 +334,19 @@ body {
} }
strong { strong {
margin-right: 10px; margin-inline-end: 10px;
[dir=rtl] & {
margin-right: 0;
margin-left: 10px;
}
} }
} }
.page__taxonomy-item { .page__taxonomy-item {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
margin-bottom: 8px; margin-bottom: 8px;
padding: 5px 10px; padding: 5px 10px;
text-decoration: none; text-decoration: none;
border: 1px solid mix(#000, $border-color, 25%); border: 1px solid mix(#000, $border-color, 25%);
border-radius: $border-radius; border-radius: $border-radius;
[dir=rtl] & {
margin-right: 0;
margin-left: 5px;
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: $link-color-hover; color: $link-color-hover;
@ -550,22 +525,14 @@ body {
.page__related { .page__related {
@include clearfix(); @include clearfix();
float: left; float: inline-start;
margin-top: 2em; margin-top: 2em;
padding-top: 1em; padding-top: 1em;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
[dir=rtl] & {
float: right;
}
@include breakpoint($large) { @include breakpoint($large) {
float: right; float: inline-end;
width: calc(100% - #{$right-sidebar-width-narrow}); width: calc(100% - #{$right-sidebar-width-narrow});
[dir=rtl] & {
float: left;
}
} }
@include breakpoint($x-large) { @include breakpoint($x-large) {

52
_sass/minimal-mistakes/_sidebar.scss

@ -17,16 +17,12 @@
// } // }
@include breakpoint($large) { @include breakpoint($large) {
float: left; float: inline-start;
width: calc(#{$right-sidebar-width-narrow} - 1em); width: calc(#{$right-sidebar-width-narrow} - 1em);
opacity: 0.75; opacity: 0.75;
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
[dir=rtl] & {
float: right;
}
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
@ -81,31 +77,18 @@
@include breakpoint($large) { @include breakpoint($large) {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
width: $right-sidebar-width-narrow; width: $right-sidebar-width-narrow;
margin-right: -1 * $right-sidebar-width-narrow; margin-inline-end: -1 * $right-sidebar-width-narrow;
padding-left: 1em; padding-inline-start: 1em;
z-index: 10; z-index: 10;
[dir=rtl] & {
right: auto;
left: 0;
margin-right: 0;
margin-left: -1 * $right-sidebar-width-narrow;
padding-left: 0;
padding-right: 1em;
}
&.sticky { &.sticky {
@include clearfix(); @include clearfix();
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 2em; top: 2em;
float: right; float: inline-start;
[dir=rtl] & {
float: left;
}
.toc { .toc {
.toc__menu { .toc__menu {
@ -118,12 +101,7 @@
@include breakpoint($x-large) { @include breakpoint($x-large) {
width: $right-sidebar-width; width: $right-sidebar-width;
margin-right: -1 * $right-sidebar-width; margin-inline-end: -1 * $right-sidebar-width;
[dir=rtl] & {
margin-right: 0;
margin-left: -1 * $right-sidebar-width;
}
} }
} }
@ -224,12 +202,7 @@
.author__urls { .author__urls {
span.label { span.label {
padding-left: 5px; padding-inline-start: 5px;
[dir=rtl] & {
padding-left: 0;
padding-right: 5px;
}
} }
} }
@ -338,18 +311,12 @@
a { a {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
padding-right: 5px; padding-block: 2px;
padding-top: 2px; padding-inline-end: 5px;
padding-bottom: 2px;
color: inherit; color: inherit;
font-size: $type-size-5; font-size: $type-size-5;
text-decoration: none; text-decoration: none;
[dir=rtl] & {
padding-right: 0;
padding-left: 5px;
}
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -382,4 +349,3 @@
margin-right: initial; margin-right: initial;
} }
} }

14
_sass/minimal-mistakes/_utilities.scss

@ -115,13 +115,8 @@ body:hover .visually-hidden button {
} }
.task-list-item-checkbox { .task-list-item-checkbox {
margin-right: 0.5em; margin-inline-end: 0.5em;
opacity: 1; opacity: 1;
[dir=rtl] & {
margin-left: .5em;
margin-right: 0;
}
} }
} }
@ -187,12 +182,7 @@ body:hover .visually-hidden button {
.full { .full {
@include breakpoint($large) { @include breakpoint($large) {
margin-right: -1 * span(2.5 of 12) !important; margin-inline-end: -1 * span(2.5 of 12) !important;
[dir=rtl] & {
margin-right: 0 !important;
margin-left: -1 * span(2.5 of 12) !important;
}
} }
} }