use arrows after links consistently

main.py

@@ -86,7 +86,7 @@ async def index_page(client: Client):
                     '[GitHub](https://github.com/zauberzeug/nicegui).')
         demo_card.create()
 
-    with ui.column().classes('w-full p-8 lg:p-16 bold-links max-w-[1600px] mx-auto'):
+    with ui.column().classes('w-full p-8 lg:p-16 bold-links arrow-links max-w-[1600px] mx-auto'):
         link_target('features', '-50px')
         section_heading('Features', 'Code *nicely*')
         with ui.row().classes('w-full text-lg leading-tight grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8'):

website/example.py

@@ -35,7 +35,7 @@ class example:
                 html = html.replace('param ', '')
                 html = apply_tailwind(html)
                 documentation = ui.html(html)
-            _add_html_anchor(documentation.classes('text-lg documentation bold-links'))
+            _add_html_anchor(documentation.classes('text-lg documentation bold-links arrow-links'))
 
             with ui.column().classes('w-full items-stretch gap-8 no-wrap xl:flex-row'):
                 code = inspect.getsource(f).split('# END OF EXAMPLE')[0].strip().splitlines()
@@ -74,7 +74,7 @@ def _add_html_anchor(element: ui.html) -> None:
         return
 
     icon = '<span class="material-icons">link</span>'
-    link = f'<a href="reference#{headline_id}" class="hover:text-black" style="color: #ddd">{icon}</a>'
+    link = f'<a href="reference#{headline_id}" class="hover:text-black auto-link" style="color: #ddd">{icon}</a>'
     target = f'<div id="{headline_id}" style="position: relative; top: -90px"></div>'
     html = html.replace('<h4', f'{target}<h4', 1)
     html = html.replace('</h4>', f' {link}</h4>', 1)

website/static/style.css

@@ -29,7 +29,7 @@ a:active:not(.browser-window *) {
 .bold-links a:link {
   font-weight: 500;
 }
-.arrow-links a:link::after {
+.arrow-links a:link:not(.auto-link)::after {
   content: "north_east";
   font-family: "Material Icons";
   font-weight: 100;

website/style.py

@@ -32,7 +32,7 @@ def example_link(title: str, description: str) -> None:
             .classes('bg-[#6aa9d920] p-4 self-stretch rounded flex flex-col gap-2') \
             .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)'):
         ui.label(title).classes(replace='text-black font-bold')
-        ui.markdown(description).classes(replace='text-black bold-links')
+        ui.markdown(description).classes(replace='text-black bold-links arrow-links')
 
 
 def features(icon: str, title: str, items: List[str]) -> None:
@@ -40,4 +40,4 @@ def features(icon: str, title: str, items: List[str]) -> None:
         ui.icon(icon).classes('max-sm:hidden text-3xl md:text-5xl mb-3 text-primary opacity-80')
         ui.label(title).classes('font-bold mb-3')
         for item in items:
-            ui.markdown(f'- {item}').classes('bold-links')
+            ui.markdown(f'- {item}').classes('bold-links arrow-links')