improve layout

main.py

@@ -29,12 +29,19 @@ def add_head_html() -> None:
         <meta name="msapplication-config" content="/favicon/browserconfig.xml">
         <meta name="theme-color" content="#ffffff">
     ''')  # https://realfavicongenerator.net/
+    ui.add_head_html(r'''
+        <style>
+        body {
+            background-color: #f8f8f8;
+        }
+        </style>
+    ''')
 
 
 @ui.page('/')
 async def index_page(client: Client):
     add_head_html()
-    client.content.classes(remove='q-pa-md gap-4').style('background: #f8f8f8')
+    client.content.classes(remove='q-pa-md gap-4')
 
     with ui.header() \
             .classes('items-center') \
@@ -73,8 +80,7 @@ async def index_page(client: Client):
                 and similar use cases. You can also use it in development, for example when
                 tweaking/configuring a machine learning algorithm or tuning motor controllers.
                 NiceGUl is available as PyPl package, Docker image and on GitHub
-            ''') \
-                .style('font-size: 150%; color: white')
+            ''').style('font-size: 150%; color: white')
         with ui.row().style('filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))'):
             with ui.card().classes('no-shadow') \
                     .style(f'min-width: 360px; height: 380px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)'):

website/example.py

@@ -13,17 +13,14 @@ SPECIAL_CHARACTERS = re.compile('[^(a-z)(A-Z)(0-9)-]')
 
 class example:
 
-    def __init__(self, content: Union[Callable, type, str], tight: bool = False, skip: bool = False) -> None:
+    def __init__(self, content: Union[Callable, type, str], tight: bool = False) -> None:
         self.content = content
         self.markdown_classes = f'mr-8 w-full flex-none lg:w-{48 if tight else 80} xl:w-80'
         self.rendering_classes = f'w-{48 if tight else 64} flex-none lg:mt-12'
         self.source_classes = f'w-80 flex-grow overflow-auto lg:mt-12'
-        self.skip = skip
 
     def __call__(self, f: Callable) -> Callable:
-        if self.skip:
-            return
-        with ui.row().classes('flex w-full'):
+        with ui.row().classes('mb-2 flex w-full'):
             if isinstance(self.content, str):
                 self._add_html_anchor(ui.markdown(self.content).classes(self.markdown_classes))
             else:

website/reference.py

@@ -38,7 +38,7 @@ Binding values between UI elements or [to data models](http://127.0.0.1:8080/ref
 
 def create_full() -> None:
     def h3(text: str) -> None:
-        ui.label(text).style('width: 100%; border-bottom: 1px solid silver; font-size: 200%; font-weight: 200')
+        ui.label(text).classes('w-full mt-16 border-b border-slate-200 text-3xl font-light')
 
     h3('Basic Elements')