From e33747e7b3bfdd887d29dd0022586e4a79535fde Mon Sep 17 00:00:00 2001
From: Orangerot <purple@orangerot.dev>
Date: Mon, 13 Jan 2025 07:33:11 +0100
Subject: [PATCH] style: removed inline-css

---
 index.html | 45 ++++++++++++++++++---------------------------
 style.css  | 41 ++++++++++++++++++++++++++++++++++-------
 2 files changed, 52 insertions(+), 34 deletions(-)
diff --git a/index.html b/index.html
index 345d73d..613dcb7 100644
--- a/index.html
+++ b/index.html
@@ -12,10 +12,10 @@
     <link rel="stylesheet" href="style.css">
     <title>Imagine - Image Editor</title>
   </head>
-  <body style="padding-top: 100dvh; " class="import-active">
+  <body class="import-active">
     <div class="navbar columns is-mobile is-fixed-top">
       <div class="column" id="viewport">
-        <div class="hero is-fullheight" style="min-height: 100dvh;">
+        <div class="hero is-fullheight">
           <div class="hero-body">
             <div class="container" >
               <canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas>
@@ -26,46 +26,38 @@
               </div>
               <div class="columns is-mobile is-visible-import">
                 <div class="column">
-                  <button id="take-picture" 
-                      class="button is-large is-responsive is-fullwidth py-6"
-                      style="display: flex; flex-direction: column; align-items: center;"
-                     >
-                    <i class="fa-solid fa-6x fa-video mb-4"></i> 
-                    Use Camera
+                  <button id="take-picture" class="button is-large is-responsive is-fullwidth py-6" >
+                    <div class="container">
+                      <i class="fa-solid fa-6x fa-video mb-4"></i><br>
+                      Use Camera
+                    </div>
                   </button>
                 </div>
                 <div class="column">
-                  <label for="upload-image"
-                     class="button is-large is-responsive is-fullwidth py-6"
-                      style="display: flex; flex-direction: column; align-items: center;"
-                     >
-                     <i class="fa-solid fa-6x fa-upload mb-4"></i> 
-                     <span>
-                       Upload an Image
-                     </span>
+                  <label class="button is-large is-responsive is-fullwidth py-6" >
+                    <input class="file-input" type="file" id="upload-image" accept="image/*">
+                    <div class="container">
+                      <i class="fa-solid fa-6x fa-upload mb-4"></i><br>
+                      Choose a file… 
+                    </div>
                   </label>
-                  <input type="file" id="upload-image" accept="image/*" style="display: none">
                 </div>
               </div>
             </div><br>
-            <a href="#settings" class="button is-hidden-desktop is-visible-editor" style="position: absolute; right: 30px;
-                     bottom: 30px">
+            <a id="settings-button" href="#settings" class="button is-hidden-desktop is-visible-editor">
                 <i class="fa-solid fa-sliders mr-2"></i> Settings
             </a>
-            <button id="back" class="button is-hidden-import" style="position: absolute; left: 30px;
-                     top: 30px">
+            <button id="back" class="button is-hidden-import">
                 <i class="fa-solid fa-arrow-left mr-2"></i> Back
             </button>
-            <div style="position: absolute; bottom: 30px; left: 30px; right: 30px">
-            <button id="cheese" class="button is-large is-fullwidth is-visible-camera" >
+            <button id="cheese" class="button is-large is-visible-camera" >
                 <i class="fa-solid fa-camera mr-2"></i> Take a Picture
             </button>
-            </div>
           </div>
         </div>
       </div>
       <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor">
-        <aside class="menu mr-3" style="width: 300px">
+        <aside class="menu mr-3">
           <h1 class="title">Imagine</h1>
           <h2 class="subtitle">Image Editor</h2>
 
@@ -222,9 +214,8 @@
         </aside>
       </div>
     </div>
-    <div class="notification is-fullwidth is-hidden-desktop is-visible-editor" style="z-index: 200">
+    <div id="settings" class="notification is-fullwidth is-hidden-desktop is-visible-editor">
       <!-- #settings is an anhor to scroll to when clicked on the settings-button -->
-      <span id="settings"></span>
       <!-- #top is an anchor provided by the browser to go to the top of the page -->
       <a href="#top" class="delete"></a>
 
diff --git a/style.css b/style.css
index 205c7ca..85a8268 100644
--- a/style.css
+++ b/style.css
@@ -1,18 +1,14 @@
 html, body {
   margin: 0px;
   scroll-behavior: smooth;
+  padding-top: 100dvh;
 }
 
-canvas {
-  max-width: 100%;
+canvas, video {
+  max-width: 100%; 
   max-height: 100%;
 }
 
-video {
-  width: 100%;
-  height: 100%;
-}
-
 body:not(.import-active) .is-visible-import {
   display: none !important;
 }
@@ -28,3 +24,34 @@ body:not(.editor-active) .is-visible-editor {
 body.import-active .is-hidden-import {
   display: none !important;
 }
+
+.hero.is-fullheight {
+  min-height: 100dvh;
+}
+
+#settings-button {
+  position: absolute; 
+  right: 30px;
+  bottom: 30px
+}
+
+#back {
+  position: absolute; 
+  left: 30px;
+  top: 30px
+}
+
+#cheese {
+  position: absolute; 
+  bottom: 30px; 
+  left: 30px; 
+  right: 30px;
+}
+
+aside {
+  width: 300px;
+}
+
+#settings {
+  z-index: 200;
+}
