[CSS] Resetting headers browser styling. Fixing embedded links styling inconsistencies.

public/assets/css/base.css

@@ -180,15 +180,13 @@ hr {
 #instance {
     display: flex;
     align-items: center;
-    align-self: center;
+
     margin-left: auto;
     margin-right: auto;
 }
-
-#instance h1 {
-    margin-left: 4px;
+#instance > * {
+    margin: unset;
 }
-
 .icon {
     fill: var(--white);
     align-self: center;
@@ -278,16 +276,20 @@ hr {
     margin-top: 5px;
 }
 
-.h-entry a {
+.h-entry a:focus {
     text-decoration: underline;
 }
 
-.h-entry .embed header {
+.h-entry .embed {
+    display: flex;
+    flex-direction: column;
     padding: var(--unit-size);
+    border: unset;
 }
 
-.h-entry .embed .p-summary {
-    padding: var(--unit-size);
+.h-entry .embed header img {
+    padding: unset;
+    max-width: inherit;
 }
 
 .h-entry,
@@ -441,6 +443,7 @@ figure {
 .note-attachments > figure figcaption {
     display: flex;
     word-break: break-all;
+    max-width: inherit;
 }
 
 /* SECTIONS */
@@ -593,15 +596,20 @@ textarea,
 input {
     font-size: inherit !important;
     color: var(--white);
+
     padding: 2px 8px;
     border: 2px solid var(--bg2);
     border-radius: var(--unit-size);
     background-color: var(--translucent);
 }
+select,
+textarea {
+    padding: 4px;
+}
 
 button {
     background: var(--bg-button);
-    padding: 2px 8px;
+    padding: 4px 12px;
     margin-left: auto;
 }
 

public/assets/css/reset.css

@@ -79,9 +79,15 @@ html {
     font-size: var(--small-size);
 }
 
+h1,h2,h3,h4,h5,h6 {
+    all: unset;
+    display: block;
+}
+
 h1 {
     font-size: var(--main-size);
     font-weight: 700;
+    margin-bottom: 15px;
 }
 
 h2 {
@@ -91,8 +97,14 @@ h2 {
 }
 
 h3 {
+    font-size: var(--medium-size);
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+h4, h5 {
     font-size: var(--small-size);
     font-weight: 600;
+    margin-bottom: 5px;
 }
 
 p {

templates/base.html.twig

@@ -35,8 +35,9 @@
 
 <aside id="accessibility-menu">
     <h2 id="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2>
-    <h3 tabindex="0">{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</h3>
+    <p tabindex="0">{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</p>
     <p tabindex="0">{{ 'Provided the following keyboard shortcut, the link is targeted.' | trans }}</p>
+    <br>
     <p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }}</p>
     <p tabindex="0">
         {% if is_firefox() == true %}

templates/note/view.html.twig

@@ -45,7 +45,7 @@
             {% endif %}
 
             {% if note.getLinks() is not empty %}
-                <div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}">
+                <div class="note-links" title="{{ 'Shared links.' | trans }}">
                     {% for link in note.getLinks() %}
                         {% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
                             {{ block | raw }}