Merge branch 'develop' into 'production'

prod: UI much pretty

See merge request hub/hub!675

src/plainui/jinja2.py

@@ -2,6 +2,7 @@ from datetime import datetime, timedelta
 from django.contrib.messages import get_messages
 from django.templatetags.static import static
 from django.urls import reverse
+from django.utils import timezone
 from django.utils.formats import localize
 from django.utils.functional import LazyObject
 from django.utils.html import json_script
@@ -91,6 +92,13 @@ def custom_strfdates(date):
     return localdate(date).strftime('%x')
 
 
+def custom_weekday_abbrev(date):
+    if not isinstance(date, datetime):
+        return ''
+
+    return date.strftime('%a')
+
+
 # set up an internal represenative for an unset variable as parameter for show_vars()
 # which cannot use a default of None as that is a valid value for the variable
 _UNSET = object()
@@ -188,6 +196,7 @@ def environment(**options):
         'unique_id': unique_id,
         'translated_fields_for_field': translated_fields_for_field,
         'field_translation_languages': field_translation_languages,
+        'now': timezone.now(),
     })
     env.filters['strftdelta'] = custom_timedelta
     env.filters['strftdelta_short'] = custom_timedelta_short
@@ -195,5 +204,6 @@ def environment(**options):
     env.filters['strftime'] = custom_strftime
     env.filters['strfdate'] = custom_strfdate
     env.filters['strfdates'] = custom_strfdates
+    env.filters['weekday_abbrev'] = custom_weekday_abbrev
     env.install_gettext_callables(gettext, ngettext, newstyle=True)
     return env

src/plainui/jinja2/plainui/components/calendar.html

@@ -17,10 +17,10 @@
         {% for room, room_events in events.rooms_with_events %}
             <div class="hub-fahrplan__room">
                 {% if public %}
-                    <h2 class="hub-fahrplan__title">// {{room.name}}</h2>
+                    <h2 class="hub-fahrplan__title" title="{{ room.name }}">// {{room.name}}</h2>
                 {% else %}
                     <a class="text-decoration-none a" href="{{ url('plainui:room', room_slug=room.slug) }}">
-                        <h2 class="hub-fahrplan__title">// {{room.name}}</h2>
+                        <h2 class="hub-fahrplan__title" title="{{ room.name }}">// {{room.name}}</h2>
                     </a>
                  {% endif %}
                 {% for entry in room_events %}
@@ -45,11 +45,11 @@
                             }, entry.event.id) }}
                             {% endif %}
                             <figure class="p-0 my-0 mx-1 d-flex flex-column hub-fahrplan__room-event" style="height: {{ h(entry.minutes) }};">
-                                <h2 class="px-1 mb-1 hub-fahrplan__event_title text-center bg-secondary text-dark">{{entry.event.name}}
+                                <div class="p-1 mb-1 hub-fahrplan__event_title text-center bg-secondary text-dark fw-bold">{{entry.event.name}}
                                     {% if entry.event.language %}
                                         <span class="fs-medium font-sans-serif font-weight-normal text-lowercase"> ({{entry.event.language}})</span>
                                     {% endif %}
-                                </h2>
+                                </div>
                                 <div class="p-1">
                                     {% if entry.event.track_name %}
                                         <p class="fs-medium font-weight-bold">{{entry.event.track_name}}</p>

src/plainui/jinja2/plainui/components/list_events.html

@@ -9,7 +9,7 @@
 
 {% macro list(events, my_favorite_events, my_scheduled_events, assembly_slug=None, msg_none=_("No entries available.")) -%}
     {% if events %}
-        <ul class="list-unstyled mb-0">
+        <ul class="list-unstyled d-flex flex-column gap-3 mb-0">
         {% for event in events %}
             {{ list_el( event,
                 faved=true if event.id | safe in my_favorite_events,
@@ -18,41 +18,65 @@
         {% endfor %}
         </ul>
     {% else %}
-        <p>{{ msg_none }}</p>
+        <p class="p-3 bg-opaque">{{ msg_none }}</p>
     {% endif %}
 {%- endmacro %}
 
 {% macro list_el(event, faved, scheduled, first) -%}
     {% set link = url('plainui:event', event_slug=event.slug ) %}
     {% set color="transparent" if event.kind == "official" else "transparent" %}
-    <li class="hub-event border p-2 align-items-center {% if not first %} mt-3{% endif %}">
-      <a
-          href="{{ link }}"
-          title="{{ event.name }}"
-          class="hub-event__name a a-bold"
+    {% set is_past = event.schedule_end < now %}
+    {% set is_upcomping = event.schedule_start > now %}
+    {% set is_now = not is_past and not is_upcomping %}
+
+    <li
+       class="hub-event rounded-3 px-3 py-2
+        {% if is_past %}hub-event--past{% endif %}
+        {% if is_upcomping %}hub-event--upcoming{% endif %}"
      >
+      <div class="hub-event__day">
+        {{ _(event.schedule_start | weekday_abbrev) }}
+      </div>
+      <div class="hub-event__time">
+        {{ event.schedule_start | strftimehm }}
+      </div>
+      <div class="hub-event__name-container">
+        <a class="hub-event__name" href="{{ link }}">
+          <div>
+            <!-- Extra div for text overflow ellipsis -->
             {{ event.name }}
+          </div>
         </a>
-      <time
-          datetime="{{event.schedule_start}}"
-          class="hub-event__date text-nowrap"
-      >
-          {{ event.schedule_start | strfdates }}
-      </time>
-      <time
-          class="hub-event__time text-nowrap"
-      >
-          {{ event.schedule_start | strftimehm }} - {{ event.schedule_end | strftimehm }}
-      </time>
+        {% if is_now %}
+          <div class="hub-event__now">
+            {{ _('NOW') }}
+          </div>
+        {% endif %}
+      </div>
+      <div class="hub-event__tags">
+          <div
+            class="badge rounded-pill text-uppercase">
+            {{ event.assembly.name }}
+          </div>
+      </div>
       <div class="hub-event__buttons">
+        {% if is_past %}
+          {% set button_color = 'grey' %}
+        {% elif is_now %}
+          {% set button_color = 'dark' %}
+        {% else  %}
+          {% set button_color = 'primary' %}
+        {% endif %}
+
+
         {%- if assembly and assembly.slug and (event.owner_id == request.user.id or can_manage_sos) -%}
             {{ icon_public(event.is_public) }}
-                {{ fbtns.edit(url('plainui:sos_edit', assembly_slug=assembly.slug, event_slug=event.slug), color=color) }}
+            {{ fbtns.edit(url('plainui:sos_edit', assembly_slug=assembly.slug, event_slug=event.slug), color=button_color) }}
         {% endif %}
-            {{ fbtns.share(link, color=color) }}
-            {{ fbtns.schedule(event.id, scheduled, color=color) }}
-            {{ fbtns.fav(event.id, "event", faved, color=color) }}
-            {{ fbtns.report(link, color=color) }}
+        {{ fbtns.share(link, color=button_color) }}
+        {{ fbtns.schedule(event.id, scheduled, color=button_color) }}
+        {{ fbtns.fav(event.id, "event", faved, color=button_color) }}
+        {{ fbtns.report(link, color=button_color) }}
       </div>
     </li>
 {%- endmacro %}
@@ -62,7 +86,7 @@
         <div class="hub-slider">
             <ul class="hub-slider__container row row-cols-1 row-cols-sm-2 row-cols-lg-3 flex-nowrap m-0 list-unstyled">
             {% for event in events %}
-                <li class="hub-slider__item col p-0 mb-2 mr-2 border border-white {% if loop.first %} {% endif %}{% if loop.last %}mr-0{% endif %}">
+                <li class="hub-slider__item col p-0 mb-2 me-2 border border-white {% if loop.first %} {% endif %}{% if loop.last %}me-0{% endif %}">
                     {{ tile( event,
                         faved=true if event.id | safe in my_favorite_events,
                         scheduled=true if event.id | safe in my_scheduled_events,

src/plainui/jinja2/plainui/fahrplan.html

@@ -29,7 +29,7 @@
             <a href="#" class="btn m-2">{{ _("QR-Code") }}</a>
     </div> #}
 
-    <form method="GET" class="p-3 mb-2 hub-fahrplan__filter-block bg-opaque">
+    <form method="GET" class="p-3 mb-2 hub-fahrplan__filter-block bg-black">
         <input type="hidden" name="mode" value="{{mode}}">
         {% if show_day_filters %}<input type="hidden" name="show_day_filters" value="y">{% endif %}
         {% if show_assembly_filters %}<input type="hidden" name="show_assembly_filters" value="y">{% endif %}
@@ -95,9 +95,7 @@
     {# <hr class="hub-spacer"> #}
 
     {% if mode == 'list' %}
-        <div class="border p-3 bg-opaque">
         {{ list_events.list(events, my_favorite_events, my_scheduled_events) }}
-        </div>
         <hr class="hub-spacer">
     {% endif %}
 

src/plainui/locale/de/LC_MESSAGES/django.po

@@ -302,6 +302,9 @@ msgstr "hilfreiche Teams"
 msgid "Official Page"
 msgstr "Offizielle Seite"
 
+msgid "NOW"
+msgstr "JETZT"
+
 #, python-format
 msgid "%(kind)s Event on Track"
 msgstr "%(kind)s Event auf Track"

src/plainui/locale/en/LC_MESSAGES/django.po

@@ -302,6 +302,9 @@ msgstr ""
 msgid "Official Page"
 msgstr ""
 
+msgid "NOW"
+msgstr "NOW"
+
 #, python-format
 msgid "%(kind)s Event on Track"
 msgstr ""

src/plainui/static/error_pages/403.html

@@ -9,7 +9,7 @@
         body {
             padding: 0;
             margin: 0;
-            background-color: rgba(0,0,0,1);
+            background-color: rgba(0.1,0.1,0.1,1);
         }
         article {
             margin: 0;
@@ -21,7 +21,7 @@
         }
         img {
             display: block;
-            width: 100%;
+            width: 50%;
             height: auto;
         }
         a {
@@ -31,9 +31,7 @@
 </head>
 <body>
 <article>
-    <a href="https://rc3.world" class="row my-8">
-        <img class="" src="403_FORBIDDEN.jpg" alt="403 - Forbidden" title="403 - Forbidden" />
-    </a>
+   <img class="" src="403.svg" alt="403 - Forbidden" title="403 - Forbidden" />
 </article>
 </body>
 </html>

src/plainui/static/error_pages/403.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Ebene_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 580.00001 400.00001"
+   xml:space="preserve"
+   sodipodi:docname="403.svg"
+   width="580"
+   height="400"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs1" /><sodipodi:namedview
+   id="namedview1"
+   pagecolor="#000000"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   inkscape:zoom="1.3405006"
+   inkscape:cx="297.65"
+   inkscape:cy="297.65"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Ebene_1" />&#10;<style
+   type="text/css"
+   id="style1">&#10;	.st0{fill:#E50076;}&#10;</style>&#10;<g
+   id="g1"
+   transform="translate(-184.19351,-97.897506)">&#10;	<path
+   class="st0"
+   d="m 359,290.6 c 8.7,-19 5.7,-39.1 5.9,-58.9 0.1,-8.9 -5,-13.9 -12.3,-13.7 -7.6,0.2 -11.5,4.8 -11.8,14.1 -0.2,7.5 0.2,15.1 -0.4,22.6 -0.2,2.1 -2.9,6 -4.4,6 -1.5,0 -3.8,-4 -3.9,-6.1 -0.5,-7.2 0,-14.5 -0.3,-21.7 -0.5,-11.7 4.6,-19.4 15.8,-23.7 2.5,-1 5.8,-4.4 5.8,-6.7 0.4,-23.2 0.3,-46.5 -0.1,-69.7 -0.1,-5.9 -3.9,-10.1 -10.4,-10.7 -6.8,-0.6 -11.1,2.9 -13,9 -1.1,3.4 -1.2,7.1 -1.2,10.7 -0.1,16.9 -0.1,33.8 -0.1,50.7 0,2.1 0.4,4.3 -0.2,6.3 -0.6,2.1 -1.5,5.8 -3.2,5.8 -1.7,0.1 -3.5,-3.7 -4.2,-5.9 -0.8,-2.2 -0.3,-4.8 -0.3,-7.2 0,-21.4 0,-42.9 0,-64.3 0,-14.3 -3.8,-20.1 -12.9,-19.9 -8.5,0.2 -12.3,6 -12.3,19.6 -0.1,22.9 0.2,45.9 -0.2,68.8 0,3 -1.6,9.2 -3.8,8.9 -2.1,-0.1 -3.8,-6.1 -4.8,-9.3 -0.8,-2.8 -0.2,-6 -0.2,-9 0,-17.2 0,-34.4 -0.1,-51.6 -0.1,-7.3 -3.5,-12.3 -11.3,-12.7 -8,-0.4 -11.4,4.6 -12.6,11.6 -0.5,2.7 -0.3,5.4 -0.3,8.1 0,16.9 0,33.8 0,50.7 0,2.4 0.4,5 -0.4,7.2 -0.6,1.9 -2.5,5 -4,5.2 -1.5,-0.2 -3.4,-3.3 -4,-5.2 -0.7,-2.5 -0.3,-5.4 -0.3,-8.1 -0.1,-9.7 0.2,-19.3 -0.4,-28.9 -0.4,-6.4 -4.5,-10.6 -11.2,-11 -6.8,-0.5 -10.9,3.4 -12.5,9.7 -0.9,3.8 -1.1,7.8 -1.2,11.7 -0.1,14.2 -0.1,28.4 -0.1,42.6 -0.3,0 -0.4,40.6 2.5,60.5 3.1,21.3 16.4,37.8 35.4,46.8 l -7.1,90.7 43.2,-7.1 -0.1,82 63.2,-124.5 h -38.3 l 11.2,-47.2 c 8.8,-7.1 16.2,-15.8 20.9,-26.2"
+   id="path1" />&#10;</g>&#10;<g
+   id="text1"
+   style="font-size:85.3333px;font-family:'Saira Stencil One';-inkscape-font-specification:'Saira Stencil One';text-align:center;text-anchor:middle;fill:#ffffff"
+   aria-label="ACCESS&#10;DENIED"
+   transform="translate(0,20)"><path
+     d="m 261.06318,117.65336 h 1.45067 l 6.74133,23.38133 -9.81333,35.32798 h -17.06666 z m 19.19999,48.29865 h -14.25066 l 3.584,-13.14133 h 6.82667 l -10.06933,-35.15732 h 15.61599 l 18.68799,58.70931 h -17.40799 z m 45.56801,-48.89598 q 0.68267,-0.0853 2.13333,-0.0853 h 2.21867 q 5.71733,0 11.17866,0.85333 2.816,0.42667 4.352,0.85333 v 12.20266 q -1.28,-0.0853 -4.26667,-0.42666 -4.01066,-0.42667 -6.99733,-0.42667 -3.328,0 -5.376,0.256 -1.96266,0.17067 -3.24266,0.68267 z m 4.352,59.98931 q -8.53333,0 -13.568,-1.45067 -4.94933,-1.536 -7.50933,-5.03466 -2.47466,-3.328 -3.41333,-8.78933 -0.85333,-5.54667 -0.85333,-14.76266 0,-8.10667 0.59733,-13.14133 0.68267,-5.03467 2.38933,-8.448 1.792,-3.49866 5.20533,-5.376 3.49867,-1.96266 9.216,-2.64533 v 29.61066 q 0,4.77866 0.17067,9.21599 0.17066,3.41333 1.28,5.12 1.19466,1.70667 3.66933,2.13333 2.38933,0.512 7.08266,0.512 4.864,0 8.27733,-0.42666 1.36534,-0.0853 3.328,-0.42667 v 12.37333 q -4.18133,0.93866 -9.47199,1.28 -2.90134,0.256 -6.4,0.256 z m 44.11738,-59.98931 q 0.68267,-0.0853 2.13334,-0.0853 h 2.21866 q 5.71733,0 11.17866,0.85333 2.816,0.42667 4.352,0.85333 v 12.20266 q -1.28,-0.0853 -4.26666,-0.42666 -4.01067,-0.42667 -6.99733,-0.42667 -3.328,0 -5.376,0.256 -1.96267,0.17067 -3.24267,0.68267 z m 4.352,59.98931 q -8.53333,0 -13.56799,-1.45067 -4.94933,-1.536 -7.50933,-5.03466 -2.47467,-3.328 -3.41334,-8.78933 -0.85333,-5.54667 -0.85333,-14.76266 0,-8.10667 0.59733,-13.14133 0.68267,-5.03467 2.38934,-8.448 1.792,-3.49866 5.20533,-5.376 3.49866,-1.96266 9.21599,-2.64533 v 29.61066 q 0,4.77866 0.17067,9.21599 0.17067,3.41333 1.28,5.12 1.19467,1.70667 3.66933,2.13333 2.38933,0.512 7.08267,0.512 4.86399,0 8.27733,-0.42666 1.36533,-0.0853 3.32799,-0.42667 v 12.37333 q -4.18133,0.93866 -9.47199,1.28 -2.90133,0.256 -6.4,0.256 z m 24.66139,-59.39198 h 17.06666 v 58.70931 h -17.06666 z m 20.65065,0 h 21.67466 v 13.056 H 423.9646 Z m 0,22.52799 h 17.664 v 13.056 h -17.664 z m 0,23.12533 h 21.67466 v 13.05599 H 423.9646 Z m 72.36258,-32.17066 q -2.816,-0.34133 -9.89867,-0.93866 -3.92533,-0.17067 -6.31466,-0.17067 -3.072,0 -5.80266,0.17067 V 116.9707 h 2.13333 q 6.99733,0 14.50666,0.93866 2.38933,0.34134 5.376,0.93867 z m -14.08,27.90399 q 0,-1.792 -0.256,-2.56 -0.256,-0.85333 -0.85333,-1.10933 -0.59733,-0.34133 -2.048,-0.512 l -10.496,-1.28 q -9.30132,-1.024 -12.54399,-6.05866 -1.45067,-2.13334 -1.96267,-5.20533 -0.512,-3.072 -0.512,-7.50934 0,-9.47199 4.864,-13.65332 3.92533,-3.41333 12.288,-4.01067 v 17.152 q 0,1.10933 0.0853,1.87733 0.0853,0.768 0.34133,1.19466 0.256,0.512 0.85334,0.768 0.59733,0.17067 1.792,0.256 l 11.77599,1.45067 q 3.66933,0.512 5.97333,1.28 2.304,0.768 3.92533,2.38933 3.84,4.01067 3.84,14.25066 0,10.83733 -4.77866,15.18933 -2.13334,1.96266 -5.20533,2.90133 -2.98667,0.85333 -7.08267,1.10933 z m -4.52266,18.00533 q -8.53333,0 -15.872,-0.768 -4.35199,-0.42667 -6.57066,-0.85334 v -12.45866 q 5.03466,0.42667 11.52,0.85334 4.09599,0.17066 5.80266,0.17066 4.608,0 6.05866,-0.256 v 13.312 z m 70.82658,-45.90932 q -2.816,-0.34133 -9.89866,-0.93866 -3.92534,-0.17067 -6.31467,-0.17067 -3.072,0 -5.80266,0.17067 V 116.9707 h 2.13333 q 6.99733,0 14.50666,0.93866 2.38933,0.34134 5.376,0.93867 z m -14.08,27.90399 q 0,-1.792 -0.256,-2.56 -0.25599,-0.85333 -0.85333,-1.10933 -0.59733,-0.34133 -2.048,-0.512 l -10.49599,-1.28 q -9.30133,-1.024 -12.544,-6.05866 -1.45066,-2.13334 -1.96266,-5.20533 -0.512,-3.072 -0.512,-7.50934 0,-9.47199 4.86399,-13.65332 3.92534,-3.41333 12.288,-4.01067 v 17.152 q 0,1.10933 0.0853,1.87733 0.0853,0.768 0.34134,1.19466 0.256,0.512 0.85333,0.768 0.59733,0.17067 1.792,0.256 l 11.77599,1.45067 q 3.66934,0.512 5.97333,1.28 2.304,0.768 3.92534,2.38933 3.83999,4.01067 3.83999,14.25066 0,10.83733 -4.77866,15.18933 -2.13333,1.96266 -5.20533,2.90133 -2.98667,0.85333 -7.08267,1.10933 z m -4.52266,18.00533 q -8.53333,0 -15.87199,-0.768 -4.352,-0.42667 -6.57067,-0.85334 v -12.45866 q 5.03467,0.42667 11.52,0.85334 4.096,0.17066 5.80266,0.17066 4.608,0 6.05867,-0.256 v 13.312 z"
+     id="path2" /><path
+     d="m 248.81792,224.31998 h 17.06666 v 58.70931 h -17.06666 z m 20.65066,45.65332 h 0.68266 q 4.18133,0 5.888,-0.34133 1.792,-0.42667 2.64533,-1.87734 0.93867,-1.536 1.024,-4.864 0.17067,-4.26666 0.17067,-9.21599 0,-4.864 -0.17067,-9.30133 -0.17066,-3.328 -1.10933,-4.864 -0.85333,-1.536 -2.816,-1.87733 -1.96267,-0.256 -5.632,-0.256 h -0.68266 v -13.056 h 0.68266 q 6.82667,0 11.34933,0.59734 4.608,0.59733 7.59467,1.87733 2.90133,1.28 4.60799,3.49867 1.70667,2.21866 2.47467,5.54666 0.68267,2.98666 0.85333,7.08266 0.256,4.01067 0.256,10.752 0,6.82666 -0.256,10.83733 -0.17066,4.01066 -0.85333,6.99733 -0.768,3.328 -2.47467,5.54666 -1.70666,2.21867 -4.60799,3.49867 -2.98667,1.28 -7.59467,1.87733 -4.52266,0.59733 -11.34933,0.59733 h -0.68266 z m 37.37601,-45.65332 h 17.06666 v 58.70931 h -17.06666 z m 20.65066,0 h 21.67465 v 13.056 h -21.67465 z m 0,22.52799 h 17.66399 v 13.056 h -17.66399 z m 0,23.12533 h 21.67465 v 13.05599 h -21.67465 z m 31.91459,-43.26398 v -2.38934 h 17.06666 l 32.93865,56.23465 v 2.47466 h -16.98133 z m 33.79198,19.02932 v -21.41866 h 16.21333 v 49.15198 z m -33.79198,-11.94666 16.21332,27.73332 v 21.50399 h -16.21332 z m 61.0986,-9.472 h 17.06666 v 58.70931 h -17.06666 z m 28.15999,0 h 17.06666 v 58.70931 h -17.06666 z m 20.65066,0 h 21.67465 v 13.056 h -21.67465 z m 0,22.52799 h 17.66399 v 13.056 h -17.66399 z m 0,23.12533 h 21.67465 v 13.05599 h -21.67465 z m 31.91458,-45.65332 h 17.06666 v 58.70931 h -17.06666 z m 20.65066,45.65332 h 0.68267 q 4.18133,0 5.888,-0.34133 1.792,-0.42667 2.64533,-1.87734 0.93867,-1.536 1.024,-4.864 0.17067,-4.26666 0.17067,-9.21599 0,-4.864 -0.17067,-9.30133 -0.17067,-3.328 -1.10933,-4.864 -0.85334,-1.536 -2.816,-1.87733 -1.96267,-0.256 -5.632,-0.256 h -0.68267 v -13.056 h 0.68267 q 6.82666,0 11.34933,0.59734 4.608,0.59733 7.59466,1.87733 2.90133,1.28 4.608,3.49867 1.70667,2.21866 2.47466,5.54666 0.68267,2.98666 0.85334,7.08266 0.256,4.01067 0.256,10.752 0,6.82666 -0.256,10.83733 -0.17067,4.01066 -0.85334,6.99733 -0.76799,3.328 -2.47466,5.54666 -1.70667,2.21867 -4.608,3.49867 -2.98666,1.28 -7.59466,1.87733 -4.52267,0.59733 -11.34933,0.59733 h -0.68267 z"
+     id="path3" /></g><path
+   d="m 243.68556,82.289611 h 6.4 v 22.015999 h -6.4 z m 12.352,13.536 h -4.608 v -5.12 h 4.608 v -8.416 h 6.4 v 22.015999 h -6.4 z m 8.76799,-13.536 h 18.016 v 5.12 h -18.016 z m 5.792,6.4 h 6.4 v 15.615999 h -6.4 z m 12.79998,-6.4 h 18.016 v 5.12 h -18.016 z m 5.792,6.4 h 6.4 v 15.615999 h -6.4 z m 14.59198,-6.4 h 6.4 v 22.015999 h -6.4 z m 7.744,10.272 h 0.768 q 1.024,0 1.504,-0.064 0.512,-0.096 0.8,-0.384 0.288,-0.256 0.352,-0.736 0.096,-0.512 0.096,-1.504 0,-0.992 -0.096,-1.472 -0.064,-0.512 -0.352,-0.8 -0.288,-0.256 -0.8,-0.32 -0.512,-0.096 -1.504,-0.096 h -0.768 v -4.896 h 2.656 q 2.368,0 3.84,0.48 1.504,0.448 2.272,1.408 0.736,0.896 0.992,2.272 0.256,1.344 0.256,3.424 0,1.984 -0.256,3.296 -0.224,1.312 -0.928,2.208 -0.8,1.024 -2.304,1.568 -1.472,0.512 -3.872,0.512 h -2.656 z m 20.09602,3.136 7.168,-13.408 h 6.976 l -9.952,17.759999 h -4.192 z m 10.208,4.351999 h -4.48 l 2.752,-4.895999 h 1.76 l 2.4,-4.384 h 3.84 v 4.384 h 2.688 v 4.895999 h -2.688 v 4.256 h -6.272 z m 22.84798,-6.751999 q 0,-2.784 -0.032,-3.648 -0.064,-1.344 -0.256,-1.888 -0.224,-0.544 -0.704,-0.672 -0.448,-0.16 -1.536,-0.16 -0.48,0 -1.184,0.064 v -4.928 q 0.192,-0.032 0.576,-0.032 h 0.608 q 3.36,0 5.184,0.576 1.824,0.544 2.688,1.824 0.8,1.184 0.992,3.104 0.192,1.92 0.192,5.76 0,3.456 -0.16,5.248 -0.128,1.791999 -0.704,3.007999 -0.64,1.344 -1.984,2.048 -1.312,0.672 -3.68,0.864 z m -2.528,11.263999 q -3.328,0 -5.184,-0.544 -1.824,-0.576 -2.688,-1.888 -0.8,-1.184 -0.992,-3.071999 -0.192,-1.888 -0.192,-5.76 0,-3.456 0.128,-5.248 0.16,-1.792 0.736,-3.008 0.64,-1.344 1.952,-2.016 1.344,-0.704 3.712,-0.896 v 11.168 q 0,2.752 0.032,3.616 0.064,1.28 0.288,1.92 0.224,0.544 0.672,0.704 0.448,0.128 1.536,0.128 h 0.64 q 0.224,0 0.544,-0.064 v 4.927999 q -0.192,0.032 -0.576,0.032 z M 374.3415,82.801611 q 3.776,-0.768 7.232,-0.768 0.736,0 1.088,0.032 v 4.96 q -0.768,-0.096 -2.08,-0.096 -0.8,0 -2.272,0.064 l -3.968,0.384 z m 9.856,14.88 q 0,-0.704 -0.128,-1.088 -0.096,-0.416 -0.384,-0.64 -0.48,-0.32 -2.144,-0.32 h -3.52 v -4.896 h 3.52 q 0.832,0 1.312,-0.064 0.48,-0.064 0.736,-0.256 0.256,-0.192 0.32,-0.512 0.096,-0.352 0.096,-1.056 v -6.688 q 3.456,0.352 4.992,1.76 1.536,1.376 1.536,3.904 0,2.336 -0.928,3.52 -0.896,1.184 -2.88,1.664 v 0.128 q 2.08,0.48 2.976,1.504 1.024,1.216 1.024,3.776 0,2.687999 -1.28,4.063999 -1.472,1.568 -5.248,1.952 z m -2.432,6.879999 q -1.76,0 -4.032,-0.256 -2.272,-0.224 -3.52,-0.512 v -4.575999 q 3.872,0.448 6.912,0.448 0.704,0 1.728,-0.064 v 4.927999 q -0.32,0.032 -1.088,0.032 z"
+   id="text2"
+   style="font-size:32px;font-family:'Saira Stencil One';-inkscape-font-specification:'Saira Stencil One';text-align:center;text-anchor:middle;fill:#e50076"
+   aria-label="HTTP 403" /></svg>

src/plainui/static/error_pages/404.html

@@ -9,7 +9,7 @@
         body {
             padding: 0;
             margin: 0;
-            background-color: rgba(0,0,0,1);
+            background-color: rgba(0.1,0.1,0.1,1);
         }
         article {
             margin: 0;
@@ -21,7 +21,7 @@
         }
         img {
             display: block;
-            width: 100%;
+            width: 75%;
             height: auto;
         }
         a {
@@ -31,9 +31,7 @@
 </head>
 <body>
 <article>
-    <a href="https://rc3.world" class="row my-8">
-        <img class="" src="404_NOT_FOUND.jpg" alt="404 Error" title="404 Error" />
-    </a>
+    <img class="" src="404.svg" alt="404 Error" title="404 Error" />
 </article>
 </body>
 </html>

src/plainui/static/error_pages/500.html

@@ -9,7 +9,7 @@
         body {
             padding: 0;
             margin: 0;
-            background-color: rgba(0,0,0,1);
+            background-color: rgba(0.1,0.1,0.1,1);
         }
         article {
             margin: 0;
@@ -21,7 +21,7 @@
         }
         img {
             display: block;
-            width: 100%;
+            width: 75%;
             height: auto;
         }
         a {
@@ -31,9 +31,7 @@
 </head>
 <body>
 <article>
-    <a href="https://rc3.world" class="row my-8">
-        <img class="" src="500_INTERNAL_SERVER_ERROR.jpg" alt="500 - internal Server error" title="500 - internal Server error" />
-    </a>
+   <img class="" src="500.svg" alt="500 - internal Server error" title="500 - internal Server error" />
 </article>
 </body>
 </html>

src/plainui/styles/_import-fonts.scss

@@ -7,6 +7,14 @@
     src: url('fonts/Beon-Regular.woff2') format('woff2');
 }
 
+@font-face {
+    font-family: 'Saira Stencil One';
+    font-style: 400;
+    font-weight: normal;
+    font-display: swap;
+    src: url('fonts/SairaStencilOne-Regular.woff2') format('woff2');
+}
+
 /* Text */
 /* latin-ext */
 @font-face {

src/plainui/styles/components/_buttons.scss

@@ -35,6 +35,18 @@
   }
 }
 
+.btn-grey {
+  color: $black;
+  border: 0;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 474 650' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M470.745 296.915c-.375-3.324-1.044-6.716-.926-10.068l.678-19.203c.174-4.931.629-9.94.524-14.875-.1-4.735-.74-9.522-1.106-14.242l-1.531-19.693c-.254-3.265.189-6.569.392-9.832.636-10.225 1.172-20.464 1.959-30.679.543-7.065 1.088-14.128 1.632-21.192.286-3.712 1.003-7.658.77-11.377-.36-5.738-1.492-11.53-2.228-17.23-.736-5.701-2.071-11.639-2.248-17.388-.111-3.662 1.041-7.681 1.578-11.298l3.149-21.192c.455-3.056.296-5.338-.027-8.452L471.127 48.7c-1.019-9.794-1.085-19.46-1.233-29.32l-.21-14.05c-.011-.716-.526-1.154-1.228-1.232a97117.88 97117.88 0 01-24.572-2.708c-3.215-.353-6.471-.896-9.702-1.067-2.51-.134-5.104.293-7.603.484-9.308.716-18.612 1.53-27.927 2.149-6.992.464-14.055.377-21.06.544l-13.29.317c-.598.015-2.208.002-1.578.037-.94-.037-1.878-.08-2.817-.12l-29.084-1.221c-6.209-.262-12.399.563-18.588 1.066L296.85 4.83c-1.505.122-3.06.148-4.553.37a3.634 3.634 0 00-.259.045 7.823 7.823 0 00-.283-.027c-14.999-1.22-30.078-2.405-45.115-1.768a2578.471 2578.471 0 01-49.387 1.64c-3.724.086-7.475.048-11.194.26l-.028.002a6.763 6.763 0 00-.506-.11c-1.61-.305-3.249-.5-4.868-.75L152.427.139c-1.842-.284-3.415-.083-5.263.159L132.77 2.184l-14.646 1.92c-1.022.134-2.066.22-3.082.402-.361-.035-.723-.068-1.084-.102l-28.74-2.696c-6.02-.565-11.519.108-17.56.735l-16.23 1.686-5.579.58c-.616.063-2.333.196-1.498.209-8.634.089-17.35-.597-25.977-.886l-8.145-.271C7.841 3.68 2.556 5.483 2.407 8.504c-.55 11.211-1.13 22.42-1.653 33.632C.26 52.75.57 63.452.504 74.079.438 84.165.4 94.25.351 104.338c-.045 9.815.432 19.521.923 29.329.982 19.607 1.111 39.237 2.095 58.841.512 10.195 1.774 20.621 1.307 30.828-.504 11.029-1.46 22.133-1.504 33.171-.045 11.557.9 23.129 1.074 34.687.164 10.801-.535 21.673-.82 32.47a1814.453 1814.453 0 01-2.54 59.781c-.292 4.916-.938 9.948-.884 14.875.051 4.723.775 9.536 1.157 14.242.802 9.853 1.687 19.644 1.94 29.524.26 10.116 1.336 20.515.377 30.605l-1.983 20.893c-.365 3.841-.973 7.745-1.06 11.604-.52 22.554 1.22 45.093 2.752 67.569.69 10.107-.433 20.452-.806 30.562-.362 9.799-.333 19.588-.365 29.395l-.045 13.817c-.004 1.192 1.218 1.273 2.125 1.251 13.92-.333 27.84-.594 41.755-1.062 16.135-.542 32.211-.984 48.353-1.065 15.782-.079 31.538.211 47.319.5 1.01.019 2.023.026 3.034.053.023.004.054.009.103.015.454.057.916.077 1.371.116 4.319.363 8.636.728 12.953 1.092 7.294.615 14.813 1.855 22.141 1.766 14.509-.174 29.026-.95 43.533-1.383 16.334-.488 32.656-1.038 48.984-1.705 15.454-.63 30.842-.321 46.311-.128.575.007 3.425.281 1.451.012.944.128 1.903.19 2.85.283l14.187 1.411 14.691 1.461c1.931.191 3.764.442 5.695.242 9.456-.98 18.891-2.26 28.33-3.391 1.616-.192 3.243-.348 4.855-.581.211-.03.423-.052.635-.076 3.484.868 7.376.943 10.93 1.399l16.265 2.087c2.789.357 5.765 1.088 8.591 1.006 2.86-.081 5.79-.671 8.627-1.001l16.305-1.893 8.347-.969c2.026-.235 4.388-1.24 5.819-2.818.652-.625 1.088-1.294 1.108-1.946a5279.574 5279.574 0 001.521-65.87c.17-10.157 1.576-20.348 2.469-30.462.279-3.169.97-6.465.474-9.627l-3.041-19.378c-.75-4.786-1.989-9.742-2.287-14.583-.287-4.68.293-9.574.438-14.258.303-9.847.576-19.689 1.071-29.528.512-10.157 1.196-20.32 1.454-30.488.276-10.86 1.061-21.833.796-32.693-.281-11.559-1.907-23.186-1.743-34.742.057-3.919.846-7.944 1.285-11.837l2.344-20.788c.347-3.083.084-5.61-.268-8.729l-2.406-21.309'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
+
+  &:hover,
+  &:focus,
+  &.focus {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 474 650' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23adb5bd'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M470.745 296.915c-.375-3.324-1.044-6.716-.926-10.068l.678-19.203c.174-4.931.629-9.94.524-14.875-.1-4.735-.74-9.522-1.106-14.242l-1.531-19.693c-.254-3.265.189-6.569.392-9.832.636-10.225 1.172-20.464 1.959-30.679.543-7.065 1.088-14.128 1.632-21.192.286-3.712 1.003-7.658.77-11.377-.36-5.738-1.492-11.53-2.228-17.23-.736-5.701-2.071-11.639-2.248-17.388-.111-3.662 1.041-7.681 1.578-11.298l3.149-21.192c.455-3.056.296-5.338-.027-8.452L471.127 48.7c-1.019-9.794-1.085-19.46-1.233-29.32l-.21-14.05c-.011-.716-.526-1.154-1.228-1.232a97117.88 97117.88 0 01-24.572-2.708c-3.215-.353-6.471-.896-9.702-1.067-2.51-.134-5.104.293-7.603.484-9.308.716-18.612 1.53-27.927 2.149-6.992.464-14.055.377-21.06.544l-13.29.317c-.598.015-2.208.002-1.578.037-.94-.037-1.878-.08-2.817-.12l-29.084-1.221c-6.209-.262-12.399.563-18.588 1.066L296.85 4.83c-1.505.122-3.06.148-4.553.37a3.634 3.634 0 00-.259.045 7.823 7.823 0 00-.283-.027c-14.999-1.22-30.078-2.405-45.115-1.768a2578.471 2578.471 0 01-49.387 1.64c-3.724.086-7.475.048-11.194.26l-.028.002a6.763 6.763 0 00-.506-.11c-1.61-.305-3.249-.5-4.868-.75L152.427.139c-1.842-.284-3.415-.083-5.263.159L132.77 2.184l-14.646 1.92c-1.022.134-2.066.22-3.082.402-.361-.035-.723-.068-1.084-.102l-28.74-2.696c-6.02-.565-11.519.108-17.56.735l-16.23 1.686-5.579.58c-.616.063-2.333.196-1.498.209-8.634.089-17.35-.597-25.977-.886l-8.145-.271C7.841 3.68 2.556 5.483 2.407 8.504c-.55 11.211-1.13 22.42-1.653 33.632C.26 52.75.57 63.452.504 74.079.438 84.165.4 94.25.351 104.338c-.045 9.815.432 19.521.923 29.329.982 19.607 1.111 39.237 2.095 58.841.512 10.195 1.774 20.621 1.307 30.828-.504 11.029-1.46 22.133-1.504 33.171-.045 11.557.9 23.129 1.074 34.687.164 10.801-.535 21.673-.82 32.47a1814.453 1814.453 0 01-2.54 59.781c-.292 4.916-.938 9.948-.884 14.875.051 4.723.775 9.536 1.157 14.242.802 9.853 1.687 19.644 1.94 29.524.26 10.116 1.336 20.515.377 30.605l-1.983 20.893c-.365 3.841-.973 7.745-1.06 11.604-.52 22.554 1.22 45.093 2.752 67.569.69 10.107-.433 20.452-.806 30.562-.362 9.799-.333 19.588-.365 29.395l-.045 13.817c-.004 1.192 1.218 1.273 2.125 1.251 13.92-.333 27.84-.594 41.755-1.062 16.135-.542 32.211-.984 48.353-1.065 15.782-.079 31.538.211 47.319.5 1.01.019 2.023.026 3.034.053.023.004.054.009.103.015.454.057.916.077 1.371.116 4.319.363 8.636.728 12.953 1.092 7.294.615 14.813 1.855 22.141 1.766 14.509-.174 29.026-.95 43.533-1.383 16.334-.488 32.656-1.038 48.984-1.705 15.454-.63 30.842-.321 46.311-.128.575.007 3.425.281 1.451.012.944.128 1.903.19 2.85.283l14.187 1.411 14.691 1.461c1.931.191 3.764.442 5.695.242 9.456-.98 18.891-2.26 28.33-3.391 1.616-.192 3.243-.348 4.855-.581.211-.03.423-.052.635-.076 3.484.868 7.376.943 10.93 1.399l16.265 2.087c2.789.357 5.765 1.088 8.591 1.006 2.86-.081 5.79-.671 8.627-1.001l16.305-1.893 8.347-.969c2.026-.235 4.388-1.24 5.819-2.818.652-.625 1.088-1.294 1.108-1.946a5279.574 5279.574 0 001.521-65.87c.17-10.157 1.576-20.348 2.469-30.462.279-3.169.97-6.465.474-9.627l-3.041-19.378c-.75-4.786-1.989-9.742-2.287-14.583-.287-4.68.293-9.574.438-14.258.303-9.847.576-19.689 1.071-29.528.512-10.157 1.196-20.32 1.454-30.488.276-10.86 1.061-21.833.796-32.693-.281-11.559-1.907-23.186-1.743-34.742.057-3.919.846-7.944 1.285-11.837l2.344-20.788c.347-3.083.084-5.61-.268-8.729l-2.406-21.309'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat
+  }
+}
+
 .btn-sm {
     padding: map-get($spacers, 1);
     font-size: 1rem;

src/plainui/styles/components/_event.scss

 .hub-event {
+    /* store current class for use in nested rules */
+    $g: &;
+
+    background-color: $secondary;
+    border-radius: 1.6rem;
+    color: $black;
+    column-gap: 1rem;
     display: grid;
     grid-template-areas:
-        "name name"
-        "date time"
+        "day name"
+        "time tags"
         "buttons buttons";
     grid-template-columns: auto 1fr;
-    gap: .5rem;
+    line-height: 1;
+    row-gap: .5rem;
 
-    &__name {
-        grid-area: name;
-        text-decoration: none;
-        flex-grow: 1;
+    .badge {
+        background-color: $black;
+        color: $secondary;
+    }
+
+    &.hub-event--past {
+        background-color: $black;
+        color: $gray-600;
+
+        #{$g}__name {
+            /* imporant to override link styles */
+            color: $gray-600 !important;
+            text-decoration: line-through;
+        }
+
+        .badge {
+            background-color: $gray-600;
+            color: $black;
+        }
+    }
+
+    &.hub-event--upcoming {
+        background-color: $black;
+        color: $primary;
+
+        #{$g}__name {
+            /* imporant to override link styles */
+            color: $primary !important;
+        }
 
-        &:hover {
-            text-decoration: underline;
+        .badge {
+            background-color: $primary;
+            color: $black;
         }
     }
 
     &__date {
+        text-align: right;
         grid-area: date;
     }
 
+    &__day {
+        font-family: "Saira Stencil One";
+        font-size: 1.5rem;
+        text-transform: uppercase;
+    }
+
     &__time {
-        grid-area: time;
+        font-family: "beon";
+    }
+
+    &__name-container {
+        align-items: baseline;
+        display: flex;
+        font-size: 1.5rem;
+        gap: .5rem;
+        grid-area: name;
+        /* min-width for text overflow ellipsis */
+        min-width: 0;
+    }
+
+    &__name {
+        /* imporant to override link styles */
+        color: $black !important;
+        /* min-width for text overflow ellipsis */
+        min-width: 0;
+        /* imporant to override link styles */
+        text-decoration: none !important;
+
+        /* Extra div for text overflow ellipsis */
+        > div {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    &__now {
+        color: $white;
+        font-family: "Saira Stencil One";
+    }
+
+    &__tags {
+        display: flex;
+        gap: .5rem;
+        grid-area: tags;
+        /* min-width for text overflow ellipsis */
+        min-width: 0;
+
+        /* Extra div for text overflow ellipsis */
+        > div {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
 
     &__buttons {
-        align-items: flex-start;
         display: flex;
         grid-area: buttons;
         gap: .5rem;
+        justify-content: flex-end;
     }
 
-    @include media-breakpoint-up("sm") {
+    @include media-breakpoint-up("md") {
+        column-gap: 1rem;
         grid-template-areas:
-            "name name name"
-            "date time buttons";
+            "day name buttons"
+            "time tags buttons";
         grid-template-columns: auto auto 1fr;
-
+        row-gap: .25rem;
 
         &__buttons {
+            align-items: center;
             justify-content: flex-end;
         }
     }

src/plainui/styles/hub-assembly.scss

@@ -9,9 +9,11 @@
 
 @import "./sections/fahrplan";
 
+@import "./components/event";
 @import "./components/header";
 @import "./components/image";
 @import "./components/buttons";
 @import "./components/badges";
+@import "./components/slider";
 
 * {-webkit-font-smoothing: antialiased;}