From 5496ee39f07885b0a05ae8bd557d099cb4f7411c Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nnes.com@googlemail.com>
Date: Fri, 12 Jan 2024 00:30:21 +0000
Subject: [PATCH] continue implementations

---
 input.scss  |  2 +-
 layout.scss | 23 ++++++++++++++---------
 styles.css  | 19 ++++++++++---------
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/input.scss b/input.scss
index 377976e..75c4d96 100755
--- a/input.scss
+++ b/input.scss
@@ -452,7 +452,7 @@ input[type="range"] {
 
     button {
         box-sizing: border-box;
-        display: inline-block;
+        // display: inline-block; If I add this, icons in a button are no longer centered
         background: var(--button-colored-background);
         height: 30px;
         font-size: 1rem;
diff --git a/layout.scss b/layout.scss
index 51dd80c..12e4b65 100755
--- a/layout.scss
+++ b/layout.scss
@@ -10,7 +10,7 @@
     }
 
     .ipt-second {
-        padding-left: 5px;
+        padding-left: .75rem;
         display: table-cell;
         vertical-align: inherit;
     }
@@ -20,13 +20,22 @@
     display: flex;
     flex-direction: row;
 
-    div {
+    & + * {
+        margin-top: .75rem;
+    }
+
+    > div {
         flex: 1;
 
-        &:nth-child(n+1) {
-            padding-left: 5px;
+        &:nth-child(n+2) {
+            padding-left: .75rem;
         }
     }
+
+    > div.fixed {
+        flex: 0;
+        flex-basis: auto;
+    }
 }
 
 div.sticky, section.sticky {
@@ -82,12 +91,8 @@ div.sticky, section.sticky {
     }
 }
 
-* + .form-group {
-    margin-top: .75rem;
-}
-
 @media (max-width: 768px) {
-    .form-group {
+    .form-group, .flex-line {
         flex-direction: column;
     }
 }
diff --git a/styles.css b/styles.css
index 76bc5a0..5e55e02 100755
--- a/styles.css
+++ b/styles.css
@@ -1936,17 +1936,22 @@ article {
     display: table-cell;
     vertical-align: inherit; }
   .ipt-wrap .ipt-second {
-    padding-left: 5px;
+    padding-left: .75rem;
     display: table-cell;
     vertical-align: inherit; }
 
 .flex-line {
   display: flex;
   flex-direction: row; }
-  .flex-line div {
+  .flex-line + * {
+    margin-top: .75rem; }
+  .flex-line > div {
     flex: 1; }
-    .flex-line div:nth-child(n+1) {
-      padding-left: 5px; }
+    .flex-line > div:nth-child(n+2) {
+      padding-left: .75rem; }
+  .flex-line > div.fixed {
+    flex: 0;
+    flex-basis: auto; }
 
 div.sticky, section.sticky {
   position: sticky;
@@ -1982,11 +1987,8 @@ div.sticky, section.sticky {
   .form-group textarea, .form-group .contenteditable {
     height: 8rem; }
 
-* + .form-group {
-  margin-top: .75rem; }
-
 @media (max-width: 768px) {
-  .form-group {
+  .form-group, .flex-line {
     flex-direction: column; } }
 .wf-100 {
   width: 100%; }
@@ -2663,7 +2665,6 @@ input[type="range"] {
   flex-wrap: nowrap; }
   .input button {
     box-sizing: border-box;
-    display: inline-block;
     background: var(--button-colored-background);
     height: 30px;
     font-size: 1rem;