[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.

public/assets/default_theme/pages/settings.css

@@ -45,7 +45,7 @@
 }
 
 .section-settings-details summary:after {
-    content: "\2193";
+    content: "\1F817";
     float: right;
 }
 

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;

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;

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 {

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

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>