From 20708f2d7b89df3f2a96589aaa776c10542c4e43 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 11 Dec 2024 19:43:52 +0100
Subject: [PATCH] Use block and inline intead of left, bottom etc.

---
 assets/sass/_zen.scss                                     | 6 +++---
 assets/sass/base/forms/_forms.scss                        | 2 +-
 assets/sass/components/box/_box.scss                      | 2 +-
 assets/sass/components/button/_button.scss                | 8 ++++----
 assets/sass/components/cards/_cards.scss                  | 2 +-
 assets/sass/components/cookieconsent/_cookieconsent.scss  | 2 +-
 assets/sass/components/divider/_divider.scss              | 2 +-
 .../components/responsive-video/_responsive-video.scss    | 8 ++++----
 assets/sass/mobile.scss                                   | 4 ++--
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index 1466754..375fa7a 100644
--- a/assets/sass/_zen.scss
+++ b/assets/sass/_zen.scss
@@ -11,7 +11,7 @@ body {
 }
 
 .footer {
-  border-top: 2px solid var(--color-border);
+  border-block-start: 2px solid var(--color-border);
 }
 
 // Apply smaller text to blocks, footer etc.
@@ -100,11 +100,11 @@ article {
 // Navigation
 
 .main-menu {
-  margin-top: .75rem;
+  margin-block-start: .75rem;
   outline: 0;
 
   li {
-    margin-bottom: .75rem;
+    margin-block-end: .75rem;
     padding: 0;
   }
 
diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss
index d0d89f0..2e2fd58 100644
--- a/assets/sass/base/forms/_forms.scss
+++ b/assets/sass/base/forms/_forms.scss
@@ -69,7 +69,7 @@ textarea {
 @include respond-to(s) {
   input:only-of-type {
     &:has(+ [type='submit']) {
-      margin-right: .5rem;
+      margin-inline-end: .5rem;
     }
   }
 }
diff --git a/assets/sass/components/box/_box.scss b/assets/sass/components/box/_box.scss
index 1ea1221..381b397 100644
--- a/assets/sass/components/box/_box.scss
+++ b/assets/sass/components/box/_box.scss
@@ -65,7 +65,7 @@
     }
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 }
diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss
index 6ee84b7..f35a97c 100644
--- a/assets/sass/components/button/_button.scss
+++ b/assets/sass/components/button/_button.scss
@@ -21,8 +21,8 @@ button,
   text-decoration: none;
   text-align: center;
   width: fit-content;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
+  margin-inline-end: 1rem;
+  margin-block-end: 1rem;
   padding: .2rem 1rem;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
@@ -46,8 +46,8 @@ button,
 %button {
   &--small {
     font-size: var(--fs-xs);
-    margin-right: .5rem;
-    margin-bottom: .5rem;
+    margin-inline-end: .5rem;
+    margin-block-end: .5rem;
     padding: .2rem .75rem;
   }
 
diff --git a/assets/sass/components/cards/_cards.scss b/assets/sass/components/cards/_cards.scss
index 2a622f0..2ec8df9 100644
--- a/assets/sass/components/cards/_cards.scss
+++ b/assets/sass/components/cards/_cards.scss
@@ -39,7 +39,7 @@
     }
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 }
diff --git a/assets/sass/components/cookieconsent/_cookieconsent.scss b/assets/sass/components/cookieconsent/_cookieconsent.scss
index 6f9bedd..36b55a5 100644
--- a/assets/sass/components/cookieconsent/_cookieconsent.scss
+++ b/assets/sass/components/cookieconsent/_cookieconsent.scss
@@ -11,7 +11,7 @@
   padding-block-start: .5rem;
   color: var(--color-warning);
   background-color: var(--color-warning-bg);
-  border-top: 4px solid var(--color-warning-border);
+  border-block-start: 4px solid var(--color-warning-border);
   font-size: var(--fs-s);
   transform: translateY(100vh);
   transition: all 130ms ease-out;
diff --git a/assets/sass/components/divider/_divider.scss b/assets/sass/components/divider/_divider.scss
index 0de6146..e74b7c8 100644
--- a/assets/sass/components/divider/_divider.scss
+++ b/assets/sass/components/divider/_divider.scss
@@ -7,7 +7,7 @@
   // Add vertical rhythm margins.
   @include margin-block(1);
   border: 0;
-  border-top: 1px solid var(--color-border);
+  border-block-start: 1px solid var(--color-border);
 
   // If used as a container, add a top margin to the first child.
   > :first-child {
diff --git a/assets/sass/components/responsive-video/_responsive-video.scss b/assets/sass/components/responsive-video/_responsive-video.scss
index 318b189..94d7bf5 100644
--- a/assets/sass/components/responsive-video/_responsive-video.scss
+++ b/assets/sass/components/responsive-video/_responsive-video.scss
@@ -12,8 +12,8 @@
   --aspect-ratio: 9 / 16; // 16:9 aspect ratio
 
   position: relative;
-  padding-bottom: calc(var(--aspect-ratio) * 100%); // 16:9 aspect ratio
-  padding-top: 25px; // Height of video controls
+  padding-block-end: calc(var(--aspect-ratio) * 100%); // 16:9 aspect ratio
+  padding-block-start: 25px; // Height of video controls
   height: 0;
 
   iframe {
@@ -22,8 +22,8 @@
 
   &__embed {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
   }
diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss
index ca372f0..cd5b249 100644
--- a/assets/sass/mobile.scss
+++ b/assets/sass/mobile.scss
@@ -79,7 +79,7 @@
   &__hamburger {
     fill: var(--color-button-text);
     width: 1.6rem;
-    margin-left: .1rem;
+    margin-inline-start: .1rem;
 
     .button--outline & {
       fill: var(--color-button);
@@ -127,7 +127,7 @@
 
   &__region {
     &:not(:empty) {
-      margin-bottom: .5rem;
+      margin-block-end: .5rem;
     }
   }