Update styles

static/scss/style.scss

@@ -18,6 +18,10 @@
       format("svg"); /* Legacy iOS */
 }
 
+:root {
+  --primary: #f8d270;
+}
+
 *,
 body {
   font-family: "Rubik", sans-serif;
@@ -49,9 +53,30 @@ body {
   background: #999;
 }
 
-// .btn {
+/* Override the text selection highlight color */
-//   border-radius: 2px;
+::selection {
-// }
+  background-color: var(
+    --primary
+  ); /* Custom background color for selected text */
+  color: #000; /* Custom text color for selected text */
+}
+
+a {
+  color: var(--bs-primary);
+  text-decoration: none;
+}
+
+table .info {
+  margin-left: -240px;
+}
+
+video {
+  max-width: 100%;
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
+    0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16),
+    0px 2px 10px 0px rgba(0, 0, 0, 0.12);
+}
 
 .dim {
   /* For Internet Explorer */
@@ -61,9 +86,17 @@ body {
 }
 
 .table {
+  width: 100%;
+  border-collapse: collapse;
+  th {
+    background-color: #f2f2f2;
+  }
   td,
   th {
     vertical-align: middle;
+    padding: 8px;
+    border: 1px solid #ddd; /* Add thin borders for separation */
+    text-align: left;
   }
   tbody > tr > td > a {
     display: flex;
@@ -409,6 +442,7 @@ body {
     left: -300px;
   }
 }
+
 @media screen and (max-width: 1150px) {
   #side-nav .top-side {
     padding-top: 3rem;
@@ -489,11 +523,6 @@ body {
   }
 }
 
-a {
-  color: var(--bs-primary);
-  text-decoration: none;
-}
-
 .title-1 {
   position: relative;
   display: inline-flex;
@@ -502,6 +531,7 @@ a {
   text-transform: capitalize;
   font-weight: 700;
   font-size: 24px;
+  margin-bottom: 16px;
   border-radius: 0.2em;
 
   &::before {
@@ -1163,36 +1193,10 @@ a {
   vertical-align: middle;
 }
 
-.table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table th,
-.table td {
-  padding: 8px;
-  border: 1px solid #ddd; /* Add thin borders for separation */
-  text-align: left;
-}
-
-.table th {
-  background-color: #f2f2f2;
-}
-
-.title-1 {
-  font-size: 24px;
-  margin-bottom: 16px;
-}
-
 .text-danger {
   color: red;
 }
 
-a {
-  color: black;
-  text-decoration: none;
-}
-
 .user-picture {
   width: 100px;
   height: 100px;
@@ -1201,10 +1205,6 @@ a {
   object-fit: cover;
 }
 
-table .info {
-  margin-left: -240px;
-}
-
 /* Specific to the .dashboard-description class */
 .dashboard-description strong {
   font-weight: 600;
@@ -1218,36 +1218,10 @@ table .info {
   margin-bottom: 15px;
 }
 
-.table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table th,
-.table td {
-  padding: 8px;
-  border: 1px solid #ddd; /* Add thin borders for separation */
-  text-align: left;
-}
-
-.table th {
-  background-color: #f2f2f2;
-}
-
-.title-1 {
-  font-size: 24px;
-  margin-bottom: 16px;
-}
-
 .text-danger {
   color: red;
 }
 
-a {
-  color: black;
-  text-decoration: none;
-}
-
 .bg-light-warning {
   background-color: rgb(252, 217, 111) !important;
 }
@@ -1256,19 +1230,6 @@ a {
   display: none;
 }
 
-.session-wrapper {
-  position: relative;
-}
-.session {
-  position: absolute;
-  top: -15px;
-  right: 25px;
-  z-index: 2;
-}
-.br-orange {
-  border: 1px solid #fd7e14;
-  border-radius: 7px;
-}
 .class-item {
   display: block;
   border-left: 4px solid #6cbd45;
@@ -1277,31 +1238,19 @@ a {
   border-radius: 3px;
   box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
   transition: 0.5s;
+  &:hover {
+    transform: translateX(15px);
   }
-.class-item p {
+  p {
     padding: 2px;
     margin: 0;
     color: #b4b4b4;
     transition: 0.5s;
   }
-.class-item a {
+  a {
     padding: 2px;
     color: #343a40;
     text-decoration: none;
     transition: 0.5s;
   }
-.class-item:hover {
-  transform: translateX(15px);
-}
-
-video {
-  max-width: 100%;
-  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
-    0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16),
-    0px 2px 10px 0px rgba(0, 0, 0, 0.12);
-}
-
-.breadcrumb-item a {
-  color: var(--bs-primary);
 }

templates/search/search_view.html

@@ -19,54 +19,43 @@
     {% for object in object_list %}
         {% with object|class_name as klass %}
         {% if klass == "Program" %}
-            <div class="session-wrapper">
-                <div class="session"><div class="info-text bg-secondary text-light px-2 rounded-pill">{% trans 'Program' %}</div></div>
-            </div>
             <div class="col-12 class-item">
-                <!-- <p><b>Program of</b> {{ object }}</p> -->
+                <span class="bg-secondary text-light small px-2 rounded-pill">{% trans 'Program' %}</span>
-                <h4><a href="{{ object.get_absolute_url }}"><b>{{ object.title}}</b></a></h4>
+                <h5><a href="{{ object.get_absolute_url }}"><b>{{ object.title}}</b></a></h5>
                 <p>{{ object.summary }}</p>
             </div><hr>
 
         {% elif klass == "Course" %}
-            <div class="session-wrapper">
-                <div class="session"><div class="info-text bg-secondary text-light px-2 rounded-pill">{% trans 'Course' %}</div></div>
-            </div>
             <div class="col-12 class-item">
+                <span class="bg-secondary text-light small px-2 rounded-pill">{% trans 'Course' %}</span>
                 <p><b>{% trans 'Program of' %}</b> {{ object.program }}</p>
-                <h4><a href="{{ object.get_absolute_url }}"><b>{{ object }}</b></a></h4>
+                <h5><a href="{{ object.get_absolute_url }}"><b>{{ object }}</b></a></h5>
                 <p>{{ object.summary }}</p>
             </div><hr>
             
         {% elif klass == "NewsAndEvents" %}
-            <div class="session-wrapper">
-                <div class="session"><div class="info-text bg-secondary text-light px-2 rounded-pill">{% trans 'News And Events' %}</div></div>
-            </div>
             <div class="col-12 class-item">
+                <span class="bg-secondary text-light small px-2 rounded-pill">{% trans 'News And Events' %}</span>
                 <p><b>{% trans 'Date:' %} </b> {{ object.updated_date|timesince }} ago</p>
-                <h4><a href="{{ object.get_absolute_url }}"><b>{{ object.title }}</b></a></h4>
+                <h5><a href="{{ object.get_absolute_url }}"><b>{{ object.title }}</b></a></h5>
                 <p>{{ object.summary }}</p>
             </div><hr>
 
         {% elif klass == "Quiz" %}
-            <div class="session-wrapper">
-                <div class="session"><div class="info-text bg-secondary text-light px-2 rounded-pill">{% trans 'Quiz' %}</div></div>
-            </div>
             <div class="col-12 class-item">
+                <span class="bg-secondary text-light small px-2 rounded-pill">{% trans 'Quiz' %}</span>
                 <p>{{ object.category }} {% trans 'quiz' %},  <b>{% trans 'Course:' %}</b> {{ object.course }}</p>
-                <h4><a href="{{ object.get_absolute_url }}"><b>{{ object.title }}</b></a></h4>
+                <h5><a href="{{ object.get_absolute_url }}"><b>{{ object.title }}</b></a></h5>
                 <p>{{ object.description }}</p>
             </div><hr>
 
         {% else %}
-            <div class="session-wrapper">
-                <div class="session"><div class="info-text bg-secondary text-light px-2 rounded-pill">{% trans 'Program' %}</div></div>
-            </div>
             <div class="col-12 col-lg-8 offset-lg-4">
+                <span class="bg-secondary text-light small px-2 rounded-pill">{% trans 'Program' %}</span>
                 <a href="{{ object.get_absolute_url }}" class="class-item d-flex">{{ object }} | {{ object|class_name }}</a>
             </div><hr>
             <div class="col-12 class-item">
-                <h4><a href="{{ object.get_absolute_url }}">{{ object }} | <b>{{ object|class_name }}</b></a></h4>
+                <h5><a href="{{ object.get_absolute_url }}">{{ object }} | <b>{{ object|class_name }}</b></a></h5>
                 <p>{{ object.description }}</p>
             </div><hr>
         {% endif %}

templates/sidebar.html

@@ -136,7 +136,7 @@
 			</form>
 
 			<p class="small m-0">
-				{% trans 'Read our' %} <a href="#"> {% trans 'Privacy' %} </a> {% trans 'and' %} <a href="#"> {% trans 'Terms of use.' %}' </a>
+				{% trans 'Read our' %} <a href="#"> {% trans 'Privacy' %} </a> {% trans 'and' %} <a href="#"> {% trans 'Terms of use.' %} </a>
 				<br />SkyLearn &copy; <script>document.write(new Date().getFullYear());</script>
 				<br />
 			</p>