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

Update all CSS to use logical properties

Browse Source 
- Vendor CSS's are excluded for now
- Removed <IE7 asterisk prefix items
This commit is contained in:
iBug 2024-06-25 23:36:16 +08:00
parent 9ffaf41d20
commit 922440cd55
15 changed files with 159 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
_sass/minimal-mistakes/_archive.scss
View File

@ -7,7 +7,7 @@
margin-bottom: 2em;
@include breakpoint($large) {
float: right;
float: inline-end;
width: calc(100% - #{$right-sidebar-width-narrow});
padding-inline-end: $right-sidebar-width-narrow;
}
@ -53,10 +53,7 @@
a[rel="permalink"]::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
inset: 0;
}
a + a {
@ -98,14 +95,14 @@
.archive__item-caption {
position: absolute;
bottom: 0;
right: 0;
inset-inline-end: 0;
margin: 0 auto;
padding: 2px 5px;
color: #fff;
font-family: $caption-font-family;
font-size: $type-size-8;
background: #000;
text-align: right;
text-align: end;
z-index: 5;
opacity: 0.5;
border-radius: $border-radius 0 0 0;
@ -140,11 +137,11 @@
/* extend grid elements to the right */
@include breakpoint($large) {
margin-right: -1 * $right-sidebar-width-narrow;
margin-inline-end: -1 * $right-sidebar-width-narrow;
}
@include breakpoint($x-large) {
margin-right: -1 * $right-sidebar-width;
margin-inline-end: -1 * $right-sidebar-width;
}
}
}
@ -153,23 +150,22 @@
margin-bottom: 2em;
@include breakpoint($small) {
float: left;
float: inline-start;
width: span(5 of 10);
&:nth-child(2n + 1) {
clear: both;
margin-left: 0;
margin-inline-start: 0;
}
&:nth-child(2n + 2) {
clear: none;
margin-left: gutter(of 10);
margin-inline-start: gutter(of 10);
}
}
@include breakpoint($medium) {
margin-left: 0; /* override margin*/
margin-right: 0; /* override margin*/
margin-inline: 0; /* override margin*/
width: span(3 of 12);
&:nth-child(2n + 1) {
@ -182,17 +178,17 @@
&:nth-child(4n + 2) {
clear: none;
margin-left: gutter(1 of 12);
margin-inline-start: gutter(1 of 12);
}
&:nth-child(4n + 3) {
clear: none;
margin-left: gutter(1 of 12);
margin-inline-start: gutter(1 of 12);
}
&:nth-child(4n + 4) {
clear: none;
margin-left: gutter(1 of 12);
margin-inline-start: gutter(1 of 12);
}
}
@ -254,23 +250,23 @@
font-size: 1.125em;
@include breakpoint($small) {
float: left;
float: inline-start;
margin-bottom: 0;
width: span(4 of 12);
&:nth-child(3n + 1) {
clear: both;
margin-left: 0;
margin-inline-start: 0;
}
&:nth-child(3n + 2) {
clear: none;
margin-left: gutter(of 12);
margin-inline-start: gutter(of 12);
}
&:nth-child(3n + 3) {
clear: none;
margin-left: gutter(of 12);
margin-inline-start: gutter(of 12);
}
.feature__item-teaser {
@ -280,30 +276,25 @@
}
.archive__item-body {
padding-left: gutter(1 of 12);
padding-right: gutter(1 of 12);
padding-inline: gutter(1 of 12);
}
a.btn::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
inset: 0;
}
&--left {
position: relative;
float: left;
margin-left: 0;
margin-right: 0;
float: inline-start;
margin-inline: 0;
width: 100%;
clear: both;
font-size: 1.125em;
.archive__item {
float: left;
float: inline-start;
}
.archive__item-teaser {
@ -313,22 +304,19 @@
a.btn::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
inset: 0;
}
@include breakpoint($small) {
.archive__item-teaser {
float: left;
float: inline-start;
width: span(5 of 12);
}
.archive__item-body {
float: right;
padding-left: gutter(0.5 of 12);
padding-right: gutter(1 of 12);
float: inline-end;
padding-inline-start: gutter(0.5 of 12);
padding-inline-end: gutter(1 of 12);
width: span(7 of 12);
}
}
@ -336,15 +324,14 @@
&--right {
position: relative;
float: left;
margin-left: 0;
margin-right: 0;
float: inline-start;
margin-inline: 0;
width: 100%;
clear: both;
font-size: 1.125em;
.archive__item {
float: left;
float: inline-start;
}
.archive__item-teaser {
@ -354,34 +341,30 @@
a.btn::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
inset: 0;
}
@include breakpoint($small) {
text-align: right;
text-align: end;
.archive__item-teaser {
float: right;
float: inline-end;
width: span(5 of 12);
}
.archive__item-body {
float: left;
float: inline-start;
width: span(7 of 12);
padding-left: gutter(0.5 of 12);
padding-right: gutter(1 of 12);
padding-inline-start: gutter(0.5 of 12);
padding-inline-end: gutter(1 of 12);
}
}
}
&--center {
position: relative;
float: left;
margin-left: 0;
margin-right: 0;
float: inline-start;
margin-inline: 0;
width: 100%;
clear: both;
font-size: 1.125em;
@ -398,10 +381,7 @@
a.btn::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
inset: 0;
}
@include breakpoint($small) {
@ -442,14 +422,14 @@
Wide Pages
========================================================================== */
.wide {
.wide {
.archive {
@include breakpoint($large) {
padding-right: 0;
padding-inline-end: 0;
}
@include breakpoint($x-large) {
padding-right: 0;
padding-inline-end: 0;
}
}
}

4
_sass/minimal-mistakes/_base.scss
View File

@ -116,9 +116,9 @@ blockquote {
cite {
font-style: italic;
&:before {
&::before {
content: "\2014";
padding-right: 5px;
padding-inline-end: 5px;
}
}
}

6
_sass/minimal-mistakes/_buttons.scss
View File

@ -21,11 +21,11 @@
cursor: pointer;
.icon {
margin-right: 0.5em;
margin-inline-end: 0.5em;
}
.icon + .hidden {
margin-left: -0.5em; /* override for hidden text*/
margin-inline-start: -0.5em; /* override for hidden text*/
}
/* button colors */
@ -94,4 +94,4 @@
&--small {
font-size: $type-size-7;
}
}
}

14
_sass/minimal-mistakes/_footer.scss
View File

@ -4,9 +4,8 @@
.page__footer {
@include clearfix;
float: left;
margin-left: 0;
margin-right: 0;
float: inline-start;
margin-inline: 0;
width: 100%;
margin-top: 3em;
color: $muted-text-color;
@ -18,8 +17,7 @@
footer {
@include clearfix;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
margin-top: 2em;
max-width: 100%;
padding: 0 1em 2em;
@ -67,13 +65,13 @@
text-transform: uppercase;
}
li + li:before {
li + li::before {
content: "";
padding-right: 5px;
padding-inline-end: 5px;
}
a {
padding-right: 10px;
padding-inline-end: 10px;
font-weight: bold;
}

43
_sass/minimal-mistakes/_forms.scss
View File

@ -3,7 +3,7 @@
========================================================================== */
form {
margin: 0 0 5px 0;
margin-bottom: 5px;
padding: 1em;
background-color: $form-background-color;
@ -17,7 +17,7 @@ form {
display: block;
width: 100%;
margin-bottom: 5px * 2;
*margin-left: -7px;
margin-inline-start: -7px;
padding: 0;
color: $text-color;
border: 0;
@ -45,7 +45,6 @@ button,
select,
textarea {
vertical-align: baseline;
*vertical-align: middle;
}
input,
@ -102,7 +101,6 @@ input[type="radio"] {
height: auto;
padding: 0;
margin: 3px 0;
*margin-top: 0;
line-height: normal;
cursor: pointer;
border-radius: 0;
@ -114,8 +112,6 @@ input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
*width: 13px;
*height: 13px;
}
input[type="image"] {
@ -138,12 +134,6 @@ input[type="submit"] {
width: auto;
height: auto;
cursor: pointer;
*overflow: visible;
}
select,
input[type="file"] {
*margin-top: 4px;
}
select {
@ -173,14 +163,14 @@ input[type="hidden"] {
.radio,
.checkbox {
padding-left: 18px;
padding-inline-start: 18px;
font-weight: normal;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
margin-left: -18px;
float: inline-start;
margin-inline-start: -18px;
}
.radio.inline,
@ -193,7 +183,7 @@ input[type="hidden"] {
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-left: 10px;
margin-inline-start: 10px;
}
/*
@ -248,7 +238,7 @@ select:focus {
.help-inline {
display: inline-block;
vertical-align: middle;
padding-left: 5px;
padding-inline-start: 5px;
}
/*
@ -279,16 +269,16 @@ select:focus {
.form-inline .radio,
.form-inline .checkbox,
.form-inline .radio {
padding-left: 0;
padding-inline-start: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-left: 0;
margin-right: 3px;
float: inline-start;
margin-inline-start: 0;
margin-inline-end: 3px;
}
/*
@ -303,8 +293,7 @@ select:focus {
}
.form-search .search-query {
padding-left: 14px;
padding-right: 14px;
padding-inline: 14px;
margin-bottom: 0;
border-radius: 14px;
}
@ -324,15 +313,15 @@ select:focus {
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"] {
float: left;
margin-left: 0;
margin-right: 3px;
margin-inline-start: 0;
margin-inline-end: 3px;
}
/*
.form--loading
========================================================================== */
.form--loading:before {
.form--loading::before {
content: "";
}
@ -340,7 +329,7 @@ select:focus {
display: block;
}
.form:before {
.form::before {
position: absolute;
top: 0;
left: 0;

14
_sass/minimal-mistakes/_masthead.scss
View File

@ -13,8 +13,7 @@
&__inner-wrap {
@include clearfix;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
padding: 1em;
max-width: 100%;
display: -webkit-box;
@ -59,17 +58,16 @@
}
.masthead__menu {
float: left;
margin-left: 0;
margin-right: 0;
float: inline-start;
margin-inline: 0;
width: 100%;
clear: both;
.site-nav {
margin-left: 0;
margin-inline-start: 0;
@include breakpoint($small) {
float: right;
float: inline-end;
}
}
@ -87,7 +85,7 @@
white-space: nowrap;
&--lg {
padding-right: 2em;
padding-inline-end: 2em;
font-weight: 700;
}
}

48
_sass/minimal-mistakes/_navigation.scss
View File

@ -10,8 +10,7 @@
@include clearfix;
margin: 0 auto;
max-width: 100%;
padding-left: 1em;
padding-right: 1em;
padding-inline: 1em;
font-family: $sans-serif;
-webkit-animation: $intro-transition;
animation: $intro-transition;
@ -28,7 +27,7 @@
font-size: $type-size-6;
@include breakpoint($large) {
float: right;
float: inline-end;
width: calc(100% - #{$right-sidebar-width-narrow});
}
@ -104,15 +103,15 @@
margin-left: 0;
a {
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
border-start-start-radius: $border-radius;
border-end-start-radius: $border-radius;
}
}
&:last-child {
a {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
border-start-end-radius: $border-radius;
border-end-end-radius: $border-radius;
}
}
}
@ -137,14 +136,14 @@
}
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
&:last-child {
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-inline-start: -1px;
border-start-start-radius: 0;
border-end-start-radius: 0;
}
&.disabled {
@ -262,7 +261,7 @@
.hidden-links {
position: absolute;
top: 100%;
right: 0;
inset-inline-end: 0;
margin-top: 15px;
padding: 5px;
border: 1px solid $border-color;
@ -287,11 +286,11 @@
}
}
&:before {
&::before {
content: "";
position: absolute;
top: -11px;
right: 10px;
inset-inline-end: 10px;
width: 0;
border-style: solid;
border-width: 0 10px 10px;
@ -300,11 +299,11 @@
z-index: 0;
}
&:after {
&::after {
content: "";
position: absolute;
top: -10px;
right: 10px;
inset-inline-end: 10px;
width: 0;
border-style: solid;
border-width: 0 10px 10px;
@ -361,11 +360,11 @@
transition: 0.2s ease-out;
cursor: pointer;
&:before,
&:after {
&::before,
&::after {
content: "";
position: absolute;
right: 1em;
inset-inline-end: 1em;
top: 1.25em;
width: 0.75em;
height: 0.125em;
@ -446,9 +445,8 @@
}
.active {
margin-left: -0.5em;
padding-left: 0.5em;
padding-right: 0.5em;
margin-inline-start: -0.5em;
padding-inline: 0.5em;
font-weight: bold;
}
@ -516,8 +514,8 @@
color: #fff;
font-size: $type-size-6;
background: $primary-color;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
border-start-start-radius: $border-radius;
border-start-end-radius: $border-radius;
}
// Scrollspy marks toc items as .active when they are in focus

49
_sass/minimal-mistakes/_page.scss
View File

@ -4,10 +4,8 @@
#main {
@include clearfix;
margin-left: auto;
margin-right: auto;
padding-left: 1em;
padding-right: 1em;
margin-inline: auto;
padding-inline: 1em;
-webkit-animation: $intro-transition;
animation: $intro-transition;
max-width: 100%;
@ -37,7 +35,7 @@ body {
.page {
@include breakpoint($large) {
float: right;
float: inline-end;
width: calc(100% - #{$right-sidebar-width-narrow});
padding-inline-end: $right-sidebar-width-narrow;
}
@ -50,8 +48,7 @@ body {
.page__inner-wrap {
float: left;
margin-top: 1em;
margin-left: 0;
margin-right: 0;
margin-inline: 0;
width: 100%;
clear: both;
@ -59,9 +56,8 @@ body {
.page__meta,
.page__share {
position: relative;
float: left;
margin-left: 0;
margin-right: 0;
float: inline-start;
margin-inline: 0;
width: 100%;
clear: both;
}
@ -203,8 +199,7 @@ body {
}
.wrapper {
padding-left: 1em;
padding-right: 1em;
padding-inline: 1em;
@include breakpoint($x-large) {
max-width: $x-large;
@ -242,14 +237,14 @@ body {
.page__hero-caption {
position: absolute;
bottom: 0;
right: 0;
inset-inline-end: 0;
margin: 0 auto;
padding: 2px 5px;
color: #fff;
font-family: $caption-font-family;
font-size: $type-size-7;
background: #000;
text-align: right;
text-align: end;
z-index: 5;
opacity: 0.5;
border-radius: $border-radius 0 0 0;
@ -320,8 +315,7 @@ body {
.page__meta-sep::before {
content: "\2022";
padding-left: 0.5em;
padding-right: 0.5em;
padding-inline: 0.5em;
}
/*
@ -417,7 +411,7 @@ body {
color: $muted-text-color;
font-size: 0.6em;
text-transform: uppercase;
text-align: right;
text-align: end;
text-decoration: none;
}
@ -427,8 +421,7 @@ body {
.page__comments {
float: left;
margin-left: 0;
margin-right: 0;
margin-inline: 0;
width: 100%;
clear: both;
}
@ -494,7 +487,7 @@ body {
}
.comment__content-wrapper {
float: right;
float: inline-end;
width: calc(100% - 60px);
@include breakpoint($large) {
@ -556,23 +549,13 @@ body {
========================================================================== */
.wide {
.page {
.page, .page__related {
@include breakpoint($large) {
padding-right: 0;
padding-inline-end: 0;
}
@include breakpoint($x-large) {
padding-right: 0;
}
}
.page__related {
@include breakpoint($large) {
padding-right: 0;
}
@include breakpoint($x-large) {
padding-right: 0;
padding-inline-end: 0;
}
}
}

5
_sass/minimal-mistakes/_reset.scss
View File

@ -64,8 +64,6 @@ audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/* Prevents modern browsers from displaying 'audio' without controls */
@ -142,7 +140,6 @@ textarea {
button,
input {
*overflow: visible; /* inner spacing ie IE6/7*/
line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
}
@ -184,4 +181,4 @@ input[type="search"]::-webkit-search-cancel-button {
textarea {
overflow: auto; /* remove vertical scrollbar in IE6-9*/
vertical-align: top; /* readability and alignment cross-browser*/
}
}

9
_sass/minimal-mistakes/_search.scss
View File

@ -9,8 +9,7 @@
}
.search__toggle {
margin-left: 1rem;
margin-right: 1rem;
margin-inline: 1rem;
height: $nav-toggle-height;
border: 0;
outline: none;
@ -38,10 +37,8 @@
&__inner-wrap {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1em;
padding-right: 1em;
margin-inline: auto;
padding-inline: 1em;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.15s;

30
_sass/minimal-mistakes/_sidebar.scss
View File

@ -108,12 +108,12 @@
.splash .sidebar__right {
@include breakpoint($large) {
position: relative;
float: right;
margin-right: 0;
float: inline-end;
margin-inline-end: 0;
}
@include breakpoint($x-large) {
margin-right: 0;
margin-inline-end: 0;
}
}
@ -147,15 +147,13 @@
.author__content {
display: table-cell;
vertical-align: top;
padding-left: 15px;
padding-right: 25px;
padding-inline: 15px 25px;
line-height: 1;
@include breakpoint($large) {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
padding-inline: 0;
}
a {
@ -219,7 +217,7 @@
content: '';
position: fixed;
top: 0;
left: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
pointer-events: none;
@ -241,7 +239,7 @@
.author__urls {
display: none;
position: absolute;
right: 0;
inset-inline-end: 0;
margin-top: 15px;
padding: 10px;
list-style-type: none;
@ -265,12 +263,12 @@
box-shadow: none;
}
&:before {
&::before {
display: block;
content: "";
position: absolute;
top: -11px;
left: calc(50% - 10px);
inset-inline-start: calc(50% - 10px);
width: 0;
border-style: solid;
border-width: 0 10px 10px;
@ -287,7 +285,7 @@
content: "";
position: absolute;
top: -10px;
left: calc(50% - 10px);
inset-inline-start: calc(50% - 10px);
width: 0;
border-style: solid;
border-width: 0 10px 10px;
@ -333,10 +331,10 @@
@include breakpoint($large) {
position: initial;
top: initial;
right: initial;
inset-inline-end: initial;
width: initial;
margin-right: initial;
padding-left: initial;
margin-inline-end: initial;
padding-inline-start: initial;
z-index: initial;
&.sticky {
@ -346,6 +344,6 @@
@include breakpoint($x-large) {
width: initial;
margin-right: initial;
margin-inline-end: initial;
}
}

8
_sass/minimal-mistakes/_syntax.scss
View File

@ -37,11 +37,11 @@ figure.highlight {
/* line numbers*/
&.gutter,
&.rouge-gutter {
padding-right: 1em;
padding-inline-end: 1em;
width: 1em;
color: $base04;
border-right: 1px solid $base04;
text-align: right;
border-inline-end: 1px solid $base04;
text-align: end;
}
/* code */
@ -325,4 +325,4 @@ figure.highlight {
th, td {
border-bottom: 0;
}
}
}

4
_sass/minimal-mistakes/_tables.scss
View File

@ -24,7 +24,7 @@ thead {
th {
padding: 0.5em;
font-weight: bold;
text-align: left;
text-align: start;
}
td {
@ -36,4 +36,4 @@ tr,
td,
th {
vertical-align: middle;
}
}

42
_sass/minimal-mistakes/_utilities.scss
View File

@ -83,20 +83,11 @@ body:hover .visually-hidden button {
Type
========================================================================== */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
$text-alignments: left, right, start, end, center, justify;
@each $alignment in $text-alignments {
.text-#{$alignment} {
text-align: $alignment;
}
}
.text-nowrap {
@ -108,7 +99,7 @@ body:hover .visually-hidden button {
========================================================================== */
.task-list {
padding:0;
padding: 0;
li {
list-style-type: none;
@ -135,8 +126,7 @@ body:hover .visually-hidden button {
}
.wrapper {
margin-left: auto;
margin-right: auto;
margin-inline: auto;
width: 100%;
}
@ -148,8 +138,7 @@ body:hover .visually-hidden button {
.align-left {
display: block;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
@include breakpoint($small) {
float: left;
@ -161,8 +150,7 @@ body:hover .visually-hidden button {
.align-right {
display: block;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
@include breakpoint($small) {
float: right;
@ -174,8 +162,7 @@ body:hover .visually-hidden button {
.align-center {
display: block;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
}
/* file page content container */
@ -533,7 +520,7 @@ pre {
display: block;
position: absolute;
top: 0.6em;
right: 0.5em;
inset-inline-end: 0.5em;
width: 1.8em;
height: 1.5em;
z-index: 1;
@ -548,17 +535,14 @@ pre {
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
z-index: 2;
}
i {
position: absolute;
top: 0.25em;
right: 0.25em;
inset-inline-end: 0.25em;
&.copied {
opacity: 0;
}

8
a.scss Normal file
View File

@ -0,0 +1,8 @@
label,
input,
button,
select,
textarea {
vertical-align: baseline;
*vertical-align: middle;
}