style(course-teaser): make more responsive

frontend/src/utils/course-teaser/course-teaser.scss

@@ -25,6 +25,36 @@
   + [uw-course-teaser] {
     border-top: 1px solid var(--course-border-color);
   }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 140px 1fr;
+    grid-template-areas:
+      'shrthnd chevron'
+      'title   title'
+      'smstr   school'
+      '.       rgstrd'
+      'tutor   name'
+      'duedate date'
+      'dscrptnlbl .'
+      'dscrptn dscrptn';
+  }
+
+  @media (max-width: 426px) {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'shrthnd'
+      'title'
+      'smstr'
+      'school'
+      'rgstrd'
+      'tutor'
+      'name'
+      'duedate'
+      'date'
+      'dscrptnlbl'
+      'dscrptn'
+      'chevron';
+  }
 }
 
 .course-teaser__not-expandable {
@@ -61,6 +91,21 @@
   &:hover::before {
     transform: scale(1.4) rotate(45deg);
   }
+
+  @media (max-width: 768px) {
+    justify-self: end;
+    width: auto;
+
+    &::before {
+      position: initial;
+    }
+  }
+
+  @media (max-width: 426px) {
+    &::before {
+      transform: rotate(45deg);
+    }
+  }
 }
 
 /* semester */
@@ -70,15 +115,27 @@
   a {
     color: var(--color-fontsec);
   }
+
+  @media (max-width: 768px) {
+    justify-self: initial;
+  }
 }
 
 /* shorthand */
 .course-teaser__shorthand {
   position: absolute;
   grid-area: shrthnd;
-  font-size: 2rem;
+
-  font-weight: bold;
+  > a {
-  color: var(--color-grey-medium);
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--color-grey-medium);
+    text-decoration: none !important; /* sry. */
+  }
+
+  @media (max-width: 768px) {
+    position: initial;
+  }
 }
 
 /* title */
@@ -141,22 +198,24 @@
   justify-self: end;
   color: var(--color-fontsec);
   font-style: italic;
+
+  @media (max-width: 768px) {
+    justify-self: initial;
+  }
+
+  @media (max-width: 426px) {
+    margin-top: 7px;
+    font-weight: bold;
+    font-style: initial;
+  }
 }
 
 /* hidden in closed state */
 .course-teaser__description,
-.course-teaser__description-label,
+.course-teaser__description-label {
-.course-teaser__registration {
   display: none;
 }
 
-/* registered courses */
-.course-teaser__registered {
-  .course-teaser__registration {
-      display: block;
-    }
-  }
-
 /* expanded courses */
 .course-teaser__expanded {
   cursor: initial;
@@ -169,6 +228,12 @@
     &:hover::before {
       transform: scale(1.4) rotate(135deg);
     }
+
+    @media (max-width: 426px) {
+      &::before {
+        transform: rotate(225deg);
+      }
+    }
   }
 
   .course-teaser__school-label,

templates/table/course/course-teaser.hamlet

@@ -3,7 +3,9 @@
     <a href=@{TermCourseListR courseTerm}>_{courseSemester}
   <div .course-teaser__school>
     <a href=@{TermSchoolCourseListR courseTerm courseSchool}>_{courseSchoolName}
-  <div .course-teaser__shorthand>_{courseShorthand}
+  <div .course-teaser__shorthand>
+    <a href=@{CourseR courseTerm courseSchool courseShorthand CShowR}>
+      _{courseShorthand}
   <div .course-teaser__title>
     <a href=@{CourseR courseTerm courseSchool courseShorthand CShowR}>
       _{courseName}