Merge pull request #2112 from zauberzeug/improved_em

make <em> italics in the documentation

website/main_page.py

@@ -52,7 +52,7 @@ def create() -> None:
         section_heading('Installation', 'Get *started*')
         with ui.row().classes('w-full text-lg leading-tight grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8'):
             with ui.column().classes('w-full max-w-md gap-2'):
-                ui.html('<em>1.</em>').classes('text-3xl font-bold')
+                ui.html('<em>1.</em>').classes('text-3xl font-bold fancy-em')
                 ui.markdown('Create __main.py__').classes('text-lg')
                 with documentation.python_window(classes='w-full h-52'):
                     ui.markdown('''
@@ -65,7 +65,7 @@ def create() -> None:
                         ```
                     ''')
             with ui.column().classes('w-full max-w-md gap-2'):
-                ui.html('<em>2.</em>').classes('text-3xl font-bold')
+                ui.html('<em>2.</em>').classes('text-3xl font-bold fancy-em')
                 ui.markdown('Install and launch').classes('text-lg')
                 with documentation.bash_window(classes='w-full h-52'):
                     ui.markdown('''
@@ -75,7 +75,7 @@ def create() -> None:
                         ```
                     ''')
             with ui.column().classes('w-full max-w-md gap-2'):
-                ui.html('<em>3.</em>').classes('text-3xl font-bold')
+                ui.html('<em>3.</em>').classes('text-3xl font-bold fancy-em')
                 ui.markdown('Enjoy!').classes('text-lg')
                 with documentation.browser_window(classes='w-full h-52'):
                     ui.label('Hello NiceGUI!')

website/static/style.css

@@ -20,7 +20,7 @@ html:not(.has-dialog) {
   font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
 }
-em:not(.browser-window *) {
+.fancy-em em {
   font-style: normal;
   color: #5898d4;
 }

website/style.py

@@ -19,7 +19,7 @@ def link_target(name: str, offset: str = '0') -> ui.link_target:
 def section_heading(subtitle_: str, title_: str) -> None:
     """Render a section heading with a subtitle."""
     ui.label(subtitle_).classes('md:text-lg font-bold')
-    ui.markdown(title_).classes('text-3xl md:text-5xl font-medium mt-[-12px]')
+    ui.markdown(title_).classes('text-3xl md:text-5xl font-medium mt-[-12px] fancy-em')
 
 
 def heading(title_: str) -> ui.markdown:
@@ -29,7 +29,7 @@ def heading(title_: str) -> ui.markdown:
 
 def title(content: str) -> ui.markdown:
     """Render a title."""
-    return ui.markdown(content).classes('text-4xl sm:text-5xl md:text-6xl font-medium')
+    return ui.markdown(content).classes('text-4xl sm:text-5xl md:text-6xl font-medium fancy-em')
 
 
 def subtitle(content: str) -> ui.markdown: