From aa1fb65dd219aef3a7d0ed3df7973eff0c8a3669 Mon Sep 17 00:00:00 2001
From: hacki <hacki@gnous.eu>
Date: Tue, 27 Feb 2024 01:16:25 +0100
Subject: [PATCH] removed post icon and made button less wide

---
 front/index.html |  7 +------
 front/style.scss | 12 +++++++-----
 static/style.css | 17 +++++++++++------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/front/index.html b/front/index.html
index 13413ad..d4ce79c 100644
--- a/front/index.html
+++ b/front/index.html
@@ -44,12 +44,7 @@
         <option value="yml">YAML</option>
       </select>
     </label>
-    <button title="Save plak" type="submit">
-      <svg viewBox="0 0 24 24">
-        <line x1="22" y1="2" x2="11" y2="13"></line>
-        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-      </svg>
-    </button>
+    <button title="Save plak" type="submit">Save</button>
   </div>
   <section id="recent-plaks">
     <div class="title fr">
diff --git a/front/style.scss b/front/style.scss
index 3df0cd7..623ff8d 100644
--- a/front/style.scss
+++ b/front/style.scss
@@ -57,23 +57,26 @@ body {
   }
 }
 
+button,
 input,
 select {
   background-color: $background;
   border: 2px solid $border;
   color: $text;
   font: 500 14px/2 "Inter", "system-ui", sans-serif;
+  max-width: 145px;
   outline: none;
   padding: 3px 10px;
-  width: 150px;
-  transition: .15s ease;
+  transition: border .15s ease;
+  width: min-content;
+  
 
   &::placeholder {
     color: $placeholder;
   }
 
   &:hover {
-    border-color: #555;
+    border-color: #777;
   }
 
   &:focus-visible {
@@ -90,7 +93,7 @@ select:focus {
   background-color: $background;
   transition: none;
 }
-
+²
 option {
   background-color: $background;
   color: $text;
@@ -101,7 +104,6 @@ option {
   }
 }
 
-button,
 textarea {
   background-color: inherit;
   border: none;
diff --git a/static/style.css b/static/style.css
index c8031a4..a2908b6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono&display=swap");
 section#recent-plaks {
   bottom: 1rem;
@@ -128,25 +129,30 @@ body {
   width: 24px;
 }
 
+button,
 input,
 select {
   background-color: #0f0f0f;
   border: 2px solid #363636;
   color: #e5e5e7;
   font: 500 14px/2 "Inter", "system-ui", sans-serif;
+  max-width: 145px;
   outline: none;
   padding: 3px 10px;
-  width: 150px;
-  transition: 0.15s ease;
+  transition: border 0.15s ease;
+  width: min-content;
 }
+button::placeholder,
 input::placeholder,
 select::placeholder {
   color: #888;
 }
+button:hover,
 input:hover,
 select:hover {
-  border-color: #555;
+  border-color: #777;
 }
+button:focus-visible,
 input:focus-visible,
 select:focus-visible {
   border: 2px solid #bbb;
@@ -162,16 +168,15 @@ select:focus {
   transition: none;
 }
 
-option {
+² option {
   background-color: #0f0f0f;
   color: #e5e5e7;
 }
-option:focus {
+² option:focus {
   background-color: #d30f45;
   color: #0f0f0f;
 }
 
-button,
 textarea {
   background-color: inherit;
   border: none;