From 31e2c5983b7118e24b6155ea660bb57e3a084f9f Mon Sep 17 00:00:00 2001
From: Mauro Torrez <maurotorrez@gmail.com>
Date: Sun, 10 May 2020 03:14:18 -0300
Subject: [PATCH] bootstrap 4

---
 themes/mauro/layouts/index.html           |  2 +-
 themes/mauro/layouts/partials/head.html   |  3 +-
 themes/mauro/layouts/partials/header.html | 49 ++++++------
 themes/mauro/static/css/sustain-main.css  | 90 ++++++++++++-----------
 4 files changed, 73 insertions(+), 71 deletions(-)

diff --git a/themes/mauro/layouts/index.html b/themes/mauro/layouts/index.html
index c5fc647..5290ecb 100644
--- a/themes/mauro/layouts/index.html
+++ b/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>
diff --git a/themes/mauro/layouts/partials/head.html b/themes/mauro/layouts/partials/head.html
index 9485bf2..b52359d 100644
--- a/themes/mauro/layouts/partials/head.html
+++ b/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" />
diff --git a/themes/mauro/layouts/partials/header.html b/themes/mauro/layouts/partials/header.html
index 3a7945d..7b1b573 100644
--- a/themes/mauro/layouts/partials/header.html
+++ b/themes/mauro/layouts/partials/header.html
@@ -1,30 +1,27 @@
-<nav class="navbar navbar-default">
-  <div class="container">
-    <div class="navbar-header">
-      <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">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-    </div>
-    <div class="navbar-collapse collapse" id="navbar">
-      <ul class="nav navbar-nav navbar-right">
+<div class="container">
+<nav class="navbar navbar-expand-lg navbar-light">
+  <a class="navbar-brand" href="{{ .Site.BaseURL }}"><i class="fa fa-home"></i></a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="navbar-collapse collapse" id="navbarToggler">
+    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
       {{ if .Site.Menus.main }}
-        {{ range sort .Site.Menus.main }}
-        <li><a href="{{ .URL }}">{{ .Name | upper }}</a></li>
-        {{ end }}
+      {{ range sort .Site.Menus.main }}
+      <li class="nav-item"><a class="nav-link" href="{{ .URL }}">{{ .Name | upper }}</a></li>
       {{ end }}
-      {{ if .IsTranslated }}
-        <li class="nav-item"><ul class="nav navbar-nav lang-nav">
-          {{ $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 }}
-        </ul></li>
-        {{ end }}
-      </ul>
-    </div>
+      {{ end }}
+    </ul>
+    {{ if .IsTranslated }}
+    <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>
+      </li>
+      {{ end }}
+    </ul>
+    {{ end }}
   </div>
 </nav>
+</div>
diff --git a/themes/mauro/static/css/sustain-main.css b/themes/mauro/static/css/sustain-main.css
index d8de832..21e706c 100755
--- a/themes/mauro/static/css/sustain-main.css
+++ b/themes/mauro/static/css/sustain-main.css
@@ -2,11 +2,10 @@
 
 /* Main page with stikky-footer */
 html, body {
-  height: 100%;
-  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; */
+    height: 100%;
+    font-size: 1rem;
+    background-color: #fff;
+    font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Source Sans Pro', sans-serif;
 }
 
 @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 {
-  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;
+nav.navbar .navbar-toggle:hover, nav.navbar .navbar-toggle:focus {
   background-color: #ffffff;
 }
-.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
-  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 {
+nav.navbar .navbar-toggle .icon-bar {
   background-color: #6b6b6b;
 }
-.navbar-default .navbar-collapse,
-.navbar-default .navbar-form {
+nav.navbar .navbar-collapse,
+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;
 }