Update bootstrap and other library dependencies

_config.yml

@@ -19,7 +19,7 @@ lang: en # the language of your site (for example: en, fr, cn, ru, etc.)
 icon: ⚛️  # the emoji used as the favicon (alternatively, provide image name in /assets/img/)
 
 url: https://alshedivat.github.io # the base hostname & protocol for your site
-baseurl: /al-folio # the subpath of your site, e.g. /blog/
+# baseurl: /al-folio # the subpath of your site, e.g. /blog/
 last_updated: false # set to true if you want to display last updated in the footer
 impressum_path:  # set to path to include impressum link in the footer, use the same path as permalink in a page, helps to conform with EU GDPR
 
@@ -292,32 +292,20 @@ enable_medium_zoom:         true   # enables image zoom feature (as on medium.co
 # -----------------------------------------------------------------------------
 
 academicons:
-  version: "1.9.1"
-  integrity: "sha256-i1+4qU2G2860dGGIOJscdC30s9beBXjFfzjWLjBRsBg="
+  version: "1"
 bootstrap:
-  version: "4.6.1"
-  integrity:
-    css: "sha256-DF7Zhf293AJxJNTmh5zhoYYIMs2oXitRfBjY+9L//AY="
-    js: "sha256-SyTu6CwrfOhaznYZPoolVw2rxoY7lKYKQvqbtqN93HI="
+  version: "5"
 fontawesome:
-  version: "5.15.4"
-  integrity: "sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4="
+  version: "6"
 jquery:
-  version: "3.6.0"
-  integrity: "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+  version: "3"
 mathjax:
-  version: "3.2.0"
+  version: "3"
 masonry:
-  version: "4.2.2"
-  integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI="
+  version: "4"
 mdb:
-  version: "4.20.0"
-  integrity:
-    css: "sha256-jpjYvU3G3N6nrrBwXJoVEYI/0zw8htfFnhT9ljN3JJw="
-    js: "sha256-NdbiivsvWt7VYCt6hYNT3h/th9vSTL4EDWeGs5SN3DA="
+  version: "4"
 popper:
-  version: "2.11.2"
-  integrity: "sha256-l/1pMF/+J4TThfgARS6KwWrk/egwuVvhRzfLAMQ6Ds4="
+  version: "2"
 medium_zoom:
-  version: "1.0.6"
-  integrity: "sha256-EdPgYcPk/IIrw7FYeuJQexva49pVRZNmt3LculEr7zM="
+  version: "1"

_includes/cv/list.html

@@ -1,4 +1,4 @@
-<ul class="card-text font-weight-light list-group list-group-flush">
+<ul class="card-text fw-light list-group list-group-flush">
     {% for content in entry.contents %}
       <li class="list-group-item">{{ content }}</li>
     {% endfor %}

_includes/cv/map.html

@@ -1,8 +1,8 @@
-<table class="table table-sm table-borderless table-responsive">
+<table class="table table-sm table-borderless table-responsive d-block">
     {% for content in entry.contents %}
       <tr>
-        <td class="p-1 pr-2 font-weight-bold"><b>{{ content.name }}</b></td>
-        <td class="p-1 pl-2 font-weight-light text">{{ content.value }}</td>
+        <td class="p-2 pe-5 fw-bold"><b>{{ content.name }}</b></td>
+        <td class="p-2 ps-4 fw-light text">{{ content.value }}</td>
       </tr>
     {% endfor %}
-</table>
+</table>

_includes/cv/nested_list.html

@@ -1,4 +1,4 @@
-<ul class="card-text font-weight-light list-group list-group-flush">
+<ul class="card-text fw-light list-group list-group-flush">
     {% for content in entry.contents %}
       <li class="list-group-item">
       <h5 class="font-italic">{{ content.title }}</h5>

_includes/cv/time_table.html

@@ -1,20 +1,20 @@
-<ul class="card-text font-weight-light list-group list-group-flush">
+<ul class="card-text fw-light list-group list-group-flush">
     {% for content in entry.contents %}
       <li class="list-group-item">
         <div class="row">
           {% if content.year %}
-            <div class="col-xs-2 cl-sm-2 col-md-2 text-center" style="width: 75px;">
-              <span class="badge font-weight-bold danger-color-dark text-uppercase align-middle" style="min-width: 75px;">
+            <div class="col-xs-2 cs-sm-2 col-md-2">
+              <span class="badge fw-bold danger-color-dark text-uppercase align-middle" style="min-width: 75px;">
                 {{ content.year }}
               </span>
             </div>
           {% endif %}
-          <div class="col-xs-10 cl-sm-10 col-md-10 mt-2 mt-md-0">
+          <div class="col-xs-10 cs-sm-10 col-md-10 mt-2 mt-md-0">
             {% if content.title %}
-            <h6 class="title font-weight-bold ml-1 ml-md-4">{{content.title}}</h6>
+            <h6 class="title fw-bold ms-1 ms-md-4">{{content.title}}</h6>
             {% endif %}
             {% if content.institution %}
-            <h6 class="ml-1 ml-md-4" style="font-size: 0.95rem;">{{content.institution}}</h6>
+            <h6 class="ms-1 ms-md-4" style="font-size: 0.95rem;">{{content.institution}}</h6>
             {% endif %}
             {% if content.description %}
               <ul class="items">

_includes/header.html

@@ -5,8 +5,8 @@
       <nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
         <div class="container">
           {% if page.permalink != '/' -%}
-          <a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl | prepend: site.url }}/">
-              {%- if site.title == "blank" -%}<span class="font-weight-bold">{{ site.first_name }}</span> {{ site.middle_name }}  {{ site.last_name }}{%- else -%}{{ site.title }}{%- endif -%}
+          <a class="navbar-brand title fw-lighter" href="{{ site.baseurl | prepend: site.url }}/">
+              {%- if site.title == "blank" -%}<span class="fw-bold">{{ site.first_name }}</span> {{ site.middle_name }}  {{ site.last_name }}{%- else -%}{{ site.title }}{%- endif -%}
           </a>
           {%- elsif site.enable_navbar_social -%}
           <!-- Social Icons -->
@@ -15,15 +15,15 @@
           </div>
           {% endif %}
           <!-- Navbar Toggle -->
-          <button class="navbar-toggler collapsed ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <button class="navbar-toggler collapsed ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar top-bar"></span>
             <span class="icon-bar middle-bar"></span>
             <span class="icon-bar bottom-bar"></span>
           </button>
 
-          <div class="collapse navbar-collapse text-right" id="navbarNav">
-            <ul class="navbar-nav ml-auto flex-nowrap">
+          <div class="collapse navbar-collapse text-end" id="navbarNav">
+            <ul class="navbar-nav ms-auto flex-nowrap">
 
               {%- for page in site.pages -%}
                 {% if page.permalink == '/' %}
@@ -56,12 +56,12 @@
               {%- if p.nav and p.autogen == nil -%}
               {%- if p.dropdown %}
               <li class="nav-item dropdown {% if page.title == p.title %}active{% endif %}">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ p.title }}
+                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ p.title }}
                   {%- if page.title == p.title -%}
                   <span class="sr-only">(current)</span>
                   {%- endif -%}
                 </a>
-                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                   {%- for child in p.children -%}
                   {%- if child.title == 'divider' %}
                   <div class="dropdown-divider"></div>

_includes/projects.html

@@ -15,7 +15,7 @@
         <div class="card-body">
           <h2 class="card-title text-lowercase">{{ project.title }}</h2>
           <p class="card-text">{{ project.description }}</p>
-          <div class="row ml-1 mr-1 p-0">
+          <div class="row ms-1 me-1 p-0">
             {%- if project.github -%}
             <div class="github-icon">
               <div class="icon" data-toggle="tooltip" title="Code Repository">

_includes/projects_horizontal.html

@@ -20,7 +20,7 @@
           <div class="card-body">
             <h3 class="card-title text-lowercase">{{ project.title }}</h3>
             <p class="card-text">{{ project.description }}</p>
-            <div class="row ml-1 mr-1 p-0">
+            <div class="row ms-1 me-1 p-0">
               {%- if project.github -%}
               <div class="github-icon">
                 <div class="icon" data-toggle="tooltip" title="Code Repository">

_layouts/about.html

@@ -6,14 +6,14 @@
       <div class="post">
         <header class="post-header">
           <h1 class="post-title">
-           {% if site.title == "blank" -%}<span class="font-weight-bold">{{ site.first_name }}</span> {{ site.middle_name }} {{ site.last_name }}{%- else -%}{{ site.title }}{%- endif %}
+           {% if site.title == "blank" -%}<span class="fw-bold">{{ site.first_name }}</span> {{ site.middle_name }} {{ site.last_name }}{%- else -%}{{ site.title }}{%- endif %}
           </h1>
           <p class="desc">{{ page.subtitle }}</p>
         </header>
 
         <article>
           {% if page.profile -%}
-          <div class="profile float-{%- if page.profile.align == 'left' -%}left{%- else -%}right{%- endif -%}">
+          <div class="profile float-{%- if page.profile.align == 'left' -%}start{%- else -%}end{%- endif -%}">
             {%- if page.profile.image %}
               {%- assign profile_image_path = page.profile.image | prepend: 'assets/img/' -%}
 

_layouts/cv.html

@@ -5,15 +5,15 @@
         <div class="post">
 
           <header class="post-header">
-            <h1 class="post-title">{{ page.title }} {% if page.cv_pdf %}<a href="{{ page.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer" class="float-right"><i class="fas fa-file-pdf"></i></a>{% endif %}</h1>
+            <h1 class="post-title">{{ page.title }} {% if page.cv_pdf %}<a href="{{ page.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer" class="float-end pe-2"><i class="fas fa-xl fa-file-pdf"></i></a>{% endif %}</h1>
             <p class="post-description">{{ page.description }}</p>
           </header>
 
           <article>
             <div class="cv">
               {% for entry in site.data.cv %}
                 <div class="card mt-3 p-3">
-                  <h3 class="card-title font-weight-medium">{{ entry.title }}</h3>
+                  <h3 class="card-title fw-medium">{{ entry.title }}</h3>
                   <div>
                   {% if entry.type == "list" %}
                     {% include cv/list.html %}

_sass/_base.scss

@@ -5,11 +5,14 @@
 // Typography
 
 p, h1, h2, h3, h4, h5, h6, em, div, li, span, strong {
-  color: var(--global-text-color);
+  color: var(--global-text-color) !important;
 }
 
 hr {
-  border-top: 1px solid var(--global-divider-color);
+  height: 1px;
+  background-color: var(--global-divider-color);
+  border: none;
+  opacity: 1;
 }
 
 table {
@@ -23,6 +26,8 @@ table {
 
 a, table.table a {
   color: var(--global-theme-color);
+  text-decoration: none;
+
   &:hover {
     color: var(--global-theme-color);
     text-decoration: underline;
@@ -199,6 +204,10 @@ blockquote {
 }
 
 .navbar-toggler {
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
   .icon-bar {
     display: block;
     width: 22px;
@@ -272,7 +281,7 @@ footer.fixed-bottom {
   background-color: var(--global-footer-bg-color);
   font-size: 0.75rem;
   .container {
-    color: var(--global-footer-text-color);
+    color: var(--global-footer-text-color) !important;
     padding-top: 9px;
     padding-bottom: 8px;
   }
@@ -328,7 +337,7 @@ footer.sticky-bottom {
 .tag-list {
   border-bottom: 1px solid var(--global-divider-color);
   text-align: center;
-  padding-top: 1rem;
+  padding: 1rem;
 
   ul {
     justify-content: center;
@@ -337,7 +346,7 @@ footer.sticky-bottom {
     p, li {
       list-style: none;
       display: inline-block;
-      padding: 1rem 0.5rem;
+      padding: 0.5rem;
       color: var(--global-text-color-light);
     }
   }

blog/index.html

@@ -28,7 +28,7 @@ <h2>{{ site.blog_description }}</h2>
           <i class="fas fa-hashtag fa-sm"></i> <a href="{{ tag | prepend: '/blog/tag/' | relative_url }}">{{ tag }}</a>
         </li>
         {% unless forloop.last %}
-          <p>&bull;</p>
+          &bull;
         {% endunless %}
       {% endfor %}
     </ul>