Merge pull request #358 from machawk1/issue-357

Update width and height in CSS to use logical properties
machawk1 · Aug 24, 2023 · ad97ad4 · ad97ad4
2 parents 3721488 + 68ffff0
commit ad97ad4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 23 deletions.
diff --git a/mink-plugin/css/minkui.css b/mink-plugin/css/minkui.css
@@ -7,8 +7,8 @@
 }
 
 #minkuiX {
-    width: 100%;
-    height: 80px;
+    inline-size: 100%;
+    block-size: 80px;
     background-color: #eef;
     margin: 0;
     inset-block-start: 0;
@@ -24,22 +24,22 @@
 }
 
 #minkuiX #minkLogo {
-    height: 100%;
+    block-size: 100%;
     float: left;
     z-index: 2;
     position: relative;
 }
 
 #minkuiX #minkStatus {
-    width: 100%;
+    inline-size: 100%;
     position: absolute;
     inset-block-end: 0;
     inset-inline-start: 0;
     margin: 0;
     padding: 0;
     background-color: #ccf;
     z-index: 1;
-    height: 1.2em;
+    block-size: 1.2em;
     border-block-start: 1px solid #bbf;
     border-block-end: 2px solid #aaf;
 }
@@ -48,11 +48,11 @@
     list-style-type: none;
     margin: 0;
     padding: 0;
-    width: 700px;
+    inline-size: 700px;
 }
 
 #minkuiX #minkStatus li {
-    width: 100px;
+    inline-size: 100px;
     float: left;
     text-align: center;
     vertical-align: middle;
@@ -88,7 +88,7 @@
     text-decoration: none;
 }
 #minkuiX #minkStatus li#stepsTitle {
-    width: 200px;
+    inline-size: 200px;
     text-align: end;
 }
 
@@ -102,16 +102,16 @@ h1 {
 }
 
 .archiveNowInterface {
-    width: 50px;
-    height: 50px;
+    inline-size: 50px;
+    block-size: 50px;
     vertical-align: top;
     position: relative;
     z-index: 5;
 }
 
 #goBackButton {
-    width: auto;
-    height: 1.75em;
+    inline-size: auto;
+    block-size: 1.75em;
     margin-inline-start: 3.0em;
 }
 
@@ -147,11 +147,11 @@ h1 {
 
 #drilldownBox ul {
     list-style-type: none;
-    width: 100px;
+    inline-size: 100px;
     float: left;
     padding: 0;
     background-color: white;
-    max-height: 500px;
+    max-block-size: 500px;
     overflow-x: hidden;
     overflow-y: auto;
     margin-block-start: 0;
@@ -162,7 +162,7 @@ h1 {
     list-style-type: none;
     padding: 0;
     margin: 0;
-    width: 90px;
+    inline-size: 90px;
     text-decoration: none;
     color: inherit;
 }

diff --git a/mink-plugin/css/options.css b/mink-plugin/css/options.css
@@ -10,8 +10,8 @@ body {
 nav {
     background: linear-gradient(180deg, #fff 0%, #eee 10%);
     background-color: #eeeeee;
-    width: 25%;
-    height: 100%;
+    inline-size: 25%;
+    block-size: 100%;
     padding-block-start: 5%;
     position: fixed;
     inset-block-start: 100px;
@@ -24,7 +24,7 @@ nav ul {
 }
 
 nav ul li {
-    height: 15%;
+    block-size: 15%;
     padding-inline-end: 5%;
     margin-block-end: 1.0em;
 }
@@ -50,7 +50,7 @@ nav ul li p {
 }
 
 #logo {
-    width: 25%;
+    inline-size: 25%;
     text-align: center;
     position: fixed;
     inset-block-start: 10px;
@@ -59,7 +59,7 @@ nav ul li p {
 }
 
 #logo img {
-    width: 128px;
+    inline-size: 128px;
 }
 
 main {
@@ -111,8 +111,8 @@ fieldset {
     background-color: red;
     font-weight: bold;
     margin-inline-start: 1.0em;
-    width: 1.0em;
-    height: 1.0em;
+    inline-size: 1.0em;
+    block-size: 1.0em;
     border-radius: 15px;
 }
 

diff --git a/mink-plugin/manifest.json b/mink-plugin/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Mink - Integrate Live & Archived Web +Memento",
   "short_name": "Mink",
-  "version": "2.5.5.2",
+  "version": "2.5.5.3",
   "description": "Integrating the Live and Archived Web Viewing Experience Using Memento",
   "homepage_url": "https://matkelly.com/mink",
   "author": "Mat Kelly <[email protected]>",