refactor: switched to less for css

- Added build setup to include styles.less in building community.css
- The old styles are still in style.css. Those styles will be slowly moved to style.less.
- Move all the new styles to style.less

community/public/build.json

@@ -3,6 +3,8 @@
     "public/css/lms.css"
   ],
   "css/community.css": [
-    "public/css/style.css"
+    "public/css/vars.css",
+    "public/css/style.css",
+    "public/css/style.less"
   ]
 }

community/public/css/style.css

@@ -290,70 +290,3 @@ img.profile-photo {
   margin-left: 5%;
   display: inline-block;
 }
-
-.sketch-teaser {
-  background: white;
-  border-radius: 10px;
-  border: 1px solid #ddd;
-  width: 220px;
-}
-
-.sketch-teaser svg {
-  width: 200px;
-  height: 200px;
-}
-
-.sketch-image {
-  padding: 10px;
-}
-
-.sketch-footer {
-  padding: 10px;
-  background: #eee;
-  border-radius: 0px 0px 10px 10px;
-}
-
-.course-teaser {
-  background: white;
-  border-radius: 10px;
-  border: 1px solid #ddd;
-  color: #444;
-}
-
-.course-teaser h3, .course-teaser h4 {
-  color: black;
-  font-weight: bold;;
-}
-
-.course-teaser .course-body, .course-teaser .course-footer {
-  padding: 20px;
-}
-
-.course-body {
-  min-height: 8em;
-}
-
-.course-footer {
-  border-top: 1px solid #ddd;
-}
-
-.course-teaser a, .course-teaser a:hover {
-  color: inherit;
-  text-decoration: none;
-}
-
-section {
-  padding: 60px 0px;
-}
-
-section h2 {
-  margin-bottom: 40px;
-}
-
-section.lightgray {
-  background: #f8f8f8;
-}
-
-#hero .jumbotron {
-  background: inherit;
-}

community/public/css/style.less

@@ -0,0 +1,68 @@
+@primary-color: #08B74F;
+
+.teaser {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+}
+
+.sketch-teaser {
+  .teaser();
+  width: 220px;
+
+  svg {
+    width: 200px;
+    height: 200px;
+  }
+  .sketch-image {
+    padding: 10px;
+  }
+  .sketch-footer {
+    padding: 10px;
+    background: #eee;
+    border-radius: 0px 0px 10px 10px;
+  }
+}
+
+.course-teaser {
+  .teaser();
+  color: #444;
+
+  h3, h4 {
+    color: black;
+    font-weight: bold;
+  }
+
+  .course-body, .course-footer {
+    padding: 20px;
+  }
+
+  .course-body {
+    min-height: 8em;
+  }
+
+  .course-footer {
+    border-top: 1px solid #ddd;
+  }
+
+  a, a:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+section {
+  padding: 60px 0px;
+}
+
+section h2 {
+  margin-bottom: 40px;
+}
+
+section.lightgray {
+  background: #f8f8f8;
+}
+
+#hero .jumbotron {
+  background: inherit;
+}

community/public/css/vars.css

@@ -0,0 +1,4 @@
+/* Define all your css variables here. */
+:root {
+  --primary-color: #08B74F;
+}