Improved side menu, reduced the font size on small screens, fixed a form to add links on small screens

app/Resources/static/themes/material/css/main.css

@@ -360,6 +360,10 @@ span.numberItems {
   float: right;
 }
 
+nav ul a:hover {
+    background-color: initial;
+}
+
 /* ==========================================================================
  * 3 = Filters slider
  * ========================================================================== */
@@ -522,7 +526,7 @@ main ul.row {
 }
 
 #article > header > h1 {
-  font-size: 2em;
+  font-size: 1.6em;
 }
 
 .reader-mode {
@@ -603,6 +607,18 @@ main ul.row {
     width: auto;
   }
 
+  #article {
+    padding: 15px;
+    max-width: 35em;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 18px;
+  }
+
+  #article > header > h1 {
+    font-size: 1.33em;
+  }
+
   .reader-mode {
     width: 240px !important;
   }
@@ -760,3 +776,7 @@ div.settings div.file-field div {
 .input-field label.active {
   font-size: 1rem;
 }
+
+nav .input-field input {
+  margin: 0;
+}

src/Wallabag/UserBundle/Resources/views/Security/login.html.twig

@@ -5,11 +5,11 @@
     <div class="card-content">
 
         {% if error %}
-            <span class="black-text">{{ error.message }}</span>
+            <script>Materialize.toast('{{ error.message }}', 4000)</script>
         {% endif %}
 
         {% for flashMessage in app.session.flashbag.get('notice') %}
-            <span class="black-text"><p>{{ flashMessage }}</p></span>
+            <script>Materialize.toast('{{ flashMessage }}')</script>
         {% endfor %}
 
         <div class="row">
@@ -41,7 +41,7 @@
             <i class="material-icons right">send</i>
         </button>
     </div>
-    <div class="row center">
+    <div class="card-action center">
         <a href="{{ path('fos_user_resetting_request') }}">{{ 'security.login.forgot_password'|trans }}</a>
     </div>
 </form>