Misc fixes

assets/styles/02-layout/header.css

@@ -16,7 +16,8 @@
 
 .header .container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    width: 100%;
 }
 
 .header__categories ul {

assets/styles/02-layout/layout.css

@@ -83,6 +83,10 @@ main {
     word-break: break-word;
 }
 
+main > section {
+    padding: 0 var(--spacing-2);
+}
+
 main.static {
     margin-left: auto;
     margin-right: auto;
@@ -156,11 +160,7 @@ aside header {
 
     main {
         margin-top: 60px;
-    }
-
-    section {
-        padding-left: 20px;
-        padding-right: 20px;
+        padding: 0;
     }
 
     nav header,
@@ -174,12 +174,9 @@ aside header {
 
     .mobile-toggles {
         display: flex;
-        justify-content: space-between;
-        gap: .5rem;
-        position: sticky;
-        top: 61px; /* below main header */
         z-index: 1050;
         padding: .5rem 0;
+        margin: 0 var(--spacing-2);
     }
 
     .mobile-toggles .toggle {

assets/styles/04-pages/forum.css

@@ -60,76 +60,92 @@
   margin: 1rem 0;
 }
 
+@media (max-width: 960px) {
+    .subcategories-grid .tags {
+      justify-content: flex-start;
+    }
+
+    .subcategories-grid .tag {
+        padding: 0;
+        background-color: transparent;
+        color: var(--color-primary);
+    }
+
+    .subcategories-grid .tag:before {
+        content: '#';
+    }
+}
+
 .sub-card {
-  border: 1px solid var(--color-primary);
-  background: #fff;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+border: 1px solid var(--color-primary);
+background: #fff;
+padding: 1rem;
+display: flex;
+flex-direction: column;
+justify-content: space-between;
 }
 
 .sub-card h3 {
-  margin: 0 0 0.5rem 0;
+margin: 0 0 0.5rem 0;
 }
 
 .sub-card div {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+display: flex;
+justify-content: space-between;
+align-items: center;
 }
 
 .sub-card .count {
-    align-self: flex-end;
-    flex-shrink: 0;
+align-self: flex-end;
+flex-shrink: 0;
 }
 
 .articles-list {
-  list-style: none;
-  padding: 0;
+list-style: none;
+padding: 0;
 }
 
 .article-item {
-  border: 1px solid #ddd;
-  padding: 1rem;
-  margin: 1rem 0;
-  background: #fafafa;
+border: 1px solid #ddd;
+padding: 1rem;
+margin: 1rem 0;
+background: #fafafa;
 }
 
 .article-item h3 {
-  margin: 0 0 0.5rem 0;
+margin: 0 0 0.5rem 0;
 }
 
 .article-item p {
-  margin: 0.5rem 0;
+margin: 0.5rem 0;
 }
 
 .article-item small {
-  color: #666;
+color: #666;
 }
 
 .nav-sub-card {
-  border: 1px solid #333;
-  background: #fff;
-  padding: 0.5rem;
-  margin: 0.5rem 0;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
+border: 1px solid #333;
+background: #fff;
+padding: 0.5rem;
+margin: 0.5rem 0;
+display: flex;
+flex-direction: column;
+box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
 }
 
 .nav-sub-card h4 {
-  margin: 0 0 0.25rem 0;
-  font-size: 1rem;
+margin: 0 0 0.25rem 0;
+font-size: 1rem;
 }
 
 .nav-sub-card .tags {
-  flex: 1;
+flex: 1;
 }
 
 .nav-sub-card .count {
-  font-size: 1.2rem;
-  font-weight: bold;
-  color: #333;
-  align-self: flex-end;
+font-size: 1.2rem;
+font-weight: bold;
+color: #333;
+align-self: flex-end;
 }

templates/components/Header.html.twig

@@ -1,5 +1,8 @@
 <header class="header" data-controller="menu" {{ attributes }}>
     <div class="container">
+        <div class="mobile-toggles" data-controller="sidebar-toggle">
+            <button class="toggle" aria-controls="leftNav" aria-expanded="false" data-action="click->sidebar-toggle#toggle">☰</button>
+        </div>
         <div class="header__logo">
             <h1 class="brand"><a href="/">Decent Newsroom</a></h1>
         </div>

templates/event/_kind20_picture.html.twig

@@ -13,10 +13,6 @@
         {% set isEmbed = true %}
     {% endif %}
 
-    {% if title %}
-        <h2 class="picture-title">{{ title }}</h2>
-    {% endif %}
-
     {# Content warning #}
     {% set contentWarning = null %}
     {% for tag in event.tags %}
@@ -92,9 +88,6 @@
                     <a href="{{ path('nevent', {nevent: event.id|nEncode }) }}" aria-label="View standalone">
                 {% endif %}
                 <picture>
-                    {% for fallback in main.fallbacks %}
-                        <source srcset="{{ fallback }}" />
-                    {% endfor %}
                     <img src="{{ main.url }}"
                          alt="{{ main.altText|default('Picture') }}"
                          {% if main.dimensions %}data-dimensions="{{ main.dimensions }}"{% endif %}
@@ -102,6 +95,9 @@
                          class="picture-image main-image"
                          data-gallery-target="mainImage"
                          />
+                    {% for fallback in main.fallbacks %}
+                        <source srcset="{{ fallback }}" />
+                    {% endfor %}
                 </picture>
 
                 {% if images|length > 1 %}

templates/event/index.html.twig

@@ -339,10 +339,6 @@
         .picture-gallery {
             grid-template-columns: 1fr;
         }
-
-        .picture-title {
-            font-size: 1.5rem;
-        }
     }
 </style>
 {% endblock %}

templates/layout.html.twig

@@ -14,6 +14,9 @@
                     <li>
                         <a href="{{ path('latest_articles') }}">Latest articles</a>
                     </li>
+                    <li>
+                        <a href="{{ path('forum') }}">Forum</a>
+                    </li>
                     <li>
                         <a href="{{ path('media-discovery') }}">Multimedia</a>
                     </li>
@@ -40,10 +43,6 @@
             </nav>
         </div>
         <main>
-            <div class="mobile-toggles">
-                <button class="toggle" aria-controls="leftNav" aria-expanded="false" data-action="click->sidebar-toggle#toggle">☰</button>
-{#                <button class="toggle" aria-controls="rightNav" aria-expanded="false" data-action="click->sidebar-toggle#toggle">Right ☰</button>#}
-            </div>
             {% block body %}{% endblock %}
 
             {# Floating reading list quick add widget #}

templates/pages/editor.html.twig

@@ -15,7 +15,7 @@
     <div class="w-container">
         {% if not is_granted('ROLE_USER') %}
         <div class="notice info">
-            <p>Login is required to post articles.</p>
+            <p>A Nostr identity is required to post articles.</p>
         </div>
         {% endif %}
         <div {{ stimulus_controller('nostr-publish', {