further updates based on feedback

IFComp/lib/IFComp.pm

@@ -4,7 +4,6 @@ use namespace::autoclean;
 
 use Catalyst::Runtime 5.80;
 
-
 # Set flags and add plugins for the application.
 #
 # Note that ORDERING IS IMPORTANT here as plugins are initialized in order,

IFComp/root/lib/site/footer

@@ -5,7 +5,7 @@
  <div class="row">
  <div class="col-sm-4" style="width: 25%; margin-right:2em; margin-bottom: 1ex;">
    <a href="http://iftechfoundation.org">
-     <img class="iftf_logo col-sm-12 img-responsive transparent-img-bg svgicon"
+     <img class="iftf_logo col-sm-12 img-fluid transparent-img-bg svgicon"
           alt="Interactive Fiction Technology Foundation">
    </a>
  </div>

IFComp/root/lib/site/header

@@ -76,6 +76,20 @@ END;
           <li class="nav-item dropdown">
 
 			<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+                <symbol id="pencil" viewBox="0 0 16 16">
+                  <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
+                </symbol>
+                <symbol id="person-fill" viewBox="0 0 16 16">
+                  <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+                </symbol>
+                <symbol id="shuffle" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.6 9.6 0 0 0 7.556 8a9.6 9.6 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.6 10.6 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.6 9.6 0 0 0 6.444 8a9.6 9.6 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5"/>
+                    <path d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192m0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192"/>
+                </symbol>
+                <symbol id="link-45deg" viewBox="0 0 16 16">
+                    <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/>
+                    <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/>
+                </symbol>
                 <symbol id="question-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                     <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"/>

IFComp/root/src/_current_entry_row.tt

@@ -3,7 +3,7 @@
     [% IF entry.cover_exists %]
     <div class="col-sm-4">
         <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
-            <a itemprop="contentUrl" href="[% c.uri_for_action( '/play/full_cover', [ entry.id ] ) %]" target="_blank"><img itemprop="thumbnailUrl" class="img-responsive" src="[% c.uri_for_action( '/play/cover', [ entry.id ] ) %]" alt="Cover art for [% entry.title %]" style="margin-left: auto; margin-right: auto; max-height: 350px;" loading="lazy"></a>
+            <a itemprop="contentUrl" href="[% c.uri_for_action( '/play/full_cover', [ entry.id ] ) %]" target="_blank"><img itemprop="thumbnailUrl" class="img-fluid" src="[% c.uri_for_action( '/play/cover', [ entry.id ] ) %]" alt="Cover art for [% entry.title %]" loading="lazy"></a>
 	    [% IF (entry.genai_state / 2) % 2 == 1 %]
 		<span style="font-size: smaller;" itemprop="genai_cover"><em>Generative artificial intelligence was used to make this cover art.</em></span>
 	    [% END %]

IFComp/root/src/_entry_row.tt

@@ -18,7 +18,7 @@ END;
 
         <div class="col-sm-4">
     [% IF c.model('Cover').exists_for_ifdb_id( entry.ifdb_id ) %]
-            <img class="img-responsive" src="/static/images/covers/[% entry.ifdb_id %]" alt="Cover art for [% entry.title %]" style="margin-left: auto; margin-right: auto; max-height: 350px;" loading="lazy">
+            <img class="img-fluid" src="/static/images/covers/[% entry.ifdb_id %]" alt="Cover art for [% entry.title %]" loading="lazy">
     [% ELSE %]
         &nbsp;
     [% END %]

IFComp/root/src/_entry_title.tt

@@ -2,7 +2,7 @@
 <h2>
     <span itemprop="name">[% entry.title | html %]</span>
     [% IF include_permalink %]
-        <a href="#entry-[% entry.id %]"><small><span class="glyphicon glyphicon-link" style="float: right; margin:0; padding: 0"></span></small></a>
+        <a href="#entry-[% entry.id %]"><svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#link-45deg"></use></svg></a>
     [% END %]
     [% IF entry.subtitle %]
         <br /><small class="text-secondary" itemprop="alternateName">[% entry.subtitle | html %]</small>

IFComp/root/src/about/schedule.tt

@@ -1,7 +1,8 @@
 [% meta.title = 'IFComp - Competition Schedule' %]
 <div class="container">
-<div class="jumbotron">
+     <div class="container py-4"> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <div class="container">
 <h1 style="text-align:center;">Competition Schedule</h1>
-</div>
+     </div></div></div></div>
 
-[% INCLUDE _schedule.tt %]
+[% INCLUDE _schedule.tt %]
+</div>

IFComp/root/src/admin/prizes/index.tt

@@ -27,7 +27,7 @@
             <td>[% prize.url %]</td>
             <td>[% prize.location %]</td>
             <td>[% prize.category %]</td>
-            <td><a href="[% c.uri_for_action( '/admin/prizes/update', [ prize.id ] ) %]"><span class="glyphicon glyphicon-pencil"></span></a></td>
+            <td><a href="[% c.uri_for_action( '/admin/prizes/update', [ prize.id ] ) %]"><svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#pencil"></use></svg></a></td>
         </tr>
     [% END %]
     </tbody>

IFComp/root/src/ballot/index.tt

@@ -28,7 +28,7 @@ you have played so far.[% END %]</p>
  </div>
  <div class="col-sm-3">
   <a href="[% c.uri_for( '/static/downloads/IFComp' _ current_comp.year _ '.zip' ) %]">
-    <img class="img-responsive col-sm-12 download_icon" alt="Download all the entries" />
+    <img class="img-fluid col-sm-12 download_icon" alt="Download all the entries" />
   </a>
  </div>
 </div>
@@ -44,7 +44,7 @@ you have played so far.[% END %]</p>
 </div>
 
 <div class="col-sm-3">
-<img class="img-responsive hidden-xs download-img-link download_icon" alt="Download link not yet ready" />
+<img class="img-fluid hidden-xs download-img-link download_icon" alt="Download link not yet ready" />
 </div>
 
 </div>
@@ -55,7 +55,7 @@ you have played so far.[% END %]</p>
 
 <div class="row">
 <div class="col-sm-2">
-<a href="/ballot/vote"><img class="img-responsive hidden-xs judge-img-link judge_icon" alt="Judge the entries" /></a>
+<a href="/ballot/vote"><img class="img-fluid hidden-xs judge-img-link judge_icon" alt="Judge the entries" /></a>
 </div>
 
 <div class="col-sm-10">
@@ -92,42 +92,42 @@ you have played so far.[% END %]</p>
         <p><strong>Here is your very own reshuffle of the IFComp entries!</strong> Whenever you request to see this personalized list, the games will stay in the same order.</p>
         <p style="text-align:center;">
         <a href="[% c.uri_for( '/ballot', { shuffle => 1 } ) %]#browse" type="submit" class="btn btn-default btn-lg">
-            <span class="glyphicon glyphicon-random"></span> Random Shuffle
+            <svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#shuffle"></use></svg> Random Shuffle
         </a>
         <a href="[% c.uri_for( '/ballot', { shuffle => 1, personalize => 1 } ) %]#browse" type="submit" class="btn btn-primary btn-lg">
-                   <span class="glyphicon glyphicon-user"></span> Personal Shuffle
+                   <svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#person-fill"></use></svg> Personal Shuffle
         </a>
         <a href="[% c.uri_for( '/ballot', { alphabetize => 1 } ) %]#browse" type="submit" class="btn btn-default btn-lg">
-            <span class="glyphicon glyphicon-list"></span> Alphabetize
+            <svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#card-list"></use></svg> Alphabetize
         </a>
         </p>
     [% ELSE %]
         <p style="text-align:center;">
         <a href="javascript:location.reload()" type="submit" class="btn btn-primary btn-lg">
-            <span class="glyphicon glyphicon-random"></span> Random Shuffle
+            <svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#shuffle"></use></svg> Random Shuffle
         </a>
         [% IF c.user %]
             <a href="[% c.uri_for( '/ballot', { shuffle => 1, personalize => 1 } ) %]#browse" type="submit" class="btn btn-default btn-lg">
-               <span class="glyphicon glyphicon-user"></span> Personal Shuffle
+                   <svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#person-fill"></use></svg> Personal Shuffle
             </a>
         [% END %]
         <a href="[% c.uri_for( '/ballot', { alphabetize => 1 } ) %]#browse" type="submit" class="btn btn-default btn-lg">
-            <span class="glyphicon glyphicon-list"></span> Alphabetize
+            <svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#card-list"></use></svg> Alphabetize
         </a>
         </p>
     [% END %]
 [% ELSE %]
     <p style="text-align:center;">
     <a href="[% c.uri_for( '/ballot', { shuffle => 1 } ) %]#browse" type="submit" class="btn btn-default btn-lg">
-       <span class="glyphicon glyphicon-random"></span> Random Shuffle
+            <svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#shuffle"></use></svg> Random Shuffle
     </a>
     [% IF c.user %]
         <a href="[% c.uri_for( '/ballot', { shuffle => 1, personalize => 1 } ) %]#browse" type="submit" class="btn btn-default btn-lg">
-           <span class="glyphicon glyphicon-user"></span> Personal Shuffle
+                   <svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#person-fill"></use></svg> Personal Shuffle
         </a>
     [% END %]
     <a href="[% c.uri_for( '/ballot', { alphabetize => 1 } ) %]#browse" type="submit" class="btn btn-primary btn-lg">
-        <span class="glyphicon glyphicon-list"></span> Alphabetize
+            <svg width="16" height="16" class="svgicon bi my-1 theme-icon-active"><use href="#card-list"></use></svg> Alphabetize
     </a>
     </p>
 [% END %]

IFComp/root/src/comp/cover_sheet.tt

@@ -30,7 +30,7 @@ judging on [% comp.judging_begins.strftime( '%{month_name} %{day}' ) %], [% comp
 
     [% IF entry.cover_exists %]
         <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" class="col-sm-4">
-            <img class="img-responsive" itemprop="contentUrl" src="[% c.uri_for_action( '/play/cover', [ entry.id ] ) %]" alt="Cover art for [% entry.title %]" style="margin-left: auto; margin-right: auto; max-height: 350px;">
+            <img class="img-fluid" itemprop="contentUrl" src="[% c.uri_for_action( '/play/cover', [ entry.id ] ) %]" alt="Cover art for [% entry.title %]">
         [% IF entry.cover_artist %]
             <p><strong>Cover art by:</strong> <span itemprop="author">[% entry.cover_artist %]</span></p>
         [% END %]

IFComp/root/src/comp/index.tt

@@ -9,24 +9,24 @@
 
         <p style="text-align:center;">
 [% IF view_is_compact %]
-        <a href="[% c.uri_for_action( '/comp/index', [ comp.year ] ) %]" type="submit" class="btn btn-outline-info">
-            <svg width="20" height="20" class="svginfo bi me-2 opacity-50"><use href="#bar-chart-fill"></use></svg>
+        <a href="[% c.uri_for_action( '/comp/index', [ comp.year ] ) %]" type="submit" class="btn btn-outline-primary">
+            <svg width="20" height="20" class="svgbuttons bi me-2 opacity-50"><use href="#bar-chart-fill"></use></svg>
             Switch to full view
         </a>
 [% ELSE %]
-        <a href="[% c.uri_for_action( '/comp/index', [ comp.year ], { compact => 1 } ) %]" type="submit" class="btn btn-outline-info">
-            <svg width="20" height="20" class="svginfo bi me-2 opacity-50"><use href="#card-list"></use></svg>
+        <a href="[% c.uri_for_action( '/comp/index', [ comp.year ], { compact => 1 } ) %]" type="submit" class="btn btn-outline-primary">
+            <svg width="20" height="20" class="svgbuttons bi me-2 opacity-50"><use href="#card-list"></use></svg>
             Switch to compact list view
         </a>
 [% END %]
-        <a href="http://mirror.ifarchive.org/indexes/if-archiveXgamesXcompetition[% IF comp.year < 2000 %][% comp.year.substr( 2, 2 ) %][% ELSE %][% comp.year %][% END %].html" type="submit" class="btn btn-outline-info">
-            <svg width="20" height="20" class="svginfo bi me-2 opacity-50"><use href="#cloud-download-fill"></use></svg>
+        <a href="http://mirror.ifarchive.org/indexes/if-archiveXgamesXcompetition[% IF comp.year < 2000 %][% comp.year.substr( 2, 2 ) %][% ELSE %][% comp.year %][% END %].html" type="submit" class="btn btn-outline-primary">
+            <svg width="20" height="20" class="svgbuttons bi me-2 opacity-50"><use href="#cloud-download-fill"></use></svg>
             Browse / download [% comp.year %] game files
         </a>
         </p>
 
 [% IF comp.year == 1995 %]
-<div class="alert alert-info">
+<div class="alert alert-primary">
 <p>
 The competition's very first run in 1995 split the entries into two categories:
 one for games written with Inform, and one for TADS. Therefore, that year had
@@ -170,11 +170,11 @@ $(function () {
 <div class="row justify-content-between">
   <div class="col-2">
   [% IF previous_year %]
-  <a class="btn btn-outline-info" href="[% c.uri_for_action( 'comp/index', [ previous_year ], { compact => view_is_compact } ) %]">&larr; [% previous_year %] results</a>
+  <a class="btn btn-outline-primary" href="[% c.uri_for_action( 'comp/index', [ previous_year ], { compact => view_is_compact } ) %]">&larr; [% previous_year %] results</a>
   [% END %]
   </div>
   [% IF next_year %]
-  <div class="col-2 text-end"><a class="btn btn-outline-info" href="[% c.uri_for_action( 'comp/index', [ next_year ], { compact => view_is_compact } ) %]">[% next_year %] results &rarr;</a></div>
+  <div class="col-2 text-end"><a class="btn btn-outline-primary" href="[% c.uri_for_action( 'comp/index', [ next_year ], { compact => view_is_compact } ) %]">[% next_year %] results &rarr;</a></div>
   [% END %]
 </div>
 [% END %]

IFComp/root/src/entry/_form.tt

@@ -125,7 +125,7 @@ I hereby grant the Interactive Fiction Technology Foundation (IFComp's organizin
 [% IF entry.id && entry.cover_file %]
 <div class="row">        <div class="col-xs-4">
             <p>Current cover image:<br />
-            <img class="img-responsive" src="[% c.uri_for_action( '/entry/cover', [ entry.id ] ) %]" alt="Cover art for [% entry.title %]" style="margin-left: auto; margin-right: auto;">
+            <img class="img-fluid" src="[% c.uri_for_action( '/entry/cover', [ entry.id ] ) %]" alt="Cover art for [% entry.title %]">
             </p>
         </div>
         </div>

IFComp/root/src/welcome.tt2

@@ -9,7 +9,7 @@
           <h2 class="col-md-8 fs-4">An annual celebration of new, text-driven digital games and stories from independent creators.</h2>
         </div>
       </div>
-    </div>[%# end of jumbotron %]
+    </div>
 </div>
 
 <div class="container">

IFComp/root/static/css/ifcomp-bs5.css

@@ -11,7 +11,7 @@ body {
 
 .svglink { fill: #37f; }
 /* .svglink:hover { fill: #eee; } */
-.svginfo { fill: var(--bs-info); }
+.svgbuttons { fill: var(--bs-primary); }
 
 [data-bs-theme="dark"] {
     code { color: white; }