web: enhance em styling

WebEngineering-FHNW · Dec 13, 2024 · 86da484 · 86da484
1 parent 11e26c6
commit 86da484
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/docs/css/kolibri-base.css b/docs/css/kolibri-base.css
@@ -89,13 +89,15 @@ figure {
 
 em {                    /* emphasis looks like highlighted with text marker */
     position:           relative;
+    padding-inline:     0.2em 0.3em;
     &::before {
         content:        "";
         position:       absolute;
-        inset:          0;  /* -3px leads to strange line-break issues */
+        inset:          0 0 -.2em 0;  /* inline -3px leads to strange line-break issues */
+        border-radius:  5% 5% 20% 20%;
         background-color: var(--kolibri-color-select);
         z-index:        -10;
-        rotate:         -2deg;
+        rotate:         -3deg;
         opacity:        60%;
     }
 }

diff --git a/docs/examples.html b/docs/examples.html
@@ -244,7 +244,7 @@ <h2>Styling</h2>
                 <dt>CSS Best Practices</dt>
                 <dd>The Kolibri contains a lot of modern CSS features and examples of best practices including:
                     @import, @layer, @container, style isolation, css-in-js, custom properties,
-                    "CSS-API", design system, color palette, font handling, animations,
+                    "CSS-API", design system, layout, color palette, font handling, animations, consistency, validation,
                     and accessibility features like disabled animations and "tab into content".
                 </dd>