Better theming

assets/controllers/progress_bar_controller.js

@@ -5,13 +5,14 @@ export default class extends Controller {
   static targets = ["bar"];
 
   connect() {
-    document.addEventListener("click", this.handleInteraction);
+    this.boundHandleInteraction = this.handleInteraction.bind(this);
+    document.addEventListener("click", this.boundHandleInteraction);
     document.addEventListener("touchstart", this.handleTouchStart);
     document.addEventListener("touchend", this.handleTouchEnd);
   }
 
   disconnect() {
-    document.removeEventListener("click", this.handleInteraction);
+    document.removeEventListener("click", this.boundHandleInteraction);
     document.removeEventListener("touchstart", this.handleTouchStart);
     document.removeEventListener("touchend", this.handleTouchEnd);
   }

assets/styles/app.css

@@ -32,7 +32,8 @@ h1.brand {
 
 
 
-h1.brand a {
+h1.brand a,
+.publisher a {
     color: var(--brand-color);
 }
 

assets/styles/layout.css

@@ -81,7 +81,7 @@ header {
 }
 
 /* Mobile Styles */
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
     .header__logo {
         justify-content: space-around;
     }
@@ -158,7 +158,7 @@ dt {
 }
 
 /* Responsive adjustments */
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
     nav, aside {
         display: none; /* Hide the sidebars on small screens */
     }

assets/styles/theme.css

@@ -21,34 +21,3 @@
     --brand-color: white;
 }
 
-[data-theme="light"] {
-    --color-bg: #f4f1ee;
-    --color-bg-light: #e8e4df;
-    --color-text: #2a2a2a;
-    --color-text-mid: #3a3a3a;   /* Warm light gray */
-    --color-text-contrast: #f4f1ee;
-    --brand-color: black;
-}
-
-[data-theme="space"] {
-    --color-bg: #141120;             /* Deep violet-black */
-    --color-bg-light: #1e1a2e;       /* Slightly lighter for contrast */
-    --color-bg-primary: #251634;     /* Rich purple base (darkened brand tone) */
-
-    --color-text: #f4f0fc;           /* Near-white with a lavender hue */
-    --color-text-mid: #c9b9eb;       /* Soft pastel lavender */
-    --color-text-contrast: #0c0712;  /* Near-black for contrast */
-
-    --color-primary: #c095f4;    /* Vibrant purple (the new brand) */
-    --color-primary-light: #c9b9eb;        /* Lighter variant for hovers/effects */
-    --color-secondary: #e8bb8d;            /* Warm tan/peach for complementary balance */
-    --color-secondary-light: #f4d6b6;      /* Lighter peach tone */
-    --color-secondary-bg: #fbebdb;         /* Ultra-light background variant */
-
-    --color-border: #322c44;        /* Subtle purple-gray */
-
-    --brand-color: rgb(147, 51, 234);
-    --brand-font: 'Poppins', sans-serif; /* A classic, refined branding font */
-
-}
-

assets/theme/default/theme.css

@@ -1,25 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
-
-
-:root {
-    --color-bg: #1a1a1a;        /* Deep charcoal background */
-    --color-bg-light: #2a2a2a;  /* Slightly lighter charcoal */
-    --color-bg-primary: #2e1f2e; /* Muted aubergine for a rich, elegant feel */
-    --color-text: #f5f5f5;       /* Soft white for readability */
-    --color-text-mid: #d8d8d8;   /* Warm light gray */
-    --color-text-contrast: #000; /* Black text for contrast */
-    --color-primary: #5F7355;   /* Plum primary color */
-    --color-secondary: #495544; /*  secondary color */
-    --color-border: #3a3a3a;     /* Subtle gray border */
-    --font-family: 'Montserrat', serif; /* Set the Montserrat font as default */
-    --main-body-font: 'Newsreader', serif; /* Set the font for the main body */
-    --heading-font: 'EB Garamond', serif; /* Set the font for headings */
-    --brand-font: 'Lobster', serif; /* A classic, refined branding font */
-    --brand-color: white;
-}
-
 [data-theme="light"] {
     --color-bg: #f4f1ee;
     --color-bg-light: #e8e4df;

assets/theme/local/.gitignore

@@ -0,0 +1,2 @@
+icons
+theme.css

config/packages/twig.yaml

@@ -1,6 +1,7 @@
 twig:
     file_name_pattern: '*.twig'
     globals:
+        publisher_npub: '%npub%'
         website_name: '%name%'
         website_short_name: '%short_name%'
         website_description: '%description%'

config/unfold.yaml

@@ -1,5 +1,5 @@
 parameters:
-    name: 'Unfold Magazine'
+    name: 'Unfold Demo'
     short_name: 'Unfold'
     description: 'Unfolding nostr magazines and community articles'
     default_relay: 'wss://TheForest.nostr1.com'

templates/base.html.twig

@@ -16,12 +16,12 @@
     {% block ogtags %}
         <meta property="og:image" content="{{ asset('icons/favicon.ico') }}" />
     {% endblock %}
-
-    {% block stylesheets %}
-    {% endblock %}
     {% block javascripts %}
         {% block importmap %}{{ importmap('app') }}{% endblock %}
     {% endblock %}
+    {% block stylesheets %}
+        <link rel="stylesheet" href="{{ asset('theme.css') }}">
+    {% endblock %}
 </head>
 <body data-controller="service-worker">
 

templates/components/Footer.html.twig

@@ -9,5 +9,5 @@
     {% endfor %}
 </div>
 
-<p>{{ "now"|date("Y") }} {{ website_name }}</p>
+<p>{{ "now"|date("Y") }} {{ website_name }} <span class="publisher">by <twig:Molecules:UserFromNpub :ident="publisher_npub" /></span></p>
 

templates/pages/author.html.twig

@@ -9,7 +9,7 @@
     <h1><twig:Atoms:NameOrNpub :author="author" :npub="npub"></twig:Atoms:NameOrNpub></h1>
     <div>
         {% if author.about is defined %}
-            {{ author.about|markdown_to_html|mentionify  }}
+            {{ author.about|markdown_to_html|mentionify|linkify  }}
         {% endif %}
     </div>