[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.
This commit is contained in:
Eliseu Amaro 2022-02-16 23:42:44 +00:00 committed by Diogo Peralta Cordeiro
parent 03a475b642
commit 75837af412
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
6 changed files with 25 additions and 13 deletions

View File

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

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

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

View File

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