🚧 fix user-guide header

Now using proprietary styles for the user guide - not shared with docs.  We are able to better isolate and fix issues with the user guide header without having to touch antora.

core/views.py

@@ -351,7 +351,7 @@ class UserGuideTemplateView(StaticContentTemplateView):
 
         context = {"disable_theme_switcher": False}
         base_html = render_to_string(
-            "docs_libs_placeholder.html", context, request=self.request
+            "userguide_placeholder.html", context, request=self.request
         )
         insert_body = modernize == "max"
         head_selector = (

frontend/userguidestyles.css

@@ -0,0 +1,32 @@
+@tailwind components;
+@tailwind utilities;
+
+[x-cloak] {
+  display: none !important;
+}
+
+body {
+  @apply h-screen font-cairo;
+  @apply font-cairo;
+}
+
+body.article {
+  @apply pt-0;
+}
+
+#headblock {
+ @apply border-0;
+}
+
+aside.nav,
+div.toolbar {
+  @apply top-10;
+}
+
+hr:first-of-type {
+  @apply border-0;
+}
+
+#mobile-menu-button {
+  @apply outline-none border-0 bg-transparent;
+}

package.json

@@ -8,7 +8,8 @@
   "scripts": {
     "dev": "tailwindcss -i frontend/styles.css -o static/css/styles.css --watch",
     "build": "NODE_ENV=production tailwindcss -i frontend/styles.css -o static/css/styles.css --minify",
-    "builddocs": "NODE_ENV=production tailwindcss -c ./docstailwind.config.js -i frontend/docsstyles.css -o static/css/docsstyles.css --minify"
+    "builddocs": "NODE_ENV=production tailwindcss -c ./docstailwind.config.js -i frontend/docsstyles.css -o static/css/docsstyles.css --minify",
+    "builduserguide": "NODE_ENV=production tailwindcss -c ./userguidetailwind.config.js -i frontend/userguidestyles.css -o static/css/userguidestyles.css --minify"
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.3",

templates/includes/_header.html

@@ -6,7 +6,7 @@
 
   <div class="relative mx-auto">
     <div class="max-w-7xl md:px-1 md:px-6 mx-auto">
-      <div class="hidden items-center py-1 px-2 border-b-2 border-gray-300 md:flex dark:border-charcoal">
+      <div id="headblock" class="hidden items-center py-1 px-2 border-b-2 border-gray-300 md:flex dark:border-charcoal">
         <div class="w-[100px]">
           <a href="{% url 'home' %}" class="inline-block">
               <img class="hidden w-auto dark:inline-block h-[25px]"

templates/userguide_placeholder.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block extra_head %}
+  <link data-modernizer="boost-legacy-docs-extra-head" href="{% static 'css/userguidestyles.css' %}" rel="stylesheet" />
+{% endblock %}
+
+{% block content_header %}
+  <div id="boost-legacy-docs-header">
+    {{ block.super }}
+  </div>
+{% endblock %}

userguidetailwind.config.js

@@ -0,0 +1,39 @@
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  content: ["templates/includes/_header.html", "templates/includes/_footer.html"],
+  darkMode: 'class',
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: colors.white,
+      emerald: colors.emerald,
+      gray: colors.gray,
+      indigo: colors.indigo,
+      yellow: colors.yellow,
+      red: colors.red,
+      sky: colors.sky,
+      blue: colors.blue,
+      charcoal: '#172A34',
+      orange: '#FF9F00',
+      green: '#5AD599',
+      black: '#051A26',
+      slate: '#314A57',
+      steel: '#B5C9D3',
+      stone: '#DDE7EC',
+      'stone-white': '#DDE7EC',
+      gold: '#F4CA1F',
+      bronze: '#BB8A56',
+      silver: '#B5C9D3',
+    },
+    extend: {
+      fontFamily: {
+        cairo: "'Cairo', sans-serif",
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+};