Style the sidebar pop-overs

- In the popover state, which can be determined from the :checked pseudo
  class, we add a background, border and drop shadow to the sidebars
- Use css backdrop-filter to fuzz out the content slightly
- Improve margins

src/assets/styles/base/_layout.scss

@@ -1,3 +1,37 @@
+/*
+ * Styles that affect the overall layout. Since Technote is built on
+ * sphinx-basic-ng as the base theme, these styles primarily work with
+ * the base theme's sb- classes.
+ */
+
+.sb-container {
+  margin-top: var(--tn-space-md-fixed);
+}
+
+/* Style the prmary sidebar when it's a popover. */
+#sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary {
+  background-color: white;
+  box-shadow: 10px 5px 5px rgb(161, 161, 161);
+  border-right: 1px solid black;
+}
+
+#sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary {
+  background-color: white;
+  box-shadow: -5px 0 5px rgb(161, 161, 161);
+  border-left: 1px solid black;
+  padding-left: var(--tn-space-md-fixed);
+}
+
+#sb-sidebar-toggle--secondary:checked ~ .sb-container .technote-toc-header {
+  margin-top: var(--tn-space-md-fixed);
+}
+
+.sb-sidebar-overlay {
+  // Fuzz out the content slightly
+  backdrop-filter: blur(1.5px) opacity(0.7) brightness(150%);
+  background-color: rgba(0, 0, 0, 0);
+}
+
 /* Highlight key containers for debugging. */
 /* .sb-article {
   border: 1px solid red;
@@ -117,6 +151,12 @@
   .match-content-width {
     width: 32rem;
   }
+
+  // Reset the pop-over specific styling for the sidebar.
+  .sb-sidebar-primary {
+    box-shadow: none;
+    border-right: none;
+  }
   /* h1::after {
     content: ' 76';
   } */
@@ -162,5 +202,5 @@
  * Primary sidebar
  */
 .sb-sidebar-primary {
-  padding: var(--tn-space-xs-fixed);
+  padding: var(--tn-space-md-fixed);
 }