formatting section title, paragraph and links (#6)

Author: josuebran

preview-src/index.adoc

@@ -32,6 +32,30 @@ Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
 
 ===== Section Title (Level 3)
 
+== Paragraph & Links
+
+=== Paragraph
+
+In AsciiDoc, creating paragraphs is a straightforward process that does not require any special markup.
+A paragraph can be defined as one or more lines of consecutive text that are logically grouped together.
+To differentiate between paragraphs, you simply need to insert at least one blank line between them.
+
+=== Internal Link
+
+The absence of any specific markup for paragraphs in AsciiDoc allows for a more natural and intuitive writing experience.
+Instead of having to enclose text within <<liber-recusabo,tags or special characters>>,
+you can focus on expressing your ideas and content in a clear and concise manner.
+
+=== External Link
+
+By separating paragraphs with blank lines, you visually
+https://www.datastax.com/[distinguish each paragraph,role=external,window=_blank]
+
+
+=== Anchor Link
+
+By separating paragraphs with blank lines, you visually distinguish each paragraph
+
 Nominavi luptatum eos, an vim hinc philosophia intellegebat.
 Lorem pertinacia `expetenda` et nec, [.underline]#wisi# illud [.line-through]#sonet# qui ea.
 H~2~0.

src/css/doc.css

@@ -29,7 +29,7 @@
   color: var(--heading-font-color);
   hyphens: none;
   line-height: 1.5;
-  margin: 1rem 0 0;
+  margin: calc(24 / var(--rem-base) * 1rem) 0 0;
 }
 
 .doc > h1.page:first-child {
@@ -70,6 +70,7 @@
 .doc a.link,
 .doc a.link:hover {
   color: var(--heading-font-color);
+  text-decoration: none;
 }
 
 @media screen and (min-width: 769px) {
@@ -92,16 +93,12 @@
 }
 
 .doc h1.sect0 {
-  background: var(--abstract-background);
-  font-size: 1.8em;
-  margin: 1.5rem -1rem 0;
-  padding: 0.5rem 1rem;
+  font-size: calc(24 / var(--rem-base) * 1rem);
+  margin: calc(24 / var(--rem-base) * 1rem) 0 0;
 }
 
 .doc h2:not(.discrete) {
   border-bottom: 1px solid var(--section-divider-color);
-  /* margin-left: -1rem;
-  margin-right: -1rem; */
   margin: 0;
   padding: 0 0 calc(16 / var(--rem-base) * 1rem);
 }
@@ -168,6 +165,14 @@
   color: var(--link_unresolved-font-color);
 }
 
+.doc a.external::after {
+  font-family: "Material Icons Outlined", sans-serif;
+  content: '\e89e';
+  font-size: calc(20 / var(--rem-base) * 1rem);
+  vertical-align: bottom;
+  margin-left: 2px;
+}
+
 .doc i.fa {
   hyphens: none;
   font-style: normal;
@@ -253,7 +258,7 @@
 .doc .partintro,
 .doc details,
 .doc hr {
-  margin: 1rem 0 0;
+  margin: calc(24 / var(--rem-base) * 1rem) 0 0;
 }
 
 .doc table.tableblock {
@@ -264,7 +269,7 @@
 .doc .tablecontainer + *,
 .doc :not(.tablecontainer) > table.tableblock,
 .doc :not(.tablecontainer) > table.tableblock + * {
-  margin-top: 1.5rem;
+  margin-top: calc(24 / var(--rem-base) * 1rem);
 }
 
 .doc p.tableblock + p.tableblock {