[CSS] Fixed inconsistent side panels font size. Note's view improvements.

public/assets/css/base.css

@@ -334,7 +334,6 @@ summary:hover .icon-details-open {
     margin-right: 5px;
 }
 
-/* TODO: icons */
 .note-actions {
     display: flex;
     vertical-align: middle;
@@ -396,6 +395,10 @@ summary:hover .icon-details-open {
     padding: var(--small-size);
 }
 
+.note-text {
+    margin-bottom: var(--unit-size);
+}
+
 .note-attachments {
     display: flex;
     max-width: 100%;
@@ -443,7 +446,7 @@ summary:hover .icon-details-open {
 }
 
 .section-title {
-    font-size: var(--main-size);
+    font-size: var(--medium-size);
     font-weight: 700;
     margin: 0;
 }
@@ -464,7 +467,7 @@ summary:hover .icon-details-open {
 }
 
 .section-title-details {
-    font-size: var(--main-size);
+    font-size: var(--medium-size);
     font-weight: 700;
 
     border-radius: var(--unit-size);

public/assets/css/left/left.css

@@ -18,7 +18,7 @@
 
 .panel-left nav {
     padding-top: var(--unit-size);
-    font-size: var(--medium-size);
+    font-size: var(--small-size);
 }
 
 /* PROFILE */
@@ -50,7 +50,7 @@
     margin-right: 5px;
 }
 #user-nickname {
-    font-size: var(--main-size);
+    font-size: var(--medium-size);
 }
 
 
@@ -63,9 +63,7 @@
 .timeline-nav {
     margin-bottom: var(--main-size);
 }
-#timeline-nav-header {
+
-    font-size: var(--main-size);
-}
 .timeline-nav a {
     display: flex;
 }
@@ -105,9 +103,4 @@ and (min-width: 2200px) {
     .panel-left > * {
         margin-left: 10rem;
     }
-
-    .footer {
-        left: -10rem;
-        position: relative;
-    }
 }

templates/base.html.twig

@@ -36,13 +36,8 @@
 <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>
-
-    <br>
-
     <p tabindex="0">{{ 'Provided the following keyboard shortcut, the link is targeted.' | trans }}</p>
-    <p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }}
+    <p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }}</p>
-    </p>
-
     <p tabindex="0">
         {% if is_firefox() == true %}
             <em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
@@ -50,6 +45,7 @@
             <em><kbd>Alt</kbd> + "access key"</em>
         {% endif %}
     </p>
+    <br>
 
     <a accesskey="z" href="#anchor-accessibility-menu" class="anchor-hidden"></a>
     <a id="anchor-accessibility-menu" class="anchor-hidden"></a>

templates/note/view.html.twig

@@ -35,33 +35,39 @@
         {% endif %}
     </header>
     <section tabindex="0" role="dialog" class="e-content entry-content note-content">
-      {{ note.getRendered() | raw }}
-      {% if hide_attachments is not defined %}
 
-        <div class="note-attachments" tabindex="0" title="{{ 'Note attachments' | trans }}">
+        <div class="note-text" tabindex="0" title="{{ 'Note text content.' | trans }}">
-          {% for attachment in note.getAttachments() %}
+        {{ note.getRendered() | raw }}
+        </div>
+
+        {% if hide_attachments is not defined %}
+        <div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
+        {% for attachment in note.getAttachments() %}
             {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
-          {% endfor %}
+        {% endfor %}
         </div>
-      {% endif %}
+        {% endif %}
-      {% if note.getLinks() is not empty %}
+
-        <div tabindex="0" class="note-links" title="{{ 'Shared links' | trans }}">
+        {% if note.getLinks() is not empty %}
-          {% for link in note.getLinks() %}
+        <div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}">
+        {% for link in note.getLinks() %}
             {% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
-              {{ block | raw }}
+            {{ block | raw }}
             {% endfor %}
-          {% endfor %}
+        {% endfor %}
         </div>
-      {% endif %}
+        {% endif %}
+
     </section>
 
     {% if replies is defined and replies is not empty %}
-        <div class="u-in-reply-to replies" tabindex="0" title="{{ 'Begin replies to ' | trans }} {{ nickname }}'s note!">
+    <div class="u-in-reply-to replies" tabindex="0" title="{{ 'Begin replies to ' | trans }} {{ nickname }}'s note!">
-            {% for conversation in replies %}
+        {% for conversation in replies %}
-                {% include '/note/view.html.twig' with {'note': conversation['note'], 'skip_reply_to': true, 'have_user': have_user, 'replies': conversation['replies']} only %}
+        {% include '/note/view.html.twig' with {'note': conversation['note'], 'skip_reply_to': true, 'have_user': have_user, 'replies': conversation['replies']} only %}
-            {% endfor %}
+        {% endfor %}
-        </div>
+    </div>
     {% endif %}
+
     {% if reply_to is not empty %}
         <hr tabindex="0" title="{{ 'End of this reply' | trans }}">
     {% endif %}