refactor: put css in separate file

style.css

@@ -0,0 +1,68 @@
+.jupyter-widgets.leaflet-widgets {
+    height: 100%;
+    border-radius: 20px;
+}
+
+.solara-autorouter-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+}
+
+.v-toolbar__title {
+    display: flex;
+    align-items: center;
+    column-gap: 0.5rem;
+}
+
+.ui-container {
+    height: 95vh;
+    justify-content: center;
+    padding: 45px 50px 75px 50px;
+}
+
+.chat-interface {
+    height: 100%;
+    width: 38vw;
+    justify-content: center;
+    position: relative;
+}
+
+.chat-interface:after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
+    width: 100%;
+    height: 15%;
+}
+
+.map-container {
+    width: 50vw;
+    height: 100%;
+    justify-content: center;
+}
+
+@media screen and (max-aspect-ratio: 1/1) {
+    .ui-container {
+        padding: 30px;
+        height: 100vh;
+    }
+
+    .container-row {
+        flex-direction: column-reverse !important;
+        width: 100% !important;
+    }
+
+    .chat-interface {
+        width: unset;
+        justify-content: flex-end;
+    }
+
+    .map-container {
+        width: unset;
+    }
+}

wanderlust.py

@@ -20,6 +20,7 @@ markers = solara.reactive([])
 url = ipyleaflet.basemaps.OpenStreetMap.Mapnik.build_url()
 openai = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
 model = "gpt-4-1106-preview"
+app_style = open("style.css", "r").read()
 
 
 # Declare tools for openai assistant to use
@@ -271,65 +272,4 @@ def Page():
             with solara.Column(classes=["map-container"]):
                 Map()
 
-        solara.Style(
-            """
-            .jupyter-widgets.leaflet-widgets{
-                height: 100%;
-                border-radius: 20px;
-            }
-            .solara-autorouter-content{
-                display: flex;
-                flex-direction: column;
-                justify-content: stretch;
-            }
-            .v-toolbar__title{
-                display: flex;
-                align-items: center;
-                column-gap: 0.5rem;
-            }
-            .ui-container{
-                height: 95vh;
-                justify-content: center;
-                padding: 45px 50px 75px 50px;
-            }
-            .chat-interface{
-                height: 100%;
-                width: 38vw;
-                justify-content: center;
-                position: relative;
-            }
-            .chat-interface:after {
-                content: "";
-                position: absolute;
-                z-index: 1;
-                top: 0;
-                left: 0;
-                pointer-events: none;
-                background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255, 1) 100%);
-                width: 100%;
-                height: 15%;
-            }
-            .map-container{
-                width: 50vw;
-                height: 100%;
-                justify-content: center;
-            }
-            @media screen and (max-aspect-ratio: 1/1) {
-                .ui-container{
-                    padding: 30px;
-                    height: 100vh;
-                }
-                .container-row{
-                    flex-direction: column-reverse !important;
-                    width: 100% !important;
-                }
-                .chat-interface{
-                    width: unset;
-                    justify-content: flex-end;
-                }
-                .map-container{
-                    width: unset;
-                }
-            }
-            """
-        )
+        solara.Style(app_style)