bootstrap 4

themes/mauro/layouts/index.html

@@ -5,7 +5,7 @@
       <section id="about">
         <div class="container">
         <div class="avatar">
-          <img class="img-circle" src="{{ .Sites.First.BaseURL }}img/{{ .Site.Params.avatar }}" alt="Responsive image">
+          <img class="rounded-circle" src="{{ .Sites.First.BaseURL }}img/{{ .Site.Params.avatar }}" alt="Responsive image">
         </div>
         <h3>I'm <strong>{{ .Site.Params.author }}</strong>, a system administrator.</h3>
         <h3>I'm into everything DevOps, delivery automation, and infrastructure.</h3>

themes/mauro/layouts/partials/head.html

@@ -21,8 +21,7 @@
     {{- end -}}
 	</title>
     {{ .Hugo.Generator }}
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
     <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/vitae-skeleton.css" />
     <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/vitae-layout.css" />
     <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/sustain-main.css" />

themes/mauro/layouts/partials/header.html

@@ -1,30 +1,27 @@
-<nav class="navbar navbar-default">
 <div class="container">
-    <div class="navbar-header">
+<nav class="navbar navbar-expand-lg navbar-light">
   <a class="navbar-brand" href="{{ .Site.BaseURL }}"><i class="fa fa-home"></i></a>
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="icon-bar"></span>
+    <span class="navbar-toggler-icon"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
   </button>
-    </div>
+  <div class="navbar-collapse collapse" id="navbarToggler">
-    <div class="navbar-collapse collapse" id="navbar">
+    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
-      <ul class="nav navbar-nav navbar-right">
       {{ if .Site.Menus.main }}
       {{ range sort .Site.Menus.main }}
-        <li><a href="{{ .URL }}">{{ .Name | upper }}</a></li>
+      <li class="nav-item"><a class="nav-link" href="{{ .URL }}">{{ .Name | upper }}</a></li>
       {{ end }}
       {{ end }}
+    </ul>
     {{ if .IsTranslated }}
-        <li class="nav-item"><ul class="nav navbar-nav lang-nav">
+    <ul class="navbar-nav my-2 my-lg-0">
       {{ $currLang := .Language.Lang }}
       {{ range .AllTranslations }}
       <li class="nav-item">
         <a class="nav-link {{if eq .Language.Lang $currLang }}active{{ end }}" href="{{ .Permalink }}">{{ .Language.Lang }}</a>
-          {{ end }}
+      </li>
-        </ul></li>
       {{ end }}
     </ul>
-    </div>
+    {{ end }}
   </div>
 </nav>
+</div>

themes/mauro/static/css/sustain-main.css

@@ -3,10 +3,9 @@
 /* Main page with stikky-footer */
 html, body {
     height: 100%;
+    font-size: 1rem;
     background-color: #fff;
     font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Source Sans Pro', sans-serif;
-  /* The html and body elements cannot have any padding or margin. */
-  /* border-top: 3px solid #27A822; */
 }
 
 @supports (font-variation-settings: normal) {
@@ -29,71 +28,78 @@ html, body {
 .navbar-static-top {
   margin-bottom: 10px;
 }
-.navbar-default {
+
+nav.navbar .navbar-brand {
+  color: #6b6b6b;
+}
+nav.navbar .navbar-brand:hover, nav.navbar .navbar-brand:focus {
+  color: #6b6b6b;
+}
+nav.navbar .navbar-text {
+  color: #6b6b6b;
+}
+nav.navbar .navbar-nav > li > a {
+  color: #6b6b6b;
+}
+nav.navbar .navbar-nav > li > a:hover, nav.navbar .navbar-nav > li > a:focus {
+  color: #6b6b6b;
+}
+nav.navbar .navbar-nav > .active > a, nav.navbar .navbar-nav > .active > a:hover, nav.navbar .navbar-nav > .active > a:focus {
+  color: #6b6b6b;
   background-color: #ffffff;
+}
+nav.navbar .navbar-nav > .open > a, nav.navbar .navbar-nav > .open > a:hover, nav.navbar .navbar-nav > .open > a:focus {
+  color: #6b6b6b;
+  background-color: #ffffff;
+}
+nav.navbar .navbar-toggle {
   border-color: #ffffff;
 }
-.navbar-default .navbar-brand {
+nav.navbar .navbar-toggle:hover, nav.navbar .navbar-toggle:focus {
-  color: #6b6b6b;
-}
-.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
-  color: #6b6b6b;
-}
-.navbar-default .navbar-text {
-  color: #6b6b6b;
-}
-.navbar-default .navbar-nav > li > a {
-  color: #6b6b6b;
-}
-.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
-  color: #6b6b6b;
-}
-.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
-  color: #6b6b6b;
   background-color: #ffffff;
 }
-.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
+nav.navbar .navbar-toggle .icon-bar {
-  color: #6b6b6b;
-  background-color: #ffffff;
-}
-.navbar-default .navbar-toggle {
-  border-color: #ffffff;
-}
-.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
-  background-color: #ffffff;
-}
-.navbar-default .navbar-toggle .icon-bar {
   background-color: #6b6b6b;
 }
-.navbar-default .navbar-collapse,
+nav.navbar .navbar-collapse,
-.navbar-default .navbar-form {
+nav.navbar .navbar-form {
   border-color: #6b6b6b;
 }
-.navbar-default .navbar-link {
+nav.navbar .navbar-link {
   color: #6b6b6b;
 }
-.navbar-default .navbar-link:hover {
+nav.navbar .navbar-link:hover {
   color: #6b6b6b;
 }
 @media (max-width: 767px) {
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+  nav.navbar .navbar-nav .open .dropdown-menu > li > a {
     color: #6b6b6b;
   }
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
+  nav.navbar .navbar-nav .open .dropdown-menu > li > a:hover, nav.navbar .navbar-nav .open .dropdown-menu > li > a:focus {
     color: #6b6b6b;
   }
-  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
+  nav.navbar .navbar-nav .open .dropdown-menu > .active > a, nav.navbar .navbar-nav .open .dropdown-menu > .active > a:hover, nav.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #6b6b6b;
     background-color: #ffffff;
   }
 }
 
+#about .container {
+  max-width: 800px;
+}
+
 /* Custom page CSS */
 .container {
   width: auto;
-  max-width: 800px;
+  max-width: 960px;
   text-align: center;
 }
+
+#about h1, #about h2, #about h3, #about h4, #about h5, #about h6 {
+margin-top: 1rem;
+margin-bottom: .5rem;
+}
+
 .container .text-muted {
   margin: 20px 0;
 }