added basic styling to templates

package.json

@@ -10,5 +10,8 @@
   },
   "devDependencies": {
     "cypress": "^9.4.1"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.0.24"
   }
 }

server/vbv_lernwelt/templates/base.html

@@ -15,7 +15,7 @@
     <!-- Your stuff: Third-party CSS libraries go here -->
     <!-- This file stores project-specific CSS -->
     <link href="{% static 'css/project.min.css' %}" rel="stylesheet">
-    <link href="{% static 'css/tailwind-output.css' %}" rel="stylesheet">
+    <link href="{% static 'css/output.css' %}" rel="stylesheet">
   {% endblock %}
   <!-- Le javascript
   ================================================== -->

server/vbv_lernwelt/templates/learnpath/circle.html

@@ -5,19 +5,18 @@
 {% block body_class %}template-cicle{% endblock %}
 
 {% block content %}
-  <div>
+  <div class="w-full flex mt-6">
+  <div class="bg-white flex-col w-1/3 m-5">
     <div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
-    <h1>{{ page.title }}</h1>
-    <div>{{ page.description }}</div>
-    <div>{{ page.goals }}</div>
+    <h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
+    <div class="mt4">{{ page.description }}</div>
+    <div class="mt-4">{{ page.goals }}</div>
   </div>
-  <br>
-
-  <div class="intro">{{ page.intro|richtext }}</div>
 
+  <div class="bg-gray-50 flex-col w-2/3">
   {% for learning_sequence in page.get_children %}
-    <div>
-      <h2>{{ learning_sequence.title }}</h2>
+    <div class="p-6 max-w-sm mx-auto bg-white shadow-lg m-4">
+      <h2 class="font-bold">{{ learning_sequence.title }}</h2>
       {% for learning_unit in learning_sequence.get_children %}
         <div>
         <h3>{{ learning_unit.title }}</h3>
@@ -25,5 +24,8 @@
       {% endfor %}
     </div>
   {% endfor %}
+  </div>
+  </div>
+
 
 {% endblock %}

server/vbv_lernwelt/templates/learnpath/learning_path.html

@@ -5,15 +5,24 @@
 {% block body_class %}template-learningpath{% endblock %}
 
 {% block content %}
-    <h1>{{ page.title }}</h1>
+  <h1 class="font-bold text-5xl">{{ page.title }}</h1>
 
   <div class="intro">{{ page.intro|richtext }}</div>
+  <div class="flex flex-row  w-full h-max-80 bg-gray-50 m-4 divide-x-4">
 
     {% for topic in page.get_children %}
-        <h2>{{ topic.title }}</h2>
+      <div class="bg-gray-50-600 m-4">
+        <h2 class="font-bold">{{ topic.title }}</h2>
+        <div class="flex flex-row">
           {% for circle in topic.get_children %}
+            <div class="h-36 w-36 bg-gray-400 m-5">
                        <h2><a href="{% pageurl circle %}">{{ circle.title }}</a></h2>
+            </div>
           {% endfor %}
+        </div>
+      </div>
+
     {% endfor %}
+  </div>
 
 {% endblock %}