From 0bac6a229ede9da082d0da0f0877a1a22489cafc Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Tue, 7 Dec 2021 15:33:02 +0000
Subject: [PATCH] [COMPONENTS][RightPanel] Added 'Additional options' details
 on posting form

[CSS] Trimming down wasted space and vendor related prefixes

[TWIG][Templates] Added main navigation to navigation card, removed note car language short display
---
 .../templates/right_panel/view.html.twig      |  15 +-
 public/assets/default_theme/css/base.css      | 298 +-----------------
 .../assets/default_theme/css/pages/feeds.css  | 201 ++----------
 public/assets/default_theme/css/reset.css     | 158 ++++++++++
 .../default_theme/css/widgets/buttons.css     |  35 --
 .../default_theme/css/widgets/sections.css    |  43 +--
 templates/cards/navigation/view.html.twig     |   7 +
 templates/cards/note/view.html.twig           |   6 +-
 8 files changed, 244 insertions(+), 519 deletions(-)
 create mode 100644 public/assets/default_theme/css/reset.css

diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig
index 3235a0b0c6..714ba9f285 100644
--- a/components/RightPanel/templates/right_panel/view.html.twig
+++ b/components/RightPanel/templates/right_panel/view.html.twig
@@ -18,7 +18,20 @@
 
                         <div class="section-form">
                             <fieldset>
-                                {{ form(blocks['post_form']) }}
+                                {{ form_start(blocks['post_form']) }}
+                                {{ form_row(blocks['post_form'].to) }}
+                                {{ form_row(blocks['post_form'].visibility) }}
+                                {{ form_row(blocks['post_form'].content) }}
+                                {{ form_row(blocks['post_form'].attachments) }}
+
+                                <details class="section-widget-subtitle-details">
+                                    <summary class="section-subtitle-summary">
+                                        {{ "Additional options" | trans }}{{ icon('arrow-down', 'icon icon-details-close') | raw }}
+                                    </summary>
+                                    {{ form_row(blocks['post_form'].language) }}
+                                    {{ form_row(blocks['post_form'].tag_use_canonical) }}
+                                </details>
+                                {{ form_end(blocks['post_form']) }}
                             </fieldset>
                         </div>
                     </details>
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index f13384fdda..2fc8fea096 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -1,182 +1,9 @@
 @import url("../fonts/poppins/poppins.css");
-
 @import url("../fonts/opensans/opensans.css");
-
+@import url("reset.css");
 @import url("widgets/buttons.css");
-
 @import url("widgets/sections.css");
 
-* {
-    -webkit-box-sizing: border-box !important;
-    -moz-box-sizing: border-box !important;
-    box-sizing: border-box !important;
-    max-width: 100%;
-}
-
-body,html {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-color: var(--background-hard);
-    background-attachment: fixed;
-    font-family: 'Open Sans',sans-serif;
-    font-size: var(--default);
-
-    display: flex;
-    flex-direction: column;
-}
-
-body,input,textarea,select {
-    color: var(--foreground);
-}
-
-:link,:visited {
-    text-decoration: none;
-    color: currentColor;
-}
-
-hr {
-    all: unset;
-    display: block;
-    height: 1px;
-    background-color: var(--border) !important;
-}
-
-ol,ul {
-    list-style: none;
-}
-
-blockquote,body,fieldset,form,html,input,pre,textarea {
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-
-fieldset {
-    all: unset;
-}
-
-:link img,:visited img,a img {
-    border: 0;
-}
-
-address {
-    font-style: normal;
-}
-
-:focus {
-    outline: 0;
-}
-
-::-moz-focus-inner {
-    border: 0;
-}
-
-details summary {
-    cursor: pointer !important;
-}
-
-details summary>* {
-    margin: unset;
-    padding: unset;
-}
-
-details>summary {
-    list-style: none;
-}
-
-details>summary::-webkit-details-marker {
-    display: none;
-}
-
-@supports not(-ms-ime-align:auto) {
-    details summary {
-        cursor: pointer;
-    }
-}
-
-[hidden] {
-    display: none;
-}
-
-h1,h2,h3,h4,h5,h6 {
-    all: unset;
-    display: block;
-    font-family: 'Poppins',sans-serif;
-}
-
-h1 {
-    font-size: var(--medium);
-    font-weight: 700;
-    margin-bottom: 16.2px;
-}
-
-h2 {
-    font-size: var(--small);
-    font-weight: 600;
-    margin-bottom: 13px;
-}
-
-h3 {
-    font-size: var(--default);
-    font-weight: 600;
-    margin-bottom: 10px;
-}
-
-h4,h5 {
-    font-size: var(--default);
-    font-weight: 400;
-    margin-bottom: 6.1px;
-}
-
-p {
-    font-family: 'Open Sans',sans-serif;
-    font-size: var(--default);
-    font-weight: 400;
-    margin: unset;
-}
-
-p:first-line {
-    padding-left: var(--default);
-}
-
-p:first-line {
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-
-p:not(:first-line) {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-input[type=password],input[type=text],textarea {
-    font-family: 'Open Sans',sans-serif;
-    font-weight: 400;
-    padding: 4px 6px;
-}
-
-ul {
-    text-decoration: none;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-li {
-    margin: 0;
-    padding: 0;
-}
-
-a:focus,
-a:hover {
-    text-decoration: underline;
-}
-
-*:focus-visible {
-    -webkit-box-shadow: var(--shadow-inset-accent);
-    -moz-box-shadow: var(--shadow-inset-accent);
-    box-shadow: var(--shadow-inset-accent);
-}
 
 @media(prefers-color-scheme:dark) {
     select:not([multiple]) {
@@ -184,7 +11,6 @@ a:hover {
         background-size: cover,16px !important;
     }
 }
-
 @media(prefers-color-scheme:light) {
     select:not([multiple]) {
         background: var(--gradient),url("../images/select_drop_light.png") no-repeat center right 5px !important;
@@ -192,27 +18,22 @@ a:hover {
         background-blend-mode: saturation;
     }
 }
-
 .icon {
     align-self: center;
     fill: var(--foreground);
 }
-
 .edit-feed-link {
     display: block;
     float: right;
 }
-
 .active {
     font-weight: bold;
 }
-
 .anchor-hidden {
     width: 1px;
     height: 1px;
     overflow: hidden;
 }
-
 .accessibility-menu {
     display: block;
     position: absolute;
@@ -226,21 +47,17 @@ a:hover {
     background-color: var(--background-hard) !important;
     border: 2px solid var(--border);
 }
-
 .accessibility-menu ul {
     list-style-type: disc;
     margin-left: var(--small);
 }
-
 .accessibility-menu:focus-within:not(:active) {
     top: var(--smaller);
     left: var(--smaller);
 }
-
 html {
     scroll-margin-top: var(--big);
 }
-
 .page-header {
     z-index: 1;
     font-family: 'Poppins',sans-serif;
@@ -256,7 +73,6 @@ html {
     background: var(--gradient) !important;
     box-shadow: var(--shadow);
 }
-
 .header-instance {
     display: flex;
     position: absolute;
@@ -265,17 +81,14 @@ html {
     align-self: center;
     margin-left: auto;
 }
-
-.header-instance>* {
+.header-instance > * {
     margin: unset;
 }
-
 .header-extra-actions {
     justify-self: flex-end;
     margin-left: auto;
 }
-
-.header-extra-actions[open]>*:not(summary) {
+.header-extra-actions[open] > *:not(summary) {
     z-index: 2;
     position: absolute;
     top: 100%;
@@ -287,7 +100,6 @@ html {
     background: var(--background-hard);
     box-shadow: var(--shadow);
 }
-
 .header-panel {
     display: flex;
     flex-direction: column;
@@ -300,7 +112,10 @@ html {
     padding: var(--smaller);
     overflow-y: auto;
 }
-
+.panel-content {
+    display: flex;
+    flex-direction: column;
+}
 .page-content-wrapper {
     position: relative;
     top: var(--big);
@@ -309,41 +124,34 @@ html {
     justify-content: center;
     padding: var(--smaller) var(--smaller) 0;
 }
-
 .page-content {
     display: flex;
     flex-direction: column;
     width: 100%;
 }
-
 .markdown-blocks {
     border-radius: 0 0 var(--smaller) var(--smaller);
     padding: var(--smaller);
     background-color: var(--background-card) !important;
 }
-
 .markdown-blocks ul {
     margin-left: 1em;
     list-style: disc;
 }
-
 .markdown-blocks ul li {
-    margin-bottom: .2em;
+    margin-bottom: 0.2em;
 }
-
 .doc-navigation {
     border-radius: var(--smaller) var(--smaller) 0 0;
     border-bottom: 0;
     padding: var(--smaller);
     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);
@@ -353,52 +161,39 @@ html {
     font-size: var(--default);
     background-color: var(--background-card) !important;
 }
-
 #replyform textarea {
     width: 100%;
     resize: vertical;
     margin-top: var(--smaller);
     padding: var(--smaller);
 }
-
-/* < 720p */
 @media only screen and (max-width:1280px) {
     .page-header {
         width: 100%;
     }
-
     .page-content-wrapper {
         width: 100%;
     }
-
     .page-content {
         max-width: 100%;
     }
-
-    .header-extra-actions[open]>*:not(summary) {
+    .header-extra-actions[open] > *:not(summary) {
         width: 100%;
     }
-
-    #panel-left-toggle:not(:checked)+.header-panel,#panel-right-toggle:not(:checked)+.header-panel {
+    #panel-left-toggle:not(:checked)+.header-panel,
+    #panel-right-toggle:not(:checked)+.header-panel {
         display: none;
     }
-
-    #panel-left-toggle:checked+.header-panel,#panel-right-toggle:checked+.header-panel,a[id|="anchor"]:target ~ .panel-content {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -moz-box;
-        display: -ms-flexbox;
+    #panel-left-toggle:checked+.header-panel,
+    #panel-right-toggle:checked+.header-panel,
+    a[id|="anchor"]:target ~ .panel-content {
         display: flex;
         width: 100%;
-        -webkit-background-size: 100% 100%;
-        -moz-background-size: 100% 100%;
-        -o-background-size: 100% 100%;
         background-size: 100% 100%;
         z-index: auto;
         background-color: var(--background-hard) !important;
     }
 }
-
 /* > 720p */
 @media only screen and (min-width:1281px) {
     /*
@@ -415,31 +210,18 @@ html {
     .page-header {
         width: 100%;
     }
-
     .header-panel {
         width: 17vw;
     }
-
     .page-content-wrapper {
         width: 66vw;
     }
-
     a[id|="anchor"]:target+.accessibility-target {
-        -webkit-animation-name: highlight;
-        -moz-animation-name: highlight;
-        -o-animation-name: highlight;
         animation-name: highlight;
-        -webkit-animation-duration: 600ms;
-        -moz-animation-duration: 600ms;
-        -o-animation-duration: 600ms;
         animation-duration: 600ms;
-        -webkit-animation-timing-function: ease-in-out;
-        -moz-animation-timing-function: ease-in-out;
-        -o-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out;
     }
 }
-
 /* > 1080p */
 @media only screen and (min-width:1921px) {
     /*
@@ -457,116 +239,64 @@ html {
     .page-header {
         width: 66vw;
     }
-
     .header-panel {
         width: 11vw;
     }
-
     .page-content-wrapper {
         width: 44vw;
     }
 }
-
 @keyframes fadeIn {
     0% {
         opacity: 0;
-        -webkit-transform: translateY(-10px);
-        -moz-transform: translateY(-10px);
-        -o-transform: translateY(-10px);
         transform: translateY(-10px);
     }
     100% {
         opacity: unset;
-        -webkit-transform: none;
-        -moz-transform: none;
-        -o-transform: none;
         transform: none;
     }
 }
-
 @keyframes fadeOut {
     100% {
         opacity: 0;
-        -webkit-transform: translateY(-10px);
-        -moz-transform: translateY(-10px);
-        -o-transform: translateY(-10px);
         transform: translateY(-10px);
     }
     0% {
         opacity: unset;
-        -webkit-transform: none;
-        -moz-transform: none;
-        -o-transform: none;
         transform: none;
     }
 }
-
 @media (prefers-color-scheme: dark) {
     @keyframes highlight {
         0% {
-            -webkit-box-shadow: initial;
-            -moz-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: var(--smaller);
-            -moz-border-radius: var(--smaller);
             border-radius: var(--smaller);
         }
         50% {
-            -webkit-border-radius: var(--smaller);
-            -moz-border-radius: var(--smaller);
             border-radius: var(--smaller);
-            -webkit-box-shadow: inset 0 20px 40px #FFF;
-            -moz-box-shadow: inset 0 20px 40px #FFF;
             box-shadow: inset 0 20px 40px #FFF;
-            -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
-            transition: -webkit-box-shadow 0.3s ease-in-out;
-            -o-transition: box-shadow 0.3s ease-in-out;
-            -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out;
             transition: box-shadow 0.3s ease-in-out;
-            transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out;
             z-index: 666;
         }
         100% {
-            -webkit-box-shadow: initial;
-            -moz-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: var(--smaller);
-            -moz-border-radius: var(--smaller);
             border-radius: var(--smaller);
         }
     }
 }
-
 @media (prefers-color-scheme: light) {
     @keyframes highlight {
         0% {
-            -webkit-box-shadow: initial;
-            -moz-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: var(--smaller);
-            -moz-border-radius: var(--smaller);
             border-radius: var(--smaller);
         }
         50% {
-            -webkit-border-radius: var(--smaller);
-            -moz-border-radius: var(--smaller);
             border-radius: var(--smaller);
-            -webkit-box-shadow: inset 0 20px 40px #000;
-            -moz-box-shadow: inset 0 20px 40px #000;
             box-shadow: inset 0 20px 40px #000;
-            -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
-            transition: -webkit-box-shadow 0.3s ease-in-out;
-            -o-transition: box-shadow 0.3s ease-in-out;
-            -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out;
             transition: box-shadow 0.3s ease-in-out;
-            transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out;
         }
         100% {
-            -webkit-box-shadow: initial;
-            -moz-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: var(--smaller);
-            -moz-border-radius: var(--smaller);
             border-radius: var(--smaller);
         }
     }
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index fd09bec1cd..f377e36641 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -1,35 +1,21 @@
-
 .notes hr {
-    margin-top: var(--smaller)
+    margin-top: var(--smaller);
 }
-
 .note-wrapper {
     width: 100%;
-    height: inherit
+    height: inherit;
+    border-radius: var(--smaller) var(--smaller) 0 0;
 }
-
 .note-sidebar {
-    padding: var(--smaller)
+    padding: var(--smaller);
 }
-
 .note-sidebar * {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
-    -moz-box-orient: vertical;
-    -moz-box-direction: normal;
-    -ms-flex-direction: column;
     flex-direction: column;
     margin-left: auto;
     margin-right: auto;
-    max-height: 100%
+    max-height: 100%;
 }
-
 .note-sidebar .avatar {
     max-width: 4rem;
     max-height: 4rem;
@@ -38,197 +24,122 @@
     height: auto;
     background: unset;
     margin-bottom: var(--smaller);
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
-    border-radius: 2px
+    border-radius: 2px;
 }
-
 .h-entry:not(:first-child) {
-    margin-top: var(--smaller)
+    margin-top: var(--smaller);
 }
-
 .h-entry:not(embed) {
     border: 2px solid var(--border) !important;
-    -webkit-box-shadow: var(--shadow);
-    -moz-box-shadow: var(--shadow);
     box-shadow: var(--shadow);
 }
-
 .h-entry img {
     background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
 }
-
 .embed {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
     flex-wrap: wrap;
     padding: var(--smaller);
     border: unset;
 }
-
 .embed header {
     width: 100%;
     margin-bottom: var(--small);
 }
-
 .embed img {
     width: 25%;
     height: auto;
     margin-right: var(--smaller);
 }
-
 .embed .p-summary {
     width: 60%;
 }
-
-.embed .p-name,
-.embed .p-author {
+.embed .p-author,
+.embed .p-name {
     font-weight: bold;
 }
-
 .embed img {
     padding: unset;
-    max-width: -webkit-min-content;
-    max-width: -moz-min-content;
     max-width: min-content;
-    max-height: -webkit-min-content;
-    max-height: -moz-min-content;
-    max-height: min-content
+    max-height: min-content;
 }
-
 .embed .p-summary hr {
     margin-top: var(--smaller);
     margin-bottom: var(--smaller);
 }
-
 .h-entry .embed[class*="p-"] {
-    padding: unset
+    padding: unset;
 }
-
 .h-entry a:focus {
-    text-decoration: underline
+    text-decoration: underline;
 }
-
 .h-entry {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-border-radius: var(--smaller);
-    -moz-border-radius: var(--smaller);
     border-radius: var(--smaller);
     background-color: var(--background-card) !important;
 }
-
 .h-entry figure {
     margin: unset;
-    -o-object-fit: cover;
     object-fit: cover;
     padding: var(--smaller);
     background: var(--gradient);
     border-radius: var(--smaller);
 }
-
 .h-entry .replies {
     padding: var(--smaller);
-    margin-left: var(--small)
+    margin-left: var(--small);
 }
-
 .note-info,
 embed header {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -moz-box-pack: justify;
-    -ms-flex-pack: justify;
     justify-content: space-between;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    -moz-box-align: center;
-    -ms-flex-align: center;
     align-items: center;
     max-height: var(--big);
     border-bottom: unset;
-    -webkit-border-radius: var(--smaller) var(--smaller) 0 0;
-    -moz-border-radius: var(--smaller) var(--smaller) 0 0;
     border-radius: var(--smaller) var(--smaller) 0 0;
     font-size: var(--small);
-    padding: 6px 10px 6px 0;
+    padding: 0 var(--smaller) 0 0;
 }
-
 .note-info {
-    background: var(--gradient-backwards) !important;
-    background-clip: padding-box;
+    background: var(--gradient-backwards);
 }
-
 .note-author {
     font-size: var(--default);
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    -moz-box-align: center;
-    -ms-flex-align: center;
     align-items: center;
-    -webkit-align-self: center;
-    -ms-flex-item-align: center;
-    -ms-grid-row-align: center;
-    align-self: center
+    align-self: center;
 }
-
 .note-author-fullname {
     font-weight: bold;
 }
-
 .note-author-nickname {
     opacity: 0.5;
     margin-left: var(--smaller);
 }
-
 .note-author-nickname::before {
     content: '@';
 }
-
 .note-actions ul {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
-    vertical-align: middle
+    vertical-align: middle;
 }
-
 .note-actions-extra-details {
     display: flex;
     flex-direction: column;
 }
-
 .note-actions-extra-details summary {
     display: block;
     opacity: 0.33;
     vertical-align: middle;
 }
-
 .note-actions-extra-details[open] > summary {
     opacity: 1 !important;
 }
-
 .note-actions-extra-details[open] > summary + * {
     z-index: 1;
     display: flex;
     position: absolute;
-    right: 0; /* prevents details from overflowing */
+    right: 0;
     flex-direction: column;
     padding: var(--smaller);
     border: 2px solid var(--border);
@@ -238,15 +149,12 @@ embed header {
     font-size: var(--default);
     width: max-content;
 }
-
 .note-actions-extra-details[open] > summary + * > li:not(:last-of-type) {
     margin-bottom: var(--smaller);
 }
-
 .note-actions-set {
     opacity: 1 !important;
 }
-
 .button-container {
     border: none !important;
     mask-repeat: no-repeat !important;
@@ -258,112 +166,67 @@ embed header {
     background-color: var(--foreground);
     opacity: 0.33;
 }
-
-.button-container:hover,
-.button-container:focus {
+.button-container:focus,
+.button-container:hover {
     border: none !important;
     opacity: 1;
     background-color: var(--accent);
 }
-
 .favourite-button-container {
-    -webkit-mask-image: url("../../icons/heart.svg");
     -o-mask-image: url("../../icons/heart.svg");
     -moz-mask-image: url("../../icons/heart.svg");
-    mask-image: url("../../icons/heart.svg")
+    mask-image: url("../../icons/heart.svg");
 }
-
 .reply-button-container {
-    -webkit-mask-image: url("../../icons/reply.svg");
     -o-mask-image: url("../../icons/reply.svg");
     -moz-mask-image: url("../../icons/reply.svg");
-    mask-image: url("../../icons/reply.svg")
+    mask-image: url("../../icons/reply.svg");
 }
-
 .repeat-button-container {
-    -webkit-mask-image: url("../../icons/repeat.svg");
     -o-mask-image: url("../../icons/repeat.svg");
     -moz-mask-image: url("../../icons/repeat.svg");
-    mask-image: url("../../icons/repeat.svg")
+    mask-image: url("../../icons/repeat.svg");
 }
-
 .delete-button-container {
-    -webkit-mask-image: url("../../icons/delete.svg");
     -o-mask-image: url("../../icons/delete.svg");
     -moz-mask-image: url("../../icons/delete.svg");
     mask-image: url("../../icons/delete.svg");
 }
-
 .note-content {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
-    -moz-box-orient: vertical;
-    -moz-box-direction: normal;
-    -ms-flex-direction: column;
     flex-direction: column;
-    -webkit-border-radius: 0 0 var(--smaller) var(--smaller);
-    -moz-border-radius: 0 0 var(--smaller) var(--smaller);
     border-radius: 0 0 var(--smaller) var(--smaller);
-    padding-top: var(--default);
-    padding-bottom: var(--default);
-    padding-right: var(--default);
+    padding-top: var(--smaller);
+    padding-bottom: var(--smaller);
+    padding-right: var(--smaller);
 }
-
 .note-text {
-    margin-bottom: var(--smaller)
+    margin-bottom: var(--smaller);
 }
-
 .note-text a {
     text-decoration: underline !important;
 }
-
 .note-attachments {
     display: flex;
     justify-items: flex-start;
 }
-
 .note-attachments-unit {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-    max-width: -webkit-max-content;
-    max-width: -moz-max-content;
     max-width: max-content;
-    -webkit-border-radius: var(--smaller);
-    -moz-border-radius: var(--smaller);
     border-radius: var(--smaller);
     padding: var(--smaller);
-    -webkit-align-self: flex-start;
-    -ms-flex-item-align: start;
-    align-self: flex-start
+    align-self:flex-start;
     background-color: var(--background-card) !important;
 }
-
 .note-attachments-unit:not(:only-child) {
-    margin-right: var(--smaller)
+    margin-right: var(--smaller);
 }
-
 .note-attachments-unit > figure figcaption {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
     display: flex;
     word-break: break-all;
-    margin-bottom: var(--smaller)
+    margin-bottom: var(--smaller);
 }
-
 .note-complementary {
     border-left: 2px solid var(--accent);
     border-end-start-radius: var(--smaller);
@@ -375,11 +238,9 @@ embed header {
     margin-right: var(--smaller);
     background: var(--gradient) !important;
 }
-
 .note-complementary a {
     font-weight: bold;
 }
-
 .h-entry-language {
     position: relative;
     float: right;
@@ -388,4 +249,4 @@ embed header {
     font-size: var(--default);
     color: var(--foreground);
     border-radius: 0 0 var(--smaller) 0;
-}
+}
\ No newline at end of file
diff --git a/public/assets/default_theme/css/reset.css b/public/assets/default_theme/css/reset.css
new file mode 100644
index 0000000000..5f0cbd27cf
--- /dev/null
+++ b/public/assets/default_theme/css/reset.css
@@ -0,0 +1,158 @@
+* {
+    box-sizing: border-box !important;
+    max-width: 100%;
+}
+body,
+html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--background-hard);
+    background-attachment: fixed;
+    font-family: 'Open Sans',sans-serif;
+    font-size: var(--default);
+    display: flex;
+    flex-direction: column;
+}
+body,
+input,
+select,
+textarea {
+    color: var(--foreground);
+}
+:link,
+:visited {
+    text-decoration: none;
+    color: currentColor;
+}
+hr {
+    all: unset;
+    display: block;
+    height: 1px;
+    background-color: var(--border) !important;
+}
+ol,
+ul {
+    list-style: none;
+}
+blockquote,
+body,
+fieldset,
+form,
+html,
+input,
+pre,
+textarea {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+fieldset {
+    all: unset;
+}
+:link img,
+:visited img,
+a img {
+    border: 0;
+}
+address {
+    font-style: normal;
+}
+:focus {
+    outline: 0;
+}
+::-moz-focus-inner {
+    border: 0;
+}
+details summary {
+    cursor: pointer !important;
+}
+details summary > * {
+    margin: unset;
+    padding: unset;
+}
+details > summary {
+    list-style: none;
+}
+details > summary::-webkit-details-marker {
+    display: none;
+}
+@supports not(-ms-ime-align:auto) {
+    details summary {
+        cursor: pointer;
+    }
+}
+[hidden] {
+    display: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    all: unset;
+    display: block;
+    font-family: 'Poppins',sans-serif;
+}
+h1 {
+    font-size: var(--medium);
+    font-weight: 700;
+    margin-bottom: 16.2px;
+}
+h2 {
+    font-size: var(--small);
+    font-weight: 600;
+    margin-bottom: 13px;
+}
+h3 {
+    font-size: var(--default);
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+h4,
+h5 {
+    font-size: var(--default);
+    font-weight: 400;
+    margin-bottom: 6.1px;
+}
+p {
+    font-family: 'Open Sans',sans-serif;
+    font-size: var(--default);
+    font-weight: 400;
+    margin: unset;
+}
+p:first-line {
+    padding-left: var(--default);
+}
+p:first-line {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+p:not(:first-line) {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+input[type=password],
+input[type=text],
+textarea {
+    font-family: 'Open Sans',sans-serif;
+    font-weight: 400;
+    padding: 4px 6px;
+}
+ul {
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+li {
+    margin: 0;
+    padding: 0;
+}
+a:focus,
+a:hover {
+    text-decoration: underline;
+}
+*:focus-visible {
+    box-shadow: var(--shadow-inset-accent);
+}
\ No newline at end of file
diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css
index 195b5d13d2..52b2d6f7b7 100644
--- a/public/assets/default_theme/css/widgets/buttons.css
+++ b/public/assets/default_theme/css/widgets/buttons.css
@@ -10,26 +10,21 @@ input[type=radio] {
     height: 1rem !important;
     background: var(--accent) !important;
 }
-
 input[type=checkbox]:not(:hover, :focus),
 input[type=radio]:not(:hover, :focus) {
     background: var(--foreground) !important;
 }
-
 input[type=checkbox],
 input[type=radio] {
     border: unset !important;
 }
-
 input[type=radio] {
     background: var(--background-hard) !important;
 }
-
 input[type=radio] {
     border-radius: 50% !important;
     margin: 3px 3px 0 5px !important;
 }
-
 input[type=file] {
     all: unset;
     display: block;
@@ -39,30 +34,22 @@ input[type=file] {
     border-radius: var(--smaller);
     background: var(--gradient) !important;
 }
-
 input[type=radio] {
     border: solid 0.25em !important;
 }
-
 input[type=checkbox] {
     background-size: 100%;
     margin-right: 2px;
-    -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;
 }
-
 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;
 }
-
 input[type=color] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     width: var(--big);
     height: var(--big);
@@ -78,18 +65,6 @@ input[type=color]::-moz-color-swatch {
     border-radius: var(--smaller);
     border: none;
 }
-
-::-webkit-file-upload-button {
-    cursor: pointer;
-    background-color: unset;
-    border: unset;
-    font-family: 'Open Sans',sans-serif !important;
-    font-weight: bold !important;
-    color: var(--foreground);
-    fill: var(--foreground);
-    margin: 3px;
-}
-
 ::file-selector-button {
     cursor: pointer;
     background-color: unset;
@@ -100,29 +75,24 @@ input[type=color]::-moz-color-swatch {
     fill: var(--foreground);
     margin: 3px;
 }
-
 *|*::-moz-button-content {
     all: unset !important;
 }
-
 button {
     display: block !important;
     cursor: pointer !important;
     margin-left: auto !important;
     margin-top: var(--smaller);
 }
-
 button,
 label {
     font-family: 'Poppins',sans-serif;
     font-weight: bold !important;
     color: currentColor;
 }
-
 select::-ms-expand {
     display: none;
 }
-
 button,
 input,
 select,
@@ -139,18 +109,15 @@ textarea {
     width: inherit;
     max-width: border-box !important;
 }
-
 button,
 select,
 textarea {
     background: var(--gradient) !important;
 }
-
 button,
 input:not([type=checkbox], [type=radio]) {
     background: var(--gradient) !important;
 }
-
 select {
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
@@ -159,12 +126,10 @@ select {
     border-radius: var(--smaller);
     max-width: 100% !important;
 }
-
 select[multiple] {
     overflow-y: scroll;
     height: 20rem;
 }
-
 button:focus,
 button:hover,
 input:focus,
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index 6d1e705cc3..eba4e8f6b1 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -7,41 +7,31 @@
     border-radius: var(--smaller);
     padding: var(--smaller);
     background: var(--gradient) !important;
-    -webkit-box-shadow: var(--shadow);
-    -moz-box-shadow: var(--shadow);
     box-shadow: var(--shadow);
 }
-
 .profile *[class*="profile-info-"] {
     flex: 1;
 }
-
 .profile-info {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
 }
-
 .profile-info-nickname {
     font-size: var(--small);
 }
-
 .profile-info-tags {
     margin: unset;
 }
-
 .profile-info-stats strong {
     margin-right: 5px;
 }
-
 .profile-info-stats {
     margin-top: var(--smaller);
 }
-
 .profile-info-bio {
     word-break: break-all;
 }
-
 .profile-avatar {
     max-width: 4rem;
     max-height: 4rem;
@@ -51,7 +41,6 @@
     margin-right: 5px;
     border-radius: 2px;
 }
-
 .section-widget {
     display: flex;
     flex-direction: column;
@@ -61,27 +50,22 @@
     box-shadow: var(--shadow);
     border: 2px solid var(--border) !important;
 }
-
 .section-widget hr {
     margin-bottom: var(--smaller);
 }
-
 .section-widget-padded {
     padding: var(--smaller);
 }
-
 .section-widget-paging {
     display: block;
     margin-top: var(--smaller);
     margin-left: auto;
 }
-
 .section-title {
     font-size: var(--small);
     font-weight: 700;
     margin: 0;
 }
-
 .section-widget-button-like {
     border-radius: var(--smaller);
     padding: 6px 10px;
@@ -92,30 +76,42 @@
     font-family: 'Open Sans',sans-serif;
     font-weight: 700;
 }
-
+.section-widget-subtitle-details :not(summary,svg) {
+    border-radius: var(--smaller);
+    background: var(--gradient);
+    padding: 6px 10px;
+}
 .section-widget-title-details summary {
     font-size: var(--small);
     font-weight: 700;
+}
+.section-widget-subtitle-details summary {
+    border: 2px solid var(--border);
+    font-size: var(--default);
+    font-weight: 700;
+    margin-bottom: var(--smaller);
+}
+.section-widget-title-details summary,
+.section-widget-subtitle-details summary {
     border-radius: var(--smaller);
     padding: 6px 10px;
     background: var(--gradient) !important;
 }
-
+.section-widget-subtitle-details[open] svg,
 .section-widget-title-details[open] svg {
     transform: rotate(180deg);
     animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
 }
-
+.section-widget-subtitle-details:not([open]) svg,
 .section-widget-title-details:not([open]) svg {
     transform: initial;
     animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
 }
-
+.section-subtitle-summary,
 .section-title-summary {
     display: flex;
     justify-content: space-between;
 }
-
 .section-form {
     display: flex;
     flex-direction: column;
@@ -123,30 +119,25 @@
     width: 100%;
     padding: var(--smaller);
 }
-
 .section-form-legend {
     margin-top: unset;
     margin-bottom: 10px;
     font-weight: bold;
     font-size: var(--medium);
 }
-
 div[class^="mb-"] {
     display: flex;
     flex-direction: column;
     flex-basis: border-box;
     margin-bottom: var(--smaller);
 }
-
 div[class^="mb-"]:last-of-type {
     margin-bottom: unset;
 }
-
 div[class^="mb-"] textarea {
     height: 7rem;
     max-height: 100%;
 }
-
 .alert,
 .alert-danger {
     display: inline-block;
diff --git a/templates/cards/navigation/view.html.twig b/templates/cards/navigation/view.html.twig
index ccb2b5e71f..18ad7f423a 100644
--- a/templates/cards/navigation/view.html.twig
+++ b/templates/cards/navigation/view.html.twig
@@ -27,6 +27,13 @@
               <a href="{{ link.getUrl() }}" class='{{ active(link.getRoute()) }}'>{{ link.getTitle() }}</a>
             </li>
           {% endfor %}
+          {% for link in handle_event('AddMainNavigationItem', {'nickname': current_actor.getNickname()}) %}
+            <li>
+              <a href="{{ link['path'] }}" class='{{ active(link['path_id']) }}'>
+                {{ link['title'] }}
+              </a>
+            </li>
+          {% endfor %}
         </ul>
       {% endif %}
     </nav>
diff --git a/templates/cards/note/view.html.twig b/templates/cards/note/view.html.twig
index d164a1f066..a3b8aa7d77 100644
--- a/templates/cards/note/view.html.twig
+++ b/templates/cards/note/view.html.twig
@@ -118,9 +118,9 @@
 
             {{ block('note_replies') }}
 
-            {% if note_language is defined and note_language is not empty %}
-                <div title="{{ 'Note\'s language' | trans }}" class="h-entry-language">{{ note_language }}</div>
-            {% endif %}
+{#            {% if note_language is defined and note_language is not empty %}#}
+{#                <div title="{{ 'Note\'s language' | trans }}" class="h-entry-language">{{ note_language }}</div>#}
+{#            {% endif %}#}
         </div>
     </article>
 {% endmacro macro_note %}