Define text size values in CSS by assigning class instead of hardcode…

…d font-size value. Add LARGER and HUGE values

core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/inline/TextTransform.kt

@@ -32,7 +32,9 @@ class TextTransformData(
         SMALL,
         NORMAL,
         MEDIUM,
+        LARGER,
         LARGE,
+        HUGE,
         ;
 
         override fun <T> accept(visitor: RenderRepresentableVisitor<T>): T = visitor.visit(this)

core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/CssRepresentableVisitor.kt

@@ -69,14 +69,7 @@ class CssRepresentableVisitor : RenderRepresentableVisitor<String> {
             SlidesFragment.Behavior.SHOW_HIDE -> "fade-in-then-out"
         }
 
-    override fun visit(size: TextTransformData.Size) =
-        when (size) {
-            TextTransformData.Size.TINY -> "0.5em"
-            TextTransformData.Size.SMALL -> "0.75em"
-            TextTransformData.Size.NORMAL -> "1em"
-            TextTransformData.Size.MEDIUM -> "1.5em"
-            TextTransformData.Size.LARGE -> "2em"
-        }
+    override fun visit(size: TextTransformData.Size) = "size-${size.kebabCaseName}"
 
     override fun visit(weight: TextTransformData.Weight) = weight.kebabCaseName
 

core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt

@@ -176,8 +176,10 @@ class QuarkdownHtmlNodeRenderer(context: Context) : BaseHtmlNodeRenderer(context
     override fun visit(node: TextTransform) =
         buildTag("span") {
             +node.children
+
+            `class`(node.data.size?.asCSS) // e.g. 'size-small' class
+
             style {
-                "font-size" value node.data.size
                 "font-weight" value node.data.weight
                 "font-style" value node.data.style
                 "font-variant" value node.data.variant

core/src/main/resources/render/theme/global.css

@@ -118,6 +118,34 @@ code.focus-lines .hljs-ln-line:not(.focused) {
     clip-path: circle();
 }
 
+.size-tiny {
+    font-size: 0.5em;
+}
+
+.size-small {
+    font-size: 0.75em;
+}
+
+.size-normal {
+    font-size: 1em;
+}
+
+.size-medium {
+    font-size: 1.25em;
+}
+
+.size-larger {
+    font-size: 1.5em;
+}
+
+.size-large {
+    font-size: 2em;
+}
+
+.size-huge {
+    font-size: 3em;
+}
+
 .codespan-content {
     display: inline-flex;
     align-items: center;