style: update course list style

jamesx00 · Dec 19, 2024 · 5deca33 · 5deca33
1 parent d63a907
commit 5deca33
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 30 deletions.
diff --git a/_includes/layouts/course.njk b/_includes/layouts/course.njk
@@ -11,7 +11,7 @@ layout: layouts/base.njk
             <h1 class="text-2xl md:text-3xl">{{ title }}</h1>
             {% if is_under_development %}
                 <div class="mb-4">
-                    <span class="text-sm text-red-600">This course is under development. New content is being added regularly.</span>
+                    <span class="text-sm text-red-600">This course is under development. We will be adding more lessons regularly.</span>
                 </div>
             {% endif %}
             {# {{ content | safe }} #}

diff --git a/public/css/tailwind.css b/public/css/tailwind.css
@@ -1664,10 +1664,6 @@ h4 {
   width: 100vw;
 }
 
-.min-w-full {
-  min-width: 100%;
-}
-
 .max-w-4xl {
   max-width: 56rem;
 }
@@ -1792,6 +1788,10 @@ h4 {
   gap: 1rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1940,6 +1940,26 @@ h4 {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -2252,6 +2272,11 @@ h4 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -3774,14 +3799,6 @@ code {
     width: 20rem;
   }
 
-  .md\:min-w-0 {
-    min-width: 0px;
-  }
-
-  .md\:max-w-prose {
-    max-width: 65ch;
-  }
-
   .md\:flex-1 {
     flex: 1 1 0%;
   }
@@ -3790,6 +3807,10 @@ code {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:justify-center {
     justify-content: center;
   }

diff --git a/public/js/lesson.js b/public/js/lesson.js
@@ -11,7 +11,6 @@
 /**
  * @type {MonacoFile}
  */
-
 // Monaco editor and code execution
 require(["vs/editor/editor.main"], function () {
 	const completeAndNextModalContainer = document.getElementById(
@@ -67,7 +66,7 @@ require(["vs/editor/editor.main"], function () {
 		fileGroupSelector: "#file-group",
 		userLanguage: getUserLanguage(),
 		allowAddFile: isAddingFilesAllowed,
-		showHiddenFiles: localStorage.getItem('editor.showHiddenFiles') === 'true',
+		showHiddenFiles: localStorage.getItem("editor.showHiddenFiles") === "true",
 		callbacks: {
 			onDidChangeFileGroup: (multipleFileGroupEditor) => {
 				const fileGroupHasTest =

diff --git a/src/index.njk b/src/index.njk
@@ -22,20 +22,19 @@ eleventyNavigation:
   </div>
   <div class="max-w-4xl mx-auto py-16">
     <h2 class="text-xl md:text-2xl text-primary-700 mb-6">Courses</h2>
-    <p class="mb-12 text-gray-700">
-      All the courses on this website is free.
-    </p>
-    {% for course in collections.course|filter("hidden", undefined) %}
-      <div class="relative group mb-12">
-        <h4 class="mb-4 font-victor-mono">{{ course.data.title }}</h4>
-        <p class="text-gray-600 mb-4 font-victor-mono">{{ course.data.description }}</p>
-        {% if course.data.is_under_development %}
-          <div class="mb-4">
-            <span class="text-sm text-red-600">Under development</span>
-          </div>
-        {% endif %}
-        <a href="{{ course.url }}" class="text-sm text-blue-600 hover:underline stretched-link">Start learning</a>
-      </div>
-    {% endfor %}
+    <div class="grid md:grid-cols-3 gap-6">
+      {% for course in collections.course|filter("hidden", undefined) %}
+        <div class="relative group mb-12">
+          <h4 class="mb-2 font-victor-mono">{{ course.data.title }}</h4>
+          {% if course.data.is_under_development %}
+            <div class="text-xs mb-4 bg-yellow-300 rounded-md px-2 inline-block">
+              <span class="text-slate-600">Under development</span>
+            </div>
+          {% endif %}
+          <p class="text-gray-600 mb-4 font-victor-mono">{{ course.data.description }}</p>
+          <a href="{{ course.url }}" class="text-sm text-blue-600 hover:underline stretched-link">Start learning</a>
+        </div>
+      {% endfor %}
+    </div>
   </div>
 </div>