Switch to Bootstrap 5

fragments/green_blurb.md

@@ -6,4 +6,4 @@ a huge selection of modern tools that you can use on your project.
 This section will help you to decide which tools are best for
 you.
 
-<p><a class="btn btn-default" href="/greenfield/" role="button">View details &raquo;</a></p>
+<p><a class="btn btn-light" href="/greenfield/" role="button">View details &raquo;</a></p>

fragments/hosting_blurb.md

@@ -5,4 +5,4 @@ built in Perl. This section will help you to recognise exactly
 which technologies are being used. It also has advice on moving
 gradually towards a newer toolset.
 
-<p><a class="btn btn-default" href="/legacy/" role="button">View details &raquo;</a></p>
+<p><a class="btn btn-light" href="/legacy/" role="button">View details &raquo;</a></p>

fragments/jumbo.md

@@ -12,4 +12,4 @@ up-to-date advice for building web sites with Perl.
 will always be up to date. That's why the code for this site is on
 [Github](https://github.com/davorg/perlwebadvice).)
 
-<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
+<p><a class="btn btn-primary btn-lg" href="#">Learn more &raquo;</a></p>

fragments/legacy_blurb.md

@@ -6,4 +6,4 @@ the kinds of hosting options that are open to you. Or, if you're
 running a hosting company, it has suggestions of what you can do
 to make your hosting as attractive as possible to Perl projects.
 
-<p><a class="btn btn-default" href="/hosting/" role="button">View details &raquo;</a></p>
+<p><a class="btn btn-light" href="/hosting/" role="button">View details &raquo;</a></p>

in/greenfield/index.html.tt

@@ -1,5 +1,5 @@
     <!-- Main jumbotron for a primary marketing message or call to action -->
-    <div class="jumbotron">
+    <div class="container py-5 bg-light">
       <div class="container">
         <h1>Use PSGI</h1>
         <p>PSGI is the "Perl Server Gateway Interface". It is the currently

in/hosting/index.html.tt

@@ -1,5 +1,5 @@
     <!-- Main jumbotron for a primary marketing message or call to action -->
-    <div class="jumbotron">
+    <div class="container py-5 bg-light">
       <div class="container">
         <h1>Look for PSGI</h1>
         <p>Only use a hosting service that allows you to develop with PSGI.</p>

in/index.html.tt

@@ -1,5 +1,5 @@
     <!-- Main jumbotron for a primary marketing message or call to action -->
-    <div class="jumbotron">
+    <div class="container py-5 bg-light">
       <div class="container">
 [% INCLUDE jumbo.md %]
       </div>
@@ -8,13 +8,13 @@
     <div class="container">
       <!-- Example row of columns -->
       <div class="row">
-        <div class="col-md-4">
+        <div class="col-md-4 mt-5">
 [% INCLUDE green_blurb.md %]
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 mt-5">
 [% INCLUDE legacy_blurb.md %]
        </div>
-        <div class="col-md-4">
+        <div class="col-md-4 mt-5">
 [% INCLUDE hosting_blurb.md %]
         </div>
       </div>

in/legacy/index.html.tt

@@ -1,5 +1,5 @@
     <!-- Main jumbotron for a primary marketing message or call to action -->
-    <div class="jumbotron">
+    <div class="container py-5 bg-light">
       <div class="container">
         <h1>Switch to PSGI</h1>
         <p>As quickly as possible. Move your code to PSGI.</p>

layouts/page

@@ -21,33 +21,24 @@
     <title>Perl Web Advice</title>
 
     <!-- Bootstrap core CSS -->
-    <!--link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"-->
-    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+          crossorigin="anonymous">
 
     <!-- Custom styles for this template -->
     <link href="css/styles.css" rel="stylesheet">
-
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-    <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
   </head>
 
   <body>
-
-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
       <div class="container">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="/">Perl Web Advice</a>
-        </div>
-        <div id="navbar" class="navbar-collapse collapse">
+        <a class="navbar-brand" href="/">Perl Web Advice</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbar">
           <!-- form class="navbar-form navbar-right">
             <div class="form-group">
               <input type="text" placeholder="Email" class="form-control">
@@ -57,19 +48,17 @@
             </div>
             <button type="submit" class="btn btn-success">Sign in</button>
           </form -->
-        </div><!--/.navbar-collapse -->
+        </div>
       </div>
     </nav>
-
-[% content %]
-
+  
+  [% content %]
+  
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script>window.jQuery || document.write('<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"><\/script>')</script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
+            integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
+            crossorigin="anonymous"></script>
   </body>
 </html>