More work on MVP

Among other changes:

- Use of new, pure CSS slideshow
- JS-less menu bar
- Set darker gradient to menu bar
- Replace btn-primary and btn-secondary colors according to SD logo
  palette
- Avoid CSS overflows on smaller screens

3 files changed, 91 insertions, 60 deletions

diff --git a/layouts/index.html b/layouts/index.html
index 0c7ed80..0b3e3c8 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,18 +9,16 @@
                 <div class="d-flex justify-content-center">
                     <div class="text-center">
                         {{ with site.Data.homepage.main }}
-                        <h1 class="mx-auto my-0 text-uppercase">{{ .header.title }}</h1>
-                        <h2 class="text-white-50 mx-auto mt-2 mb-5">{{ .header.description }}</h2>
-                        <a class="btn btn-primary" href="{{ .header.button.url }}">{{ .header.button.text }}</a>
-                        <a class="btn btn-secondary" href="{{ .header.src_button.url }}">{{ .header.src_button.text }}</a>
-                        <p>
-                            <video class="mt-4" autoplay="true" src="{{ .header.slides }}" loop="true"></video>
-                        </p>
-                        <p>
+                        <img class="logo-img" src="{{ .logo }}"/>
+                        <h2 class="text-white-50 mx-auto mt-2 mb-5">{{ .description }}</h2>
+                        <a class="btn btn-primary" href="{{ .button.url }}">{{ .button.text }}</a>
+                        <a class="btn btn-secondary" href="{{ .src_button.url }}">{{ .src_button.text }}</a>
+                        {{- partial "slider.html" . -}}
                         {{ with site.Data.homepage.about }}
+                        <p>
                             <div class id="about"></div>
                             <h3 class="text-white-50 mb-3 text-uppercase">{{ .title }}</h3>
-                            <label class="text-white-50 w-50">{{ .desc }}</label>
+                            <label class="text-white-50 about">{{ .desc }}</label>
                             {{ if .button.enable }}
                             <a class="btn btn-primary about-btn" href="{{ .button.url }}">{{ .button.text }}</a>
                             {{ end }}
@@ -30,7 +28,7 @@
                             Latest release
                         </p>
                         <p>
-                            <video src="{{ .header.latest_release }}" width="480" controls="true" preload="metadata"></video>
+                            <video class="release-video" src="{{ .latest_release }}" controls="true" preload="metadata"></video>
                         </p>
                         {{ end }}
                     </div>
@@ -71,14 +69,17 @@
         </section>
         {{ end }}
         <!-- Contact-->
+        {{ with site.Data.homepage.contact }}
         <section class="contact-section bg-black">
             <div class="container px-4 px-lg-5">
                 <div class="social d-flex justify-content-center">
-                    <a class="mx-2" href="{{ site.Params.peertube }}"><i class="fab"></i></a>
-                    <a class="mx-2" href="{{ site.Params.sourceforge }}"><i class="fab"></i></a>
+                    <a class="mx-2" href="{{ .peertube.url }}"><img class="social-img" src="{{ .peertube.src }}" alt="Peertube logo"/></a>
+                    <a class="mx-2" href="{{ .sourceforge.url}}"><img class="social-img" src="{{ .sourceforge.src }}" alt="SourceForge logo"/></a>
+                    <a class="mx-2" href="{{ .lec.url}}"><img class="social-img" src="{{ .lec.src }}" alt="Libre en Communs logo"/></a>
                 </div>
             </div>
         </section>
+        {{ end }}
 {{- partial "footer.html" . -}}
 </body>
 </html>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index d8ffede..310dc77 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,15 +1,16 @@
 <!-- Navigation-->
 <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
     <div class="container px-4 px-lg-5">
-        <a class="navbar-brand" href="#page-top"><img src="{{ .Site.Params.logo }}"></a>
-        <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+        <a class="navbar-brand" href="#page-top"><img class="navbar-img" src="{{ .Site.Params.logo }}"></a>
+        <label for="menu-btn-checkbox" class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
             Menu
             <i class="fas fa-bars"></i>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarResponsive">
+        </label>
+        <input id="menu-btn-checkbox" type="checkbox"/>
+        <div class="collapse navbar-collapse" id="mobile-menu">
             <ul class="navbar-nav ms-auto">
-                {{ range site.Menus.main }}
-                <li class="nav-item"><a class="nav-link" href="{{ .URL }}">{{ .Name }}</a></li>
+                {{ range site.Data.homepage.menu }}
+                <li class="nav-item text-uppercase"><a class="nav-link" href="{{ .URL }}">{{ .name }}</a></li>
                 {{ end }}
             </ul>
         </div>
diff --git a/static/css/styles.css b/static/css/styles.css
index 826185b..ad61d5d 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -83,7 +83,7 @@
 
 body {
   margin: 0;
-  font-family: var(--bs-body-font-family);
+  font-family: Arial;
   font-size: var(--bs-body-font-size);
   font-weight: var(--bs-body-font-weight);
   line-height: var(--bs-body-line-height);
@@ -645,6 +645,12 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 200px) {
+  .container-sm, .container {
+    max-width: 90vw;
+  }
+}
+
 @media (min-width: 576px) {
   .container-sm, .container {
     max-width: 540px;
@@ -3035,13 +3041,13 @@ textarea.form-control-lg {
 
 .btn-primary {
   color: #fff;
-  background-color: #64a19d;
-  border-color: #64a19d;
+  background-color: #ef3e3d;
+  border-color: #c23131;
 }
 .btn-primary:hover {
   color: #fff;
-  background-color: #558985;
-  border-color: #50817e;
+  background-color: #551515;
+  border-color: #350d0d;
 }
 .btn-check:focus + .btn-primary, .btn-primary:focus {
   color: #fff;
@@ -3065,13 +3071,13 @@ textarea.form-control-lg {
 
 .btn-secondary {
   color: #fff;
-  background-color: #7464a1;
-  border-color: #7464a1;
+  background-color: #8fc700;
+  border-color: #76a500;
 }
 .btn-secondary:hover {
   color: #fff;
-  background-color: #635589;
-  border-color: #5d5081;
+  background-color: #006900;
+  border-color: #014201;
 }
 .btn-check:focus + .btn-secondary, .btn-secondary:focus {
   color: #fff;
@@ -4150,7 +4156,8 @@ textarea.form-control-lg {
   justify-content: space-between;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 100%);
+  background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 95%,
+    rgba(0, 0, 0, 0) 100%);
 }
 .navbar > .container,
 .navbar > .container-fluid,
@@ -7141,6 +7148,10 @@ textarea.form-control-lg {
   width: auto !important;
 }
 
+.mw-75 {
+  max-width: 75% !important;
+}
+
 .mw-100 {
   max-width: 100% !important;
 }
@@ -11476,7 +11487,6 @@ body {
 
 #mainNav {
   min-height: 3.0rem;
-  background-color: #000;
 }
 #mainNav .navbar-toggler {
   font-size: 80%;
@@ -11488,7 +11498,6 @@ body {
   outline: none;
 }
 #mainNav .navbar-brand {
-  color: #000;
   font-weight: 700;
   padding: 0.9rem 0;
 }
@@ -11551,10 +11560,10 @@ body {
 .btn {
   box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
   padding: 1.25rem 2rem;
-  font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 80%;
+  font-family: Arial;
+  font-size: 90%;
   text-transform: uppercase;
-  letter-spacing: 0.15rem;
+  letter-spacing: 0.05rem;
   border: 0;
 }
 
@@ -11562,8 +11571,7 @@ body {
   position: relative;
   width: 100%;
   height: auto;
-  min-height: 90rem;
-  padding: 15rem 0;
+  padding: 8rem 0;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url("../assets/img/bg-masthead.jpg");
   background-position: center;
   background-repeat: no-repeat;
@@ -11584,28 +11592,6 @@ body {
   max-width: 20rem;
   font-size: 1rem;
 }
-@media (min-width: 768px) {
-  .masthead h1, .masthead .h1 {
-    font-size: 4rem;
-    line-height: 4rem;
-    letter-spacing: 0.4rem;
-  }
-}
-@media (min-width: 992px) {
-  .masthead {
-    height: 100vh;
-    padding: 0;
-  }
-  .masthead h1, .masthead .h1 {
-    font-size: 6.5rem;
-    line-height: 6.5rem;
-    letter-spacing: 0.2rem;
-  }
-  .masthead h2, .masthead .h2 {
-    max-width: 100rem;
-    font-size: 1.25rem;
-  }
-}
 
 .about-section {
   padding-top: 10rem;
@@ -11615,8 +11601,18 @@ body {
   margin-bottom: 5rem;
 }
 
+.about {
+  max-width: 75%;
+}
+
+@media (min-width: 992px) {
+  .about {
+    max-width: 50%;
+  }
+}
+
 .projects-section {
-  padding: 10rem 0;
+  padding: 4rem 0;
 }
 .projects-section .featured-text {
   padding: 2rem;
@@ -11662,7 +11658,7 @@ body {
 }
 
 .contact-section {
-  padding-top: 5rem;
+  padding-top: 0.3rem;
 }
 .contact-section .card {
   border: 0;
@@ -11699,7 +11695,7 @@ body {
 }
 
 .footer {
-  padding: 5rem 0;
+  padding: 1rem 0;
 }
 
 /* graysx css */
@@ -11708,3 +11704,36 @@ body {
   margin-top: -50px;
   margin-bottom: 20px;
 }
+
+.social-img {
+  width: 2rem;
+  height: 2rem;
+}
+
+.release-video {
+  max-width: 80%;
+}
+
+.logo-img {
+  max-width: 80%;
+}
+
+.navbar-img {
+  max-height: 48px;
+}
+
+#menu-btn-checkbox {
+  display: none;
+}
+
+@media (max-width: 992px) {
+  #menu-btn {
+    display: inline-block; }
+  label[for=menu-btn-checkbox] {
+    cursor: pointer; }
+  #menu-btn-checkbox:not(:checked) ~ #mobile-menu {
+    display: none; }
+  #mobile-menu {
+    display: inline-block;
+  }
+}