refactor: fixed the course page

community/public/css/style.css

@@ -34,82 +34,8 @@ body {
   margin: 0px;
 }
 
-.course-header {
-  margin-top: 20px;
-  padding: 20px;
-  background: var(--header-bg);
-  color: var(--header-color);
-  border-radius: 9px;
-}
 
-.course-author-avatar {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  margin-right: 20px;
-}
-
-.course-header h1 {
-  color: inherit;
-}
-
-.course-type {
-  text-transform: uppercase;
-  font-size: 1.0em;
-  color: var(--tag-color);
-}
-
-.sidebar {
-  background: var(--sidebar-bg);
-  margin: 20px 0px;
-  border-radius: 10px;
-  padding: 1px 20px 20px 20px;
-  color: var(--text-color);
-}
-
-.sidebar h3 {
-  margin-top: 20px;
-  color: var(--c2);
-}
-
-.sidebar-batch {
-  background: var(--sidebar-bg);
-  color: var(--text-color);
-  position: fixed;
-  left: 0;
-  height: 100%;
-}
-
-.sidebar-batch a {
-  padding: 16px 8px 8px 16px;
-  display: block;
-}
-
-.instructor {
-  padding: 10px;
-}
-
-.instructor-title {
-  font-weight: bold;
-}
-
-.instructor-subtitle {
-  font-size: 0.8em;
-  color: var(--text-color);
-}
-
-.sidebar .notice {
-  padding: 10px;
-  border-radius: 10px;
-  border: 1px dashed var(--text-color);
-}
-
-.sidebar .notice a {
-  color: inherit;
-  text-decoration: underline;
-}
-
-.course-details {
+/* .course-details {
   margin: 20px 0px;
 }
 
@@ -118,7 +44,7 @@ body {
   font-size: 1.4em;
   font-weight: bold;
   margin: 20px 0px 10px 0px;
-}
+} */
 
 .chapter-plan {
   border-radius: 10px;
@@ -133,7 +59,7 @@ body {
   font-weight: bold;
 }
 
-.chapter-number {
+/* .chapter-number {
   background: var(--text-color);
   color: white;
   border-radius: 50%;
@@ -146,7 +72,7 @@ body {
 
 .chapter-description {
   margin: 20px 0px;
-}
+} */
 
 .lessons {
   padding-left: 20px;
@@ -302,4 +228,4 @@ img.profile-photo {
   color: #2D005A;
   font-weight: 600;
   line-height: 51px;
-}
+}

community/public/css/style.less

@@ -5,6 +5,11 @@ body {
   font-family: "Inter", sans-serif;
 }
 
+h2 {
+  margin: 20px 0px;
+  color: black;
+}
+
 .teaser {
   background: white;
   border-radius: 9px;
@@ -122,3 +127,108 @@ section.lightgray {
   padding: 2rem 0px;
   margin-top: 2rem;
 }
+
+.course-type {
+  text-transform: uppercase;
+  font-size: 1.0em;
+  font-weight: bold;
+  color: var(--tag-color);
+}
+
+.course-header {
+  margin-top: 20px;
+}
+
+/*
+.course-header {
+  margin-top: 20px;
+  padding: 20px;
+  background: var(--header-bg);
+  color: var(--header-color);
+  border-radius: 9px;
+}
+
+.course-author-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 20px;
+}
+
+.course-header h1 {
+  color: inherit;
+}
+
+*/
+
+// .gray-section {
+//   background:#F6F6F6;
+//   border: 1px solid #C4C4C4;
+//   padding: 20px;
+//   margin: 20px 0px;
+// }
+
+.instructor-title {
+  font-weight: bold;
+  color: black;
+}
+
+.instructor-subtitle {
+  font-size: 0.8em;
+  color: var(--text-color);
+}
+
+// .mentors-wrapper {
+//   .gray-section();
+// }
+
+
+.chapter-number {
+  background: var(--text-color);
+  color: white;
+  border-radius: 50%;
+  height: 24px;
+  min-width: 24px;
+  align-items: center;
+  padding: 5px 8px 2px 8px;
+  margin-right: 5px;
+}
+
+.sidebar {
+  background: var(--sidebar-bg);
+  border: 1px solid var(--sidebar-border);
+  margin: 20px 0px;
+  border-radius: 10px;
+  padding: 1px 20px 20px 20px;
+}
+
+.sidebar h3 {
+  margin-top: 20px;
+  color: black;
+}
+
+.sidebar-batch {
+  background: var(--sidebar-bg);
+  color: var(--text-color);
+  position: fixed;
+  left: 0;
+  height: 100%;
+}
+
+.sidebar-batch a {
+  padding: 16px 8px 8px 16px;
+  display: block;
+}
+
+
+.sidebar .notice {
+  margin-top: 10px;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px dashed var(--text-color);
+}
+
+.sidebar .notice a {
+  color: inherit;
+  text-decoration: underline;
+}

community/public/css/vars.css

@@ -1,4 +1,7 @@
 /* Define all your css variables here. */
 :root {
   --primary-color: #08B74F;
+  --tag-color: #737373;
+  --sidebar-bg: #F6F6F6;
+  --sidebar-border: #C4C4C4;
 }