Hazel_Sun_storymap

Hazelmap/README.md

@@ -0,0 +1,15 @@
+Add a readme for your story map here. Include content overview, data citations, and any relevant technical details.# Philadelphia Public Art & Community Interaction
+
+Explore how Philadelphia’s public art interacts with urban communities.
+This story map presents four key perspectives:
+1. Urban Memory of Historic Sites in Philadelphia
+2. Representative Historic Public Art Sites
+3. Historic Districts & Neighborhood Fabric
+4. Iconic Landmarks & Cultural Identity
+5. Contemporary Public Art & the Percent for Art Program
+
+## Data Sources
+-https://opendataphilly.org/datasets/?category=arts-culture-history
+
+## Author
+Hazel Jiayu Sun (University of Pennsylvania)

Hazelmap/css/index.css

@@ -0,0 +1,238 @@
+body {
+  margin: 0;
+  border-width: 0;
+  box-sizing: border-box;
+  height: 100vh;
+
+  font-family: 'Open Sans', sans-serif;
+}
+
+main {
+  display: flex;
+  height: 100%;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
+.slide-section {
+  z-index: 1000;
+
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  box-shadow: -0.5rem 0 1rem grey;
+  padding: 1rem;
+  width: 20rem;
+}
+
+.slide-content {
+  flex-grow: 1;
+}
+
+.slide-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  column-gap: 0.5rem;
+
+  width: 100%;
+}
+
+.slide-nav-button {
+  transition: all 0.1s;
+
+  padding: 0;
+  margin: 1rem;
+  width: 4rem;
+  height: 3rem;
+  border: 1px solid #888;
+  border-radius: 0.25rem;
+
+  background-color: #eee;
+  font-size: 1.5em;
+}
+
+.slide-nav-button:hover {
+  background-color: #444;
+  color: #fff;
+}
+
+.slide-nav-select {
+  min-width: 0;
+}
+
+
+
+.map {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+
+.leaflet-tile-pane {
+  opacity: 0.4;  
+}
+
+
+.hero-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+
+.hero-overlay::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.4); 
+  z-index: 1;
+}
+
+
+.hero-text {
+  position: absolute;        
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;             
+  flex-direction: column;    
+  justify-content: center;  
+  align-items: center;      
+  text-align: center;
+  color: #fff;
+  z-index: 2;
+  padding: 0 2rem;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
+}
+
+
+.hero-text h1 {
+  font-size: clamp(2.5rem, 5vw, 3.5rem);
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  line-height: 1.2;
+}
+
+
+.hero-text p {
+  font-size: 1.4rem;
+  margin-bottom: 1.5rem;
+  background: rgba(0,0,0,0.4);
+  padding: 0.8rem 1rem;
+  border-radius: 8px;
+}
+
+
+.hero-text .btn {
+  background: #e74c3c;
+  color: #fff;
+  font-size: 1.2rem;
+  padding: 0.8rem 2rem;
+  border: none;
+  outline: none;             
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+.hero-text .btn:hover {
+  background: #c0392b;
+}
+
+
+.hidden {
+  display: none;
+}
+
+.side-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 35%;
+  height: 100%;
+  background: rgba(0,0,0,0.8);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 2rem;
+  box-shadow: -2px 0 8px rgba(0,0,0,0.4);
+  z-index: 10;
+  transition: transform 0.6s ease;
+  overflow-y: auto;
+}
+
+
+.hidden {
+  transform: translateX(100%);
+}
+
+
+.slide-content h2 {
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+}
+.slide-content p {
+  font-size: 1.1rem;
+  line-height: 1.6;
+}
+
+
+.slide-controls {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+.slide-nav-button {
+  background: #e74c3c;
+  border: none;
+  color: #fff;
+  padding: 0.6rem 1.2rem;
+  font-size: 1.4rem;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.slide-nav-button:hover {
+  background: #c0392b;
+}
+.point-id {
+  font-size: 14px;
+  font-weight: bold;
+  color: #ffffff;           
+  background: transparent;
+  border: none;
+  padding: 0;
+  box-shadow: none;
+}
+.leaflet-tooltip.point-id {
+  background: transparent;
+  border: none;
+  color: #ffffff;           
+  text-align: center;
+  line-height: 1;           
+  transform: translate(-50%, -50%);  
+  margin: 0;                
+  padding: 0;
+}
+
+