Ajustes de diseño

source/main/static/css/main.css

@@ -3,6 +3,7 @@
 :root {
   --color-primary: #375a7f;
   --color-background: #343c3d; 
+  --plyr-color-main: var(--color-primary) !important; 
 }
 
 #nav {
@@ -48,39 +49,39 @@
 
 @media screen and (min-width: 300px) {
   .cartels {
-  grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media screen and (min-width: 450px) {
   .cartels {
-  grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
 @media screen and (min-width: 600px) {
   .cartels {
-  grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 }
 
 @media screen and (min-width: 750px) {
   .cartels {
-  grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(5, 1fr);
   }
 }
 
 @media screen and (min-width: 900px) {
   .cartels {
-  grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(6, 1fr);
   }
 }
 
 @media screen and (min-width: 1920px) {
   .cartels {
-  width: auto;
-  margin: 0 !important;
-  grid-template-columns: repeat(6, 1fr);
+    width: auto;
+    margin: 0 !important;
+    grid-template-columns: repeat(6, 1fr);
   }
 }
 
@@ -144,6 +145,7 @@
 
 .stats span {
   padding-right: 2rem;
+  white-space: nowrap;
 }
 
 .stats i {
@@ -178,6 +180,14 @@
   width: 8rem;
 }
 
+.extra-info {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: var(--color-primary);
+  overflow: hidden;
+}
+
 .about figure {
   width: 50%;
   height: auto;
@@ -186,6 +196,12 @@
   margin: auto;
 }
 
+@media screen and (max-width: 1024px) {
+  table {
+    margin: auto;
+  }
+}
+
 /* Despliegue de la ficha; Cfr: 
  * https://stackoverflow.com/questions/42177216/manipulate-css-class-without-javascript 
  * https://stackoverflow.com/questions/55858255/custom-checkbox-with-css-before-not-working-in-firefox-edge
@@ -216,10 +232,14 @@
 
 /* Reproductor */
 
+button.plyr__control--overlaid {
+  opacity: 1;
+}
+
 section#notice {
   position: absolute;
   width: 100%;
-  z-index: 1;
+  z-index: 3;
 }
 
 section#notice div {
@@ -229,6 +249,7 @@ section#notice div {
 section#notice p {
   font-weight: bold;
   color: white;
+  line-height: 1.5;
 }
 
 section#notice a {

source/main/static/js/player.js

@@ -22,7 +22,7 @@ function add_notice () {
     hero_div.classList.add('hero-body');
     hero_btn.classList.add('button', 'is-small', 'is-success');
     hero_btn.addEventListener('click', remove_notice);  
-    hero_tit.innerText = 'Mauflix funciona con pocos recursos. Para un uso más eficiente te recomendamos descargar la película.';
+    hero_tit.innerText = 'Mauflix funciona con pocos recursos. Para un uso más eficiente y ecológico te recomendamos descargar la película.';
     hero_btn.innerText = '¡Entendido!';
     hero_tit.appendChild(hero_btn);
     hero_div.appendChild(hero_tit);

source/templates/info-body.html

@@ -65,6 +65,7 @@
       </video>
       {% load static %}
       <!-- CSS y JS necesario paara el reproductor -->
+      <!-- Cfr. https://github.com/sampotts/plyr -->
       <link rel="stylesheet" href="{% static 'css/plyr.css' %}">
       <script type="text/javascript" src="{% static 'js/plyr.js' %}"></script>
       <script type="text/javascript" src="{% static 'js/player.js' %}"></script>

source/templates/info-foot.html

@@ -1,10 +1,11 @@
 <div class="hero-foot">
   <nav class="tabs is-boxed is-fullwidth">
-    <div class="container">
+    <div class="container {% if request.get_full_path == "/" %}extra-info{% endif %}">
       <ul>
-        <li><a href="{{ movie.file_name }}" target="_blank" download>Descargar</a></li>
         {% if request.get_full_path == "/" %}
-          <li><a href="/movie/{{ movie.id }}">Detalles</a></li>
+          <li><a href="/movie/{{ movie.id }}">Ver</a></li>
+        {% else %}
+          <li><a href="{{ movie.file_name }}" target="_blank" download>Descargar</a></li>
         {% endif %}
       </ul>
     </div>