diff --git a/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx b/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx index d3ab6ed..8a29254 100644 --- a/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx +++ b/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx @@ -23,18 +23,18 @@ export default function LearningLecturesPage() { to={`/lecture/${lecture.id}/class`} className={styles.card} > - {lecture.image ? ( - {lecture.title} - ) : ( -
+
+ {lecture.image ? ( + {lecture.title} + ) : ( -
- )} -
{lecture.title}
+ )} +
+
{lecture.title}
)) ) : ( diff --git a/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.module.css b/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.module.css index 69cbc58..24f5418 100644 --- a/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.module.css +++ b/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.module.css @@ -23,9 +23,30 @@ font-weight: 400; color: var(--text-color); min-width: 0; - overflow: hidden; - text-overflow: ellipsis; + border-radius: 20px; white-space: nowrap; + box-sizing: border-box; + + & > .title { + overflow: hidden; + text-overflow: ellipsis; + transition: font-weight 0.25s cubic-bezier(0, 0, 0.5, 1); + font-size: 16px; + line-height: 1.4; + font-weight: 400; + margin: 0; + } + + &:hover { + & > .thumbnail { + box-shadow: 2px 4px 8px #00000029; + scale: 1.05; + } + + & > .title { + font-weight: 600; + } + } } .thumbnail { @@ -40,4 +61,13 @@ object-fit: contain; stroke: var(--text-color-secondary); box-sizing: border-box; + overflow: hidden; + transition: + box-shadow 0.25s cubic-bezier(0, 0, 0.5, 1), + scale 0.25s cubic-bezier(0, 0, 0.5, 1), + rotate 0.25s cubic-bezier(0, 0, 0.5, 1); + + & > img { + background-color: var(--background-secondary); + } }