chore(site): migrate to bootstrap 5 (#3216)

isaaccloos · seanmonstar · commit 71e8b4e8de2d · 2023-05-02T10:45:50.000-04:00
Browser support will change: https://getbootstrap.com/docs/5.0/migration/#browser-support. The style normalizing code is clumped together at the bottom of main.scss. This is to help future contributors adopted bootstrap 5 styles easily as the maintainers approve the differences.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,8 +1,8 @@
 <footer class="hyper-footer col-md-12">
     <div class="container">
         <div class="row">
-            <div class="col-sm-6 text-center text-sm-left text-muted">&copy; 2023 hyper</div>
-            <div class="col-sm-6 text-center text-sm-right">
+            <div class="col-sm-6 text-center text-sm-start text-muted">&copy; 2023 hyper</div>
+            <div class="col-sm-6 text-center text-sm-end">
                 {% if page.hyper_path %}
                     <a href="https://github.com/hyperium/hyper/blob/master/{{ page.hyper_path }}">
                         edit this page on github
diff --git a/_includes/head.html b/_includes/head.html
@@ -3,7 +3,7 @@
 <title>{% if page.title %}{{ page.title }} | hyper{% else %}{{ site.title }}{% endif %}</title>
 <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha256-wLz3iY/cO4e6vKZ4zRmo4+9XDpMcgKOvv/zEU3OMlRo=" crossorigin="anonymous">
 <link rel="stylesheet" href="{{ "/css/main.css" | absolute_url }}">
 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,4 +1,4 @@
-<header class="navbar navbar-toggleable-md navbar-hyper" role="navigation">
+<header class="navbar navbar-expand-lg navbar-hyper" role="navigation">
   <nav class="container">
     <div class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,7 +5,7 @@
   </head>
   <body id="hyper">
     {% include header.html %}
-    <div class="jumbotron">
+    <div>
       <div class="container">
         {{ content }}
       </div>
diff --git a/_layouts/guide.html b/_layouts/guide.html
@@ -12,7 +12,7 @@ <h1>{{ page.title }}</h1>
     </div>
     <div class="container">
       <div class="row">
-        <aside class="col-md-3 hyper-sidebar">
+        <aside class="col-lg-3 hyper-sidebar">
           <nav>
             {% if page.collection == "legacy" %}
               {% assign topics = site.data.legacy | first %}
@@ -41,7 +41,7 @@ <h4 class="guide-topic-title">
             </h4>
           </nav>
         </aside>
-        <article class="col-md-9 hyper-content">
+        <article class="col-lg-9 hyper-content">
           {{ content }}
           {% include guide_footer.html %}
         </article>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -7,7 +7,7 @@
     {% include header.html %}
     <section class="hyper-pageheader">
       <div class="container">
-        <h1 class="hyper-logo">hyper</h1>
+        <h1>hyper</h1>
         <p>Fast and safe HTTP for the Rust language.</p>
         <p><a href="/guides/1" class="btn hyper-getstarted">Get Started</a></p>
       </div>
diff --git a/css/main.scss b/css/main.scss
@@ -274,3 +274,96 @@ pre code {
     background: none;
     color: $secondary-color;
 }
+
+// Below are shims for a bootstrap 4 to 5 migration.
+// https://getbootstrap.com/docs/5.2/migration/
+//
+// Dropping these styles can incrementally shift the sites UI to a bootstrap 5 aesthetic.
+
+// container
+.container {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+@media (min-width: 1400px) {
+    .container {
+        max-width: 1140px;
+    }
+}
+
+// btn
+.btn {
+    border-radius: 0.25rem;
+    line-height: 1.25;
+}
+
+// headers
+h1 {
+    font-size: 2.5rem;
+    line-height: 1.1;
+}
+
+h2, h3, h4, h5, h6 {
+    font-size: 2rem;
+    line-height: 1.1;
+}
+
+article h3 {
+    font-size: 1.75rem;
+    line-height: 1.1;
+}
+
+// a
+a {
+    text-decoration: none;
+}
+
+a.btn:hover {
+    text-decoration: none;
+}
+
+a:hover, a:focus {
+    text-decoration: underline;
+}
+
+// code 
+code {
+    font-size: 90%;
+    border-radius: 0.25rem;
+}
+
+// ul
+ul {
+    padding-inline-start: 40px;
+}
+
+// row
+.row {
+    --bs-gutter-x: 30px;
+}
+
+// code
+pre code {
+    font-size: 12.96px;
+    border-radius: 0;
+}
+
+// navbar
+.navbar a {
+    color: $primary-color;
+    transition: none;
+}
+
+.navbar a:hover, .navbar a:focus {
+    color: $primary-highlight-color;
+    text-decoration: none;
+}
+
+.navbar .navbar-brand {
+    color: $primary-color
+}
+
+.navbar .navbar-brand:hover {
+    color: $primary-highlight-color
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<header class="navbar navbar-toggleable-md navbar-hyper" role="navigation">`
	`1`	`+<header class="navbar navbar-expand-lg navbar-hyper" role="navigation">`
`2`	`2`	`<nav class="container">`
`3`	`3`	`<div class="collapse navbar-collapse">`
`4`	`4`	`<ul class="nav navbar-nav">`