From 671c3968e2ca060db4dc08e252e5eb30b94b46c0 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Thu, 23 Dec 2021 21:29:46 +0000
Subject: [PATCH] [TWIG][Templates] Rename inconsistent CSS classes [CSS] Font
 size hierarchy refactor [PLUGINS][MediaFeed] Renamed BeforeFeed event

Type scale hierarchy redone. Bigger line height added, making it easier
to click on links and separate contents.

Feed title added. AddFeedActions replaces BeforeFeed event.
MediaFeed links will now show an icon to the right of the feed title,
smaller footprint and more consistent with the overall design.
---
 components/Feed/templates/feed/feed.html.twig |  12 ++-
 .../Group/templates/group/view.html.twig      |   2 +-
 .../templates/left_panel/edit_feeds.html.twig |   4 +-
 .../templates/left_panel/view.html.twig       |   2 +-
 .../templates/right_panel/view.html.twig      |   6 +-
 .../Search/templates/search/show.html.twig    |   2 +-
 .../Tag/templates/actor_tag_feed.html.twig    |   2 +-
 .../attachmentRelatedNotes.html.twig          |   2 +-
 plugins/MediaFeed/MediaFeed.php               |   2 +-
 .../templates/mediaFeed/tabs.html.twig        |   7 +-
 .../templates/oomox/root_override.css.twig    |  10 +-
 .../related_tags/actor_tags.html.twig         |   2 +-
 .../related_tags/note_tags.html.twig          |   2 +-
 .../tag_based_filtering/add_blocked.html.twig |   2 +-
 public/assets/default_theme/css/base.css      |  69 +++++-------
 .../assets/default_theme/css/pages/feeds.css  | 100 +++++++++---------
 .../default_theme/css/pages/settings.css      |  31 +++---
 public/assets/default_theme/css/reset.css     |  79 +++++++-------
 public/assets/default_theme/css/root.css      |  10 +-
 .../default_theme/css/widgets/buttons.css     |  23 ++--
 .../default_theme/css/widgets/sections.css    |  63 ++++++-----
 public/assets/icons/chevron-left.svg.twig     |   7 ++
 public/assets/icons/feed.svg.twig             |  13 +++
 public/assets/icons/media.svg.twig            |   8 ++
 public/assets/icons/menu.svg.twig             |  59 ++---------
 public/assets/icons/notes.svg.twig            |  68 ------------
 public/components/Left/assets/css/view.css    |   4 +-
 public/components/Right/assets/css/view.css   |   2 +-
 .../MediaFeed/assets/css/mediaFeed.css        |   2 +-
 templates/cards/attachments/show.html.twig    |   2 +-
 templates/cards/navigation/view.html.twig     |   4 +-
 templates/cards/profile/view.html.twig        |   4 +-
 templates/settings/base.html.twig             |   8 +-
 templates/settings/macros.html.twig           |   6 +-
 34 files changed, 264 insertions(+), 355 deletions(-)
 create mode 100644 public/assets/icons/chevron-left.svg.twig
 create mode 100644 public/assets/icons/feed.svg.twig
 create mode 100644 public/assets/icons/media.svg.twig
 delete mode 100644 public/assets/icons/notes.svg.twig

diff --git a/components/Feed/templates/feed/feed.html.twig b/components/Feed/templates/feed/feed.html.twig
index 9639fc0827..18ab8a3ee1 100644
--- a/components/Feed/templates/feed/feed.html.twig
+++ b/components/Feed/templates/feed/feed.html.twig
@@ -9,9 +9,15 @@
 {% endblock stylesheets %}
 
 {% block body %}
-    {% for block in handle_event('BeforeFeed', app.request) %}
-        {{ block | raw }}
-    {% endfor %}
+    <header class="feed-header">
+        <h1>{{ page_title | trans }} {{ 'feed' | trans }}</h1>
+        <nav class="feed-actions" role=navigation>
+            {% for block in handle_event('AddFeedActions', app.request) %}
+                {{ block | raw }}
+            {% endfor %}
+        </nav>
+    </header>
+
     {# Backwards compatibility with hAtom 0.1 #}
     <main class="feed" tabindex="0" role="feed">
         <div class="h-feed hfeed notes">
diff --git a/components/Group/templates/group/view.html.twig b/components/Group/templates/group/view.html.twig
index a2adeae603..7ed8f7cf5e 100644
--- a/components/Group/templates/group/view.html.twig
+++ b/components/Group/templates/group/view.html.twig
@@ -36,7 +36,7 @@
         </main>
         
     {% else %}
-        <div class="section-widget-padded section-widget">
+        <div class="section-padding section-widget">
             <p>{% trans with { '%group%': nickname } %}The group <em>%group%</em> doesn't exist.{% endtrans %}</p>
             {% if create_form is defined and create_form is not null %}
                 <p>{% trans %}Would you like to create it?{% endtrans %}</p>
diff --git a/components/LeftPanel/templates/left_panel/edit_feeds.html.twig b/components/LeftPanel/templates/left_panel/edit_feeds.html.twig
index 1d4ef1473a..e70fac9236 100644
--- a/components/LeftPanel/templates/left_panel/edit_feeds.html.twig
+++ b/components/LeftPanel/templates/left_panel/edit_feeds.html.twig
@@ -6,7 +6,7 @@
 {% endblock stylesheets %}
 
 {% block body %}
-  <div class="section-widget section-widget-padded">
+  <div class="section-widget">
     <form class="section-form" action="{{ path('edit_feeds') }}" method="post">
 
       <fieldset>
@@ -16,7 +16,7 @@
         {{ form_start(edit_feeds) }}
         {% for child in edit_feeds.children %}
           {% if 'row_url' in child.vars.block_prefixes %}
-            <div class="section-widget section-widget-padded">
+            <div class="section-widget section-padding">
             {{ form_label(child) }}
             {{ form_widget(child) }}
           {% elseif 'row_title' in child.vars.block_prefixes %}
diff --git a/components/LeftPanel/templates/left_panel/view.html.twig b/components/LeftPanel/templates/left_panel/view.html.twig
index 641208b643..8b6b3285a8 100644
--- a/components/LeftPanel/templates/left_panel/view.html.twig
+++ b/components/LeftPanel/templates/left_panel/view.html.twig
@@ -7,7 +7,7 @@
         <a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
         <aside class="panel-content accessibility-target">
             {% if app.user %}
-                <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
+                <section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
                     {% block profile_view %}{% include 'cards/profile/view.html.twig' with { actor: current_actor } %}{% endblock profile_view %}
                     {{ block("profile_current_actor", "cards/navigation/view.html.twig") }}
                 </section>
diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig
index b20770a04f..5c96fbc024 100644
--- a/components/RightPanel/templates/right_panel/view.html.twig
+++ b/components/RightPanel/templates/right_panel/view.html.twig
@@ -1,6 +1,6 @@
 {% block rightpanel %}
     <label class="panel-right-icon" for="panel-right-toggle" aria-hidden="true"
-           tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
+           tabindex="-1">{{ icon('chevron-left', 'icon icon-right') | raw }}</label>
     <input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
 
     <div class="header-panel section-panel-right">
@@ -29,9 +29,9 @@
 
                                 <details class="section-widget-subtitle-details">
                                     <summary class="section-subtitle-summary">
-                                        <h3>
+                                        <strong>
                                             {{ "Additional options" | trans }}
-                                        </h3>
+                                        </strong>
                                         {{ icon('arrow-down', 'icon icon-details-close') | raw }}
                                     </summary>
                                     {{ form_row(blocks['post_form'].language) }}
diff --git a/components/Search/templates/search/show.html.twig b/components/Search/templates/search/show.html.twig
index 73ff5951d3..b1d9c5e8dc 100644
--- a/components/Search/templates/search/show.html.twig
+++ b/components/Search/templates/search/show.html.twig
@@ -8,7 +8,7 @@
         </label>
     {% endif %}
 
-    <div class="section-widget-padded">
+    <div class="section-padding">
         {{ form_start(search_form) }}
         <div>
             {{ form_row(search_form.search_query) }}
diff --git a/components/Tag/templates/actor_tag_feed.html.twig b/components/Tag/templates/actor_tag_feed.html.twig
index 54d001927f..599f339f09 100644
--- a/components/Tag/templates/actor_tag_feed.html.twig
+++ b/components/Tag/templates/actor_tag_feed.html.twig
@@ -23,7 +23,7 @@
         {% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %}
     {% endfor %}
 
-    <div class="section-widget section-widget-padded">
+    <div class="section-widget section-padding">
         {{ "Page: " ~ page }}
     </div>
 {% endblock %}
diff --git a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig
index 990966b20d..4147f1d77d 100644
--- a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig
+++ b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig
@@ -1,6 +1,6 @@
 {% import '/cards/note/view.html.twig' as noteView %}
 
-<section class="section-widget section-widget-padded">
+<section class="section-widget section-padding">
     <div class="section-title">
         {{ 'Notes related' | trans }}
     </div>
diff --git a/plugins/MediaFeed/MediaFeed.php b/plugins/MediaFeed/MediaFeed.php
index 0a5595609f..c06d8498eb 100644
--- a/plugins/MediaFeed/MediaFeed.php
+++ b/plugins/MediaFeed/MediaFeed.php
@@ -54,7 +54,7 @@ class MediaFeed extends Plugin
      *
      * @return bool hook value; true means continue processing, false means stop
      */
-    public function onBeforeFeed(Request $request, &$res): bool
+    public function onAddFeedActions(Request $request, &$res): bool
     {
         $isMediaActive = $request->get('filter-type') === 'media';
         // we need two urls: one with filter-type=media and without it.
diff --git a/plugins/MediaFeed/templates/mediaFeed/tabs.html.twig b/plugins/MediaFeed/templates/mediaFeed/tabs.html.twig
index f3ed230dce..ee339b0036 100644
--- a/plugins/MediaFeed/templates/mediaFeed/tabs.html.twig
+++ b/plugins/MediaFeed/templates/mediaFeed/tabs.html.twig
@@ -1,5 +1,2 @@
-<nav class=media-feed-tabs role=navigation>
-    <a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{% trans %}All{% endtrans %}</a>
-    <div tabindex="0" class=separator>&nbsp;</div>
-    <a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{% trans %}Media{% endtrans %}</a>
-</nav>
+<a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{{ icon('feed', 'icon icon-right') | raw }}</a>
+<a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{{ icon('media', 'icon icon-right') | raw }}</a>
\ No newline at end of file
diff --git a/plugins/Oomox/templates/oomox/root_override.css.twig b/plugins/Oomox/templates/oomox/root_override.css.twig
index 8291754447..a405920138 100644
--- a/plugins/Oomox/templates/oomox/root_override.css.twig
+++ b/plugins/Oomox/templates/oomox/root_override.css.twig
@@ -1,9 +1,9 @@
 :root {
-    --smaller: .6rem;
-    --default: 1rem;
-    --small: 1.3rem;
-    --medium: 1.62rem;
-    --big: 3rem;
+    --s: .6rem;
+    --unit: 1rem;
+    --m: 1.3rem;
+    --xl: 1.62rem;
+    --xxl: 3rem;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig b/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
index a02e1c2ca9..2aa5de125f 100644
--- a/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
+++ b/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
@@ -1,5 +1,5 @@
 {% if actor_tags is not empty %}
-<div class="section-widget section-widget-padded">
+<div class="section-widget section-padding">
   <h2>Related tags:</h2>
   {% for at in actor_tags %}
     {% include 'cards/tag/actor_tag.html.twig' with { 'tag': at, 'actor': null } %}
diff --git a/plugins/RelatedTags/templates/related_tags/note_tags.html.twig b/plugins/RelatedTags/templates/related_tags/note_tags.html.twig
index dcec83f917..ed3ed149cb 100644
--- a/plugins/RelatedTags/templates/related_tags/note_tags.html.twig
+++ b/plugins/RelatedTags/templates/related_tags/note_tags.html.twig
@@ -1,5 +1,5 @@
 {% if note_tags is not empty %}
-  <div class="section-widget section-widget-padded">
+  <div class="section-widget section-padding">
     <h2>Related tags:</h2>
 
     {% for nt in note_tags %}
diff --git a/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig b/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig
index 86b1810abb..2503990b8d 100644
--- a/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig
+++ b/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig
@@ -8,7 +8,7 @@
 
 {% block body %}
     {% if note is defined or actor is defined %}
-        <div class="section-widget-padded">
+        <div class="section-padding">
             {% if note is defined and note is not null %}
                 {{ noteView.macro_note(note, {}) }}
             {% elseif actor is defined and actor is not null  %}
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index bcdc2adb96..caedaed417 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -40,34 +40,33 @@
     left: -90%;
     width: 30%;
     height: min-content;
-    padding: var(--smaller);
-    border-radius: var(--smaller);
+    padding: var(--s);
+    border-radius: var(--s);
     background-color: var(--background-hard) !important;
     border: 2px solid var(--border);
 }
 .accessibility-menu ul {
     list-style-type: disc;
-    margin-left: var(--small);
+    margin-left: var(--m);
 }
 .accessibility-menu:focus-within:not(:active) {
-    top: var(--smaller);
-    left: var(--smaller);
+    top: var(--s);
+    left: var(--s);
 }
 html {
-    scroll-margin-top: var(--big);
+    scroll-margin-top: var(--xxl);
 }
 .page-header {
     z-index: 1;
     font-family: 'Poppins',sans-serif;
-    font-size: var(--medium);
-    height: var(--big);
+    height: var(--xxl);
     display: flex;
     justify-content: center;
     position: fixed;
     top: 0;
     align-self: center;
     align-items: center;
-    padding: var(--smaller);
+    padding: var(--s);
     background: var(--gradient) !important;
     box-shadow: var(--shadow);
 }
@@ -92,9 +91,8 @@ html {
     top: 100%;
     right: 0;
     width: 16.5vw;
-    font-size: var(--default);
-    border-radius: 0 0 var(--smaller) var(--smaller);
-    padding: var(--smaller);
+    border-radius: 0 0 var(--s) var(--s);
+    padding: var(--s);
     background: var(--background-hard);
     box-shadow: var(--shadow);
 }
@@ -102,12 +100,11 @@ html {
     display: flex;
     flex-direction: column;
     font-family: 'Open Sans',sans-serif;
-    font-size: var(--default);
     position: fixed;
     top: 0;
-    margin-top: var(--big);
-    height: calc(100% - var(--big));
-    padding: var(--smaller);
+    margin-top: var(--xxl);
+    height: calc(100% - var(--xxl));
+    padding: var(--s);
     overflow-y: auto;
 }
 .panel-content {
@@ -116,11 +113,11 @@ html {
 }
 .page-content-wrapper {
     position: relative;
-    top: var(--big);
+    top: var(--xxl);
     margin-left: auto;
     margin-right: auto;
     justify-content: center;
-    padding: var(--smaller) var(--smaller) 0;
+    padding: var(--s) var(--s) 0;
 }
 .page-content {
     display: flex;
@@ -128,8 +125,8 @@ html {
     width: 100%;
 }
 .markdown-blocks {
-    border-radius: 0 0 var(--smaller) var(--smaller);
-    padding: var(--smaller);
+    border-radius: 0 0 var(--s) var(--s);
+    padding: var(--s);
     background-color: var(--background-card) !important;
 }
 .markdown-blocks ul {
@@ -140,30 +137,14 @@ html {
     margin-bottom: 0.2em;
 }
 .doc-navigation {
-    border-radius: var(--smaller) var(--smaller) 0 0;
+    border-radius: var(--s) var(--s) 0 0;
     border-bottom: 0;
-    padding: var(--smaller);
+    padding: var(--s);
     background-color: var(--background-card) !important;
 }
 .doc-navigation ul {
     display: flex;
     justify-content: space-evenly;
-    font-size: var(--medium);
-}
-#replyform {
-    padding: var(--smaller);
-    margin-top: var(--smaller);
-    border-radius: var(--smaller);
-    display: flex;
-    flex-direction: column;
-    font-size: var(--default);
-    background-color: var(--background-card) !important;
-}
-#replyform textarea {
-    width: 100%;
-    resize: vertical;
-    margin-top: var(--smaller);
-    padding: var(--smaller);
 }
 @media only screen and (max-width:1280px) {
     .page-header {
@@ -268,17 +249,17 @@ html {
     @keyframes highlight {
         0% {
             box-shadow: initial;
-            border-radius: var(--smaller);
+            border-radius: var(--s);
         }
         50% {
-            border-radius: var(--smaller);
+            border-radius: var(--s);
             box-shadow: inset 0 20px 40px #FFF;
             transition: box-shadow 0.3s ease-in-out;
             z-index: 666;
         }
         100% {
             box-shadow: initial;
-            border-radius: var(--smaller);
+            border-radius: var(--s);
         }
     }
 }
@@ -286,16 +267,16 @@ html {
     @keyframes highlight {
         0% {
             box-shadow: initial;
-            border-radius: var(--smaller);
+            border-radius: var(--s);
         }
         50% {
-            border-radius: var(--smaller);
+            border-radius: var(--s);
             box-shadow: inset 0 20px 40px #000;
             transition: box-shadow 0.3s ease-in-out;
         }
         100% {
             box-shadow: initial;
-            border-radius: var(--smaller);
+            border-radius: var(--s);
         }
     }
 }
\ No newline at end of file
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index 4ec0165ebb..4cf135a0a5 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -1,13 +1,26 @@
+.feed-header {
+    display: flex;
+    margin-top: var(--m);
+}
+.feed-header .feed-actions {
+    margin-left: auto;
+}
+.feed-header .feed-actions a {
+    margin-left: var(--s);
+}
+.feed-header .feed-actions a:not(.active) {
+    opacity: 0.4;
+}
 .notes hr {
-    margin-top: var(--smaller);
+    margin-top: var(--s);
 }
 .note-wrapper {
     width: 100%;
     height: inherit;
-    border-radius: var(--smaller) var(--smaller) 0 0;
+    border-radius: var(--s) var(--s) 0 0;
 }
 .note-sidebar {
-    padding: var(--smaller);
+    padding: var(--s);
 }
 .note-sidebar * {
     display: flex;
@@ -19,15 +32,15 @@
 .note-sidebar .avatar {
     max-width: 4rem;
     max-height: 4rem;
-    min-width: var(--big);
+    min-width: var(--xxl);
     width: 100%;
     height: auto;
     background: unset;
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
     border-radius: 2px;
 }
 .h-entry:not(:first-child) {
-    margin-top: var(--smaller);
+    margin-top: var(--s);
 }
 .h-entry:not(embed) {
     border: 2px solid var(--border) !important;
@@ -39,17 +52,17 @@
 .embed {
     display: flex;
     flex-wrap: wrap;
-    padding: var(--smaller);
+    padding: var(--s);
     border: unset;
 }
 .embed header {
     width: 100%;
-    margin-bottom: var(--small);
+    margin-bottom: var(--m);
 }
 .embed img {
     width: 25%;
     height: auto;
-    margin-right: var(--smaller);
+    margin-right: var(--s);
 }
 .embed .p-summary {
     width: 60%;
@@ -64,8 +77,8 @@
     max-height: min-content;
 }
 .embed .p-summary hr {
-    margin-top: var(--smaller);
-    margin-bottom: var(--smaller);
+    margin-top: var(--s);
+    margin-bottom: var(--s);
 }
 .h-entry .embed[class*="p-"] {
     padding: unset;
@@ -75,41 +88,39 @@
 }
 .h-entry {
     display: flex;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     background-color: var(--background-card) !important;
 }
 .h-entry figure {
     margin: unset;
     object-fit: cover;
-    padding: var(--smaller);
+    padding: var(--s);
     background: var(--gradient);
-    border-radius: var(--smaller);
+    border-radius: var(--s);
 }
 .h-entry .replies {
-    margin-bottom: var(--small);
-    padding: var(--smaller) var(--smaller) 0 0;
-    padding-left: var(--small);
+    margin-bottom: var(--m);
+    padding: var(--s) var(--s) 0 0;
+    padding-left: var(--m);
     border-left: 2px solid var(--border);
 }
 .note-info,
 embed header {
     display: flex;
     align-items: center;
-    max-height: var(--big);
+    max-height: var(--xxl);
     border-bottom: unset;
-    border-radius: var(--smaller) var(--smaller) 0 0;
-    padding: 4px var(--smaller) 4px 0;
+    border-radius: var(--s) var(--s) 0 0;
+    padding: 4px var(--s) 4px 0;
 }
 .note-info {
     background: var(--gradient-backwards);
 }
 .note-url {
     opacity: 0.5;
-    font-size: 0.9em;
-    margin-left: var(--smaller);
+    margin-left: var(--s);
 }
 embed header {
-    font-size: var(--small);
     justify-content: space-between;
 }
 .note-author-url {
@@ -149,16 +160,15 @@ embed header {
     position: absolute;
     right: 0;
     flex-direction: column;
-    padding: var(--smaller);
+    padding: var(--s);
     border: 2px solid var(--border);
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     background: var(--background-card);
     box-shadow: var(--shadow);
-    font-size: var(--default);
     width: max-content;
 }
 .note-actions-extra-details[open] > summary + * > li:not(:last-of-type) {
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
 .note-actions-set {
     opacity: 1 !important;
@@ -168,9 +178,9 @@ embed header {
     mask-repeat: no-repeat !important;
     mask-size: cover !important;
     display: inline-block;
-    margin-left: var(--smaller);
-    width: var(--default);
-    height: var(--default);
+    margin-left: var(--s);
+    width: var(--unit);
+    height: var(--unit);
     background-color: var(--foreground);
     opacity: 0.33;
 }
@@ -209,13 +219,8 @@ embed header {
 .note-content {
     display: flex;
     flex-direction: column;
-    border-radius: 0 0 var(--smaller) var(--smaller);
-    padding-top: var(--smaller);
-    padding-bottom: var(--smaller);
-    padding-right: var(--smaller);
-}
-.note-text {
-    margin-bottom: var(--smaller);
+    border-radius: 0 0 var(--s) var(--s);
+    padding-right: var(--s);
 }
 .note-text a {
     text-decoration: underline !important;
@@ -228,28 +233,28 @@ embed header {
     display: flex;
     flex-wrap: wrap;
     max-width: max-content;
-    border-radius: var(--smaller);
-    padding: var(--smaller);
+    border-radius: var(--s);
+    padding: var(--s);
     align-self:flex-start;
     background-color: var(--background-card) !important;
 }
 .note-attachments-unit:not(:only-child) {
-    margin-right: var(--smaller);
+    margin-right: var(--s);
 }
 .note-attachments-unit > figure figcaption {
     display: flex;
     word-break: break-all;
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
 .note-complementary {
     border-left: 2px solid var(--accent);
-    border-end-start-radius: var(--smaller);
-    border-end-end-radius: var(--smaller);
-    padding-left: var(--smaller);
+    border-end-start-radius: var(--s);
+    border-end-end-radius: var(--s);
+    padding-left: var(--s);
     padding-top: 5px;
     padding-bottom: 5px;
-    margin-bottom: var(--smaller);
-    margin-right: var(--smaller);
+    margin-bottom: var(--s);
+    margin-right: var(--s);
     background: var(--gradient) !important;
 }
 .note-complementary a {
@@ -260,7 +265,6 @@ embed header {
     float: right;
     padding: 6px 12px;
     background: var(--gradient-backwards);
-    font-size: var(--default);
     color: var(--foreground);
-    border-radius: 0 0 var(--smaller) 0;
+    border-radius: 0 0 var(--s) 0;
 }
\ No newline at end of file
diff --git a/public/assets/default_theme/css/pages/settings.css b/public/assets/default_theme/css/pages/settings.css
index de5b34fe28..79fa8950bb 100644
--- a/public/assets/default_theme/css/pages/settings.css
+++ b/public/assets/default_theme/css/pages/settings.css
@@ -1,27 +1,32 @@
 .section-settings {
+    background: var(--background-card);
     border: 2px solid var(--border);
     box-shadow: var(--shadow);
 }
 
 .section-settings,
-.section-title-settings {
-    background: var(--background-card);
+.section-settings-details {
     margin-bottom: .6rem;
     border-radius: .6rem;
     padding: .6rem;
     box-sizing: border-box;
 }
-
-.section-title-settings[open] {
+.section-settings-details {
+    border: 2px solid var(--border);
+}
+.section-settings-details-title {
+    display: block;
+}
+.section-settings-details[open] {
     border-left: 2px solid var(--foreground);
 }
 
-.section-title-settings[open] > summary:first-child {
-    margin-bottom: var(--smaller);
+.section-settings-details[open] > summary:first-child {
+    margin-bottom: var(--s);
 }
 
-.section-title-settings summary + form {
-    padding-left: var(--smaller);
+.section-settings-details summary + form {
+    padding-left: var(--s);
 }
 
 .section-settings hr {
@@ -29,24 +34,24 @@
     margin-bottom: .6rem;
 }
 
-.section-title-settings summary h3:first-letter ,.section-title-settings summary em:first-letter {
+.section-settings-details summary h3:first-letter ,.section-settings-details summary em:first-letter {
     text-transform: uppercase;
 }
 
-.section-title-settings summary:focus .icon-details-open,.section-title-settings summary:hover .icon-details-open {
+.section-settings-details summary:focus .icon-details-open,.section-settings-details summary:hover .icon-details-open {
     transition: all 200ms cubic-bezier(0,0.55,0.45,1);
 }
 
-.section-title-settings[open] svg {
+.section-settings-details[open] svg {
     transform: rotate(180deg);
     animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
 }
 
-.section-title-settings[open] .set-nav li:last-of-type {
+.section-settings-details[open] .set-nav li:last-of-type {
     margin-bottom: 0;
 }
 
-.section-title-settings:not([open]) svg {
+.section-settings-details:not([open]) svg {
     transform: initial;
     animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
 }
\ No newline at end of file
diff --git a/public/assets/default_theme/css/reset.css b/public/assets/default_theme/css/reset.css
index 5f0cbd27cf..86257ad34a 100644
--- a/public/assets/default_theme/css/reset.css
+++ b/public/assets/default_theme/css/reset.css
@@ -9,7 +9,7 @@ html {
     background-color: var(--background-hard);
     background-attachment: fixed;
     font-family: 'Open Sans',sans-serif;
-    font-size: var(--default);
+    font-size: var(--unit);
     display: flex;
     flex-direction: column;
 }
@@ -84,54 +84,53 @@ details > summary::-webkit-details-marker {
 [hidden] {
     display: none;
 }
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    all: unset;
-    display: block;
-    font-family: 'Poppins',sans-serif;
-}
-h1 {
-    font-size: var(--medium);
-    font-weight: 700;
-    margin-bottom: 16.2px;
-}
-h2 {
-    font-size: var(--small);
-    font-weight: 600;
-    margin-bottom: 13px;
-}
-h3 {
-    font-size: var(--default);
-    font-weight: 600;
-    margin-bottom: 10px;
-}
-h4,
-h5 {
-    font-size: var(--default);
+
+html {font-size: 100%;} /*16px*/
+
+body {
+    font-family: 'Open Sans', sans-serif;
     font-weight: 400;
-    margin-bottom: 6.1px;
+    line-height: 1.75;
 }
+
 p {
+    all: unset;
     font-family: 'Open Sans',sans-serif;
-    font-size: var(--default);
-    font-weight: 400;
-    margin: unset;
+    margin-bottom: 1rem;
 }
-p:first-line {
-    padding-left: var(--default);
+
+h1, h2, h3, h4, h5, legend {
+    margin: 3rem 0 1.38rem;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    line-height: 1.3;
 }
-p:first-line {
+h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, legend:first-child {
+    margin-top: initial;
+}
+
+h1 {
     margin-top: 0;
-    margin-bottom: 10px;
+    font-size: 1.383rem;
 }
-p:not(:first-line) {
-    margin-top: 10px;
-    margin-bottom: 10px;
+
+h2 {font-size: 1.296rem;}
+
+h3 {font-size: 1.215rem;}
+
+h4 {font-size: 1.138rem;}
+
+h5 {font-size: 1.067rem;}
+
+legend {
+    font-size: 1.296em;
 }
+
+small, .text_small {
+    font-family: 'Open Sans',sans-serif;
+    font-size: 0.937rem;
+}
+
 input[type=password],
 input[type=text],
 textarea {
diff --git a/public/assets/default_theme/css/root.css b/public/assets/default_theme/css/root.css
index aa4ae23808..34446a0b09 100644
--- a/public/assets/default_theme/css/root.css
+++ b/public/assets/default_theme/css/root.css
@@ -1,9 +1,9 @@
 :root {
-    --smaller: .6rem;
-    --default: 1rem;
-    --small: 1.3rem;
-    --medium: 1.62rem;
-    --big: 3rem;
+    --s: .6rem;
+    --unit: 1rem;
+    --m: 1.3rem;
+    --xl: 1.62rem;
+    --xxl: 3rem;
 }
 
 @media(prefers-color-scheme:dark) {
diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css
index 22a8d97d7f..082adda833 100644
--- a/public/assets/default_theme/css/widgets/buttons.css
+++ b/public/assets/default_theme/css/widgets/buttons.css
@@ -31,7 +31,7 @@ input[type=file] {
     font-family: 'Open Sans',sans-serif !important;
     font-weight: normal !important;
     padding: unset !important;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     background: var(--gradient) !important;
 }
 input[type=radio] {
@@ -53,18 +53,18 @@ input[type=checkbox]:checked {
 }
 input[type=color] {
     appearance: none;
-    width: var(--big);
-    height: var(--big);
+    width: var(--xxl);
+    height: var(--xxl);
     background-color: transparent;
     border: none;
     cursor: pointer;
 }
 input[type=color]::-webkit-color-swatch {
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     border: none;
 }
 input[type=color]::-moz-color-swatch {
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     border: none;
 }
 ::file-selector-button {
@@ -84,7 +84,7 @@ button {
     display: block !important;
     cursor: pointer !important;
     margin-left: auto !important;
-    margin-top: var(--smaller);
+    margin-top: var(--s);
 }
 button,
 label {
@@ -105,12 +105,19 @@ textarea {
     display: inline-flex;
     overflow: hidden;
     font-size: inherit;
+    line-height: initial !important;
     padding: 6px 8px !important;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     border: 2px solid var(--border) !important;
     width: inherit;
     max-width: border-box !important;
 }
+button:not(:last-child),
+input:not(:last-child),
+select:not(:last-child),
+textarea:not(:last-child) {
+    margin-bottom: var(--s);
+}
 button,
 select,
 textarea {
@@ -125,7 +132,7 @@ select {
     -moz-appearance: none !important;
     cursor: pointer;
     background-repeat: no-repeat;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     max-width: 100% !important;
 }
 select[multiple] {
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index 55bf00a224..f3726e165d 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -3,9 +3,9 @@
     flex-direction: column;
     flex-wrap: wrap;
     font-family: 'Open Sans',sans-serif;
-    margin-bottom: var(--smaller);
-    border-radius: var(--smaller);
-    padding: var(--smaller);
+    margin-bottom: var(--s);
+    border-radius: var(--s);
+    padding: var(--s);
     background: var(--gradient) !important;
     box-shadow: var(--shadow);
 }
@@ -18,7 +18,7 @@
     flex-direction: column;
 }
 .profile-info-nickname {
-    font-size: var(--small);
+    font-size: var(--m);
 }
 .profile-info-tags {
     margin: unset;
@@ -27,15 +27,16 @@
     margin-right: 5px;
 }
 .profile-info-stats {
-    margin-top: var(--smaller);
+    margin-top: var(--s);
 }
-.profile-info-bio {
+.profile-info-bio,
+.profile-info-nickname {
     word-break: break-all;
 }
 .profile-avatar {
     max-width: 4rem;
     max-height: 4rem;
-    min-width: var(--big);
+    min-width: var(--xxl);
     width: 100%;
     height: auto;
     margin-right: 5px;
@@ -44,30 +45,28 @@
 .section-widget {
     display: flex;
     flex-direction: column;
-    border-radius: var(--smaller);
-    margin-bottom: var(--small);
+    border-radius: var(--s);
+    margin-bottom: var(--m);
     background-color: var(--background-card) !important;
     box-shadow: var(--shadow);
     border: 2px solid var(--border) !important;
 }
 .section-widget hr {
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
-.section-widget-padded {
-    padding: var(--smaller);
+.section-padding {
+    padding: var(--s);
 }
 .section-widget-paging {
     display: block;
-    margin-top: var(--smaller);
+    margin-top: var(--s);
     margin-left: auto;
 }
-.section-title {
-    font-size: var(--small);
-    font-weight: 700;
-    margin: 0;
+.section-widget-title {
+    margin-left: unset;
 }
 .section-widget-button-like {
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     padding: 6px 10px;
     margin-top: 6px;
     cursor: pointer;
@@ -76,24 +75,22 @@
     font-family: 'Open Sans',sans-serif;
     font-weight: 700;
 }
-.section-widget-subtitle-details :not(summary,svg,h3) {
-    border-radius: var(--smaller);
+.section-widget-subtitle-details :not(summary,svg,strong) {
+    border-radius: var(--s);
     background: var(--gradient);
     padding: 6px 10px;
 }
 .section-widget-title-details summary {
-    font-size: var(--small);
     font-weight: 700;
 }
 .section-widget-subtitle-details summary {
     border: 2px solid var(--border);
-    font-size: var(--default);
-    font-weight: 700;
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
 .section-widget-title-details summary,
 .section-widget-subtitle-details summary {
-    border-radius: var(--smaller);
+    align-items: center;
+    border-radius: var(--s);
     padding: 6px 10px;
     background: var(--gradient) !important;
 }
@@ -111,10 +108,14 @@
 .section-title-summary {
     display: flex;
 }
-.section-subtitle-summary h3,
+.section-subtitle-summary strong,
 .section-title-summary h2 {
     margin-right: auto;
 }
+.section-subtitle-summary a,
+.section-title-summary a {
+    line-height: initial;
+}
 .section-subtitle-summary svg:last-child,
 .section-title-summary svg:last-child {
     margin-left: 4px;
@@ -124,19 +125,18 @@
     flex-direction: column;
     max-width: 100%;
     width: 100%;
-    padding: var(--smaller);
+    padding: var(--s);
 }
 .section-form-legend {
     margin-top: unset;
-    margin-bottom: 10px;
+    margin-bottom: var(--s);
     font-weight: bold;
-    font-size: var(--medium);
 }
 div[class^="mb-"] {
     display: flex;
     flex-direction: column;
     flex-basis: border-box;
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
 div[class^="mb-"]:last-of-type {
     margin-bottom: unset;
@@ -149,10 +149,9 @@ div[class^="mb-"] textarea {
 .alert-danger {
     display: inline-block;
     font-style: italic;
-    font-size: 1rem;
     border: solid 2px #ff6347;
     background-color: #FF634733;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     padding: 2px 6px;
     margin-top: 6px;
     margin-bottom: 6px;
diff --git a/public/assets/icons/chevron-left.svg.twig b/public/assets/icons/chevron-left.svg.twig
new file mode 100644
index 0000000000..8d9a3c8f9e
--- /dev/null
+++ b/public/assets/icons/chevron-left.svg.twig
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+        class="{{ iconClass|default('') }}"
+        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <title>Open right sidepanel</title>
+    <path fill-rule="evenodd" d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"></path>
+</svg>
diff --git a/public/assets/icons/feed.svg.twig b/public/assets/icons/feed.svg.twig
new file mode 100644
index 0000000000..566666f100
--- /dev/null
+++ b/public/assets/icons/feed.svg.twig
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="{{ iconClass|default('') }}"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16">
+  <title>Default feed</title>
+  <path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v9.5C0 13.216.784 14 1.75 14H3v1.543a1.457 1.457 0 002.487 1.03L8.061 14h6.189A1.75 1.75 0 0016 12.25v-9.5A1.75 1.75 0 0014.25 1H1.75zM1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v9.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 15.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-9.5z"></path>
+  <path d="M22.5 8.75a.25.25 0 00-.25-.25h-3.5a.75.75 0 010-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0122.25 20H21v1.543a1.457 1.457 0 01-2.487 1.03L15.939 20H10.75A1.75 1.75 0 019 18.25v-1.465a.75.75 0 011.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 01.53.22l2.72 2.72v-2.19a.75.75 0 01.75-.75h2a.25.25 0 00.25-.25v-9.5z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/icons/media.svg.twig b/public/assets/icons/media.svg.twig
new file mode 100644
index 0000000000..92fd773bab
--- /dev/null
+++ b/public/assets/icons/media.svg.twig
@@ -0,0 +1,8 @@
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="{{ iconClass|default('') }}"
+        viewBox="0 0 16 16"
+        width="16" height="16">
+    <path fill-rule="evenodd" d="M1.75 2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h.94a.76.76 0 01.03-.03l6.077-6.078a1.75 1.75 0 012.412-.06L14.5 10.31V2.75a.25.25 0 00-.25-.25H1.75zm12.5 11H4.81l5.048-5.047a.25.25 0 01.344-.009l4.298 3.889v.917a.25.25 0 01-.25.25zm1.75-.25V2.75A1.75 1.75 0 0014.25 1H1.75A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25zM5.5 6a.5.5 0 11-1 0 .5.5 0 011 0zM7 6a2 2 0 11-4 0 2 2 0 014 0z"></path>
+</svg>
+
diff --git a/public/assets/icons/menu.svg.twig b/public/assets/icons/menu.svg.twig
index b48b032c8e..34688b84f6 100644
--- a/public/assets/icons/menu.svg.twig
+++ b/public/assets/icons/menu.svg.twig
@@ -1,58 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- https://github.com/primer/octicons -->
-
 <!-- MIT License -->
 
 <svg
-   class="{{ iconClass|default('') }}"
-   viewBox="0 0 16 16"
-   width="16"
-   height="16"
-   version="1.1"
-   id="svg6"
-   sodipodi:docname="menu.svg"
-   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
-   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"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     id="namedview8"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="12.150261"
-     inkscape:cx="15.637524"
-     inkscape:cy="21.563323"
-     inkscape:window-width="1920"
-     inkscape:window-height="1016"
-     inkscape:window-x="0"
-     inkscape:window-y="36"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg6" />
-  <title
-     id="title2">Open left sidepanel.</title>
-  <path
-     fill-rule="evenodd"
-     d="M 0.9999891,2.9999916 A 0.75000111,0.75000111 0 0 1 1.7499903,2.2499909 H 14.25001 a 0.75000111,0.75000111 0 1 1 0,1.5000021 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,2.9999916 Z m 0,5.0000076 A 0.75000111,0.75000111 0 0 1 1.7499903,7.2499981 H 14.25001 a 0.7500013,0.7500013 0 1 1 0,1.5000024 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,7.9999992 Z m 0.7500012,4.2500058 a 0.75000231,0.75000231 0 1 0 0,1.500004 H 14.25001 a 0.75000231,0.75000231 0 1 0 0,-1.500004 z"
-     id="path4"
-     style="stroke-width:1" />
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:title>Open left sidepanel.</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
+        xmlns="http://www.w3.org/2000/svg"
+        class="{{ iconClass|default('') }}"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16">
+  <title>Open left sidepanel</title>
+  <path d="m0.99999 3a0.75 0.75 0 0 1 0.75-0.75h12.5a0.75 0.75 0 1 1 0 1.5h-12.5a0.75 0.75 0 0 1-0.75-0.75zm0 5a0.75 0.75 0 0 1 0.75-0.75h12.5a0.75 0.75 0 1 1 0 1.5h-12.5a0.75 0.75 0 0 1-0.75-0.75zm0.75 4.25a0.75 0.75 0 1 0 0 1.5h12.5a0.75 0.75 0 1 0 0-1.5z" fill-rule="evenodd"/>
 </svg>
diff --git a/public/assets/icons/notes.svg.twig b/public/assets/icons/notes.svg.twig
deleted file mode 100644
index 62abda80fb..0000000000
--- a/public/assets/icons/notes.svg.twig
+++ /dev/null
@@ -1,68 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- https://github.com/primer/octicons -->
-
-<!-- MIT License -->
-
-<svg
-   class="{{ iconClass|default('') }}"
-   viewBox="0 0 16 16"
-   width="16"
-   height="16"
-   version="1.1"
-   id="svg8"
-   sodipodi:docname="notes.svg"
-   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
-   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"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <defs
-     id="defs12" />
-  <sodipodi:namedview
-     id="namedview10"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="6.6503072"
-     inkscape:cx="2.2555349"
-     inkscape:cy="27.818264"
-     inkscape:window-width="1920"
-     inkscape:window-height="1016"
-     inkscape:window-x="0"
-     inkscape:window-y="36"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg8" />
-  <title
-     id="title2">
-        Create a note
-    </title>
-  <g
-     id="g20"
-     transform="matrix(0.66666667,0,0,0.66666667,-4e-8,1.6962954e-4)">
-    <path
-       fill-rule="evenodd"
-       d="M 1.75,1 A 1.75,1.75 0 0 0 0,2.75 v 9.5 C 0,13.216 0.784,14 1.75,14 H 3 v 1.543 a 1.457,1.457 0 0 0 2.487,1.03 L 8.061,14 H 14.25 A 1.75,1.75 0 0 0 16,12.25 V 2.75 A 1.75,1.75 0 0 0 14.25,1 Z M 1.5,2.75 A 0.25,0.25 0 0 1 1.75,2.5 h 12.5 a 0.25,0.25 0 0 1 0.25,0.25 v 9.5 A 0.25,0.25 0 0 1 14.25,12.5 H 7.75 A 0.75,0.75 0 0 0 7.22,12.72 L 4.5,15.44 V 13.25 A 0.75,0.75 0 0 0 3.75,12.5 h -2 A 0.25,0.25 0 0 1 1.5,12.25 Z"
-       id="path4" />
-    <path
-       d="M 22.5,8.75 A 0.25,0.25 0 0 0 22.25,8.5 h -3.5 a 0.75,0.75 0 0 1 0,-1.5 h 3.5 C 23.216,7 24,7.784 24,8.75 v 9.5 A 1.75,1.75 0 0 1 22.25,20 H 21 v 1.543 a 1.457,1.457 0 0 1 -2.487,1.03 L 15.939,20 H 10.75 A 1.75,1.75 0 0 1 9,18.25 v -1.465 a 0.75,0.75 0 0 1 1.5,0 v 1.465 c 0,0.138 0.112,0.25 0.25,0.25 h 5.5 a 0.75,0.75 0 0 1 0.53,0.22 l 2.72,2.72 v -2.19 a 0.75,0.75 0 0 1 0.75,-0.75 h 2 a 0.25,0.25 0 0 0 0.25,-0.25 z"
-       id="path6" />
-  </g>
-  <metadata
-     id="metadata16">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:title>
-        Create a note
-    </dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-</svg>
diff --git a/public/components/Left/assets/css/view.css b/public/components/Left/assets/css/view.css
index a83719bbe0..ff575e07ec 100644
--- a/public/components/Left/assets/css/view.css
+++ b/public/components/Left/assets/css/view.css
@@ -23,7 +23,7 @@
 
 /* FEED NAVIGATION / PLUGINS */
 .feed-nav {
-    margin-bottom: var(--medium);
+    margin-bottom: var(--xl);
 }
 
 .feed-nav a {
@@ -50,7 +50,7 @@
 
 .footer {
     margin-top: auto;
-    font-size: var(--default);
+    font-size: var(--unit);
 }
 
 /* > 720p */
diff --git a/public/components/Right/assets/css/view.css b/public/components/Right/assets/css/view.css
index f23ffb0d78..084b04f2bd 100644
--- a/public/components/Right/assets/css/view.css
+++ b/public/components/Right/assets/css/view.css
@@ -11,7 +11,7 @@
 }
 
 .panel-right-icon {
-    margin-left: var(--small) !important;
+    margin-left: var(--m) !important;
     cursor: pointer !important;
     border: 2px solid transparent;
 }
diff --git a/public/plugins/MediaFeed/assets/css/mediaFeed.css b/public/plugins/MediaFeed/assets/css/mediaFeed.css
index d8df165dfe..5ca858bd06 100644
--- a/public/plugins/MediaFeed/assets/css/mediaFeed.css
+++ b/public/plugins/MediaFeed/assets/css/mediaFeed.css
@@ -1,6 +1,6 @@
 .media-feed-tabs {
   border: 2px solid var(--border);
-  border-radius: var(--smaller) var(--smaller) 0 0;
+  border-radius: var(--s) var(--s) 0 0;
   border-bottom: none;
   display: flex;
 }
diff --git a/templates/cards/attachments/show.html.twig b/templates/cards/attachments/show.html.twig
index ac36bade0b..1626c90735 100644
--- a/templates/cards/attachments/show.html.twig
+++ b/templates/cards/attachments/show.html.twig
@@ -2,7 +2,7 @@
 
 {% block body %}
     <div class="page">
-        <section class="section-widget section-widget-padded">
+        <section class="section-widget section-padding">
 
             {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}
 
diff --git a/templates/cards/navigation/view.html.twig b/templates/cards/navigation/view.html.twig
index a87d281e30..08d9ab17d3 100644
--- a/templates/cards/navigation/view.html.twig
+++ b/templates/cards/navigation/view.html.twig
@@ -11,7 +11,7 @@
         {{ icon('arrow-down', 'icon icon-details-open') | raw }}
       </summary>
 
-      <nav class='section-widget-padded' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
+      <nav class='section-padding' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
         {% if not app.user %} {# Default feeds #}
           <ul>
             <li>
@@ -55,7 +55,7 @@
 {% endblock profile_current_actor %}
 
 {% block profile_security %}
-    <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
+    <section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
         <h2 class="section-title">Account</h2>
         <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
 
diff --git a/templates/cards/profile/view.html.twig b/templates/cards/profile/view.html.twig
index 1f1d417afb..3d5f6794bd 100644
--- a/templates/cards/profile/view.html.twig
+++ b/templates/cards/profile/view.html.twig
@@ -14,9 +14,9 @@
 
                 <section class="profile-info-bio">
                     {% if actor_bio %}
-                        <p>{{ actor_bio }}</p>
+                        <span>{{ actor_bio }}</span>
                     {% else %}
-                        <p>{{ '(No bio)' | trans }}</p>
+                        <span>{{ '(No bio)' | trans }}</span>
                     {% endif %}
                 </section>
             </div>
diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig
index 9b4eafb179..10a9791a3a 100644
--- a/templates/settings/base.html.twig
+++ b/templates/settings/base.html.twig
@@ -11,20 +11,18 @@
 {% endblock stylesheets %}
 
 {% block body %}
-    <nav class='section-settings'>
-        <h2>Settings</h2>
+    <nav class='section-widget section-padding'>
+        <h2 class="section-widget-title">Settings</h2>
         <ul>
             <li>
                 {% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %}
                 {% set profile_tabs = profile_tabs|merge(handle_event('PopulateSettingsTabs', app.request, 'profile')) %}
                 {{ macros.settings_details_container('Profile', 'Personal Information, Avatar and Profile', 'settings-profile-details', profile_tabs, _context) }}
             </li>
-            <hr>
             <li>
                 {% set muting_tabs = handle_event('PopulateSettingsTabs', app.request, 'muting') %}
                 {{ macros.settings_details_container('Muting', 'Blocked tags and actors', 'settings-muting-details', muting_tabs, _context) }}
             </li>
-            <hr>
             <li>
                 {{ macros.settings_details_element('Email', 'Set incoming and outgoing email settings', 'settings-email-details', email_form, _context) }}
             </li>
@@ -34,12 +32,10 @@
             <li>
                 {{ macros.settings_details_element('Language', 'Select and set language preferences', 'settings-language-details', language_form, _context) }}
             </li>
-            <hr>
             <li>
                 {% set colour_tabs = handle_event('PopulateSettingsTabs', app.request, 'colours') %}
                 {{ macros.settings_details_container('Colours', 'Customize your interface colours', 'settings-colour-details', colour_tabs, _context) }}
             </li>
-            <hr>
             <li>
                 {{ macros.settings_details_container('Notifications', 'Enable/disable notifications (Email, XMPP, Replies...)', 'notifications', tabbed_forms_notify, _context) }}
             </li>
diff --git a/templates/settings/macros.html.twig b/templates/settings/macros.html.twig
index de0fd56f4d..98ae54acca 100644
--- a/templates/settings/macros.html.twig
+++ b/templates/settings/macros.html.twig
@@ -2,12 +2,12 @@
     {% if details_ids is null %}
         {% set details_ids = [id] %}
     {% endif %}
-    <details class="section-title-settings" {{ open_details(context.open_details_query, details_ids) }} id={{ id }}>
+    <details class="section-settings-details" {{ open_details(context.open_details_query, details_ids) }} id={{ id }}>
         <summary>
-            <h3>
+            <strong class="section-settings-details-title">
                 {{ title | trans }}
                 {{ icon('arrow-down', 'icon icon-details-open') | raw }}
-            </h3>
+            </strong>
             <em>
                 {{ summary | trans }}
             </em>