Add stylesheet for sidebar and widgets

config.codekit3

@@ -2834,6 +2834,21 @@
       "pg" : 0,
       "sct" : 0
     },
+    "\/src\/scss\/_sidebar.scss" : {
+      "aP" : 0,
+      "bl" : 0,
+      "co" : 0,
+      "dP" : 10,
+      "ec" : 1,
+      "ft" : 4,
+      "ma" : 0,
+      "oA" : 1,
+      "oAP" : "\/src\/scss\/css\/_sidebar.css",
+      "oF" : 0,
+      "oS" : 3,
+      "pg" : 0,
+      "sct" : 0
+    },
     "\/src\/scss\/_singular.scss" : {
       "aP" : 0,
       "bl" : 0,

includes/functions/_setup-theme.php

@@ -178,6 +178,10 @@ function fictioneer_get_theme_info() {
   return $info;
 }
 
+// =============================================================================
+// SIDEBAR
+// =============================================================================
+
 /**
  * Registers sidebar
  *

sidebar-fictioneer-sidebar.php

@@ -13,6 +13,8 @@ defined( 'ABSPATH' ) OR exit;
 
 ?>
 
-<div id="fictioneer-sidebar" class="sidebar">
+<div id="fictioneer-sidebar" class="fictioneer-sidebar">
-	<?php dynamic_sidebar( 'fictioneer-sidebar' ); ?>
+	<div class="fictioneer-sidebar__wrapper">
+		<?php dynamic_sidebar( 'fictioneer-sidebar' ); ?>
+	</div>
 </div>

src/scss/_sidebar.scss

@@ -0,0 +1,14 @@
+.widget {
+  font-size: var(--fs-widget);
+
+  &.widget_block .wp-block-heading {
+    font-size: 1.1em;
+    margin-bottom: -1.5rem;
+  }
+
+  .widgettitle {
+    font-size: 1.1em;
+    margin-bottom: .625rem;
+  }
+}
+

src/scss/application.scss

@@ -35,6 +35,7 @@
 @import '_profile';
 @import '_showcase';
 @import '_search';
+@import '_sidebar';
 
 @import '_notifications';
 @import '_lightbox';

src/scss/common/_properties.scss

@@ -13,6 +13,7 @@
   // === CONFIGURATION =========================================================
 
   --site-width: #{$full-width}px; // Overridden by theme customizer
+  --sidebar-width: 256px;
   --lightness-offset: 0; // Overridden by theme customizer
   --darken: (1 + var(--lightness-offset));
   --saturation-offset: 0; // Overridden by theme customizer
@@ -392,6 +393,8 @@
   --fs-dxs: #{get_clamp(12, 13, 400, 768)};
   --fs-ds: #{get_clamp(13, 14, 400, 768)};
 
+  --fs-widget: #{clamp(13px, 5.5cqw, 15px)};
+
   // === COLORS - LINKS ========================================================
 
   --heading-link-color: var(--fg-400);