feat: adds paragraph first line indentation (#50)

Co-authored-by: Vincent Dörig <dvincdt@gmail.com>

index.html

@@ -60,6 +60,7 @@
               <li><a href="#definitions">Definitions</a></li>
             </ol>
           </li>
+          <li><a href="#paragraphs">Paragraphs</a></li>
         </ol>
       </li>
       <li><a href="#language-support">Language Support</a></li>
@@ -184,6 +185,25 @@
         or a sign or symbol.<sup><a href="#fn2" id="ref2">2</a></sup>
       </div>
 
+      <h3 id="paragraphs">Paragraphs</h3>
+      <p>
+        In order to get automatic first line indentation of paragraphs, like in
+        default <span class="latex">L<span>a</span>T<span>e</span>X</span> articles, the class
+        <code>indent-pars</code> can be used with <code>article</code> tag.
+      </p>
+      <pre><code class="language-html">&lt;article class="indent-pars"&gt;
+  ...
+&lt;/article&gt;</code></pre>
+      <p>
+        The CSS style provided follows <code>babel</code> specific language rules: by default,
+        the first paragraph after a section title is not indented in English, unlike Spanish and
+        French languages.
+      </p>
+      <p>
+        To avoid first line indentation of some specific paragraph, the class <code>no-indent</code>
+        can be used.</p>
+      <pre><code class="language-html">&lt;p class="no-indent"&gt;...&lt;/p&gt;</code></pre>
+
       <h2 id="language-support">Language Support</h2>
       <p>
         The labels of theorems, definitions, lemmas and proofs can be changed

lang/es.css

@@ -2,3 +2,8 @@
 :lang(es) .lemma::before { content: 'Lema ' counter(theorem) '. ' !important; }
 :lang(es) .proof::before { content: 'Demostración. ' attr(title) !important; }
 :lang(es) .definition::before { content: 'Definición ' counter(definition) '. ' !important; }
+:lang(es) .indent-pars h2 + p,
+:lang(es) .indent-pars h3 + p,
+:lang(es) .indent-pars h4 + p {
+  text-indent: var(--text-indent-size);
+}

lang/fr.css

@@ -2,3 +2,8 @@
 :lang(fr) .lemma::before { content: 'Lemme ' counter(theorem) '. ' !important; }
 :lang(fr) .proof::before { content: 'Démonstration. ' attr(title) !important; }
 :lang(fr) .definition::before { content: 'Définition ' counter(definition) '. ' !important; }
+:lang(fr) .indent-pars h2 + p,
+:lang(fr) .indent-pars h3 + p,
+:lang(fr) .indent-pars h4 + p {
+  text-indent: var(--text-indent-size);
+}

style.css

@@ -111,6 +111,11 @@
   --table-border-color: black;
   --sidenote-target-border-color: hsl(55, 55%, 70%);
   --footnotes-border-color: hsl(0, 0%, 39%);
+  --text-indent-size: 1.463rem; /* In 12pt [Latin Modern font] LaTeX article
+  \parindent =~ 17.625pt; taking also into account the ratio
+  1pt[LaTeX] = (72 / 72.27) * 1pt[HTML], with default 12pt/1rem LaTeX.css font
+  size, the identation value in rem CSS units is: 
+  \parindent =~ 17.625 * (72 / 72.27) / 12 = 1.463rem. */
 }
 
 .latex-dark {
@@ -201,6 +206,27 @@ p {
   margin-top: 1rem;
 }
 
+/* Indents paragraphs like in LaTeX documents*/
+.indent-pars p {
+  text-indent: var(--text-indent-size);
+}
+
+.indent-pars p.no-indent,
+p.no-indent {
+  text-indent: 0;
+}
+
+.indent-pars ol p,
+.indent-pars ul p {
+  text-indent: 0;
+}
+
+.indent-pars h2 + p,
+.indent-pars h3 + p,
+.indent-pars h4 + p {
+  text-indent: 0;
+}
+
 /* A elements that don't have a class get default styles */
 a:not([class]) {
   text-decoration-skip-ink: auto;
@@ -429,12 +455,14 @@ dl dd {
   width: 18vw;
   margin-right: -20vw;
   margin-bottom: 1em;
+  text-indent: 0;
 }
 
 .sidenote.left {
   float: left;
   margin-left: -20vw;
   margin-bottom: 1em;
+  text-indent: 0;
 }
 
 /* (WIP) add border when a sidenote is clicked on */