Update src/streamlit_app.py

src/streamlit_app.py

@@ -15,54 +15,41 @@ st.markdown("""
         .title {
             text-align: center;
             padding: 25px;
+            color: #2c3e50;
+            font-family: 'Source Sans Pro', sans-serif;
         }
-        /* ROOT & BODY */
-        body {
-              background-color: #f8f9fa;              /* light grey background */
-              color: #333333;                         /* dark grey text */
-          font-family: "Helvetica Neue", Arial, sans-serif;
-        }
-        
-        /* HEADINGS */
-        h1, h2, h3, h4, h5, h6 {
-          font-family: "Source Sans Pro", sans-serif;
-          color: #2c3e50;                         /* nice navy */
-          margin-top: 1.5em;
-          margin-bottom: 0.5em;
-        }
-        /* PARAGRAPHS */
-        p, .stMarkdown p {
-          font-size: 18px;                        /* comfortable reading size */
-          line-height: 1.6;                       /* good line spacing */
-          color: #4b4b4b;                         /* slightly lighter grey */
-          max-width: 800px;                       /* prevent overly long lines */
-          margin: 0.75em auto;                    /* vertical spacing, centered */
-          padding: 0 10px;                        /* small side padding */
-        }
-        
-        /* OPTIONAL: a helper class for even tighter control */
-        .writeup {
-          max-width: 700px;
-          margin: 1em auto;
-          padding: 0 15px;
-        }
+        /* Paragraph/write-up styling */
+      .description {
+        max-width: 800px;          /* prevent super long lines */
+        margin: 0 auto;            /* center the block */
+        font-size: 18px;           /* comfortable reading size */
+        line-height: 1.6;          /* good spacing */
+        color: #4b4b4b;            /* dark grey text */
+        text-align: justify;       /* nice full-justified look */
+        padding: 0 10px 20px;      /* side & bottom padding */
+        font-family: 'Helvetica Neue', Arial, sans-serif;
+      }
         </style>
         """, unsafe_allow_html=True)
     
 st.markdown("<div class='title'><h1> LAPD Crime Insights Dashboard </h1></div>", unsafe_allow_html=True)
 
 # 1. Page title
-st.markdown(""" This application provides a suite of interactive visualizations—pie charts, bar charts, scatter plots, and more—that let you explore crime patterns in the LAPD dataset from multiple angles. Quickly see which offense categories dominate, compare arrest rates against non-arrests, track how crime volumes change over time, and examine geographic hotspots. These insights can help police departments, community organizations, and policymakers allocate resources more effectively and design targeted strategies to improve public safety.""")
+st.markdown("""  <div class='description'> This application provides a suite of interactive visualizations—pie charts, 
+bar charts, scatter plots, and more—that let you explore crime patterns in the LAPD dataset from multiple angles. 
+Quickly see which offense categories dominate, compare arrest rates against non-arrests, track how crime volumes change over time, and examine geographic hotspots. 
+These insights can help police departments, community organizations, and policymakers allocate resources more effectively and 
+design targeted strategies to improve public safety.  </div>""")
             
 # 2. Data info & load
 st.header("Dataset Information")
 st.markdown(
-    """<div class='p'><p>
+    """
 - **Source:** LAPD crime incidents dataset  
 - **Rows:** incidents (one per row)  
 - **Columns:** e.g. `crm_cd_desc` (crime type), `arrest` (boolean), `date`, `location_description`, etc.  
 - **Purpose:** Interactive exploration of top crime categories and arrest rates.
-</p></div>"""
+"""
 )
 
 # 1. Resolve the path to the CSV next to this script