for simplicity, use a Django setting to set site title

Also, using a Django setting allows us to avoid CSS pseudo-selector issues

Author: dchukhin

pattern_library/__init__.py

@@ -40,6 +40,8 @@
     # after the main bundle to override default styles.
     # Example: "css/pattern-library-custom.css"
     "CUSTOM_CSS": None,
+    # SITE_TITLE allows users to customize the pattern library title displayed in the header
+    "SITE_TITLE": "Django Pattern Library",
 }
 
 

pattern_library/static/pattern_library/src/scss/_config.scss

@@ -1,14 +1,11 @@
 // Configuration with support for runtime customization via CSS custom properties
 
 // Default SCSS variables for compile-time usage (needed for Sass functions)
-$site-title: 'Django Pattern Library' !default;
 $color-primary: #34b2b2 !default;
 $family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !default;
 
 // CSS Custom Properties for runtime customization
-// These will override the compiled styles where used directly (not in Sass functions)
-:root {
-  --site-title: #{$site-title};
+html, :root {
   --color-primary: #{$color-primary};
   --family-primary: #{$family-primary};
 }

pattern_library/static/pattern_library/src/scss/layout/_header.scss

@@ -17,10 +17,8 @@
         letter-spacing: 1px;
         font-size: 16px;
         margin-left: 15px;
-
-        &::after {
-            content: var(--site-title);
-        }
+        margin-top: 0;
+        margin-bottom: 0;
 
         @media only screen and (min-width: 600px) {
             font-size: 22px;

pattern_library/templates/pattern_library/base.html

@@ -21,7 +21,7 @@
         </a>
         <h1 class="header__title">
             <span class="sr-only">Pattern Library</span>
-            {# Set in _config.scss #}
+            {% pattern_library_site_title %}
         </h1>
     </header>
     <aside class="sidebar">

pattern_library/templatetags/pattern_library_tags.py

@@ -2,19 +2,16 @@
 from django.utils.safestring import mark_safe
 from django.templatetags.static import static
 from pattern_library import get_setting
-import os
 
 register = template.Library()
 
 
 @register.simple_tag
 def pattern_library_custom_css():
     """
-    Include custom CSS file for pattern library customization.
+    Include custom CSS for pattern library customization.
 
-    This tag reads the CUSTOM_CSS setting from PATTERN_LIBRARY and includes
-    the CSS file as a <link> tag. The CSS file should contain CSS custom properties
-    that override the default pattern library styles.
+    This tag optionally includes an external CSS file for additional customization.
 
     Usage in templates:
         {% load pattern_library_tags %}
@@ -24,23 +21,28 @@ def pattern_library_custom_css():
         PATTERN_LIBRARY = {
             "CUSTOM_CSS": "css/pattern-library-custom.css"  # relative to STATIC_URL
         }
-
-    Example custom CSS file content:
-        :root {
-            --color-primary: #ff6b6b;
-            --family-primary: 'Custom Font', sans-serif;
-            --site-title: 'My Custom Library';
-        }
     """
+    css_content = []
+
+    # Include external CSS file if specified
     custom_css_path = get_setting('CUSTOM_CSS')
+    if custom_css_path:
+        try:
+            css_url = static(custom_css_path)
+            css_content.append(f'<link rel="stylesheet" type="text/css" href="{css_url}">')
+        except Exception:
+            pass  # If static file handling fails, just skip the external file
+
+    return mark_safe('\n'.join(css_content))
+
 
-    if not custom_css_path:
-        return ''
+@register.simple_tag
+def pattern_library_site_title():
+    """
+    Get the site title for the pattern library.
 
-    # Generate static URL for the CSS file
-    try:
-        css_url = static(custom_css_path)
-        return mark_safe(f'<link rel="stylesheet" type="text/css" href="{css_url}">')
-    except Exception:
-        # If static file handling fails, return empty string
-        return ''
+    Usage in templates:
+        {% load pattern_library_tags %}
+        {% pattern_library_site_title %}
+    """
+    return get_setting('SITE_TITLE')