first pass - kryz inspired
This commit is contained in:
kfj001 committed
1 parent
3063d01ec5
commit
771e1e166f
53 files changed
+10521
No files matched your search
@@ -0,0 +1,74 @@
|
||||
<section class="schedule">
|
||||
<div class="container">
|
||||
<div class="schedule-header">
|
||||
<img src="assets/svg/small-flower.svg" alt="" class="schedule-flower" aria-hidden="true">
|
||||
<h2>Today's <span class="text-accent">Program Schedule</span></h2>
|
||||
<p class="section-intro">
|
||||
All times are local (Mountain Time). Every show is free to listen to
|
||||
live at 98.7 FM or via our online stream.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="schedule-list">
|
||||
<div class="schedule-day-label">Monday – Friday</div>
|
||||
<div class="schedule-table">
|
||||
<div *ngFor="let program of programs" class="schedule-row">
|
||||
<div class="schedule-time">{{ program.time }}</div>
|
||||
<div class="schedule-divider"></div>
|
||||
<div class="schedule-details">
|
||||
<h4 class="schedule-title">{{ program.title }}</h4>
|
||||
<div class="schedule-meta">
|
||||
<span class="schedule-host">
|
||||
<span aria-hidden="true">🎙️</span> {{ program.host }}
|
||||
</span>
|
||||
<span class="schedule-genre">{{ program.genre }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="schedule-weekend">
|
||||
<div class="weekend-heading">
|
||||
<img src="assets/svg/small-flower.svg" alt="" class="schedule-flower-sm" aria-hidden="true">
|
||||
<h3>Weekend Programming</h3>
|
||||
</div>
|
||||
<div class="weekend-grid">
|
||||
<div class="weekend-card">
|
||||
<div class="card-day">Saturday</div>
|
||||
<div class="card-programs">
|
||||
<div class="card-item">
|
||||
<strong>9:00 AM</strong> — Country Roads Hour
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<strong>11:00 AM</strong> — Community Hour (call-ins welcome!)
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<strong>2:00 PM</strong> — Afternoon Bluegrass
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<strong>4:00 PM</strong> — Record Request Hour
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weekend-card">
|
||||
<div class="card-day">Sunday</div>
|
||||
<div class="card-programs">
|
||||
<div class="card-item">
|
||||
<strong>10:00 AM</strong> — Sunday Morning Hymns & Folk
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<strong>12:00 PM</strong> — Gospel & Roots
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<strong>3:00 PM</strong> — The Long Wave (ambient / nature sounds)
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<strong>6:00 PM</strong> — Sunday Sunset Jazz
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,173 @@
|
||||
@use '../../styles/variables' as *;
|
||||
@use '../../styles/mixins' as *;
|
||||
|
||||
.schedule {
|
||||
padding: $spacing-3xl 0;
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.schedule-header {
|
||||
text-align: center;
|
||||
margin-bottom: $spacing-2xl;
|
||||
|
||||
.schedule-flower {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 auto $spacing-md;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-list {
|
||||
max-width: 800px;
|
||||
margin: 0 auto $spacing-3xl;
|
||||
}
|
||||
|
||||
.schedule-day-label {
|
||||
text-align: center;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: $spacing-md;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.schedule-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.schedule-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: $spacing-md 0;
|
||||
border-bottom: 1px solid var(--color-light);
|
||||
transition: background $transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-cream);
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-time {
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
padding-right: $spacing-md;
|
||||
text-align: right;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.schedule-divider {
|
||||
width: 2px;
|
||||
background: var(--color-accent-muted);
|
||||
margin: 0 $spacing-sm;
|
||||
border-radius: 1px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.schedule-details {
|
||||
flex: 1;
|
||||
padding: $spacing-xs 0;
|
||||
}
|
||||
|
||||
.schedule-title {
|
||||
font-size: 1.05rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: $spacing-xs;
|
||||
}
|
||||
|
||||
.schedule-meta {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-medium);
|
||||
|
||||
.schedule-host {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.schedule-genre {
|
||||
background: var(--color-light);
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
// Weekend
|
||||
.schedule-weekend {
|
||||
margin-top: $spacing-xl;
|
||||
}
|
||||
|
||||
.weekend-heading {
|
||||
text-align: center;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
.schedule-flower-sm {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 0 auto $spacing-sm;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.6rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.weekend-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
|
||||
.weekend-card {
|
||||
@include card-style;
|
||||
padding: $spacing-xl;
|
||||
background: var(--color-white);
|
||||
|
||||
.card-day {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: $spacing-md;
|
||||
padding-bottom: $spacing-sm;
|
||||
border-bottom: 2px solid var(--color-light);
|
||||
}
|
||||
|
||||
.card-programs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-dark);
|
||||
padding: $spacing-sm;
|
||||
border-radius: $radius-sm;
|
||||
transition: background $transition-fast;
|
||||
|
||||
strong {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-cream);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-md - 1px}) {
|
||||
.schedule-time { width: 80px; font-size: 0.85rem; }
|
||||
.weekend-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { NgFor } from '@angular/common';
|
||||
|
||||
interface Program {
|
||||
time: string;
|
||||
title: string;
|
||||
host: string;
|
||||
genre: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-schedule',
|
||||
standalone: true,
|
||||
imports: [NgFor],
|
||||
templateUrl: './schedule.component.html',
|
||||
styleUrl: './schedule.component.scss',
|
||||
})
|
||||
export class ScheduleComponent {
|
||||
readonly programs: Program[] = [
|
||||
{ time: '6:00 AM', title: 'Morning Mountain Mist', host: 'Diana Walsh', genre: 'Ambient / Nature' },
|
||||
{ time: '8:00 AM', title: 'Community Roundup', host: 'Tom Breen', genre: 'News / Talk' },
|
||||
{ time: '10:00 AM', title: 'Bluegrass Trails', host: 'Sarah Lynn', genre: 'Bluegrass' },
|
||||
{ time: '12:00 PM', title: 'Lunchtime Jazz', host: 'Mike Darrow', genre: 'Jazz' },
|
||||
{ time: '2:00 PM', title: 'Folk Roots Hour', host: 'Nadia Cole', genre: 'Folk' },
|
||||
{ time: '4:00 PM', title: 'Afternoon Acoustics', host: 'Jen Reeves', genre: 'Acoustic' },
|
||||
{ time: '6:00 PM', title: 'Evening Echoes', host: 'Carlos Mendez', genre: 'Indie / Alternative' },
|
||||
{ time: '8:00 PM', title: 'Classical Mountains', host: 'Elena Cross', genre: 'Classical' },
|
||||
{ time: '10:00 PM', title: 'Night Owl Session', host: 'DJ Kofi', genre: 'Electronic' },
|
||||
{ time: '12:00 AM', title: 'Late Night Jazz', host: 'Mike Darrow', genre: 'Jazz' },
|
||||
];
|
||||
}
|
||||
Reference in new issue
Block a user