Update CSS (WIP)

Cargo.lock

@@ -374,9 +374,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.5.23"
+version = "4.5.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3135e7ec2ef7b10c6ed8950f0f792ed96ee093fa088608f1c76e569722700c84"
+checksum = "9560b07a799281c7e0958b9296854d6fafd4c5f31444a7e5bb1ad6dde5ccf1bd"
 dependencies = [
  "clap_builder",
  "clap_derive",
@@ -384,9 +384,9 @@ dependencies = [
 
 [[package]]
 name = "clap_builder"
-version = "4.5.23"
+version = "4.5.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "30582fc632330df2bd26877bde0c1f4470d57c582bbc070376afcd04d8cb4838"
+checksum = "874e0dd3eb68bf99058751ac9712f622e61e6f393a94f7128fa26e3f02f5c7cd"
 dependencies = [
  "anstream",
  "anstyle",
@@ -396,9 +396,9 @@ dependencies = [
 
 [[package]]
 name = "clap_derive"
-version = "4.5.18"
+version = "4.5.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ac6a0c7b1a9e9a5186361f67dfa1b88213572f427fb9ab038efb2bd8c582dab"
+checksum = "54b755194d6389280185988721fffba69495eed5ee9feeee9a599b53db80318c"
 dependencies = [
  "heck",
  "proc-macro2",
@@ -661,9 +661,9 @@ dependencies = [
 
 [[package]]
 name = "event-listener"
-version = "5.3.1"
+version = "5.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6032be9bd27023a771701cc49f9f053c751055f71efb2e0ae5c15809093675ba"
+checksum = "3492acde4c3fc54c845eaab3eed8bd00c7a7d881f78bfc801e43a93dec1331ae"
 dependencies = [
  "concurrent-queue",
  "parking",
@@ -1489,9 +1489,9 @@ dependencies = [
 
 [[package]]
 name = "linux-raw-sys"
-version = "0.4.14"
+version = "0.4.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "78b3ae25bc7c8c38cec158d1f2757ee79e9b3740fbc7ccf0e59e4b08d793fa89"
+checksum = "d26c52dbd32dccf2d10cac7725f8eae5296885fb5703b261f7d0a0739ec807ab"
 
 [[package]]
 name = "litemap"
@@ -2108,9 +2108,9 @@ checksum = "c7fb8039b3032c191086b10f11f319a6e99e1e82889c5cc6046f515c9db1d497"
 
 [[package]]
 name = "rustix"
-version = "0.38.42"
+version = "0.38.43"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f93dc38ecbab2eb790ff964bb77fa94faf256fd3e73285fd7ba0903b76bedb85"
+checksum = "a78891ee6bf2340288408954ac787aa063d8e8817e9f53abb37c695c6d834ef6"
 dependencies = [
  "bitflags",
  "errno",

backend/scss/style.scss

@@ -1,49 +1,23 @@
 @use 'toast.scss';
 @use 'modal-dialog.scss';
 
-@font-face {
+$color-1: #B29B89;
-    font-family: Fira Code;
+$color-2: #89B29B;
-    font-weight: 200;
+$color-3: #9B89B2;
-    src: url(FiraCode-Light.woff2) format("woff2");
-}
 
-@font-face {
+$text-color: darken($color-1, 30%);
-    font-family: Fira Code;
-    font-weight: 400;
-    src: url(FiraCode-Regular.woff2) format("woff2");
-}
-
-@font-face {
-    font-family: Fira Code;
-    font-weight: 600;
-    src: url(FiraCode-SemiBold.woff2) format("woff2");
-}
-
-@font-face {
-    font-family: Fira Code;
-    font-weight: 700;
-    src: url(FiraCode-Bold.woff2) format("woff2");
-}
-
-$primary: #182430;
-$background: darken($primary, 5%);
-$background-container: lighten($primary, 10%);
 
 * {
     margin: 5px;
     padding: 0px;
 }
 
-html {
-    font-size: 80%
-}
-
 a {
-    color: lighten($primary, 40%);
+    color: darken($color-3, 25%);
     text-decoration: none;
 
     &:hover {
-        color: lighten($primary, 60%);
+        color: lighten($color-3, 20%);
     }
 }
 
@@ -51,66 +25,110 @@ body {
     display: flex;
     flex-direction: column;
 
-    font-family: Fira Code, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    text-shadow: 2px 2px 2px rgb(0, 0, 0);
+    color: $text-color;
-    // line-height: 18px;
+    background-color: $color-1;
-    color: lighten($primary, 60%);
-    background-color: $background;
     margin: 0px;
 
-    .recipe-item {
-        padding: 4px;
-    }
-
-    .recipe-item-current {
-        padding: 3px;
-        border: 1px solid lighten($primary, 30%);
-    }
-
     .header-container {
-        align-self: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .title {
+            font-size: 180%;
+            font-style: italic;
+
+            .logo {
+                width: 50px;
+                height: 50px;
+                vertical-align: bottom;
+                margin: 0px 10px 0px 0px;
+            }
+        }
+
+        .header-menu {
+            align-self: flex-end;
+
+            .create-recipe {
+                border: 0.1em solid $color-3;
+                padding: 2px 8px 2px 8px;
+                border-radius: 0.5em;
+            }
+        }
+
+        #select-website-language {
+            padding: 5px;
+        }
     }
 
     .footer-container {
         align-self: center;
-        font-size: 0.5em;
+        font-size: 0.7em;
     }
 
     .drag-handle {
         width: 20px;
         height: 20px;
-        background-color: gray;
+        background-color: blue;
+    }
+
+    img {
+        border: 0px;
     }
 
     .main-container {
         display: flex;
         flex-direction: row;
 
-        // #recipes-list {
+        #recipes-list {
-        //     text-align: left;
+            hr {
-        // }
+                margin-top: 10px;
+                margin-bottom: 10px;
+                height: 1px;
+                color: $color-3;
+                background: $color-3;
+                font-size: 0;
+                border: 0;
+            }
+
+
+            .recipe-item {
+                padding: 4px;
+            }
+
+            .recipe-item-current {
+                color: lighten($color-3, 30%);
+                padding: 4px;
+                background-color: $color-2;
+
+                border: 0.1em solid $color-3;
+                border-radius: 0.5em;
+            }
+        }
 
         .content {
             flex-grow: 1;
 
-            background-color: $background-container;
+            background-color: $color-2;
-            border: 0.1em solid lighten($primary, 50%);
+            border: 0.1em solid $color-3;
-            padding: 0.5em;
+            border-radius: 1em;
+            padding: 0.8em;
 
             h1 {
                 text-align: center;
             }
 
             .group {
-                border: 0.1em solid lighten($primary, 30%);
+                border: 0.1em solid lighten($color-3, 30%);
             }
 
             .step {
-                border: 0.1em solid lighten($primary, 30%);
+                border: 0.1em solid lighten($color-3, 30%);
             }
 
             .ingredient {
-                border: 0.1em solid lighten($primary, 30%);
+                border: 0.1em solid lighten($color-3, 30%);
             }
 
             #hidden-templates {
@@ -125,10 +143,10 @@ body {
 
             input,
             button {
-                background-color: rgb(52, 40, 85);
+                // background-color: rgb(52, 40, 85);
                 border-width: 1px;
-                border-color: white;
+                // border-color: white;
-                color: white;
+                // color: white;
             }
         }
 
@@ -175,8 +193,4 @@ body {
 
         // }
     }
-
-    img {
-        border: 0px;
-    }
 }

backend/static/logo.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="91.29998mm"
+   height="91.29998mm"
+   viewBox="0 0 91.29998 91.29998"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.4702524"
+     inkscape:cx="-36.728388"
+     inkscape:cy="196.22482"
+     inkscape:window-width="2560"
+     inkscape:window-height="1369"
+     inkscape:window-x="-8"
+     inkscape:window-y="611"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-55.871853,-92.876652)">
+    <circle
+       style="fill:#89b29b;fill-opacity:1;stroke:#9b89b2;stroke-width:6;stroke-linecap:square;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path2"
+       cx="101.52184"
+       cy="138.52664"
+       r="42.64999" />
+    <path
+       id="rect1"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:square;stroke-linejoin:bevel;stroke-dasharray:none;paint-order:stroke fill markers"
+       d="m 119.22975,109.85084 c -3.51124,-0.73351 -5.56076,0.39364 -14.01995,8.04846 l -5.16541,5.16541 c -1.93864,1.93864 -1.93828,5.06001 3.7e-4,6.99865 l 2.8922,2.89221 -30.280963,28.22001 c 0.664338,4.5046 3.324184,5.56171 6.21705,6.21704 l 28.220063,-30.28091 2.89219,2.89218 c 1.93864,1.93864 5.06001,1.939 6.99865,3.8e-4 l 5.16539,-5.16541 0.003,-0.003 c 7.65187,-8.45615 8.77858,-10.50592 8.04518,-14.01665 l -11.03092,11.03092 -3.99975,-3.99975 c 0.78874,-0.87769 10.27976,-11.47732 9.39426,-12.36283 -0.88553,-0.8855 -11.48511,8.60553 -12.36283,9.39426 l -3.99977,-3.99975 z"
+       sodipodi:nodetypes="ccscccccccccccccccc" />
+    <path
+       id="rect1-14"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:square;stroke-linejoin:bevel;paint-order:stroke fill markers"
+       d="m 75.027245,108.31931 c -0.901448,12.2468 8.563163,26.6897 19.113376,38.13504 l 2.77564,-2.77564 0.89013,-0.89013 24.052589,25.9454 c 4.50458,-0.66434 5.56171,-3.32419 6.21704,-6.21704 l -25.9454,-24.0526 1.01291,-1.0129 0.50792,-0.50793 z"
+       sodipodi:nodetypes="cccccccccc" />
+  </g>
+</svg>

backend/templates/base_with_header.html

@@ -4,20 +4,19 @@
     <div class="header-container">
         {% include "title.html" %}
 
+        <span class="header-menu">
             {% match user %}
             {% when Some with (user) %}
                 <a class="create-recipe" href="/recipe/new" >{{ tr.t(Sentence::CreateNewRecipe) }}</a>
-            <span><a href="/user/edit">
+                <a href="/user/edit">
                     {% if user.name == "" %}
                         {{ user.email }}
                     {% else %}
                         {{ user.name }}
                     {% endif %}
-            </a> / <a href="/signout" />{{ tr.t(Sentence::SignOut) }}</a></span>
+                </a> / <a href="/signout" />{{ tr.t(Sentence::SignOut) }}</a>
             {% when None %}
-            <span>
                 <a href="/signin" >{{ tr.t(Sentence::SignInMenu) }}</a>/<a href="/signup">{{ tr.t(Sentence::SignUpMenu) }}</a>/<a href="/ask_reset_password">{{ tr.t(Sentence::LostPassword) }}</a>
-            </span>
             {% endmatch %}
 
             <select id="select-website-language">
@@ -29,6 +28,7 @@
                 >{{ lang.1 }}</option>
             {% endfor %}
             </select>
+        </span>
     </div>
 
     <div class="main-container">

backend/templates/title.html

@@ -1 +1 @@
-<a class="title" href="/">{{ tr.t(Sentence::MainTitle) }}</a>
+<a class="title" href="/"><img class="logo" src="/static/logo.svg" alt="logo"/>{{ tr.t(Sentence::MainTitle) }}</a>

backend/translation.ron

@@ -38,9 +38,9 @@
             (SignUpMenu, "Sign up"),
             (SignUpTitle, "Sign up"),
             (SignUpButton, "Sign up"),
-            (SignUpEmailSent, "An email has been sent), follow the link to validate your account"),
+            (SignUpEmailSent, "An email has been sent, follow the link to validate your account"),
             (SignUpFollowEmailLink, "Follow this link to confirm your inscription, {}"),
-            (SignUpEmailValidationSuccess, "Email validation successful), your account has been created"),
+            (SignUpEmailValidationSuccess, "Email validation successful, your account has been created"),
             (SignUpValidationExpired, "The validation has expired. Try to sign up again"),
             (SignUpValidationErrorTryAgain, "Validation error. Try to sign up again"),
             (ChooseAPassword, "Choose a password (minimum {} characters)"),
@@ -51,9 +51,9 @@
             (AskResetAlreadyLoggedInError, "Can't ask to reset password when already logged in"),
             (AskResetEmailAlreadyResetError, "The password has already been reset for this email"),
             (AskResetFollowEmailLink, "Follow this link to reset your password, {}"),
-            (AskResetEmailSent, "An email has been sent), follow the link to reset your password"),
+            (AskResetEmailSent, "An email has been sent, follow the link to reset your password"),
             (AskResetTokenMissing, "Reset token missing"),
-            (AskResetTokenExpired, "Token expired), try to reset password again"),
+            (AskResetTokenExpired, "Token expired, try to reset password again"),
             (PasswordReset, "Your password has been reset"),
             (EmailUnknown, "Email unknown"),
             (UnableToSendResetEmail, "Unable to send the reset password email"),
@@ -62,7 +62,7 @@
             (ProfileEmail, "Email (need to be revalidated if changed)"),
             (ProfileNewPassword, "New password (minimum {} characters)"),
             (ProfileFollowEmailLink, "Follow this link to validate this email address, {}"),
-            (ProfileEmailSent, "An email has been sent), follow the link to validate your new email"),
+            (ProfileEmailSent, "An email has been sent, follow the link to validate your new email"),
             (ProfileSaved, "Profile saved"),
 
             (RecipeNotAllowedToEdit, "Not allowed to edit this recipe"),
@@ -134,9 +134,9 @@
             (SignUpMenu, "S'inscrire"),
             (SignUpTitle, "Inscription"),
             (SignUpButton, "Valider"),
-            (SignUpEmailSent, "Un email a été envoyé), suivez le lien pour valider votre compte"),
+            (SignUpEmailSent, "Un email a été envoyé, suivez le lien pour valider votre compte"),
             (SignUpFollowEmailLink, "Suivez ce lien pour valider votre inscription, {}"),
-            (SignUpEmailValidationSuccess, "La validation de votre email s'est déroulée avec succès), votre compte a été créé"),
+            (SignUpEmailValidationSuccess, "La validation de votre email s'est déroulée avec succès, votre compte a été créé"),
             (SignUpValidationExpired, "La validation a expiré. Essayez de vous inscrire à nouveau"),
             (SignUpValidationErrorTryAgain, "Erreur de validation. Essayez de vous inscrire à nouveau"),
             (ChooseAPassword, "Choisir un mot de passe (minimum {} caractères)"),
@@ -147,9 +147,9 @@
             (AskResetAlreadyLoggedInError, "Impossible de demander une réinitialisation du mot de passe lorsque déjà connecté"),
             (AskResetEmailAlreadyResetError, "Le mot de passe a déjà été réinitialisé pour cette adresse email"),
             (AskResetFollowEmailLink, "Suivez ce lien pour réinitialiser votre mot de passe, {}"),
-            (AskResetEmailSent, "Un email a été envoyé), suivez le lien pour réinitialiser votre mot de passe"),
+            (AskResetEmailSent, "Un email a été envoyé, suivez le lien pour réinitialiser votre mot de passe"),
             (AskResetTokenMissing, "Jeton de réinitialisation manquant"),
-            (AskResetTokenExpired, "Jeton expiré), essayez de réinitialiser votre mot de passe à nouveau"),
+            (AskResetTokenExpired, "Jeton expiré, essayez de réinitialiser votre mot de passe à nouveau"),
             (PasswordReset, "Votre mot de passe a été réinitialisé"),
             (EmailUnknown, "Email inconnu"),
             (UnableToSendResetEmail, "Impossible d'envoyer l'email pour la réinitialisation du mot de passe"),
@@ -158,7 +158,7 @@
             (ProfileEmail, "Email (doit être revalidé si changé)"),
             (ProfileNewPassword, "Nouveau mot de passe (minimum {} caractères)"),
             (ProfileFollowEmailLink, "Suivez ce lien pour valider l'adresse email, {}"),
-            (ProfileEmailSent, "Un email a été envoyé), suivez le lien pour valider la nouvelle adresse email"),
+            (ProfileEmailSent, "Un email a été envoyé, suivez le lien pour valider la nouvelle adresse email"),
             (ProfileSaved, "Profile sauvegardé"),
 
             (RecipeNotAllowedToEdit, "Vous n'êtes pas autorisé à éditer cette recette"),