[COMPONENTS][Feed] Styling for the empty feed page added

components/Feed/templates/feed/feed.html.twig

@@ -9,6 +9,7 @@
 {% endblock stylesheets %}
 
 {% block body %}
+    {% if notes is defined and notes is not empty %}
     <header class="feed-header">
         {% if page_title is defined %}
             <h1>{{ page_title | trans }}</h1>
@@ -19,6 +20,7 @@
             {% endfor %}
         </nav>
     </header>
+    {% endif %}
 
     {# Backwards compatibility with hAtom 0.1 #}
     <main class="feed" tabindex="0" role="feed">
@@ -35,7 +37,9 @@
                     {% endblock current_note %}
                 {% endfor %}
             {% else %}
-                <div id="empty-notes"><h1>{% trans %}No notes here.{% endtrans %}</h1></div>
+                <div class="feed-empty">
+                    {{ icon('logo', 'icon feed-background') | raw }}
+                </div>
             {% endif %}
         </div>
     </main>

public/assets/default_theme/css/base.css

@@ -148,11 +148,7 @@ html {
     display: flex;
     justify-content: space-evenly;
 }
-.footer ul {
+
-    display: inline-flex;
-    width: 100%;
-    justify-content: space-evenly;
-}
 /* < 720p */
 @media only screen and (max-width:1280px) {
     .page-header {

public/assets/default_theme/css/pages/feeds.css

@@ -284,6 +284,18 @@ embed header {
     color: var(--foreground);
     border-radius: 0 0 var(--s) 0;
 }
+.feed-empty {
+    display: flex;
+    flex-direction: column;
+}
+.feed-empty .feed-background {
+    opacity: 3%;
+    width: 40%;
+    height: auto;
+    margin-top: var(--xxl);
+    margin-left: auto;
+    margin-right: auto;
+}
 
 /* < 720p */
 @media only screen and (max-width:1280px) {

public/assets/default_theme/css/widgets/sections.css

@@ -44,6 +44,7 @@
 }
 .section-title {
     font-weight: 700;
+    margin-bottom: unset;
 }
 .section-widget {
     display: flex;
@@ -171,4 +172,12 @@ textarea.form-row-widget {
     padding: 2px 6px;
     margin-top: 6px;
     margin-bottom: 6px;
+}
+.footer ul {
+    display: inline-flex;
+    width: 100%;
+    justify-content: flex-start;
+}
+.footer ul li {
+    margin-right: 5px;
 }