feat: Design course outline page (#4)

edly-io · Nov 22, 2023 · 5bdfd7f · 5bdfd7f
1 parent 7871a98
commit 5bdfd7f
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 14 deletions.
diff --git a/favicon.ico b/favicon.ico
diff --git a/logo-trademark.png b/logo-trademark.png
diff --git a/logo-trademark.svg b/logo-trademark.svg
diff --git a/logo.png b/logo.png
diff --git a/logo.svg b/logo.svg
diff --git a/paragon/_footer.scss b/paragon/_footer.scss
@@ -0,0 +1,35 @@
+footer.footer {
+  border-top: 0 !important;
+  padding: 1rem;
+  background: transparent;
+  color: $footer-text-color;
+
+  .copyright {
+    font-size: 1.25rem;
+    font-weight: $font-weight-semi-bold;
+    padding: 1rem 0;
+
+    @media (min-width: map-get($grid-breakpoints, "md")) {
+      padding: 0;
+    }
+  }
+
+  .container-fluid {
+    @media (max-width: (-1 + map-get($grid-breakpoints, "md"))) {
+      flex-direction: column;
+    }
+
+    &:first-child {
+      background: $white;
+      max-width: 1660px;
+      padding: 1rem;
+      border-radius: $default-radius;
+      border: 1px solid $gray-light;
+      min-height: 120px;
+
+      @media (min-width: map-get($grid-breakpoints, "md")) {
+        padding: 1rem 2.5rem;
+      }
+    }
+  }
+}
diff --git a/paragon/_header.scss b/paragon/_header.scss
@@ -0,0 +1,61 @@
+.learning-header {
+  min-width: 0;
+  padding: $spacer $spacer 0;
+
+  .drop-icon {
+    width: 40px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .dropdown-toggle {
+    font-size: 1.5rem;
+
+    &:after {
+      height: 0;
+      width: 0;
+      border-color: $gray-light transparent;
+
+      [dir="rtl"] & {
+        transform: rotate(0);
+        border-width: 12px 6px 0;
+      }
+
+      [dir="ltr"] & {
+        transform: rotate(0);
+        border-width: 12px 6px 0;
+      }
+    }
+  }
+
+  .course-title-lockup {
+
+    @media only screen and (min-width: 769px) {
+      padding: .5rem;
+    }
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.375rem;
+    }
+
+    .course-title {
+      @media only screen and (min-width: 1024px) {
+        font-size: 1.5rem;
+      }
+    }
+  }
+
+  .container-xl {
+    max-width: 1660px;
+    background: $white;
+    min-height: 120px;
+    border-radius: $default-radius;
+    border: 1px solid $gray-light;
+    @media only screen and (min-width: 1024px) {
+      padding: 1rem 2.25rem;
+    }
+  }
+}
diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss
@@ -1,2 +1,8 @@
 // Use this file to define style overrides for @edx/paragon
 // This file is included after all Paragon styles, but should generally avoid using private mixins in Paragon.
+@import './header';
+@import './footer';
+
+.dropdown {
+  font-weight: $font-weight-semi-bold;
+}
diff --git a/paragon/_variables.scss b/paragon/_variables.scss
@@ -1,16 +1,70 @@
-$white:    #FFFFFF !default;
-$gray-700: #101820 !default;
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
-$primary: #1D355E !default;
-$secondary: $gray-700 !default;
-$brand: $primary;
+// Color system
+$white:                    #fff;
+$gray-700:                 #101820;
+$gray-light:               #d9d9d9;
+$gray-light-400:           #f3f2ee;
+$gray-light-500:           #8a8a8a;
+$orange:                   #ea6852;
+$coo-blue:                 #1c355e;
+$green:                    #198754;
 
-$yiq-text-light:            $white !default;
-$yiq-text-dark:             $gray-700 !default;
+$primary:                   $coo-blue;
+$secondary:                 $orange;
+$brand:                     $primary;
+$success:                   $green;
+
+$default-radius:            1rem;
+
+
+// Body
+//
+// Settings for the `<body>` element.
+$body-bg:                   #f9f8f5;
+$body-color:                $primary;
+$dropdown-bg:               $white;
+$footer-text-color:         $gray-light-500;
+
+$yiq-text-light:            $white;
+$yiq-text-dark:             $primary;
+
+$headings-color:            $primary;
+$default-border-color:      $gray-light;
 
 $body-bg:                   $white !default;
 
-$headings-color:            $gray-700 !default;
+// Components
+// Style Components elements.
+// Define common padding and border radius sizes and more.
+
+// Links
+$link-color:                $primary;
+$link-hover-color:          $secondary;
+$link-hover-decoration:     none;
+
+// Buttons
+$btn-border-radius:         $default-radius;
+
+// Dropdown
+$dropdown-bg:               $white;
+$dropdown-border-radius:    $default-radius;
+$dropdown-min-width:        14.5rem;
+$dropdown-border-color:     $default-border-color;
+$dropdown-link-color:       $primary;
+$dropdown-link-hover-bg:    'none';
+$dropdown-link-hover-color:  $secondary;
+$dropdown-link-active-bg:    'none';
+$dropdown-link-active-color: $secondary;
+$dropdown-item-padding-y:    0.75rem;
+$dropdown-item-padding-x:    2rem;
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
 
 
 // stylelint-disable value-keyword-case
@@ -21,3 +75,6 @@ $font-family-serif:           Plex, serif !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
   "Courier New", monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base:            1.25rem;  // `20px` Assumes the browser default, typically `16px`