Walnut Street repaving, Amy Solano

README.md

@@ -1,51 +1,8 @@
-## Samples from previous years
+## Walnut Street Redesign Storymap
 
-* [_What's in a Vacant Lot_](examples/Vacant_Lots_AdrianLeon/), Adrián León, Max Masuda-Farkas, and Xuezhu Zhao
-* [_Surveillance in New Orleans_](examples/NoLA_Surveillance_BrianaCervantes/), Briana Cervantes
-* [_A Spatial History of House Music_](examples/House_Music_MarlanaZink/), Marlana Zink
+My storymap, [_Changing Walnut Street_](complete_streets_solano) explores the recent redesign of Walnut Street in West Philly after repaving in 2023. 
 
-## Samples from elsewhere on the internet
+A significant change on a street like Walnut that many people travel through is bound to turn heads. Walnut was due for repaving, but why did they do it in this way? This storymap walks through the reasons why a street might change, the principles fueling a redesign, and the groups that make it happen. The story map is incomplete, with the unfinished part being the critical aspect of community engagement and its importance to this project and, more generally, all planning decisions. A more robust draft would explore this in more depth and provide more visual references for the design of the street and the work of the organizations mentioned in the storymap. It would also go more into detail about the positive effects of a similar traffic calming project on Chestnut Street. 
 
-* [_How the Air Campaign Against ISIS Grew_](http://www.nytimes.com/interactive/2014/12/31/world/middleeast/isis-airstrikes-map.html), New York Times
-* [_Philly’s Chinatown: 150 years of development, displacement, and resilience_](https://www.inquirer.com/history/inq2/chinatown-history-timeline-development-arena-20231128.html)
+Overall, the goal is to break down the planning process and not only the details and reason for the change, but also the groups like OTIS who are behind them. Particularly for residents of Philadelphia who are interested in getting more involved with changes in their communities, this storymap would ideally be an accessible resource where people can familiarize themselves with the process using a project that actually works in Philly.
 
-## Instructions
-
-### Step 1: Choose a topic
-
-Choose a topic that is fruitfully explained with some combination of narrative and geographic elements. Think about what data you want to tell a story about. Whatever data you use, **be sure to include citations somewhere in your app interface**. You can choose a dataset from any of a number of sources, for example:
-
-* Use data you've been working with for another class
-* Create your own dataset (check out [geojson.io](https://geojson.io))
-* Find data from an open data repository...
-
-#### OpenDataPhilly.org
-
-OpenDataPhilly has lots of Philadelphia-specific data, like:
-
-- [Neighborhood Boundaries](https://opendataphilly.org/dataset/philadelphia-neighborhoods)
-- Historic [Streets](https://opendataphilly.org/dataset/historic-streets), [Districts](https://opendataphilly.org/dataset/philadelphia-registered-historic-districts), or [Properties](https://opendataphilly.org/dataset/philadelphia-registered-historic-sites)
-- [School Information](https://opendataphilly.org/dataset/school-information-data)
-- [PA Horticultural Society Land Care](https://opendataphilly.org/dataset/land-care)
-
-#### Other open data portals
-
-Many other cities, counties, states, and countries have dedicated data portals as well. Here are a couple of lists of state-sponsored open data sites:
-
-- [Data.gov - Open Government](https://data.gov/open-gov/)
-- [Open Knowledge Foundation - DataPortals.org](https://dataportals.org/)
-
-#### Independently compiled data sources
-
-Sources like [Stop Demolishing Philly](https://www.stopdemolishingphilly.com/map/) or other privately compiled data sources.
-
-
-Use one of the template story maps in the _templates/_ folder, modified as you see fit, to explain your topic. For example, open [templates/scrollytelly/](templates/scrollytelly/) and copy the contents to the root folder in this repository. You can then modify the HTML, CSS, JavaScript, and data to suit your needs.
-
-### Step 2: Think About Slide Content
-
-Your story will have multiple slides, each with a title, some additional text, maybe images, and geographic data. Your slide content will go straight into your HTML, and your map features will go in to separate GeoJSON files in the [data/](data/) folder.
-
-### Step 3: Submit your story map
-
-Commit your code and push it to your repository on GitHub. Set up GitHub pages on the repository and submit a new pull request into the original project repository in the class organization.

complete_streets_solano/css/index.css

@@ -0,0 +1,172 @@
+body {
+  margin: 0;
+  border-width: 0;
+  box-sizing: border-box;
+  height: 100vh;
+
+  font-family: sans-serif;
+}
+
+.map-container {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  z-index: 0;
+}
+
+.map {
+  height: 100%;
+}
+
+.slide-section {
+  position: relative;
+  margin-top: -30vh;
+  z-index: 100;
+  pointer-events: none;
+  border-bottom: 1px solid rgb(0 0 0 / 10%);
+}
+
+.slide {
+  margin-top: 90vh;
+  margin-bottom: 90vh;
+  margin-left: auto;
+  margin-right: 2rem;
+  padding: 1rem;
+  box-shadow: -0.5rem 0 1rem rgba(0 0 0 / 50%);
+  border: 1px solid gray;
+  border-radius: 0.3rem;
+  pointer-events: initial;
+
+  width: 25rem;
+
+  background-color: white;
+  color: black;
+}
+
+.slide-centered {
+  margin-top: 90vh;
+  margin-bottom: 90vh;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1rem;
+  box-shadow: -0.5rem 0 1rem rgba(0 0 0 / 50%);
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+  pointer-events: initial;
+
+  width: 90vh;
+
+  background-color: white;
+  color: black;
+}
+
+.slide:first-child {
+  margin-top: 0;
+}
+
+.slide:last-child {
+  margin-bottom: 40vh;
+}
+
+.slide-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  column-gap: 0.5rem;
+
+  width: 100%;
+}
+
+.overlay-text {
+  position: absolute;
+  top: 50%; 
+  left: 50%; 
+  transform: translate(-50%, -50%); 
+  background-color: #000; 
+  color: #fff; 
+  padding: 10px 20px; 
+  font-size: 20px; 
+  text-align: center;
+}
+
+.photo-slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; 
+  width: 100vw; 
+  overflow: hidden;
+  color: gray;
+}
+
+.photo-slide-container {
+  display: flex;
+  width: 100%;
+  height: 100%; 
+}
+
+.slide-image-container {
+  flex: 1; 
+  height: 100%;
+}
+
+.photo-slide-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.photo-slide-text-container {
+  flex: 1; 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: 2rem;
+  padding: 1rem;
+  background-color: #3A3B3C;
+  color: #fff7f7;
+}
+
+h1 {
+  font-size: 2.2rem;
+  margin-bottom: 20px;
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+h2 {
+  font-size: 1.6rem;
+  margin-bottom: 20px;
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+ p {
+  font-size: 1.2rem;
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+.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;
+}