feat(frontend): sandwich main content with sidebar on narrow screens

- adjust styling so that some parts of sidebar can go above the main
page content and some below on pages
- get rid of independent main-content margins
- introduce a new base template "base_page_with_side_cards.html" from
which templates using this sandwiching behaviour can inherit
- adjust existing pages to use this template

django/cantusdb_project/articles/templates/article_detail.html

@@ -3,8 +3,14 @@
 {% block content %}
 <div class="container">
     <title>{{ article.title }} | Cantus Database</title>
-    <div class="row">
-        <div class="p-3 col-lg-8 bg-white rounded main-content">
+    <div class="row d-lg-block">
+        <div class="col-lg-4 pl-0 pl-lg-3 pr-0 sidebar float-right">
+            <div class="search-bar mb-3">
+                {% include "global_search_bar.html" %}
+            </div>
+        </div>
+
+        <div class="p-3 col-lg-8 bg-white rounded main-content float-left mb-3">
             <h3>
                 {{ article.title }}
             </h3>
@@ -21,11 +27,8 @@ <h3>
                 </div>
             </div>
         </div>
-        <div class="col p-0 sidebar">
-            <div class="search-bar mb-3">
-                {% include "global_search_bar.html" %}
-            </div>
-            <div class="card mt-3 w-100">
+        <div class="col-lg-4 pl-0 pl-lg-3 pr-0 sidebar float-right">
+            <div class="card">
                 <div class="card-header">
                     What's New
                 </div>

django/cantusdb_project/articles/templates/article_list.html

@@ -3,8 +3,13 @@
 {% block content %}
 <div class="container">
     <title>What's New | Cantus Database</title>
-    <div class="row">
-        <div class="p-3 col-lg-8 bg-white rounded main-content">
+    <div class="row d-lg-block">
+        <div class="col-lg-4 p-0 pl-lg-3 sidebar float-right">
+            <div class="search-bar mb-3">
+                {% include "global_search_bar.html" %}
+            </div>
+        </div>
+        <div class="p-3 col-lg-8 bg-white rounded main-content float-left mb-3">
             <h3>What's New</h3>
             {% for article in articles %}
             <div class="row">
@@ -24,12 +29,8 @@ <h4>
             {% include "pagination.html" %}
             <br>
         </div>
-        <div class="col p-0 sidebar">
-            <div class="search-bar mb-3">
-                {% include "global_search_bar.html" %}
-            </div>
-
-            <div class="card mt-3 w-100">
+        <div class="col-lg-4 p-0 pl-lg-3 sidebar float-right">
+            <div class="card">
                 <div class="card-header">
                     What's New
                 </div>

django/cantusdb_project/main_app/templates/base_page_with_side_cards.html

@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+{% block content %}
+{% block title %}
+{% endblock %}
+{% block script %}
+{% endblock %}
+
+<div class="container">
+    <div class="row d-lg-block">
+        <div class="col-lg-4 p-0 pl-lg-3 sidebar float-right">
+            {% block uppersidebar %}
+            {# Cards in this section will jump above the main content on small screens #}
+            {% endblock %}
+        </div>
+        <div class="p-3 col-lg-8 bg-white rounded main-content float-left mb-3">
+            {% block maincontent %}
+            {% endblock %}
+        </div>
+
+        <div class="col-lg-4 p-0 pl-lg-3 sidebar float-right">
+            {% block lowersidebar %}
+            {# Cards in this section will jump below the main content on small screens #}
+            {% endblock %}
+        </div>
+    </div>
+</div>
+{% endblock %}