Fix some styling for new template

website/events/templates/events/event.html

@@ -71,7 +71,7 @@
                                         <i>({{ event.max_participants }} {% trans "max" %})</i>
                                         {% with prc=registration_percentage %}
                                             <div class="progress mt-1">
-                                                <div class="progress-bar" style="width: {{ prc|floatformat:"0" }}%"></div>
+                                                <div class="progress-bar progress{{ prc|floatformat:"0" }}"></div>
                                             </div>
                                         {% endwith %}
                                     {% endif %}

website/mailinglists/templates/admin/mailinglists/change_list.html

@@ -5,7 +5,7 @@
     <div class="auto-lists-info">
         <h2>{% trans "Automatically generated mailing lists" %}</h2>
         <div class="results">
-            <table id="result_list" style="width:100%">
+            <table id="result_list">
                 <thead>
                 <tr>
                     <th>

website/members/templates/members/profile.html

@@ -72,9 +72,9 @@
                                 <br>
                                 {% for period in achievement.periods %}
                                     {% if period.role %}
-                                        <span style="text-transform:inherit;">{{ period.role }}: </span>
+                                        <span>{{ period.role }}: </span>
                                     {% elif period.chair %}
-                                        <span style="text-transform:inherit;">{% trans "Chair" %}: </span>
+                                        <span>{% trans "Chair" %}: </span>
                                     {% endif %}
                                     <i>{% if period.since|date:'Y m d' == '1970 01 01' %}?{% else %}
                                         {{ period.since }}{% endif %} -

website/thaliawebsite/static/css/_progress.scss

@@ -9,5 +9,11 @@
         -moz-border-radius: 0;
         border-radius: 0;
         background-color: $preset;
+
+        @for $i from 1 through 100 {
+            &.progress#{$i} {
+                width: #{percentage($i/100)};
+            }
+        }
     }
 }

website/thaliawebsite/static/css/base.scss

 #accentbar {
     background: $preset;
     height: 5px;
-    position: relative;
+    z-index: 1020;
 }
 
 .navbar {
     font-size: 16px;
     background-color: $white;
     border-bottom: 1px solid $grey;
+    top: 5px;
 
     > .container {
         justify-content: end;

website/thaliawebsite/templates/base.html

@@ -43,13 +43,17 @@
     {% if request.member and request.member.current_membership is None %}
         <div class="announcement">
             <i class="fas fa-id-card"></i>
-            <p><a href="{% url 'registrations:renew' %}">{% trans "You're currently not a member of Thalia. Renew your membership to get access to all parts of the website." %}</a></p>
+            <p>
+                <a href="{% url 'registrations:renew' %}">
+                    {% trans "You're currently not a member of Thalia. Renew your membership to get access to all parts of the website." %}
+                </a>
+            </p>
         </div>
     {% endif %}
     {% include "announcements/announcement.html" with announcements=announcements %}
 </section>
 
-<div id="accentbar"></div>
+<div id="accentbar" class="sticky-top"></div>
 
 <nav class="navbar navbar-expand-lg sticky-top">
     <div class="container">