make intro responsive

main.py

@@ -50,11 +50,12 @@ async def index_page(client: Client):
     add_head_html()
     add_header()
 
-    with ui.row().classes('w-full h-screen items-center gap-16 no-wrap').style(f'transform: translateX(-250px)'):
-        svg.face().classes('stroke-black w-[500px]')
-        with ui.column().classes('gap-8'):
+    with ui.row().classes('w-full h-screen items-center gap-8 pr-4 no-wrap into-section'):
+        svg.face(half=True).classes('stroke-black w-[200px] md:w-[230px] lg:w-[300px]')
+        with ui.column().classes('gap-4 md:gap-8 pt-32'):
             title('Meet the *NiceGUI*.')
-            subtitle('And let any browser be the frontend\n\nof your Python code.')
+            subtitle('And let any browser be the frontend of your Python code.') \
+                .classes('max-w-[20rem] sm:max-w-[24rem] md:max-w-[30rem]')
             with ui.link(target='#about') \
                     .classes('column mt-6 items-center ml-[-12px] hover:translate-y-1 duration-100 ease-out'):
                 ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5 mb-[-0.95em]')

website/style.py

@@ -23,11 +23,11 @@ def heading(title: str) -> ui.label:
 
 
 def title(content: str) -> ui.markdown:
-    return ui.markdown(content).classes('text-6xl font-medium')
+    return ui.markdown(content).classes('text-4xl sm:text-5xl md:text-6xl font-medium')
 
 
 def subtitle(content: str) -> ui.markdown:
-    return ui.markdown(content).classes('text-3xl leading-7')
+    return ui.markdown(content).classes('text-xl sm:text-2xl md:text-3xl leading-7')
 
 
 def example_link(title: str, description: str) -> None:

website/svg.py

@@ -5,17 +5,16 @@ from nicegui import ui
 PATH = Path(__file__).parent / 'static'
 
 
-def _svg(name: str) -> ui.html:
-    return ui.html((PATH / f'{name}.svg').read_text())
-
-
-def face() -> ui.html:
-    return _svg('happy_face')
+def face(half: bool = False) -> ui.html:
+    code = (PATH / 'happy_face.svg').read_text()
+    if half:
+        code = code.replace('viewBox="0 0 62.44 71.74"', 'viewBox="31.22 0 31.22 71.74"')
+    return ui.html(code)
 
 
 def word() -> ui.html:
-    return _svg('nicegui_word')
+    return ui.html((PATH / 'nicegui_word.svg').read_text())
 
 
 def github() -> ui.html:
-    return _svg('github')
+    return ui.html((PATH / 'github.svg').read_text())