Fixup djLint issues with styles

freezing/web/static/css/styles.css

@@ -620,4 +620,4 @@ nav.bg-light {
 .snowflake:nth-of-type(11) {
     left: 65%;
     animation-delay: 2.5s
-}
+}

freezing/web/static/js/snow.js

@@ -113,4 +113,4 @@ $(document).ready(() => {
     var item = "<div class='snow" + id + "' style='position:absolute; margin-left: " + left + "px; margin-top: " + top + "px; width: " + width + "px; height: " + height + "px; border-radius: 50%; background-color: white; -webkit-filter: blur(" + blur + "px); -moz-filter: blur(" + blur + "px); -o-filter: blur(" + blur + "px); -ms-filter: blur(" + blur + "px); filter: blur(" + blur + "px);'></div>"
     return item;
   }
-});
+});

freezing/web/templates/base_navbar.html

@@ -521,7 +521,7 @@ <h1 class="modal-title fs-5 ps-2" id="aboutModalLabel">
                                    background-color: #ffffff08">
                     [BAFS] probably most closely resembles organizing a game of freeze tag
                     on the grade-school playground
-                    <cite style="margin-left: 0.125rem; white-space: nowrap">&mdash; Steve O</cite>
+                    <cite style="margin-left: 0.125rem; white-space: nowrap">— Steve O</cite>
                 </blockquote>
                 <p>
                     Freezing Saddles runs from January 1 through the last

freezing/web/templates/explore/indiv_elev_dist.html

@@ -1,16 +1,16 @@
 {% extends "base.html" %}
 {% block foot %}
-<link rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css"
-      integrity="sha384-ztqQYuF0ztQOO26+6hbRTtSQ6HGLosUJRQI9kx0L9OpJiESTtsiriiQNqwBIBl9a"
-      crossorigin="anonymous">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js"
-        integrity="sha384-Nth41CoN2s0hj2li43h7cs5a1J0zroMLa7ugSGFSdWJMF1OuKrJwZaritPHBnk3E"
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"
-        integrity="sha384-xOzJ6ocROuPNeY/PUgXyXgiPyvvePCiWVkKXro4Lb1gWoGJOtrJw+zrpf3NBx1B5"
-        crossorigin="anonymous"></script>
-<script type="text/javascript">
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css"
+          integrity="sha384-ztqQYuF0ztQOO26+6hbRTtSQ6HGLosUJRQI9kx0L9OpJiESTtsiriiQNqwBIBl9a"
+          crossorigin="anonymous">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js"
+            integrity="sha384-Nth41CoN2s0hj2li43h7cs5a1J0zroMLa7ugSGFSdWJMF1OuKrJwZaritPHBnk3E"
+            crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"
+            integrity="sha384-xOzJ6ocROuPNeY/PUgXyXgiPyvvePCiWVkKXro4Lb1gWoGJOtrJw+zrpf3NBx1B5"
+            crossorigin="anonymous"></script>
+    <script type="text/javascript">
   var pattern = ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5'];
   $(() => {
     $.ajax({
@@ -64,7 +64,7 @@
       });
     });
   });
-</script>
+    </script>
 {% endblock %}
 {% block content %}
     <h1>
@@ -75,7 +75,13 @@ <h1>
     </div>
     <!--Div that will hold our leaderboard chart-->
     <div id="chart_div" class="c3-wide">
-         <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><style>.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class="spinner_zWVm" x="1" y="1" width="7.33" height="7.33"/><rect class="spinner_gfyD" x="8.33" y="1" width="7.33" height="7.33"/><rect class="spinner_T5JJ" x="1" y="8.33" width="7.33" height="7.33"/><rect class="spinner_E3Wz" x="15.66" y="1" width="7.33" height="7.33"/><rect class="spinner_g2vs" x="8.33" y="8.33" width="7.33" height="7.33"/><rect class="spinner_ctYB" x="1" y="15.66" width="7.33" height="7.33"/><rect class="spinner_BDNj" x="15.66" y="8.33" width="7.33" height="7.33"/><rect class="spinner_rCw3" x="8.33" y="15.66" width="7.33" height="7.33"/><rect class="spinner_Rszm" x="15.66" y="15.66" width="7.33" height="7.33"/></svg>
+        <svg width="48"
+             height="48"
+             viewBox="0 0 24 24"
+             fill="currentColor"
+             xmlns="http://www.w3.org/2000/svg">
+            <style>.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class="spinner_zWVm" x="1" y="1" width="7.33" height="7.33" /><rect class="spinner_gfyD" x="8.33" y="1" width="7.33" height="7.33" /><rect class="spinner_T5JJ" x="1" y="8.33" width="7.33" height="7.33" /><rect class="spinner_E3Wz" x="15.66" y="1" width="7.33" height="7.33" /><rect class="spinner_g2vs" x="8.33" y="8.33" width="7.33" height="7.33" /><rect class="spinner_ctYB" x="1" y="15.66" width="7.33" height="7.33" /><rect class="spinner_BDNj" x="15.66" y="8.33" width="7.33" height="7.33" /><rect class="spinner_rCw3" x="8.33" y="15.66" width="7.33" height="7.33" /><rect class="spinner_Rszm" x="15.66" y="15.66" width="7.33" height="7.33" />
+        </svg>
         &nbsp;Loading chart data...
     </div>
 {% endblock %}

freezing/web/templates/index.html

@@ -70,6 +70,12 @@
     max-height: 12rem;
     margin-bottom: .5rem;
   }
+    .frontpage-alert-high {
+        z-index: 1001;
+    }
+    .border-right-muted {
+        border-right: 1px solid #8888;
+    }
     </style>
     <link rel="stylesheet"
           href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
@@ -160,8 +166,7 @@ <h3>
             usually March 19<sup>th</sup>.
         </div>
     {% elif bafs_is_over %}
-        <div class="my-3 my-lg-4 py-2 alert alert-success text-center position-relative"
-             style="z-index: 1001">
+        <div class="my-3 my-lg-4 py-2 alert alert-success text-center position-relative frontpage-alert-high">
             Winter is over. The game is done. The reindeer have been put out to pasture. Time to clean your bike, wax your chain,
             and go for a ride.
             <span class="sprout">🌱</span>
@@ -183,7 +188,7 @@ <h3>
             {% if yourself.missed_yesterday %}
                 <div class="my-3 my-lg-4 py-2 alert alert-danger text-center">
                     <strong>You didn't ride yesterday!</strong> If you can, it's important to ride every
-                    day. Even just <a style="color: inherit" href="/leaderboard/indiv_sleaze">one mile</a> will help your team!
+                    day. Even just <a class="text-reset" href="/leaderboard/indiv_sleaze">one mile</a> will help your team!
                 </div>
             {% elif yourself.hour >= 12 %}
                 <div class="my-3 my-lg-4 py-2 alert alert-info text-center">
@@ -305,8 +310,7 @@ <h3>
                             <a class="tag-link block-link" href="/my/rides">you</a>
                         </div>
                         <div class="d-grid grid-2 flex-grow-1">
-                            <div class="d-flex flex-column justify-content-center flex-grow-1 text-nowrap text-center px-3 py-2"
-                                 style="border-right: 1px solid #8888">
+                            <div class="d-flex flex-column justify-content-center flex-grow-1 text-nowrap text-center px-3 py-2 border-right-muted">
                                 {% if yourself.rank %}
                                     <div>
                                         <a class="tag-link"
@@ -357,7 +361,7 @@ <h3>
                 {% elif yourself.not_logged_in %}
                     <a class="tag-link d-flex justify-content-center card bg-light stats-card px-3 py-2"
                        href="/login">
-                        <span style="text-decoration: underline">Log in</span>&nbsp;to see your own stats.
+                        <span class="text-decoration-underline">Log in</span>&nbsp;to see your own stats.
                     </a>
                 {% endif %}
             </div>

freezing/web/templates/leaderboard/indiv.html

@@ -80,7 +80,7 @@ <h2 class="mb-3">
         This leaderboard is also available as a <a href="/leaderboard/individual_text">text-only version</a>.
     </p>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart_indiv_leaderboard" style="width:100%">
+    <div id="chart_indiv_leaderboard" class="w-100">
         <svg width="48"
              height="48"
              viewBox="0 0 24 24"

freezing/web/templates/leaderboard/indiv_various.html

@@ -153,6 +153,6 @@ <h2 class="mb-3">
         <strong id="title"></strong>
     </div>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart_indiv_leaderboard" style="width: 100%">
+    <div id="chart_indiv_leaderboard" class="w-100">
     </div>
 {% endblock %}

freezing/web/templates/leaderboard/team.html

@@ -80,7 +80,7 @@ <h2 class="mb-3">
         This leaderboard is also available as a <a href="/leaderboard/team_text">text-only version</a>.
     </p>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart_team_leaderboard" style="width:100%">
+    <div id="chart_team_leaderboard" class="w-100">
         <svg width="48"
              height="48"
              viewBox="0 0 24 24"

freezing/web/templates/leaderboard/team_various.html

@@ -110,6 +110,6 @@ <h2 class="mb-3">
         <strong id="title"></strong>
     </div>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart_team_leaderboard" style="width:100%">
+    <div id="chart_team_leaderboard" class="w-100">
     </div>
 {% endblock %}

freezing/web/templates/people/ridedays.html

@@ -8,18 +8,18 @@ <h2 class="mb-3">
             <strong>The competiton for this year is complete after {{ num_days }} days of riding!</strong>
         </p>
     {% endif %}
-    <ul style="padding-left: 1em">
-        <li style="list-style: none">
+    <ul class="list-unstyled ps-3">
+        <li>
             <strong>{{ every_day_riders }} rider{{ every_day_riders|ess }}:</strong>
             Your name is <span class="text-success">green</span>, you've ridden every day. <em>Congratulations!</em>&nbsp;🏆 for you!
         </li>
         {% if contenders %}
-            <li style="list-style: none">
+            <li>
                 <strong>{{ contenders }} rider{{ contenders|ess }}:</strong>
                 <span class="text-warning">Yellow</span> means you are one ride shy of every day and you have not yet ridden today.  ⚠️  <strong>Go ride today!</strong>
             </li>
         {% endif %}
-        <li style="list-style: none">
+        <li>
             <strong>{{ remainders }} rider{{ remainders|ess }}:</strong>
             <span class="text-danger">Red</span> means you have missed a day, alas. Maybe next year you will be in the elite group of every day riders.
         </li>

freezing/web/templates/pointless/distance.html

@@ -1,11 +1,11 @@
 {% extends "base.html" %}
 {% block content %}
-<h2 class="mb-3">
-    Average Distance
-</h2>
-<p>
-    Rider average distance per ride, minimum ten days with a ride for CPTJohnC's Pointless Prize
-</p>
+    <h2 class="mb-3">
+        Average Distance
+    </h2>
+    <p>
+        Rider average distance per ride, minimum ten days with a ride for CPTJohnC's Pointless Prize
+    </p>
     <div class="card">
         <div class="card-body py-1">
             <table class="table table-condensed">