Minor CSS work to refactor the landing page (#183)

* Enhance landing UI with updated typography, button styles, and footer layout

* Update Fira Code font weight for improved typography

* Refactor footer layout for improved structure and readability

* Improve landing page UI by adding a question class to the header and simplifying the browse button style

* Remove unused font imports to optimize CSS file size

* Fix command comment in Dockerfile from french to english

* Fix footer CSS rule by closing the declaration block

* Update text-shadow properties for title elements and clean up footer styles

* Refactor footer HTML structure to simplify copyright display

* Add icon to 'Choose an image' button for improved UI

* Remove unnecessary footer-container styles to streamline layout

Dockerfile

@@ -80,5 +80,5 @@ COPY --from=builder /usr/local/bin/jphide /usr/local/bin/jphide
 COPY --from=builder /usr/local/bin/jpseek /usr/local/bin/jpseek
 COPY --from=builder /usr/local/bin/jsteg /usr/local/bin/jsteg
 
-# Commande de lancement
+# Command to start
 CMD gunicorn -w ${WEB_WORKERS:-8} -b 0.0.0.0:5000 --access-logfile - --error-logfile - --log-level info --capture-output aperisolve.utils.wsgi:application

aperisolve/static/css/aperisolve.css

@@ -82,17 +82,19 @@ a:hover {
 
 .title-text {
     color: var(--theme-green);
-    text-shadow: 0 0 0.3125rem var(--theme-green-shadow);
+    text-shadow: 0 0 8px var(--theme-green-shadow2);
     font-size: 2.5rem;
-    font-weight: 700;
+    font-weight: 400;
     line-height: 1;
+    font-family: var(--font-base)
 }
 
 .title-version {
     color: var(--theme-green);
-    text-shadow: 0 0 0.3125rem var(--theme-green-shadow);
+    text-shadow: 0 0 4px var(--theme-green-shadow2);
     font-size: 1.25rem;
     line-height: 1;
+    margin-top: 3px;
 }
 
 /* ======== Background ======== */
@@ -125,6 +127,12 @@ form {
     border-radius: var(--border-radius);
 }
 
+.question{
+    color : var(--theme-green);
+    font-weight: 400;
+    font-family: var(--font-base);
+}
+
 /* Drop Zone */
 .drop-zone {
     background-color: var(--dark-bg);
@@ -143,7 +151,7 @@ form {
 .btn, .btn-primary, .btn-hack {
     background-color: var(--theme-green);
     color: #000;
-    font-weight: bold;
+    /* font-weight: bold; */
     border: none;
     text-shadow: none;
     transition: box-shadow 0.3s ease;
@@ -154,6 +162,23 @@ form {
     box-shadow: 0 0 0.625rem var(--theme-green-shadow2);
 }
 
+/* Ensure the inline browse button inside the drop-zone shows the same hover behaviour */
+#browse-btn {
+    background-color: var(--theme-green);
+    color: #000;
+    border: none;
+    text-shadow: none;
+    transition: box-shadow 0.3s ease;
+    pointer-events: auto;
+}
+
+#browse-btn:hover {
+    background-color: var(--theme-green);
+    box-shadow: 0 0 0.625rem var(--theme-green-shadow2);
+    transform: translateY(-0.0625rem);
+    color: white;
+}
+
 /* Bootstrap color overrides */
 .text-success, .bg-success {
     color: var(--theme-green) !important;
@@ -486,6 +511,7 @@ footer {
 .footer-text {
     color: var(--theme-green);
     font-size: 0.9rem;
+    margin: 0 !important;
 }
 
 .footer-link {
@@ -494,6 +520,7 @@ footer {
     transition: color 0.3s, text-shadow 0.3s;
     display: inline-flex;
     align-items: center;
+
 }
 
 .footer-link:hover {
@@ -666,6 +693,7 @@ footer {
         padding: var(--spacing-sm);
         font-size: 0.85rem;
 }
+}
 
 /* Phones */
 @media screen and (max-width: 36rem) {

aperisolve/templates/base.html

@@ -9,7 +9,7 @@
   <link rel="icon" type="image/svg+xml" href="/static/img/logo.svg">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://cdnjs.cloudflare.com">
-  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="/static/css/aperisolve.css" rel="stylesheet">

aperisolve/templates/footer.html

@@ -7,7 +7,7 @@
       </div>
 
       <!-- Links -->
-      <div class="d-flex align-items-center gap-3 flex-wrap">
+      <div class="d-flex align-items-center gap-3 flex-wrap link-container">
         <a href="https://buymeacoffee.com/aperisolve" title="Buy Me A Coffee" class="footer-link">
           <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" class="footer-icon-img" />
         </a>

aperisolve/templates/index.html

@@ -3,7 +3,7 @@
 <form id="upload-form" class="card p-4 mb-4" method="POST" enctype="multipart/form-data">
   <!-- Description Section -->
   <section class="mb-4">
-    <h2 class="h4 mb-3">What is this?</h2>
+    <h2 class="h4 mb-3 question">What is this?</h2>
     <p class="text-light-emphasis mb-0">
       Aperi'Solve is an online platform which performs layer analysis on images.
       The platform also uses zsteg, steghide, outguess, exiftool, binwalk, foremost and strings
@@ -17,7 +17,7 @@
     <div id="drop-zone" class="drop-zone border border-2 border-dashed rounded-3 p-4 text-center">
       <p id="drag-msg" class="mb-3">📂 Drag and drop an image here or click to select</p>
       <input type="file" id="image" name="image" accept="image/*" class="visually-hidden" required>
-      <button type="button" class="btn btn-secondary" id="browse-btn" aria-label="Choose image file">
+      <button type="button" class="btn" id="browse-btn" aria-label="Choose image file">
         <i class="fa fa-folder-open me-2"></i>Choose an image
       </button>
     </div>