hd77alu/storycast

Storycast is a website showcasing stories documenting climate change impacts across Africa. The site features three main pages with full accessibility support, responsive design, and container queries. # StoryCast - Climate Stories from Africa A website showcasing stories documenting climate change impacts across Africa. The site features three main pages with full accessibility support, responsive design, and container queries. - **Access the deployed Website from here** ## Project Structure ``` storycast/ ├── index.html # Home page ├── about.html # About & accessibility page ├── story/ │ └── main-story.html # Story by NBC news │ ├── famine-east-africa.html # Story by ABC news │ ├── flooding-niger.html # Story by Channels Television │ ├── seeds-malawi.html # Story by switvh TV ├── sass/ # Sass source files │ ├── tokens/ # Design tokens │ ├── components/ # Component styles │ ├── pages/ # Page styles │ └── main.scss # Main import file ├── css/ │ └── main.css # Compiled CSS ├── js/ │ └── main.js # JavaScript └── assets/ # Media files ``` --- ## Installation 1. **Clone/Download the project** ```bash git clone github.com cd storycast ``` 2. **Compile Sass** ```bash sass sass/main.scss css/main.css ``` 3. **Start development server** ```bash # Python python -m http.server 8000 # Node.js npx http-server # VS Code Live Server # Right-click index.html → Open with Live Server ``` 4. **View in browser** ``` localhost ``` --- ## Page Structure **1. Home Page (index.html)** - Hero section with featured story - Stories grid (3 stories with container queries) - Audio spotlight section - Platform statistics **2. Story Detail Page (story/drought-sahel.html)** - Video hero with play button - Story metadata and description - Audio player with waveform visualization - Expandable transcript with timestamps - Related stories section **3. About & Access Page (about.html)** - Mission statement - Why audio-first journalism - 6 accessibility features grid - WCAG 2.1 AA compliance detail …