fix the position of content by adding top-padding for body

uhm-descartes · Jan 14, 2024 · 479a83e · 479a83e
1 parent dc58212
commit 479a83e
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 17 deletions.
diff --git a/_includes/entity-card.html b/_includes/entity-card.html
@@ -20,11 +20,14 @@ <h4 class="card-title">{{ include.title }}</h4>
     {% endif %}
     </div>
 
-    <div style="border-top-color: transparent" class="card-footer bg-body">
+    {% if include.labels.size > 0 %}
+    <!-- <div style="border-top-color: transparent" class="card-footer bg-body"> -->
+    <div class="card-footer">
       {% for label in include.labels %}
-      <span class="badge bg-primary">{{ label }}</span>
+      <span class="badge {% if include.type == 'reading' %}bg-primary{% elsif include.type == 'experience' %}bg-success{% elsif include.type == 'assessment' %}bg-danger{% endif %}">{{ label }}</span>
       {% endfor %}
     </div>
+    {% endif %}
     <a href="{{ include.url }}" class="stretched-link"></a>
   </div>
 </div>
diff --git a/_layouts/core.html b/_layouts/core.html
@@ -45,8 +45,9 @@
 </head>
 <body>
 
-<div class="navbar navbar-expand-lg {{site.morea_theme_navbar_bg}}">
-<!--<div class="navbar navbar-expand-lg bg-primary fixed-top">-->
+<div class="navbar navbar-expand-lg bg-primary fixed-top" data-bs-theme="dark" style>
+<!-- <div class="navbar navbar-expand-lg {{site.morea_theme_navbar_bg}} fixed-top"> -->
+<!-- <div class="navbar navbar-expand-lg bg-primary fixed-top"> -->
   <div class="container">
     <a class="navbar-brand" href="{{ site.baseurl }}/index.html"> {{ site.name }} </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,9 +6,6 @@
 <div class="container">
   {{ content }}
 </div>
-<div class="table-of-contents">
-  <!-- Table of Contents will be automatically inserted here -->
-</div>
 {% else %}
 {{ content }}
 {% endif %}
diff --git a/_layouts/module.html b/_layouts/module.html
@@ -1,6 +1,7 @@
 ---
 layout: default
 ---
+
 {% include breadcrumb-3.html %}
 
 <div class="container">
@@ -51,7 +52,7 @@ <h3>{{ outcome.title }}</h3>
 {% unless page.morea_page.morea_readings.size == 0 %}
 <div class="{% cycle 'section-background-1', 'section-background-2' %}">
   <div class="container">
-  <h2>Readings</h2>
+  <h2 class="text-primary">Readings</h2>
 
     <div class="row">
       {% for page_id in page.morea_page.morea_readings %}
@@ -66,7 +67,7 @@ <h2>Readings</h2>
 {% unless page.morea_page.morea_experiences.size == 0 %}
 <div class="{% cycle 'section-background-1', 'section-background-2' %}">
   <div class="container">
-  <h2>Experiential Learning</h2>
+  <h2 class="text-success">Experiential Learning</h2>
     <div class="row">
       {% for page_id in page.morea_page.morea_experiences %}
         {% assign experience = site.morea_page_table[page_id] %}
@@ -80,7 +81,7 @@ <h2>Experiential Learning</h2>
 {% unless page.morea_page.morea_assessments.size == 0 %}
 <div class="{% cycle 'section-background-1', 'section-background-2' %}">
   <div class="container">
-    <h2>Assessments</h2>
+    <h2class="text-danger">Assessments</h2>
     <div class="row">
     {% for page_id in page.morea_page.morea_assessments %}
       {% assign assessment = site.morea_page_table[page_id] %}

diff --git a/assessments/index.md b/assessments/index.md
@@ -25,7 +25,7 @@ title: Assessments
        <div class="row">
        {% for page_id in module.morea_assessments %}
          {% assign assessment = site.morea_page_table[page_id] %}
-         {% include entity-card.html url=assessment.morea_url title=assessment.title summary=assessment.morea_summary labels=assessment.morea_labels outcomes=assessment.morea_outcomes_assessed_titles %}
+         {% include entity-card.html type="assessment" url=assessment.morea_url title=assessment.title summary=assessment.morea_summary labels=assessment.morea_labels outcomes=assessment.morea_outcomes_assessed_titles %}
        {% endfor %}
     </div>
   </div>

diff --git a/css/style.css b/css/style.css
@@ -1,5 +1,17 @@
 /* Use this file to make simple customizations to your site theme. */
 
+/* Add top padding to the body so that the content starts at the correct position when the navbar is fixed-top */
+body {
+  padding-top: 60px; /* Height for larger screens */
+}
+
+@media (max-width: 768px) {
+  body {
+      padding-top: 100px; /* Increased height for smaller screens */
+  }
+}
+
+
 /* Make link anchors aware of sticky navbar */
 :target {
   scroll-margin-top: 60px;
@@ -31,11 +43,13 @@
 .section-background-1 {
   padding-top: 1em;
   padding-bottom: 1em;
+  background-color: var(--bs-gray-100);
 }
 
 .section-background-2 {
   padding-top: 1em;
   padding-bottom: 1em;
+  background-color: var(--bs-white);
 }
 
 h1, h2, h3 {

diff --git a/experiences/index.md b/experiences/index.md
@@ -26,7 +26,7 @@ title: Experiences
     <div class="row">
     {% for page_id in module.morea_experiences %}
       {% assign experience = site.morea_page_table[page_id] %}
-      {% include entity-card.html url=experience.morea_url title=experience.title summary=experience.morea_summary labels=experience.morea_labels %}
+      {% include entity-card.html type="experience" url=experience.morea_url title=experience.title summary=experience.morea_summary labels=experience.morea_labels %}
     {% endfor %}
     </div>
   </div>

diff --git a/modules/index.md b/modules/index.md
@@ -2,6 +2,7 @@
 layout: default
 title: Modules
 ---
+
 {% include breadcrumb-2.html %}
 
 <div class="container">

diff --git a/morea/01-introduction/module-introduction.md b/morea/01-introduction/module-introduction.md
@@ -13,7 +13,7 @@ morea_assessments:
 morea_type: module
 morea_icon_url: /morea/01-introduction/introduction.jpg
 morea_start_date: "2024-01-07"
-morea_end_date: "2024-01-07T23:00"
+morea_end_date: "2024-01-08T23:00"
 morea_labels:
 morea_sort_order: 10
 ---

diff --git a/morea/02-overview/reading-building-blocks.md b/morea/02-overview/reading-building-blocks.md
@@ -8,9 +8,6 @@ morea_type: reading
 morea_labels:
 ---
 
-* TOC
-{:toc}
-
 # Basic building blocks
 
 Here is the block diagram of a typical <span style="color: red;">point-to-point</span> communication system. The top row are blocks in the transmitter, and the bottom row are blocks in the receiver.

diff --git a/readings/index.md b/readings/index.md
@@ -22,7 +22,7 @@ title: Readings
     <div class="row">
     {% for page_id in module.morea_readings %}
       {% assign reading = site.morea_page_table[page_id] %}
-      {% include entity-card.html url=reading.morea_url title=reading.title summary=reading.morea_summary labels=reading.morea_labels %}
+      {% include entity-card.html type="reading" url=reading.morea_url title=reading.title summary=reading.morea_summary labels=reading.morea_labels %}
     {% endfor %}
     </div>
   </div>