Update css

Author: bennyistanto

docs/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+**/*.quarto_ipynb

docs/_quarto.yml

@@ -14,7 +14,7 @@ website:
 
   navbar:
     background: primary
-    logo: ../images/logo-black.png
+    logo: ../images/logo-white-transparent.png
     logo-alt: "Precipitation Index Logo"
     search: true
     left:

docs/index.qmd

@@ -6,6 +6,11 @@ page-layout: full
 ---
 
 ::: {.hero-banner}
+::: {.hero-logo}
+![](../images/logo-white-transparent.png)
+:::
+
+::: {.hero-content}
 # Monitor Climate Extremes with Confidence
 
 A minimal, efficient Python implementation of **Standardized Precipitation Index (SPI)** and **Standardized Precipitation Evapotranspiration Index (SPEI)** for monitoring **both drought and wet conditions** using run theory.
@@ -17,6 +22,8 @@ A minimal, efficient Python implementation of **Standardized Precipitation Index
 [Get Started](get-started/installation.qmd){.btn .btn-primary .btn-lg role="button"}
 [View on GitHub](https://github.com/bennyistanto/precip-index){.btn .btn-outline-light .btn-lg role="button"}
 :::
+:::
+
 
 ## Key Features
 
@@ -114,7 +121,20 @@ Goes beyond simple threshold exceedance. Implements full run theory to character
 
 This package includes example data from **Bali, Indonesia** (1958-2024) using TerraClimate:
 
-![SPI-12 Time Series showing drought and wet events in Bali](../images/example-spi-timeseries.png)
+::: {.panel-tabset}
+### SPI 12-month, October 2023
+
+![SPI-12](../images/bali_terraclimate_spi12_202310.png)
+
+### SPEI 12-month, Dry
+
+![SPEI-12 Dry](../images/bali_terraclimate_spei12_1958_2020_dry.png)
+
+### SPEI 12-month, Wet
+
+![SPEI-12 Wet](../images/bali_terraclimate_spei12_1958_2020_wet.png)
+
+:::
 
 ::: {.callout-note}
 ## Try it with your data

docs/styles.css

@@ -17,19 +17,59 @@ $danger: #DC3545;
   padding: 4rem 2rem;
   margin-bottom: 2rem;
   border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.hero-logo {
+  flex-shrink: 0;
+  width: auto;
+  max-width: 200px;
+}
+
+.hero-logo img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.hero-content {
+  flex: 1;
 }
 
 .hero-banner h1 {
   font-size: 3rem;
   font-weight: 700;
   margin-bottom: 1rem;
+  margin-top: 0;
 }
 
 .hero-banner p {
   font-size: 1.25rem;
   margin-bottom: 2rem;
 }
 
+/* Responsive: stack logo on top for mobile */
+@media (max-width: 768px) {
+  .hero-banner {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .hero-logo {
+    max-width: 150px;
+  }
+
+  .hero-banner h1 {
+    font-size: 2rem;
+  }
+
+  .hero-banner p {
+    font-size: 1rem;
+  }
+}
+
 /* Feature cards */
 .feature-card {
   background: white;