From 5c46064ba9b3d0c123a9208364186af6147f4fcd Mon Sep 17 00:00:00 2001
From: Matthias Hertel <mathertel@hotmail.com>
Date: Wed, 20 Mar 2024 18:51:21 +0100
Subject: [PATCH] Borders in pixel

---
 css/base.scss    | 27 ++++++++++++++++-----------
 css/iot.scss     | 10 ++--------
 iotstyle.css     | 37 ++++++++++++++++++-------------------
 iotstyle.css.map |  2 +-
 4 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/css/base.scss b/css/base.scss
index c637747..2c17faa 100644
--- a/css/base.scss
+++ b/css/base.scss
@@ -27,28 +27,33 @@ $u-connect: #00cc00; // connectivity / net
 $u-on: color.adjust(green, $lightness: 10%);
 $u-off: red;
 
-$u-border: 0.1em solid $u-border-color;
-$u-border-none: 0.1em solid transparent;
-$u-border-active: 0.1em solid $u-border-color-active;
+
+$u-padding-text: 4px;
+$u-padding-block: calc(2*$u-padding-text);
+
+$u-border-size: 1px;
+$u-border: $u-border-size solid $u-border-color;
+$u-border-none: $u-border-size solid transparent;
+$u-border-active: $u-border-size solid $u-border-color-active;
 
 $u-navbar: $u-primary;
 $u-navbar-text: white;
 
 
-// ===== Sizes =====
+// ===== Content Box Sizes =====
 
 $u-white-space: 1rem;
 $u-gutter: calc($u-white-space / 2);
 $u-gutter2: calc($u-white-space / 4);
 
-$u-btn-radius: 0.2em;
+$u-btn-radius: calc($u-padding-block/2);
 $u-output-border: $u-border-none;
 
 
 // ===== global Layout =====
 
 $u-card-border: none;
-$u-card-radius: 0.4rem;
+$u-card-radius: $u-padding-block;
 
 
 // ===== font =====
@@ -90,7 +95,7 @@ body {
 
 @media (width > 800px) {
   body {
-    padding: $u-white-space;
+    padding: 2* $u-padding-text;
   }
 }
 
@@ -214,14 +219,14 @@ pre>code {
 }
 
 p>code {
-  padding-left: 0.1em;
-  padding-right: 0.1em;
+  padding-left: 2*$u-padding-text;
+  padding-right: $u-padding-text;
 }
 
 pre>code {
   display: block;
   border-radius: $u-card-radius;
-  padding: 0.1em;
+  padding: $u-padding-text;
 }
 
 // form elements
@@ -400,7 +405,7 @@ main {
   display: flex;
   flex-flow: row nowrap;
   margin-bottom: $u-gutter;
-  padding: $u-gutter $u-white-space;
+  padding: 2*$u-padding-text 4*$u-padding-text;
   background-color: $u-navbar;
   color: $u-navbar-text;
 
diff --git a/css/iot.scss b/css/iot.scss
index 7d8d5be..3cdbaa5 100644
--- a/css/iot.scss
+++ b/css/iot.scss
@@ -77,7 +77,7 @@ $u-card-wide-width: calc(4 * $u-grid-width + 3 * $u-gutter);
   >.block {
     position: relative;
     flex: 1 1 auto;
-    padding: $u-gutter $u-white-space;
+    padding: $u-padding-block;
     min-height: 2rem;
 
     &.header {
@@ -94,7 +94,6 @@ $u-card-wide-width: calc(4 * $u-grid-width + 3 * $u-gutter);
     }
 
     &.footer {
-      padding: $u-gutter $u-white-space;
       border-top: 1px solid rgb(0 0 0 / 12.5%);
     }
   }
@@ -164,7 +163,7 @@ button,
   min-width: 6.5ch;
 
   // height: 1.4em;
-  padding: 0.1em 0.2em;
+  padding: calc($u-padding-text/2) $u-padding-text;
   border-radius: $u-btn-radius;
   border-color: $u-primary;
   background-color: $u-primary;
@@ -191,11 +190,6 @@ button,
     background-color: #777777;
     border-color: #777777;
   }
-
-  // + button,
-  // + .button {
-  //   margin-left: $u-gutter;
-  // }
 }
 
 // standard input elements
diff --git a/iotstyle.css b/iotstyle.css
index a662a8e..d2ed572 100644
--- a/iotstyle.css
+++ b/iotstyle.css
@@ -30,7 +30,7 @@ body {
 
 @media (width > 800px) {
   body {
-    padding: 1rem;
+    padding: 8px;
   }
 }
 /* apply a natural box layout model to all elements, but allowing components to change */
@@ -191,14 +191,14 @@ pre > code {
 }
 
 p > code {
-  padding-left: 0.1em;
-  padding-right: 0.1em;
+  padding-left: 8px;
+  padding-right: 4px;
 }
 
 pre > code {
   display: block;
-  border-radius: 0.4rem;
-  padding: 0.1em;
+  border-radius: 8px;
+  padding: 4px;
 }
 
 label,
@@ -211,7 +211,7 @@ button {
   display: inline-block;
   font-size: inherit;
   margin: 0;
-  border: 0.1em solid transparent;
+  border: 1px solid transparent;
   padding: 0.1em 0.2em;
   color: currentcolor;
 }
@@ -359,7 +359,7 @@ main {
   display: flex;
   flex-flow: row nowrap;
   margin-bottom: 0.5rem;
-  padding: 0.5rem 1rem;
+  padding: 8px 16px;
   background-color: hsl(220, 80%, 30%);
   color: white;
 }
@@ -412,7 +412,7 @@ main {
   flex-direction: column;
   background-color: var(--card-back);
   border: none;
-  border-radius: 0.4rem;
+  border-radius: 8px;
 }
 @media print {
   .card {
@@ -451,13 +451,13 @@ main {
 .card > .block {
   position: relative;
   flex: 1 1 auto;
-  padding: 0.5rem 1rem;
+  padding: 8px;
   min-height: 2rem;
 }
 .card > .block.header {
   background-color: var(--card-head);
-  border-top-right-radius: 0.4rem;
-  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
   min-height: 2.75em;
   max-height: 4rem;
 }
@@ -466,7 +466,6 @@ main {
   margin: 0;
 }
 .card > .block.footer {
-  padding: 0.5rem 1rem;
   border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 .card > hr {
@@ -524,8 +523,8 @@ button,
 .button {
   display: inline-block;
   min-width: 6.5ch;
-  padding: 0.1em 0.2em;
-  border-radius: 0.2em;
+  padding: 2px 4px;
+  border-radius: 4px;
   border-color: hsl(220, 80%, 30%);
   background-color: hsl(220, 80%, 30%);
   color: white;
@@ -600,12 +599,12 @@ input.switch[type=range] {
   border-radius: 0;
 }
 .btn-group > *:first-child {
-  border-top-left-radius: 0.2em;
-  border-bottom-left-radius: 0.2em;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 .btn-group > *:last-child {
-  border-top-right-radius: 0.2em;
-  border-bottom-right-radius: 0.2em;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .form-grid {
@@ -737,7 +736,7 @@ input.switch[type=range] {
 }
 
 .border {
-  border: 0.1em solid #555555;
+  border: 1px solid #555555;
 }
 
 /* === Display Element === */
diff --git a/iotstyle.css.map b/iotstyle.css.map
index 24e473b..4c31362 100644
--- a/iotstyle.css.map
+++ b/iotstyle.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["css/base.scss","css/iot.scss"],"names":[],"mappings":"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5Ha;EC6Hb,cDzJU;EC0JV,kBD1JU;EC2JV,OD1Je;EC2Jf;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;EAEE,cD/JS;ECgKT,kBDhKS;;ACmKX;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;;AAWJ;EACE,ODtLW;;;AC2Lb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE,wBDtNW;ECuNX,2BDvNW;;AC0Nb;EACE,yBD3NW;EC4NX,4BD5NW;;;ACgOf;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,KDjQU;;;ACuQZ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA,cDhWU;ECiWV;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,QDlYS;;;ACqYX;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OD5aG;;AC+aL;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,ODncK;ECocL;;;AAOJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EAGE","file":"iotstyle.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["css/base.scss","css/iot.scss"],"names":[],"mappings":"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EAGA;EACA,eDtHa;ECuHb,cDxJU;ECyJV,kBDzJU;EC0JV,ODzJe;EC0Jf;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;EAEE,cD9JS;EC+JT,kBD/JS;;ACkKX;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;;AAMJ;EACE,ODhLW;;;ACqLb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE,wBD3MW;EC4MX,2BD5MW;;AC+Mb;EACE,yBDhNW;ECiNX,4BDjNW;;;ACqNf;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,KDtPU;;;AC4PZ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA,cD1VU;EC2VV;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,QDvXS;;;AC0XX;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,ODtaG;;ACyaL;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OD7bK;EC8bL;;;AAOJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EAGE","file":"iotstyle.css"}
\ No newline at end of file