[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

@@ -9,9 +9,15 @@
 {% endblock stylesheets %}
 
 {% block body %}
-    {% for block in handle_event('BeforeFeed', app.request) %}
+    <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">

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>

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 %}

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>

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) }}

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) }}

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 %}

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>

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.

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 }}">{{ icon('feed', 'icon icon-right') | raw }}</a>
-    <a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{% trans %}All{% endtrans %}</a>
+<a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{{ icon('media', 'icon icon-right') | raw }}</a>
-    <div tabindex="0" class=separator>&nbsp;</div>
-    <a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{% trans %}Media{% endtrans %}</a>
-</nav>

plugins/Oomox/templates/oomox/root_override.css.twig

@@ -1,9 +1,9 @@
 :root {
-    --smaller: .6rem;
+    --s: .6rem;
-    --default: 1rem;
+    --unit: 1rem;
-    --small: 1.3rem;
+    --m: 1.3rem;
-    --medium: 1.62rem;
+    --xl: 1.62rem;
-    --big: 3rem;
+    --xxl: 3rem;
 }
 
 @media (prefers-color-scheme: dark) {

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 } %}

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 %}

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  %}

public/assets/default_theme/css/base.css

@@ -40,34 +40,33 @@
     left: -90%;
     width: 30%;
     height: min-content;
-    padding: var(--smaller);
+    padding: var(--s);
-    border-radius: var(--smaller);
+    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);
+    top: var(--s);
-    left: var(--smaller);
+    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(--xxl);
-    height: var(--big);
     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(--s) var(--s);
-    border-radius: 0 0 var(--smaller) var(--smaller);
+    padding: var(--s);
-    padding: var(--smaller);
     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);
+    margin-top: var(--xxl);
-    height: calc(100% - var(--big));
+    height: calc(100% - var(--xxl));
-    padding: var(--smaller);
+    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);
+    border-radius: 0 0 var(--s) var(--s);
-    padding: var(--smaller);
+    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);
         }
     }
 }

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-top: var(--s);
-    margin-bottom: var(--smaller);
+    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);
+    margin-bottom: var(--m);
-    padding: var(--smaller) var(--smaller) 0 0;
+    padding: var(--s) var(--s) 0 0;
-    padding-left: var(--small);
+    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;
+    border-radius: var(--s) var(--s) 0 0;
-    padding: 4px var(--smaller) 4px 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(--s);
-    margin-left: var(--smaller);
 }
 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);
+    margin-left: var(--s);
-    width: var(--default);
+    width: var(--unit);
-    height: var(--default);
+    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);
+    border-radius: 0 0 var(--s) var(--s);
-    padding-top: var(--smaller);
+    padding-right: var(--s);
-    padding-bottom: var(--smaller);
-    padding-right: var(--smaller);
-}
-.note-text {
-    margin-bottom: var(--smaller);
 }
 .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);
+    border-radius: var(--s);
-    padding: var(--smaller);
+    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-start-radius: var(--s);
-    border-end-end-radius: var(--smaller);
+    border-end-end-radius: var(--s);
-    padding-left: var(--smaller);
+    padding-left: var(--s);
     padding-top: 5px;
     padding-bottom: 5px;
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
-    margin-right: var(--smaller);
+    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;
 }

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 {
+.section-settings-details {
-    background: var(--background-card);
     margin-bottom: .6rem;
     border-radius: .6rem;
     padding: .6rem;
     box-sizing: border-box;
 }
-
+.section-settings-details {
-.section-title-settings[open] {
+    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 {
+.section-settings-details[open] > summary:first-child {
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
 
-.section-title-settings summary + form {
+.section-settings-details summary + form {
-    padding-left: var(--smaller);
+    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);
 }

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,
+html {font-size: 100%;} /*16px*/
-h3,
+
-h4,
+body {
-h5,
+    font-family: 'Open Sans', sans-serif;
-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);
     font-weight: 400;
-    margin-bottom: 6.1px;
+    line-height: 1.75;
 }
+
 p {
+    all: unset;
     font-family: 'Open Sans',sans-serif;
-    font-size: var(--default);
+    margin-bottom: 1rem;
-    font-weight: 400;
-    margin: unset;
 }
-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;
+h2 {font-size: 1.296rem;}
-    margin-bottom: 10px;
+
+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 {

public/assets/default_theme/css/root.css

@@ -1,9 +1,9 @@
 :root {
-    --smaller: .6rem;
+    --s: .6rem;
-    --default: 1rem;
+    --unit: 1rem;
-    --small: 1.3rem;
+    --m: 1.3rem;
-    --medium: 1.62rem;
+    --xl: 1.62rem;
-    --big: 3rem;
+    --xxl: 3rem;
 }
 
 @media(prefers-color-scheme:dark) {

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);
+    width: var(--xxl);
-    height: var(--big);
+    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] {

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);
+    margin-bottom: var(--s);
-    border-radius: var(--smaller);
+    border-radius: var(--s);
-    padding: var(--smaller);
+    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);
+    border-radius: var(--s);
-    margin-bottom: var(--small);
+    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 {
+.section-padding {
-    padding: var(--smaller);
+    padding: var(--s);
 }
 .section-widget-paging {
     display: block;
-    margin-top: var(--smaller);
+    margin-top: var(--s);
     margin-left: auto;
 }
-.section-title {
+.section-widget-title {
-    font-size: var(--small);
+    margin-left: unset;
-    font-weight: 700;
-    margin: 0;
 }
 .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) {
+.section-widget-subtitle-details :not(summary,svg,strong) {
-    border-radius: var(--smaller);
+    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);
+    margin-bottom: var(--s);
-    font-weight: 700;
-    margin-bottom: var(--smaller);
 }
 .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;

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>

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>

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>
+

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
+        xmlns="http://www.w3.org/2000/svg"
         class="{{ iconClass|default('') }}"
         viewBox="0 0 16 16"
         width="16"
-   height="16"
+        height="16">
-   version="1.1"
+  <title>Open left sidepanel</title>
-   id="svg6"
+  <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"/>
-   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>
 </svg>

public/assets/icons/notes.svg.twig

@@ -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>

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 */

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;
 }

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;
 }

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 %}
 

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 }}">
 

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>

templates/settings/base.html.twig

@@ -11,20 +11,18 @@
 {% endblock stylesheets %}
 
 {% block body %}
-    <nav class='section-settings'>
+    <nav class='section-widget section-padding'>
-        <h2>Settings</h2>
+        <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>

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>