From e2e1b0172d3db9874d1559448a556217d8fba2f1 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Fri, 21 Jan 2022 18:02:27 +0000
Subject: [PATCH] [COMPONENTS][Collection] Actors view template ordering
 section polished [PLUGINS][RepeatNote] Note to be repeated now uses full note
 card [CSS] Simplyfying rules, re-ordering and removing unnecessary and costly
 'display: flex' rules [CARDS][Note] Minimal note macro has info inside the
 note itself now, since horizontal space is limited

---
 .../templates/collection/actors.html.twig     |  57 +-
 .../templates/right_panel/view.html.twig      |   6 +-
 .../templates/repeat/add_to_repeats.html.twig |   2 +-
 .../repeat/remove_from_repeats.html.twig      |   2 +-
 public/assets/default_theme/css/base.css      | 101 ++-
 .../assets/default_theme/css/pages/feeds.css  | 558 ++++++++--------
 .../default_theme/css/pages/settings.css      |  20 +-
 public/assets/default_theme/css/reset.css     |  63 +-
 public/assets/default_theme/css/root.css      |   2 +-
 .../default_theme/css/widgets/buttons.css     |  88 +--
 .../default_theme/css/widgets/sections.css    | 623 +++++++++---------
 templates/base.html.twig                      |   6 +-
 templates/cards/navigation/view.html.twig     |   2 +-
 templates/cards/note/view.html.twig           |  11 +-
 templates/security/login.html.twig            |   2 +-
 templates/security/register.html.twig         |   3 +-
 16 files changed, 788 insertions(+), 758 deletions(-)

diff --git a/components/Collection/templates/collection/actors.html.twig b/components/Collection/templates/collection/actors.html.twig
index 5a2959a15e..3ecff78a5b 100644
--- a/components/Collection/templates/collection/actors.html.twig
+++ b/components/Collection/templates/collection/actors.html.twig
@@ -3,22 +3,49 @@
 {% block title %}{{ title }}{% endblock %}
 
 {% block body %}
-<section class="frame-section frame-section-padding">
-    <h1 class="section-title">{{ title }}</h1>
+<div class="frame-section frame-section-padding">
+    <h1 class="frame-section-title">{{ title }}</h1>
 
-    <div>
-        <p>{% trans %}Sort by:{% endtrans %}</p>
-        <form method="GET">
-            {% for field in sort_form_fields %}
-                <label for="order_by_{{ field.value }}">{{ field.label }}</label>
-                <input id="order_by_{{ field.value }}" type="radio" name="order_by" value="{{ field.value }}" {% if field.checked %}checked="checked"{% endif %}>
-            {% endfor %}
-            <button type="submit" name="order_op" value="ASC">{% trans %}Ascending{% endtrans %}</button>
-            <button type="submit" name="order_op" value="DESC">{% trans %}Descending{% endtrans %}</button>
+    <details class="frame-section section-details-title">
+        <summary class="details-summary-title">
+            <strong>
+                {% trans %}Ordering rules{% endtrans %}
+            </strong>
+        </summary>
+        <form method="GET" class="section-form">
+            <div class="container-grid">
+                <section class="frame-section frame-section-padding">
+                    <strong>{% trans %}Sort by{% endtrans %}</strong>
+                    <hr>
+                    <div class="container-block">
+                        {% for field in sort_form_fields %}
+                            <span class="container-block">
+                                <label for="order_by_{{ field.value }}">{{ field.label }}</label>
+                                <input id="order_by_{{ field.value }}" type="radio" name="order_by" value="{{ field.value }}" {% if field.checked %}checked="checked"{% endif %}>
+                            </span>
+                        {% endfor %}
+                    </div>
+                </section>
+                <section class="frame-section frame-section-padding">
+                    <strong class="section-title">{% trans %}Order{% endtrans %}</strong>
+                    <hr>
+                    <section class="container-block">
+                        <span class="container-block">
+                            <label for="order_op_asc">{% trans %}Ascending{% endtrans %}</label>
+                            <input id="order_op_asc" type="radio" name="order_op" value="ASC">
+                        </span>
+                        <span class="container-block">
+                            <label for="order_op_desc">{% trans %}Descending{% endtrans %}</label>
+                            <input id="order_op_desc" type="radio" name="order_op" value="DESC" checked="checked">
+                        </span>
+                    </section>
+                </section>
+            </div>
+            <button type="submit">{% trans %}Order{% endtrans %}</button>
         </form>
-    </div>
+    </details>
 
-    <div class="frame-section-padding">
+    <section class="frame-section-padding">
         {% if actors is defined and actors is not empty %}
             {% for actor in actors %}
                 {% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %}
@@ -28,6 +55,6 @@
         {% else %}
             <h2>{{ empty_message }}</h2>
         {% endif %}
-    </div>
-</section>
+    </section>
+</div>
 {% endblock body %}
diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig
index a077438bd0..ff96414851 100644
--- a/components/RightPanel/templates/right_panel/view.html.twig
+++ b/components/RightPanel/templates/right_panel/view.html.twig
@@ -44,8 +44,10 @@
                                     {{ "Additional options" | trans }}
                                 </strong>
                             </summary>
-                            {{ form_row(blocks['post_form'].language) }}
-                            {{ form_row(blocks['post_form'].tag_use_canonical) }}
+                            <section class="section-form">
+                                {{ form_row(blocks['post_form'].language) }}
+                                {{ form_row(blocks['post_form'].tag_use_canonical) }}
+                            </section>
                         </details>
                         {{ form_rest(blocks['post_form']) }}
                         {{ form_end(blocks['post_form']) }}
diff --git a/plugins/RepeatNote/templates/repeat/add_to_repeats.html.twig b/plugins/RepeatNote/templates/repeat/add_to_repeats.html.twig
index 539b9aa606..99f55250eb 100644
--- a/plugins/RepeatNote/templates/repeat/add_to_repeats.html.twig
+++ b/plugins/RepeatNote/templates/repeat/add_to_repeats.html.twig
@@ -12,7 +12,7 @@
     {{ parent() }}
     <div class="page">
         <div class="main">
-            {{ noteView.macro_note_minimal(note) }}
+            {{ noteView.macro_note(note) }}
             {{ form(add_repeat) }}
         </div>
     </div>
diff --git a/plugins/RepeatNote/templates/repeat/remove_from_repeats.html.twig b/plugins/RepeatNote/templates/repeat/remove_from_repeats.html.twig
index a41fdda3eb..c34188cfff 100644
--- a/plugins/RepeatNote/templates/repeat/remove_from_repeats.html.twig
+++ b/plugins/RepeatNote/templates/repeat/remove_from_repeats.html.twig
@@ -12,7 +12,7 @@
     {{ parent() }}
     <div class="page">
         <div class="main">
-            {{ noteView.macro_note_minimal(note) }}
+            {{ noteView.macro_note(note) }}
             {{ form(remove_repeat) }}
         </div>
     </div>
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index 95d4d5b515..dafd2e27ee 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -1,5 +1,5 @@
 html {
-    font-family: 'Open Sans',sans-serif;
+    font-family: 'Open Sans', sans-serif;
     scroll-margin-top: var(--xxl);
 }
 
@@ -9,27 +9,27 @@ html {
 }
 
 .active {
-    font: 600 1.1em 'Poppins',sans-serif;
+    font: 600 1.1em Poppins, sans-serif;
 }
 
 .anchor-hidden {
-    width: 1px;
     height: 1px;
     overflow: hidden;
+    width: 1px;
 }
 
 .accessibility-menu {
-    display: block;
-    position: absolute;
-    z-index: 999;
-    top: -90%;
-    left: -90%;
-    width: 30%;
-    height: min-content;
-    padding: var(--s);
-    border-radius: var(--s);
-    background-color: var(--background-hard)!important;
+    background-color: var(--background-hard) !important;
     border: 2px solid var(--border);
+    border-radius: var(--s);
+    display: block;
+    height: min-content;
+    left: -90%;
+    padding: var(--s);
+    position: absolute;
+    top: -90%;
+    width: 30%;
+    z-index: 999;
 }
 
 .accessibility-menu ul {
@@ -38,8 +38,8 @@ html {
 }
 
 .accessibility-menu:focus-within:not(:active) {
-    top: var(--s);
     left: var(--s);
+    top: var(--s);
 }
 
 .heading-no-margin {
@@ -47,20 +47,20 @@ html {
 }
 
 .page-header {
-    z-index: 1;
-    position: fixed;
-    display: flex;
-    top: 0;
-    height: var(--xxl);
     align-items: baseline;
-    padding: var(--s);
-    background: var(--gradient)!important;
+    background: var(--gradient) !important;
     box-shadow: var(--shadow);
+    display: flex;
+    height: var(--xxl);
+    padding: var(--s);
+    position: fixed;
+    top: 0;
+    z-index: 1;
 }
 
 .header-instance {
-    text-align: center;
     flex: 1;
+    text-align: center;
 }
 
 .header-instance * {
@@ -68,30 +68,30 @@ html {
 }
 
 .page-content-wrapper {
-    position: relative;
-    top: var(--xxl);
+    justify-content: center;
     margin-left: auto;
     margin-right: auto;
-    justify-content: center;
     padding: var(--s) var(--s) 0;
+    position: relative;
+    top: var(--xxl);
 }
 
 .page-content {
-    margin-top: var(--s);
     display: flex;
     flex-direction: column;
+    margin-top: var(--s);
     width: 100%;
 }
 
 .markdown-blocks {
+    background-color: var(--background-card) !important;
     border-radius: 0 0 var(--s) var(--s);
     padding: var(--s);
-    background-color: var(--background-card)!important;
 }
 
 .markdown-blocks ul {
-    margin-left: 1em;
     list-style: disc;
+    margin-left: 1em;
 }
 
 .markdown-blocks ul li {
@@ -99,10 +99,10 @@ html {
 }
 
 .doc-navigation {
-    border-radius: var(--s) var(--s) 0 0;
+    background-color: var(--background-card) !important;
     border-bottom: 0;
+    border-radius: var(--s) var(--s) 0 0;
     padding: var(--s);
-    background-color: var(--background-card)!important;
 }
 
 .doc-navigation ul {
@@ -111,9 +111,9 @@ html {
 }
 
 .section-panel {
+    padding: var(--s);
     position: fixed;
     top: var(--xxl);
-    padding: var(--s);
 }
 
 .section-panel-left {
@@ -125,9 +125,9 @@ html {
 }
 
 .section-panel .panel-content {
+    background: var(--background-hard);
     display: block;
     height: 100vh;
-    background: var(--background-hard);
 }
 
 @media only screen and (max-width: 1280px) {
@@ -152,15 +152,15 @@ html {
         top: -100%;
     }
 
-    #toggle-panel-left:not(:checked) ~ .section-panel-left,#toggle-panel-right:not(:checked) ~ .section-panel-right {
+    #toggle-panel-left:not(:checked) ~ .section-panel-left, #toggle-panel-right:not(:checked) ~ .section-panel-right {
         display: none;
     }
 
-    #toggle-panel-left:checked ~ .section-panel-left,#toggle-panel-right:checked ~ .section-panel-right {
-        z-index: 1;
-        width: 100vw;
+    #toggle-panel-left:checked ~ .section-panel-left, #toggle-panel-right:checked ~ .section-panel-right {
         left: 0;
         overflow-y: auto;
+        width: 100vw;
+        z-index: 1;
     }
 }
 
@@ -169,8 +169,8 @@ html {
         width: 100%;
     }
 
-    label[for|="toggle-panel"],input[id|="toggle-panel"] {
-        display: none!important;
+    label[for|="toggle-panel"], input[id|="toggle-panel"] {
+        display: none !important;
     }
 
     .section-panel {
@@ -182,20 +182,20 @@ html {
     }
 
     a[id|="anchor"]:target + .accessibility-target {
-        animation-name: highlight;
         animation-duration: 600ms;
+        animation-name: highlight;
         animation-timing-function: ease-in-out;
     }
 }
 
 @media only screen and (min-width: 1921px) {
     .page-header {
-        width: 66vw;
         align-self: center;
+        width: 66vw;
     }
 
-    label[for|="toggle-panel"],input[id|="toggle-panel"] {
-        display: none!important;
+    label[for|="toggle-panel"], input[id|="toggle-panel"] {
+        display: none !important;
     }
 
     .section-panel {
@@ -220,7 +220,6 @@ html {
         opacity: 0;
         transform: translateY(-10px);
     }
-
     100% {
         opacity: unset;
         transform: none;
@@ -232,7 +231,6 @@ html {
         opacity: 0;
         transform: translateY(-10px);
     }
-
     0% {
         opacity: unset;
         transform: none;
@@ -241,35 +239,30 @@ html {
 
 @keyframes highlight {
     0% {
-        box-shadow: initial;
         border-radius: var(--s);
+        box-shadow: initial;
     }
-
     50% {
         border-radius: var(--s);
         box-shadow: inset 0 20px 40px #FFF;
         transition: box-shadow .3s ease-in-out;
         z-index: 666;
     }
-
     100% {
-        box-shadow: initial;
         border-radius: var(--s);
+        box-shadow: initial;
     }
-
     0% {
-        box-shadow: initial;
         border-radius: var(--s);
+        box-shadow: initial;
     }
-
     50% {
         border-radius: var(--s);
         box-shadow: inset 0 20px 40px #000;
         transition: box-shadow .3s ease-in-out;
     }
-
     100% {
-        box-shadow: initial;
         border-radius: var(--s);
+        box-shadow: initial;
     }
-}
\ 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 a4a62af670..a0bd73f3e7 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -1,45 +1,184 @@
-.feed-header {
-    display: flex;
-    margin-bottom: var(--m);
-    align-items: center;
+.button-container {
+    background-color: var(--foreground);
+    border: none !important;
+    display: inline-block;
+    height: 14px;
+    opacity: .33;
+    width: 14px;
 }
 
-.feed-header .feed-actions {
-    text-transform: capitalize;
-    margin-left: auto;
+.button-container:focus, .button-container:hover {
+    background-color: var(--accent);
+    border: none !important;
+    opacity: 1;
+}
+
+.button-container:not(:first-of-type) {
+    margin-left: var(--s);
+}
+
+.favourite-button-container {
+    -moz-mask-image: url(../../icons/heart.svg);
+    -o-mask-image: url(../../icons/heart.svg);
+    -webkit-mask-image: url(../../icons/heart.svg);
+    mask-image: url(../../icons/heart.svg);
+}
+
+.reply-button-container {
+    -moz-mask-image: url(../../icons/reply.svg);
+    -o-mask-image: url(../../icons/reply.svg);
+    -webkit-mask-image: url(../../icons/reply.svg);
+    mask-image: url(../../icons/reply.svg);
+}
+
+.repeat-button-container {
+    -moz-mask-image: url(../../icons/repeat.svg);
+    -o-mask-image: url(../../icons/repeat.svg);
+    -webkit-mask-image: url(../../icons/repeat.svg);
+    mask-image: url(../../icons/repeat.svg);
+}
+
+.delete-button-container {
+    -moz-mask-image: url(../../icons/delete.svg);
+    -o-mask-image: url(../../icons/delete.svg);
+    -webkit-mask-image: url(../../icons/delete.svg);
+    mask-image: url(../../icons/delete.svg);
+}
+
+.embed {
+    border: unset;
+    display: flex;
+    padding: var(--s);
+}
+
+.embed .p-author, .embed .p-name {
+    font-weight: 700;
+}
+
+.embed .p-summary {
+    width: 60%;
+}
+
+.embed .p-summary hr {
+    margin-bottom: var(--s);
+    margin-top: var(--s);
+}
+
+.embed header {
+    margin-bottom: var(--m);
+    width: 100%;
+}
+
+.embed img {
+    height: auto;
+    margin-right: var(--s);
+    width: 25%;
+}
+
+.embed img {
+    max-height: min-content;
+    max-width: min-content;
+    padding: unset;
+}
+
+.feed-actions-details summary, .note-actions-extra-details summary {
+    display: block;
+    height: var(--unit);
+    width: var(--unit);
 }
 
 .feed-actions-details-dropdown {
     font-size: .937rem;
 }
 
-.notes hr {
-    margin-top: var(--s);
+.feed-actions-details[open] > .feed-actions-details-dropdown a span {
+    float: right;
+    margin-left: 4px;
 }
 
-.note-wrapper {
-    width: 100%;
-    height: inherit;
-    border-radius: var(--s) var(--s) 0 0;
-}
-
-.note-sidebar {
+.feed-actions-details[open] > .feed-actions-details-dropdown, .note-actions-extra-details[open] > summary + * {
+    background: var(--background-card);
+    border: 2px solid var(--border);
+    border-radius: var(--s);
+    box-shadow: var(--shadow);
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    padding: 4px 8px;
+    position: absolute;
+    right: 0;
+    width: max-content;
+    z-index: 1;
+}
+
+.feed-actions-details[open] > summary, .note-actions-extra-details[open] > summary {
+    opacity: 1 !important;
+}
+
+.feed-actions-details[open] svg {
+    height: auto;
+    width: 1em;
+}
+
+.feed-empty {
+    display: flex;
+}
+
+.feed-empty .feed-background {
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: var(--xxl);
+    opacity: 3%;
+    width: 40%;
+}
+
+.feed-header {
+    display: flex;
+    margin-bottom: var(--m);
+}
+
+.feed-header .feed-actions {
+    margin-left: auto;
+    text-transform: capitalize;
+}
+
+.h-entry {
+    background-color: var(--background-card) !important;
+    border-radius: var(--s);
+    display: flex;
+}
+
+.h-entry .embed[class*="p-"] {
+    padding: unset;
+}
+
+.h-entry .replies {
+    border-left: 1px solid var(--border);
+    margin-bottom: var(--s);
+    padding: 0 var(--s);
+}
+
+.h-entry a:focus {
+    text-decoration: underline;
+}
+
+.h-entry figure {
+    background: var(--gradient);
+    border-radius: var(--s);
+    margin: unset;
     padding: var(--s);
 }
 
-.note-sidebar > * {
-    max-width: 3rem;
-    max-height: 3rem;
-    width: 100%;
-    height: auto;
-    border-radius: 2px;
+.h-entry img {
+    background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
 }
 
-.note-sidebar img {
-    background: unset!important;
+.h-entry-language {
+    background: var(--gradient-backwards);
+    border-radius: 0 0 var(--s) 0;
+    color: var(--foreground);
+    float: right;
+    padding: 6px 12px;
+    position: relative;
 }
 
 .h-entry:not(:first-child) {
@@ -47,139 +186,15 @@
 }
 
 .h-entry:not(embed) {
-    box-shadow: inset 0 0 0 2px var(--border);
-}
-
-.h-entry img {
-    background: repeating-conic-gradient(#ffffff66 0deg 90deg,#ffffff33 0deg 180deg) 0 0/40px 40px round;
+    border: 1px solid var(--border);
 }
 
 .h-entry[id^="note-anchor-"]:target {
-    border: 2px solid var(--accent)!important;
+    border: 2px solid var(--accent) !important;
 }
 
-.embed {
-    display: flex;
-    flex-wrap: wrap;
-    padding: var(--s);
-    border: unset;
-}
-
-.embed header {
-    width: 100%;
-    margin-bottom: var(--m);
-}
-
-.embed img {
-    width: 25%;
-    height: auto;
-    margin-right: var(--s);
-}
-
-.embed .p-summary {
-    width: 60%;
-}
-
-.embed .p-author,.embed .p-name {
-    font-weight: 700;
-}
-
-.embed img {
-    padding: unset;
-    max-width: min-content;
-    max-height: min-content;
-}
-
-.embed .p-summary hr {
+.h-feed hr, .notes hr {
     margin-top: var(--s);
-    margin-bottom: var(--s);
-}
-
-.h-entry .embed[class*="p-"] {
-    padding: unset;
-}
-
-.h-entry a:focus {
-    text-decoration: underline;
-}
-
-.h-entry {
-    display: flex;
-    border-radius: var(--s);
-    background-color: var(--background-card)!important;
-}
-
-.h-entry figure {
-    margin: unset;
-    object-fit: cover;
-    padding: var(--s);
-    background: var(--gradient);
-    border-radius: var(--s);
-}
-
-.h-entry .replies {
-    margin-bottom: var(--s);
-    padding: 0 var(--s);
-    border-left: 1px solid var(--border);
-}
-
-.note-replies-start {
-    font-size: .937rem;
-    font-weight: 700;
-    opacity: .5;
-}
-
-.note-info,embed header {
-    display: flex;
-    border-bottom: unset;
-    border-radius: 0 var(--s) 0 0;
-    line-height: initial;
-    padding: 4px var(--s) 4px 0;
-}
-
-.note-info {
-    margin-top: 2px;
-    margin-right: 2px;
-    background: var(--gradient-backwards);
-}
-
-.note-info > * {
-    align-items: center;
-}
-
-.note-info-start {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-}
-
-.note-info-start > * {
-    word-break: break-all;
-}
-
-.note-conversation-info {
-    margin-left: 4px;
-}
-
-.note-author-url,.note-conversation-url,.note-url {
-    font-style: italic;
-}
-
-embed header {
-    justify-content: space-between;
-}
-
-.note-author-url {
-    float: left;
-    margin-left: 4px;
-}
-
-.note-author-nickname,.note-conversation-info {
-    opacity: .5;
-}
-
-.note-author-fullname {
-    font-weight: 700;
 }
 
 .note-actions {
@@ -192,167 +207,83 @@ embed header {
     margin-right: 2px;
 }
 
-.note-actions-separator {
-    display: inline-block;
-    background: var(--foreground);
-    opacity: .33;
-    width: 1px;
-    height: 1em;
-    margin-left: 2px;
-    margin-right: 2px;
-}
-
-.note-actions-extra-details {
+.note-actions-extra-details ul {
     display: flex;
     flex-direction: column;
 }
 
-.feed-actions-details summary,.note-actions-extra-details summary {
-    display: block;
-    width: var(--unit);
-    height: var(--unit);
+.note-actions-extra-details hr {
+    margin: unset;
 }
 
 .note-actions-extra-details summary {
     opacity: .33;
 }
 
-.feed-actions-details[open] > summary,.note-actions-extra-details[open] > summary {
-    opacity: 1!important;
-}
-
-.feed-actions-details[open] > .feed-actions-details-dropdown,.note-actions-extra-details[open] > summary + * {
-    z-index: 1;
-    display: flex;
-    position: absolute;
-    right: 0;
-    flex-direction: column;
-    padding: 4px 8px;
-    border: 2px solid var(--border);
-    border-radius: var(--s);
-    background: var(--background-card);
-    box-shadow: var(--shadow);
-    width: max-content;
-}
-
-.feed-actions-details[open] svg {
-    width: 1em;
-    height: auto;
-}
-
-.feed-actions-details[open] > .feed-actions-details-dropdown a span {
-    margin-left: 4px;
-    float: right;
-}
-
 .note-actions-extra-details[open] > summary + * > li {
-    line-height: 2;
     font-size: .937rem;
+    line-height: 2;
 }
 
-.note-actions-extra-details hr {
-    margin: 8px!important;
+.note-actions-separator {
+    background: var(--foreground);
+    display: inline-block;
+    height: 1em;
+    margin-left: 2px;
+    margin-right: 2px;
+    opacity: .33;
+    width: 1px;
 }
 
 .note-actions-set {
-    opacity: 1!important;
-}
-
-.button-container {
-    border: none!important;
-    mask-repeat: no-repeat!important;
-    mask-size: contain!important;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    background-color: var(--foreground);
-    opacity: .33;
-}
-
-.button-container:not(:first-of-type) {
-    margin-left: var(--s);
-}
-
-.button-container:focus,.button-container:hover {
-    border: none!important;
-    mask-repeat: no-repeat!important;
-    mask-size: cover!important;
-    opacity: 1;
-    background-color: var(--accent);
-}
-
-.favourite-button-container {
-    -o-mask-image: url(../../icons/heart.svg);
-    -moz-mask-image: url(../../icons/heart.svg);
-    -webkit-mask-image: url(../../icons/heart.svg);
-    mask-image: url(../../icons/heart.svg);
-}
-
-.reply-button-container {
-    -o-mask-image: url(../../icons/reply.svg);
-    -moz-mask-image: url(../../icons/reply.svg);
-    -webkit-mask-image: url(../../icons/reply.svg);
-    mask-image: url(../../icons/reply.svg);
-}
-
-.repeat-button-container {
-    -o-mask-image: url(../../icons/repeat.svg);
-    -moz-mask-image: url(../../icons/repeat.svg);
-    -webkit-mask-image: url(../../icons/repeat.svg);
-    mask-image: url(../../icons/repeat.svg);
-}
-
-.delete-button-container {
-    -o-mask-image: url(../../icons/delete.svg);
-    -moz-mask-image: url(../../icons/delete.svg);
-    -webkit-mask-image: url(../../icons/delete.svg);
-    mask-image: url(../../icons/delete.svg);
-}
-
-.note-content {
-    display: flex;
-    flex-direction: column;
-    border-radius: 0 0 var(--s) var(--s);
-    padding: 0 4px 4px 0;
-}
-
-.note-text a {
-    text-decoration: underline!important;
+    opacity: 1 !important;
 }
 
 .note-attachments {
     display: flex;
-    justify-items: flex-start;
 }
 
 .note-attachments-unit {
-    display: flex;
-    flex-wrap: wrap;
-    max-width: max-content;
     border-radius: var(--s);
+    display: flex;
+    max-width: max-content;
     padding: var(--s);
-    align-self: flex-start;
+}
+
+.note-attachments-unit > figure figcaption {
+    display: flex;
+    word-break: break-all;
 }
 
 .note-attachments-unit:not(:only-child) {
     margin-right: var(--s);
 }
 
-.note-attachments-unit > figure figcaption {
-    display: flex;
-    word-break: break-all;
-    margin-bottom: var(--s);
+.note-author-fullname {
+    font-weight: 700;
+}
+
+.note-author-nickname, .note-conversation-info {
+    opacity: .5;
+}
+
+.note-author-url {
+    float: left;
+    margin-left: 4px;
+}
+
+.note-author-url, .note-conversation-url, .note-url {
+    font-style: italic;
 }
 
 .note-complementary {
+    background: var(--gradient) !important;
+    border-left: 1px solid var(--accent);
     font-size: .937rem;
-    border-left: 2px solid var(--accent);
-    border-end-start-radius: var(--s);
-    border-end-end-radius: var(--s);
-    padding-left: var(--s);
     margin-bottom: 4px;
     margin-right: var(--s);
-    background: var(--gradient)!important;
+    padding-left: var(--s);
+    border-radius: 0 0 0 var(--s);
 }
 
 .note-complementary a {
@@ -363,27 +294,68 @@ embed header {
     margin-bottom: var(--s);
 }
 
-.h-entry-language {
-    position: relative;
-    float: right;
-    padding: 6px 12px;
-    background: var(--gradient-backwards);
-    color: var(--foreground);
-    border-radius: 0 0 var(--s) 0;
+.note-content {
+    border-radius: 0 0 var(--s) var(--s);
+    display: block;
+    padding: 0 4px 4px 0;
 }
 
-.feed-empty {
+.note-conversation-info {
+    margin-left: 4px;
+}
+
+.note-info {
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
+    background: var(--gradient-backwards);
 }
 
-.feed-empty .feed-background {
-    opacity: 3%;
-    width: 40%;
+.note-info, embed header {
+    border-bottom: unset;
+    border-radius: 0 var(--s) 0 0;
+    display: flex;
+    line-height: initial;
+    padding: 4px var(--s) 4px 0;
+}
+
+.note-info-start {
+    display: flex;
+}
+
+.note-info-start > * {
+    word-break: break-all;
+}
+
+.note-replies-start {
+    font-size: .937rem;
+    font-weight: 700;
+    opacity: .5;
+}
+
+.note-sidebar {
+    display: flex;
+    padding: var(--s);
+}
+
+.note-sidebar > * {
+    border-radius: 2px;
     height: auto;
-    margin-top: var(--xxl);
-    margin-left: auto;
-    margin-right: auto;
+    max-height: 3rem;
+    max-width: 3rem;
+    width: 100%;
+}
+
+.note-sidebar img {
+    background: unset !important;
+}
+
+.note-text a {
+    text-decoration: underline !important;
+}
+
+.note-wrapper {
+    height: inherit;
+    width: 100%;
 }
 
 @media only screen and (max-width: 1280px) {
@@ -392,7 +364,7 @@ embed header {
     }
 
     .note-sidebar > * {
-        max-width: 2rem;
         max-height: 2rem;
+        max-width: 2rem;
     }
-}
\ 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 d4873aa80e..9eedb6449e 100644
--- a/public/assets/default_theme/css/pages/settings.css
+++ b/public/assets/default_theme/css/pages/settings.css
@@ -1,18 +1,18 @@
 .section-settings {
     background: var(--background-card);
-    border: 2px solid var(--border);
+    border: 1px solid var(--border);
     box-shadow: var(--shadow);
 }
 
-.section-settings,.section-settings-details {
-    margin-bottom: .6rem;
+.section-settings, .section-settings-details {
     border-radius: .6rem;
-    padding: .6rem;
     box-sizing: border-box;
+    margin-bottom: .6rem;
+    padding: .6rem;
 }
 
 .section-settings-details {
-    border: 2px solid var(--border);
+    border: 1px solid var(--border);
 }
 
 .section-settings-details-title {
@@ -32,11 +32,11 @@
 }
 
 .section-settings hr {
-    margin-top: .6rem;
     margin-bottom: .6rem;
+    margin-top: .6rem;
 }
 
-.section-settings-details summary em:first-letter,.section-settings-details summary h3:first-letter {
+.section-settings-details summary em:first-letter, .section-settings-details summary h3:first-letter {
     text-transform: uppercase;
 }
 
@@ -50,11 +50,11 @@
 }
 
 .section-settings-details[open] summary:after {
+    animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
     transform: rotate(180deg);
-    animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
 }
 
 .section-settings-details:not([open]) summary:after {
+    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
     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 b9edf8f248..5ae902f386 100644
--- a/public/assets/default_theme/css/reset.css
+++ b/public/assets/default_theme/css/reset.css
@@ -1,44 +1,47 @@
 * {
-    box-sizing: border-box!important;
+    box-sizing: border-box !important;
     max-width: 100%;
 }
 
-body,html {
-    -webkit-font-smoothing: antialiased;
+body, html {
     -moz-osx-font-smoothing: grayscale;
-    background-color: var(--background-hard);
+    -webkit-font-smoothing: antialiased;
     background-attachment: fixed;
+    background-color: var(--background-hard);
     display: flex;
     flex-direction: column;
-    font: var(--unit) 'Open Sans',sans-serif;
+    font-family: "var(--unit) 'Open Sans'", sans-serif;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
 }
 
-body,input,select,textarea {
+body, input, select, textarea {
     color: var(--foreground);
 }
 
-:link,:visited {
-    text-decoration: none;
+:link, :visited {
     color: currentColor;
+    text-decoration: none;
 }
 
 hr {
     all: unset;
+    background-color: var(--border) !important;
     display: block;
     height: 1px;
-    background-color: var(--border)!important;
 }
 
-menu,ul {
-    padding: unset;
-    margin: unset;
+menu, ul {
     list-style: none;
+    margin: unset;
+    padding: unset;
 }
 
-blockquote,body,fieldset,form,html,input,pre,textarea {
+blockquote, body, fieldset, form, html, input, pre, textarea {
+    border: 0;
     margin: 0;
     padding: 0;
-    border: 0;
 }
 
 fieldset {
@@ -49,7 +52,7 @@ section {
     all: unset;
 }
 
-:link img,:visited img,a img {
+:link img, :visited img, a img {
     border: 0;
 }
 
@@ -66,7 +69,7 @@ address {
 }
 
 details summary {
-    cursor: pointer!important;
+    cursor: pointer !important;
 }
 
 details summary > * {
@@ -91,31 +94,31 @@ html {
 }
 
 body {
-    font-family: 'Open Sans',sans-serif;
+    font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     line-height: 1.75;
 }
 
 p {
     all: unset;
-    font-family: 'Open Sans',sans-serif;
+    font-family: 'Open Sans', sans-serif;
     margin-bottom: 1rem;
 }
 
-h1,h2,h3,h4,h5,legend {
-    margin: 3rem 0 1.38rem;
-    font-family: 'Poppins',sans-serif;
+h1, h2, h3, h4, h5, legend {
+    font-family: 'Poppins', sans-serif;
     font-weight: 600;
     line-height: 1.3;
+    margin: 3rem 0 1.38rem;
 }
 
-h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,legend:first-child {
+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;
     font-size: 1.383rem;
+    margin-top: 0;
 }
 
 h2 {
@@ -138,21 +141,21 @@ legend {
     font-size: 1.296em;
 }
 
-.text_small,small {
-    font: .937rem 'Open Sans',sans-serif;
+.text_small, small {
+    font: .937rem 'Open Sans', sans-serif;
 }
 
-input[type=password],input[type=text],textarea {
-    font-family: 'Open Sans',sans-serif;
+input[type=password], input[type=text], textarea {
+    font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     padding: 4px 6px;
 }
 
 ul {
-    text-decoration: none;
+    list-style: none;
     margin: 0;
     padding: 0;
-    list-style: none;
+    text-decoration: none;
 }
 
 li {
@@ -160,7 +163,7 @@ li {
     padding: 0;
 }
 
-a:focus,a:hover {
+a:focus, a:hover {
     text-decoration: underline;
 }
 
diff --git a/public/assets/default_theme/css/root.css b/public/assets/default_theme/css/root.css
index 26cc93bd28..02ad051ee1 100644
--- a/public/assets/default_theme/css/root.css
+++ b/public/assets/default_theme/css/root.css
@@ -11,7 +11,7 @@
         --foreground: #f0f6f6;
         --background-hard: #141216;
         --background-card: #131217;
-        --border: #201f25;
+        --border: #26242D;
         --accent: #5ddbcf;
         --shadow: 0 5px 20px -10px rgba(255,255,255,0.1)!important;
         --shadow-inset-accent: inset 0 0 0 2px var(--accent);
diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css
index 0f23b89ba3..5306fde0af 100644
--- a/public/assets/default_theme/css/widgets/buttons.css
+++ b/public/assets/default_theme/css/widgets/buttons.css
@@ -3,14 +3,14 @@ input {
 }
 
 input[type=checkbox] {
-    display: inline-block;
-    cursor: pointer;
-    width: 1em !important;
-    height: 1em !important;
     background: var(--accent) !important;
+    cursor: pointer;
+    display: inline-block;
+    height: 1em !important;
+    width: 1em !important;
 }
 
-input[type=checkbox]:not(:hover, :focus) {
+input[type=checkbox]:not(:hover,:focus) {
     background: var(--foreground) !important;
 }
 
@@ -19,135 +19,137 @@ input[type=checkbox] {
 }
 
 input[type=radio] {
+    background: var(--border);
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--background-hard) !important;
     display: inline-block;
-    width: var(--s) !important;
     height: var(--s) !important;
     padding-right: 4px !important;
-    background: var(--foreground);
-    box-shadow: inset 0 0 0 2px var(--foreground) !important;
-    border-radius: 50%;
+    width: var(--s) !important;
 }
 
 input[type=radio]:checked {
-    background: var(--background-hard);
-    box-shadow: inset 0 0 0 2px var(--accent) !important;
+    background: var(--foreground);
+    box-shadow: inset 0 0 0 2px var(--foreground) !important;
 }
 
 input[type=file] {
     all: unset;
+    background: var(--gradient) !important;
+    border-radius: var(--s);
     display: block;
     font-family: 'Open Sans', sans-serif !important;
-    font-weight: normal !important;
+    font-weight: 400 !important;
     padding: unset !important;
-    border-radius: var(--s);
-    background: var(--gradient) !important;
 }
 
 input[type=checkbox] {
+    -moz-mask-image: url(../../icons/check-off.svg) !important;
+    -o-mask-image: url(../../icons/check-off.svg) !important;
+    -webkit-mask-image: url(../../icons/check-off.svg) !important;
     background-size: contain !important;
     margin-right: 4px !important;
-    -webkit-mask-image: url("../../icons/check-off.svg") !important;
-    -o-mask-image: url("../../icons/check-off.svg") !important;
-    -moz-mask-image: url("../../icons/check-off.svg") !important;
-    mask-image: url("../../icons/check-off.svg") !important;
+    mask-image: url(../../icons/check-off.svg) !important;
 }
 
 input[type=checkbox]:checked {
-    -webkit-mask-image: url("../../icons/check-on.svg") !important;
-    -o-mask-image: url("../../icons/check-on.svg") !important;
-    -moz-mask-image: url("../../icons/check-on.svg") !important;
-    mask-image: url("../../icons/check-on.svg") !important;
+    -moz-mask-image: url(../../icons/check-on.svg) !important;
+    -o-mask-image: url(../../icons/check-on.svg) !important;
+    -webkit-mask-image: url(../../icons/check-on.svg) !important;
+    mask-image: url(../../icons/check-on.svg) !important;
 }
 
 input[type=color] {
     appearance: none;
-    width: var(--xxl);
-    height: var(--xxl);
     background-color: transparent;
     border: none;
     cursor: pointer;
+    height: var(--xxl);
+    width: var(--xxl);
 }
 
 input[type=color]::-webkit-color-swatch {
-    border-radius: var(--s);
     border: none;
+    border-radius: var(--s);
 }
 
 input[type=color]::-moz-color-swatch {
-    border-radius: var(--s);
     border: none;
+    border-radius: var(--s);
 }
 
 ::file-selector-button {
-    cursor: pointer;
     background-color: unset;
     border: unset;
-    font-family: 'Open Sans', sans-serif !important;
-    font-weight: bold !important;
     color: var(--foreground);
+    cursor: pointer;
     fill: var(--foreground);
+    font-family: 'Open Sans', sans-serif !important;
+    font-weight: 700 !important;
     margin: 3px;
 }
 
-*|*::-moz-button-content {
+*|::-moz-button-content {
     all: unset !important;
 }
 
 button {
-    display: block !important;
     cursor: pointer !important;
+    display: block !important;
     margin-left: auto !important;
     margin-top: var(--s);
 }
 
 .alert button {
+    border-color: #ff6347 !important;
     cursor: pointer !important;
     margin-top: unset !important;
-    border-color: tomato !important;
 }
 
 button, label {
-    font-family: 'Poppins', sans-serif;
-    font-weight: bold !important;
     color: currentColor;
 }
+button {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700 !important;
+}
 
 select::-ms-expand {
     display: none;
 }
 
 button, input, select, textarea {
+    border: 1px solid var(--border) !important;
+    border-radius: var(--s);
     display: inline-block;
-    overflow: hidden;
     font-size: inherit;
     line-height: initial !important;
-    padding: 6px 8px !important;
-    border-radius: var(--s);
-    border: 2px solid var(--border) !important;
-    width: auto;
     max-width: border-box !important;
+    overflow: hidden;
+    padding: 6px 8px !important;
+    width: auto;
 }
 
 button, select, textarea {
     background: var(--gradient) !important;
 }
 
-button, input:not([type=checkbox], [type=radio]) {
+button, input:not([type=checkbox],[type=radio]) {
     background: var(--gradient) !important;
 }
 
 select {
-    cursor: pointer;
     background-repeat: no-repeat;
     border-radius: var(--s);
+    cursor: pointer;
     max-width: 100% !important;
 }
 
 select[multiple] {
-    overflow-y: scroll;
     height: 20rem;
+    overflow-y: scroll;
 }
 
 button:focus, button:hover, input:focus, input:hover, select:focus, select:hover, textarea:focus, textarea:hover {
     box-shadow: var(--shadow-inset-accent) !important;
-}
\ No newline at end of file
+}
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index 50901d68ec..99e148fa6b 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -1,242 +1,72 @@
-.profile {
-    font-family: 'Open Sans', sans-serif;
-    margin-bottom: var(--s);
-    border: 2px solid var(--border);
-    border-radius: var(--s);
-    padding: var(--unit);
-    background: var(--gradient) !important;
+.add-actor-button-container {
+    -moz-mask-image: url(../../icons/add-actor.svg);
+    -o-mask-image: url(../../icons/add-actor.svg);
+    -webkit-mask-image: url(../../icons/add-actor.svg);
+    mask-image: url(../../icons/add-actor.svg);
 }
 
-.profile header {
-    display: flex;
+.alert, .alert-danger, .form-error, .form-row-widget-error {
+    align-items: center;
+    background-color: #FF634733;
+    border: solid 2px #ff6347;
+    border-radius: var(--s);
+    display: inline-flex;
+    font-style: italic;
     justify-content: space-between;
-    flex-wrap: wrap;
-    vertical-align: middle;
+    margin-bottom: 6px;
+    margin-top: 6px;
+    padding: 2px 6px;
 }
 
-.profile-info {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.profile-info .avatar {
-    flex: 0.5;
-}
-
-.profile-info-url {
-    display: block;
-}
-
-.profile-info-url-nickname {
-    font-size: var(--m);
-}
-
-.profile-info-url-remote {
-    opacity: 0.66;
-}
-
-.profile-info-url > * {
-    display: block;
-}
-
-.profile-info section {
-    flex: 1;
-}
-
-.profile-stats {
-    align-self: center;
-    margin-left: auto;
-    text-align: right;
-    font-size: 0.937rem;
-    opacity: 0.66;
-}
-
-.profile-stats-subscribers, .profile-stats-subscriptions {
-    display: block;
-}
-
-.profile-stats-subscribers strong, .profile-stats-subscriptions strong {
-    margin-right: 4px;
-}
-
-.profile-bio, .profile-info-url {
-    word-break: break-all;
-}
-
-.profile-bio {
-    margin-top: 4px;
-}
-
-.profile-tags {
-    margin: 4px unset unset;
-}
-
-.profile-navigation > * {
-    display: block;
-}
-
-.profile-extra-actions {
-    margin-top: var(--s);
-    margin-right: var(--s);
-    background: var(--gradient), var(--background-hard);
-    border: 2px solid var(--border);
-    border-radius: var(--s);
-    padding: 4px 8px;
-    font-weight: bold;
-    display: inline-block;
+.avatar {
+    border-radius: 2px;
+    height: auto;
+    margin-right: 5px;
+    max-height: 4rem;
+    max-width: 4rem;
+    min-width: var(--xxl);
+    width: 100%;
 }
 
 .button-container {
+    background-color: var(--foreground);
+    border: none !important;
+    display: inline-block;
+    height: var(--unit);
+    mask-repeat: no-repeat !important;
+    mask-size: cover !important;
+    opacity: .33;
+    width: var(--unit);
+}
+
+.button-container:focus, .button-container:hover {
+    background-color: var(--accent);
     border: none !important;
     mask-repeat: no-repeat !important;
     mask-size: cover !important;
-    display: inline-block;
-    width: var(--unit);
-    height: var(--unit);
-    background-color: var(--foreground);
-    opacity: 0.33;
+    opacity: 1;
 }
 
 .button-container:not(:first-of-type) {
     margin-left: var(--s);
 }
 
-.button-container:focus, .button-container:hover {
-    border: none !important;
-    mask-repeat: no-repeat !important;
-    mask-size: cover !important;
-    opacity: 1;
-    background-color: var(--accent);
-}
-
-.add-actor-button-container {
-    -o-mask-image: url("../../icons/add-actor.svg");
-    -moz-mask-image: url("../../icons/add-actor.svg");
-    -webkit-mask-image: url("../../icons/add-actor.svg");
-    mask-image: url("../../icons/add-actor.svg");
-}
-
-.remove-actor-button-container {
-    -o-mask-image: url("../../icons/remove-actor.svg");
-    -moz-mask-image: url("../../icons/remove-actor.svg");
-    -webkit-mask-image: url("../../icons/remove-actor.svg");
-    mask-image: url("../../icons/remove-actor.svg");
-}
-
-.avatar {
-    max-width: 4rem;
-    max-height: 4rem;
-    min-width: var(--xxl);
-    width: 100%;
-    height: auto;
-    margin-right: 5px;
-    border-radius: 2px;
-}
-
-.section-title {
-    font-weight: 700;
-    margin-bottom: unset;
-}
-
-.frame-section {
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--s);
-    margin-bottom: var(--m);
-    background-color: var(--background-card) !important;
-    box-shadow: var(--shadow);
-    border: 2px solid var(--border) !important;
-    border-radius: var(--s);
-}
-
-.frame-section hr {
-    margin-bottom: var(--s);
-}
-
-.frame-section-padding {
-    padding: var(--s);
-}
-
-.frame-section-paging {
+.container-block {
     display: block;
-    font-family: 'Poppins', sans-serif;
-    font-weight: 700;
-    padding: 6px 12px;
-    margin-top: var(--s);
-    margin-left: auto;
 }
 
-.frame-section-title {
-    margin-left: unset;
-}
-
-.frame-section-button-like {
-    font-family: 'Poppins', sans-serif;
-    font-weight: 700;
-    display: block;
-    width: max-content;
-    align-self: end;
-    background: var(--gradient);
-    padding: 6px 8px;
-    border-radius: var(--s);
-    border: 2px solid var(--border);
-}
-
-.section-details-title summary {
-    padding: 6px 12px;
-}
-
-.section-details-subtitle summary {
-    padding: 2px 8px;
+.container-grid {
+    display: grid;
+    gap: 10px;
+    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 }
 
 .details-subtitle-summary + * {
-    border-radius: var(--s);
     background: var(--gradient);
+    border-radius: var(--s);
     padding: 2px 8px;
 }
 
-.section-form .section-details-subtitle summary {
-    border: 2px solid var(--border);
-}
-
-.section-details-subtitle summary, .section-details-title summary {
-    display: inline-block;
-    width: 100%;
-    border-radius: var(--s);
-    background: var(--gradient);
-}
-
-.section-details-subtitle summary > *, .section-details-title summary > * {
-    display: inline-block;
-    vertical-align: baseline;
-}
-
-.section-details-subtitle summary > *:last-child, .section-details-title summary > *:last-child {
-    margin-right: 4px;
-}
-
-.section-details-subtitle summary:after, .section-details-title summary:after {
-    content: "\2193";
-    float: right;
-}
-
-.section-details-subtitle[open] summary:after, .section-details-title[open] summary:after {
-    transform: rotate(180deg);
-    animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
-}
-
-.section-details-subtitle:not([open]) summary:after, .section-details-title:not([open]) summary:after {
-    transform: initial;
-    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
-}
-
-.details-subtitle-summary ~ [class|="form-row"] {
-    font-size: 0.937rem;
-    max-font-size: 0.937rem !important;
-    padding: var(--s);
-}
-
 .details-subtitle-summary a, .details-title-summary a {
     line-height: initial;
 }
@@ -245,97 +75,12 @@
     margin-left: 4px;
 }
 
-.section-details-subtitle .section-details-subtitle:not(:last-of-type) {
-    margin-bottom: var(--s);
-}
-
-.section-form {
-    display: flex;
-    flex-direction: column;
-    background-color: var(--background-hard);
-    border-radius: var(--s);
-    max-width: 100%;
-    width: 100%;
+.details-subtitle-summary ~ [class|="form-row"] {
+    font-size: .937rem;
+    max-font-size: .937rem !important;
     padding: var(--s);
 }
 
-.section-form-legend {
-    margin-top: unset;
-    margin-bottom: var(--s);
-    font-weight: bold;
-}
-
-.form-row {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: var(--s);
-}
-
-.form-row-widget {
-    display: block;
-    width: 100%;
-}
-
-.form-row-help {
-    margin-bottom: unset;
-}
-
-textarea.form-row-widget {
-    height: 7rem;
-    resize: vertical;
-}
-
-.form-search {
-    display: inline-block;
-    padding: unset;
-    margin-bottom: var(--m);
-}
-
-.form-search label {
-    display: block;
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.form-search span {
-    display: inline-flex;
-    width: 100%;
-}
-
-.form-search .form-row {
-    margin-bottom: unset;
-    width: 100%;
-}
-
-.form-search span input[type='text'] {
-    margin: unset;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    height: 100%;
-}
-
-.form-search span button {
-    margin: unset;
-    border-left: none !important;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    height: 100%;
-}
-
-.alert, .alert-danger, .form-error, .form-row-widget-error {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    font-style: italic;
-    border: solid 2px #ff6347;
-    background-color: #FF634733;
-    border-radius: var(--s);
-    padding: 2px 6px;
-    margin-top: 6px;
-    margin-bottom: 6px;
-}
-
 .footer ul {
     display: flex;
     flex-wrap: wrap;
@@ -343,4 +88,282 @@ textarea.form-row-widget {
 
 .footer ul li {
     margin-right: var(--s);
+}
+
+.form-row {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--s);
+}
+
+.form-row-help {
+    font-style: italic;
+    margin-bottom: unset;
+}
+
+.form-row-widget {
+    display: block;
+    width: 100%;
+}
+
+.form-search {
+    display: inline-block;
+    margin-bottom: var(--m);
+    padding: unset !important;
+}
+
+.form-search .form-row {
+    margin-bottom: unset;
+    width: 100%;
+}
+
+.form-search label {
+    display: block;
+    height: 0;
+    opacity: 0;
+    width: 0;
+}
+
+.form-search span {
+    display: inline-flex;
+    width: 100%;
+}
+
+.form-search span button {
+    border-bottom-left-radius: 0;
+    border-left: none !important;
+    border-top-left-radius: 0;
+    height: 100%;
+    margin: unset;
+}
+
+.form-search span input[type='text'] {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    height: 100%;
+    margin: unset;
+}
+
+.frame-section {
+    background-color: var(--background-card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--s);
+    box-shadow: var(--shadow);
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--m);
+}
+
+.frame-section hr {
+    margin-bottom: var(--s);
+}
+
+.frame-section-button-like {
+    align-self: end;
+    background: var(--gradient);
+    border: 1px solid var(--border);
+    border-radius: var(--s);
+    display: block;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    padding: 6px 8px;
+    width: max-content;
+}
+
+.frame-section-padding {
+    padding: var(--s);
+}
+
+.frame-section-paging {
+    display: block;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    margin-left: auto;
+    margin-top: var(--s);
+    padding: 6px 12px;
+}
+
+.frame-section-title {
+    margin-left: unset;
+}
+
+.profile {
+    background: var(--gradient) !important;
+    border: 1px solid var(--border);
+    border-radius: var(--s);
+    font-family: 'Open Sans', sans-serif;
+    margin-bottom: var(--s);
+    padding: var(--unit);
+}
+
+.profile header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    vertical-align: middle;
+}
+
+.profile-bio {
+    margin-top: 4px;
+}
+
+.profile-bio, .profile-info-url {
+    word-break: break-all;
+}
+
+.profile-extra-actions {
+    background: var(--gradient), var(--background-hard);
+    border: 1px solid var(--border);
+    border-radius: var(--s);
+    display: inline-block;
+    font-weight: 700;
+    margin-right: var(--s);
+    margin-top: var(--s);
+    padding: 4px 8px;
+}
+
+.profile-info {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.profile-info .avatar {
+    flex: .5;
+}
+
+.profile-info section {
+    flex: 1;
+}
+
+.profile-info-url {
+    display: block;
+}
+
+.profile-info-url > * {
+    display: block;
+}
+
+.profile-info-url-nickname {
+    font-size: var(--m);
+}
+
+.profile-info-url-remote {
+    opacity: .66;
+}
+
+.profile-navigation > * {
+    display: block;
+}
+
+.profile-stats {
+    align-self: center;
+    font-size: .937rem;
+    margin-left: auto;
+    opacity: .66;
+    text-align: right;
+}
+
+.profile-stats-subscribers strong, .profile-stats-subscriptions strong {
+    margin-right: 4px;
+}
+
+.profile-stats-subscribers, .profile-stats-subscriptions {
+    display: block;
+}
+
+.profile-tags {
+    margin: 4px unset unset;
+}
+
+.remove-actor-button-container {
+    -moz-mask-image: url(../../icons/remove-actor.svg);
+    -o-mask-image: url(../../icons/remove-actor.svg);
+    -webkit-mask-image: url(../../icons/remove-actor.svg);
+    mask-image: url(../../icons/remove-actor.svg);
+}
+
+.section-details-subtitle .section-details-subtitle:not(:last-of-type) {
+    margin-bottom: var(--s);
+}
+
+.section-details-subtitle summary {
+    padding: 2px 8px;
+}
+
+.section-details-subtitle summary > *, .section-details-title summary > * {
+    display: inline-block;
+    vertical-align: baseline;
+}
+
+.section-details-subtitle summary > :last-child, .section-details-title summary > :last-child {
+    margin-right: 4px;
+}
+
+.section-details-subtitle summary, .section-details-title summary {
+    background: var(--gradient);
+    border-radius: var(--s);
+    display: inline-block;
+    width: 100%;
+}
+
+.details-summary-title:after {
+    content: "\2193";
+    float: right;
+}
+.details-summary-subtitle:after {
+    content: "\2191";
+    float: right;
+}
+
+.section-details-subtitle:not([open]) > .details-summary-subtitle:after {
+    animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    transform: rotate(180deg);
+}
+
+.section-details-subtitle[open] > .details-summary-subtitle:after {
+    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    transform: initial;
+}
+
+.section-details-title:not([open]) > .details-summary-title:after {
+    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    transform: initial;
+}
+
+.section-details-title[open] > .details-summary-title:after {
+    animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    transform: rotate(180deg);
+}
+
+.details-summary-title {
+    padding: 6px 12px;
+}
+
+.section-form {
+    background-color: var(--background-hard);
+    border-radius: var(--s);
+    display: block;
+    max-width: 100%;
+    padding: var(--s);
+    width: 100%;
+}
+
+.section-form .section-details-subtitle summary {
+    border: 1px solid var(--border);
+}
+
+.section-form-legend {
+    font-weight: 700;
+    margin-bottom: var(--s);
+    margin-top: unset;
+}
+
+.section-title {
+    font-weight: 700;
+    margin-bottom: unset;
+}
+
+textarea.form-row-widget {
+    height: 7rem;
+    resize: vertical;
 }
\ No newline at end of file
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 0e2cba3920..e29d03b3dd 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -69,11 +69,11 @@
         </p>
     </section>
 
-    <section tabindex="0">
+    <section>
         <a id="anchor-accessibility-menu" accesskey="z" href="#anchor-accessibility-menu">
-            <strong tabindex="0">{% trans %}Combined with the previous keybinding, the keyboard key
+            <strong>{% trans %}Combined with the previous keybinding, the keyboard key
                     <kbd>Z</kbd> returns focus to this menu.{% endtrans %}</strong>
-            <strong tabindex="0">{% trans %}Further access keys are provided via:{% endtrans %}</strong>
+            <strong>{% trans %}Further access keys are provided via:{% endtrans %}</strong>
         </a>
         <nav>
             <ul>
diff --git a/templates/cards/navigation/view.html.twig b/templates/cards/navigation/view.html.twig
index 883dc6d097..c06906e6a5 100644
--- a/templates/cards/navigation/view.html.twig
+++ b/templates/cards/navigation/view.html.twig
@@ -2,7 +2,7 @@
   <section class="frame-section" title="{{ 'Feed navigation.' | trans }}">
     <details class="section-details-title" open="open"
              title="{{ 'Expand if you want to access more options.' | trans }}">
-      <summary class="details-title-summary">
+      <summary class="details-summary-title">
         <h2>{{ 'Feeds' | trans }}</h2>
         {% if app.user %}
           {# User custom feeds #}
diff --git a/templates/cards/note/view.html.twig b/templates/cards/note/view.html.twig
index 9aa4616442..53beeca3d0 100644
--- a/templates/cards/note/view.html.twig
+++ b/templates/cards/note/view.html.twig
@@ -187,10 +187,19 @@
         {{ block('note_sidebar') }}
         <div class="note-wrapper">
             <header class="note-info">
-                {{ block('note_info') }}
+                <div class="note-info-start">
+                    {{ block('note_author') }}
+                </div>
             </header>
 
             <section role="dialog" class="e-content entry-content note-content">
+                <small class="note-conversation-info">
+                    <a href="{{ note.getConversationUrl() }}"
+                       class="note-conversation-url">{{ 'in conversation' | trans }}</a>
+                    <a href="{{ note.getUrl() }}"
+                       class="note-url">{{ note.getModified() | ago }}</a>
+                </small>
+                <hr>
                 {{ block('note_text') }}
             </section>
         </div>
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index 36e156b688..9622f220e0 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -10,7 +10,7 @@
 {% block body %}
     <section class="frame-section">
         <form class="section-form" method="post">
-            <fieldset>
+            <fieldset class="container-block">
                 <legend class="section-form-legend">{{ "Login" | trans }}</legend>
 
                 {% if error %}
diff --git a/templates/security/register.html.twig b/templates/security/register.html.twig
index bf70105682..ca4cc2a3c6 100644
--- a/templates/security/register.html.twig
+++ b/templates/security/register.html.twig
@@ -9,11 +9,10 @@
 
 {% block body %}
     <section class="frame-section">
-
         <form class="section-form" method="post">
             {{ form_start(registration_form) }}
             {{ form_errors(registration_form) }}
-            <fieldset>
+            <fieldset class="container-block">
                 <legend class="section-form-legend">{{ "Register" | trans }}</legend>
 
                 {% for flashError in app.flashes('verify_email_error') %}