From 75837af412c8d49c10657f4e652b6c11f1df341c Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Wed, 16 Feb 2022 23:42:44 +0000
Subject: [PATCH] [CSS] Replacing problematic special Unicode glyphs

A browser will use Unicode glyphs from other font families if the glyph in question is not present for the current typeface. This leads to unnerving situations, whereby setting content through pseudo-selectors will cause text to misalign. And no, line-height won't make a difference in this case. This happens because fonts have different heights. Another reason may reside on CSS3 having pseudo selectors but not really having a proper spec for them to begin with.
---
 .../assets/default_theme/pages/settings.css   |  2 +-
 public/assets/default_theme/reset.css         |  4 ++--
 .../assets/default_theme/widgets/buttons.css  |  4 ++++
 .../assets/default_theme/widgets/sections.css | 20 +++++++++++--------
 templates/security/login.html.twig            |  4 +++-
 templates/security/register.html.twig         |  4 +++-
 6 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/public/assets/default_theme/pages/settings.css b/public/assets/default_theme/pages/settings.css
index 9eedb6449e..0d065ae622 100644
--- a/public/assets/default_theme/pages/settings.css
+++ b/public/assets/default_theme/pages/settings.css
@@ -45,7 +45,7 @@
 }
 
 .section-settings-details summary:after {
-    content: "\2193";
+    content: "\1F817";
     float: right;
 }
 
diff --git a/public/assets/default_theme/reset.css b/public/assets/default_theme/reset.css
index 920ec574d2..4836434efa 100644
--- a/public/assets/default_theme/reset.css
+++ b/public/assets/default_theme/reset.css
@@ -101,7 +101,7 @@ p {
 }
 
 h1,h2,h3,h4,h5 {
-    margin: 3rem 0 1.38rem;
+    margin: var(--m) 0 var(--s);
     font-family: 'Poppins',sans-serif;
     line-height: 1.3;
 }
@@ -110,7 +110,7 @@ h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,legen
     margin-top: initial;
 }
 
-h1 {
+.doc-navigation, h1 {
     margin-top: 0;
     font-size: 1.383rem;
     font-weight: 900;
diff --git a/public/assets/default_theme/widgets/buttons.css b/public/assets/default_theme/widgets/buttons.css
index 960616914f..7c69d9185d 100644
--- a/public/assets/default_theme/widgets/buttons.css
+++ b/public/assets/default_theme/widgets/buttons.css
@@ -56,6 +56,10 @@ button {
     margin-left: auto !important;
 }
 
+button:not(:last-of-type) {
+    margin-bottom: var(--s);
+}
+
 .alert button {
     border-color: #ff6347 !important;
     cursor: pointer !important;
diff --git a/public/assets/default_theme/widgets/sections.css b/public/assets/default_theme/widgets/sections.css
index 7382fd22a0..ebc720305f 100644
--- a/public/assets/default_theme/widgets/sections.css
+++ b/public/assets/default_theme/widgets/sections.css
@@ -293,9 +293,13 @@ section {
     padding: 2px 8px;
 }
 
+.section-details-subtitle summary,.section-details-title summary {
+    display: flex;
+    justify-content: flex-start;
+}
+
 .section-details-subtitle summary>*,.section-details-title summary>* {
-    display: inline-flex;
-    vertical-align: middle;
+    display: inline-block;
 }
 
 .section-details-subtitle summary>:last-child,.section-details-title summary>:last-child {
@@ -305,7 +309,7 @@ section {
 .section-details-subtitle summary,.section-details-title summary {
     background: var(--gradient);
     border-radius: var(--s);
-    display: inline-block;
+    display: block;
     width: 100%;
 }
 
@@ -331,14 +335,14 @@ section {
 }
 
 .details-summary-title:after {
-    content: "\2193";
+    content: "\1F817";
     display: block;
     position: relative;
     float: right;
 }
 
 .details-summary-subtitle:after {
-    content: "\2191";
+    content: "\1F815";
     display: block;
     position: relative;
     float: right;
@@ -346,7 +350,7 @@ section {
 
 .section-details-subtitle:not([open])>.details-summary-subtitle:after {
     animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
-    content: "\2193";
+    content: "\1F817";
 }
 
 .section-details-subtitle[open]>.details-summary-subtitle:after {
@@ -361,7 +365,7 @@ section {
 
 .section-details-title[open]>.details-summary-title:after {
     animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
-    content: "\2191";
+    content: "\1F815";
 }
 
 .section-form {
@@ -380,7 +384,7 @@ section {
 }
 
 .section-title {
-    margin: 0 0 1.38rem;
+    margin-top: 0;
 }
 
 .section-checkbox-flex {
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index 5b6a4d4faf..94153979f7 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -6,7 +6,9 @@
     <section class="frame-section">
         <form class="section-form" method="post">
             <fieldset class="container-block">
-                <legend class="section-form-legend">{{ "Login" | trans }}</legend>
+                <legend class="section-form-legend">
+                    <h1>{{ "Login" | trans }}</h1>
+                </legend>
 
                 {% if error %}
                     <label class="alert alert-danger">
diff --git a/templates/security/register.html.twig b/templates/security/register.html.twig
index bfa224f867..fd3a5a2c17 100644
--- a/templates/security/register.html.twig
+++ b/templates/security/register.html.twig
@@ -8,7 +8,9 @@
             {{ form_start(registration_form) }}
             {{ form_errors(registration_form) }}
             <fieldset class="container-block">
-                <legend class="section-form-legend">{{ "Register" | trans }}</legend>
+                <legend class="section-form-legend">
+                    <h1>{{ "Register" | trans }}</h1>
+                </legend>
 
                 {% for flashError in app.flashes('verify_email_error') %}
                     <label class="alert alert-danger" role="alert">{{ flashError }}</label>