update bootstrap; use logo

Author: seanmonstar

_includes/footer.html

@@ -17,6 +17,4 @@
     </div>
 </footer>
 <script src="{{ "/js/rustdoc.js" | absolute_url }}"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
-    integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
-    crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

_includes/head.html

@@ -3,10 +3,10 @@
 <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 <link rel="stylesheet" href="{{ "/css/main.css" | absolute_url }}">
 
-<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

_includes/header.html

@@ -1,6 +1,8 @@
 <header class="navbar navbar-expand-lg navbar-hyper" role="navigation">
   <nav class="container">
-    <a class="navbar-brand" href="/">hyper.rs</a>
+    <a class="navbar-brand" href="/" title="hyper.rs">
+      <img src="/icons/hyper.svg" alt="hyper.rs" class="hyper-logo" />
+    </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hyperNavbar">
       <span class="navbar-toggler-icon"></span>
     </button>

css/main.scss

@@ -69,11 +69,11 @@ blockquote {
     background-color: $primary-pagehead-color;
     border: 0;
     margin: 0;
-    padding: 0;
+    padding: 0.5rem 0;
 }
 
 #hyper .navbar a {
-    color: #f5f5f5;
+    color: rgba(255,255,255,0.85);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -398,8 +398,17 @@ pre code {
     text-decoration: none;
 }
 
+.navbar .hyper-logo {
+    background: #fff;
+    border-radius: 10px;
+}
+
+.navbar .navbar-brand {
+    transition: transform 0.2s ease-in-out;
+}
+
 .navbar .navbar-brand:hover {
-    color: $primary-highlight-color
+    transform: rotate(-5deg) scale(1.1);
 }
 
 .footnotes {
@@ -414,5 +423,5 @@ pre code {
 }
 
 .hyper-middle {
-    margin-top: 1rem;
+    margin-top: 2rem;
 }