pages/_sass/_teachings.scss
Jiahao Zhang 0fe3c84636
Add course schedule feature to teaching page (#2258) (#3147)
Implements the course schedule feature requested in issue
#[2258](https://github.com/alshedivat/al-folio/issues/2258).

This PR adds a new course schedule feature to the al-folio theme,
allowing academics to easily create and display structured course
information.

**Changes:**
- Added a `courses` collection to organize and display academic courses
- Created course layout and display templates with responsive design
- Implemented organization by year and term with automatic sorting
- Added support for weekly schedule with topics and course materials
- Simplified documentation with a README for course creation

This feature makes it easier for academics to showcase their teaching
materials with a consistent, organized display of course schedules,
helping users create professional teaching pages without custom
implementation.

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>
Co-authored-by: George Araújo <george.gcac@gmail.com>
2026-01-17 18:43:47 -03:00

78 lines
1.2 KiB
SCSS

/*****************************
* Teachings/Courses styles
*****************************/
.courses {
margin-top: 30px;
}
.year {
margin-top: 40px;
margin-bottom: 20px;
border-bottom: 1px solid var(--global-divider-color);
padding-bottom: 10px;
}
.course-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.course-item {
border: 1px solid var(--global-divider-color);
border-radius: 5px;
padding: 15px;
background-color: var(--global-bg-color);
transition: transform 0.2s ease-in-out;
&:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
}
.course-title {
margin-top: 0;
margin-bottom: 10px;
}
.course-meta {
font-size: 0.9rem;
color: var(--global-text-color-light);
margin-bottom: 10px;
}
.course-term,
.course-instructor {
margin-right: 15px;
}
.course-description {
font-size: 0.9rem;
margin-bottom: 15px;
p {
margin-bottom: 0;
}
}
.course-info {
margin-bottom: 30px;
}
.course-schedule {
margin-bottom: 30px;
}
.schedule-description {
p {
margin-bottom: 0;
}
}
.schedule-materials {
padding-left: 18px;
margin-bottom: 0;
}