Editor: Make it clearer that editable areas are editable

- Add a border on the left when hovering
- Make full sentences to explain where you can write

plume-front/src/editor.rs

@@ -142,11 +142,17 @@ fn init_editor() -> Result<(), EditorError> {
         let subtitle_val = get_elt_value("subtitle");
         let content_val = get_elt_value("editor-content");
         // And pre-fill the new editor with this values
-        let title = init_widget(&ed, "h1", i18n!(CATALOG, "Title"), title_val, true)?;
+        let title = init_widget(
+            &ed,
+            "h1",
+            i18n!(CATALOG, "Enter your title"),
+            title_val,
+            true,
+        )?;
         let subtitle = init_widget(
             &ed,
             "h2",
-            i18n!(CATALOG, "Subtitle, or summary"),
+            i18n!(CATALOG, "Enter a subtitle, or a summary"),
             subtitle_val,
             true,
         )?;

static/css/_article.scss

@@ -389,7 +389,18 @@ main .article-meta {
 
   article {
     max-width: none;
-    min-height: 80vh;
+    min-height: 2em;
+  }
+
+  & > *[contenteditable] {
+    margin-left: -20px;
+    padding-left: 18px;
+    border-left: 2px solid transparent;
+    transition: border-left-color 0.1s ease-in;
+
+    &:hover {
+      border-left-color: transparentize($black, 0.6);
+    }
   }
 }