Redesign the blog

config.yml

@@ -74,17 +74,16 @@ module:
       target:           static/apple-touch-icon.png
     - source:           src/static/assets/img/favicons/favicon.ico
       target:           static/favicon.ico
+    - source:           node_modules/bootstrap/scss
+      target:           assets/scss/bootstrap
+    - source:           node_modules/bootstrap/dist/js/bootstrap.min.js
+      target:           assets/js/bootstrap.min.js
 
 params:
   current_version:      "5.1.3"
   docs_version:         "5.1"
   description:          "Official blog for the Bootstrap framework."
   author:               "Mark Otto"
-  assets:
-    css:
-      # Use https://www.srihash.org to generate the hash, or use the hash from upstream
-      uri:              "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
-      sri:              "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
   main:                 "https://getbootstrap.com"
   github_org:           "https://github.com/twbs"
   repo:                 "https://github.com/twbs/blog"

package.json

@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.7",
+    "bootstrap": "5.2.0-beta1",
     "cross-env": "^7.0.3",
     "find-unused-sass-variables": "^4.0.4",
     "hugo-bin": "^0.86.0",

src/assets/scss/_ads.scss

@@ -8,24 +8,24 @@
   position: static;
   display: block;
   max-width: 400px;
-  padding: 15px 15px 15px 160px;
-  margin: 2rem auto 0;
+  padding: 12px 12px 12px 154px;
+  margin: 1.5rem auto 0;
   overflow: hidden;
   font-size: .875rem;
   line-height: 1.4;
   text-align: left;
-  background-color: rgba(0, 0, 0, .05);
+  background-color: var(--bs-gray-100);
   border-radius: .5rem;
 
   a {
-    color: rgba(255, 255, 255, .75);
+    color: var(--bs-gray-600);
     text-decoration: none;
   }
 }
 
 .carbon-img {
   float: left;
-  margin-left: -145px;
+  margin-left: -140px;
 
   > img {
     margin-bottom: 0;
@@ -35,5 +35,5 @@
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: rgba(255, 255, 255, .5) !important;
+  color: var(--bs-gray-600) !important;
 }

src/assets/scss/_buttons.scss

@@ -2,36 +2,44 @@
 //
 // Custom buttons for the docs.
 
+// scss-docs-start btn-css-vars-example
 .btn-bd-primary {
-  font-weight: 600;
-  color: $bd-purple-bright;
-  border-color: $bd-purple-bright;
-
-  &:hover,
-  &:active {
-    color: $white;
-    background-color: $bd-purple-bright;
-    border-color: $bd-purple-bright;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bs-white);
+  --bs-btn-bg: var(--bd-violet);
+  --bs-btn-border-color: var(--bd-violet);
+  --bs-btn-border-radius: .5rem;
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
 }
+// scss-docs-end btn-css-vars-example
 
-.btn-bd-download {
-  font-weight: 600;
-  color: $bd-download;
-  border-color: $bd-download;
-
-  &:hover,
-  &:active {
-    color: $bd-dark;
-    background-color: $bd-download;
-    border-color: $bd-download;
-  }
+.btn-bd-accent {
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bd-accent);
+  --bs-btn-border-color: var(--bd-accent);
+  --bs-btn-hover-color: var(--bd-dark);
+  --bs-btn-hover-bg: var(--bd-accent);
+  --bs-btn-hover-border-color: var(--bd-accent);
+  --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
+}
 
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-download, .25);
-  }
+.btn-bd-light {
+  --bs-btn-color: var(--bs-gray-600);
+  --bs-btn-border-color: var(--bs-gray-400);
+  --bs-btn-hover-color: var(--bd-violet);
+  --bs-btn-hover-border-color: var(--bd-violet);
+  --bs-btn-active-color: var(--bd-violet);
+  --bs-btn-active-bg: var(--bs-white);
+  --bs-btn-active-border-color: var(--bd-violet);
+  --bs-btn-focus-border-color: var(--bd-violet);
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }

src/assets/scss/_navbar.scss

@@ -1,46 +1,85 @@
 .bd-navbar {
-  min-height: 4rem;
-  background-color: $bd-purple-bright;
+  padding: .75rem 0;
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
 
-  @media (max-width: 991.98px) {
-    .navbar-nav-scroll {
-      width: 100%;
-      height: 2.5rem;
-      margin-top: .25rem;
-      overflow: hidden;
+  .navbar-toggler {
+    padding: 0;
+    margin-right: -.5rem;
+    border: 0;
 
-      .navbar-nav {
-        padding-bottom: 2rem;
-        overflow-x: auto;
-        white-space: nowrap;
-        -webkit-overflow-scrolling: touch;
-      }
+    &:first-child {
+      margin-left: -.5rem;
+    }
+
+    .bi {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .navbar-brand {
+    transition: .2s ease-in-out transform;
+
+    &:hover {
+      transform: rotate(-5deg) scale(1.1);
     }
   }
 
-  .navbar-nav {
-    .nav-link {
-      padding-right: .5rem;
-      padding-left: .5rem;
-      color: rgba($white, .85);
+  .navbar-toggler,
+  .nav-link {
+    padding-right: $spacer * .25;
+    padding-left: $spacer * .25;
+    color: rgba($white, .85);
 
-      &.active,
-      &:hover,
-      &:focus {
-        color: $white;
-        background-color: transparent;
-      }
+    &:hover,
+    &:focus {
+      color: $white;
+    }
 
-      &.active {
-        font-weight: 600;
-      }
+    &.active {
+      font-weight: 600;
+      color: $white;
     }
   }
 
   .navbar-nav-svg {
     display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    vertical-align: text-top;
+    vertical-align: -.125rem;
+  }
+
+  .offcanvas-lg {
+    background-color: var(--bd-violet);
+    border-left: 0;
+
+    @media (max-width: 992px) {
+      box-shadow: $box-shadow-lg;
+    }
+  }
+
+  .dropdown-toggle {
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .dropdown-menu {
+    --bs-dropdown-min-width: 12rem;
+    --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+    --bs-dropdown-font-size: .875rem;
+    box-shadow: $dropdown-box-shadow;
+  }
+
+  .dropdown-item.current {
+    font-weight: 600;
+    background-image: escape-svg($dropdown-active-icon);
+    background-repeat: no-repeat;
+    background-position: right $dropdown-item-padding-x top .6rem;
+    background-size: .75rem .75rem;
   }
 }