From 04b00d555d068b314406a8374cf9bd60c3de9c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs?= <heckyel@hyperbola.info>
Date: Wed, 24 Apr 2019 17:43:46 -0500
Subject: [PATCH] fix semantic video

---
 content/articles/citizenfour.md                   | 13 ++++++++-----
 content/articles/como-generar-freakspot.md        | 13 ++++++++-----
 content/articles/course-html5/codificacion.md     | 15 +++++++++------
 content/articles/course-html5/etiqueta-a.md       | 15 +++++++++------
 content/articles/course-html5/etiqueta-article.md | 15 +++++++++------
 content/articles/course-html5/etiqueta-aside.md   | 15 +++++++++------
 .../course-html5/etiqueta-nav-ul-ol-li.md         | 13 ++++++++-----
 content/articles/course-html5/etiqueta-section.md | 15 +++++++++------
 .../articles/course-html5/etiquetas-p-y-span.md   | 15 +++++++++------
 .../course-html5/etiquetas-strong-y-em.md         | 15 +++++++++------
 content/articles/course-html5/header.md           | 15 +++++++++------
 content/articles/course-html5/hgroup.md           | 15 +++++++++------
 content/articles/course-html5/intro.md            | 15 +++++++++------
 content/articles/course-html5/nuevas-etiquetas.md | 15 +++++++++------
 content/articles/course-html5/sintaxis-html5.md   | 15 +++++++++------
 content/articles/course-html5/titulos.md          | 15 +++++++++------
 content/articles/happy-birthday-to-gnu.md         |  7 +++++--
 content/articles/locutus-de-gnu.md                | 15 +++++++++------
 content/articles/prompt-avanzado.md               | 13 ++++++++-----
 content/articles/rms-en-dominio-digital.md        | 13 ++++++++-----
 content/articles/sin-parar.md                     | 13 ++++++++-----
 libretube-theme/static/css/styles.min.css         |  2 +-
 libretube-theme/templates/article.html            |  4 ++--
 23 files changed, 182 insertions(+), 119 deletions(-)

diff --git a/content/articles/citizenfour.md b/content/articles/citizenfour.md
index 9b983c3..bb955d7 100644
--- a/content/articles/citizenfour.md
+++ b/content/articles/citizenfour.md
@@ -9,11 +9,14 @@ Tags: snowden, citizenfour, libertad
 Time: 1:48:40
 Title: Citizenfour
 
-<video id="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/09/video-poster-snowden.jpg'>
-  <source src="https://archive.org/download/libreweb/citizenfour-spanish.webm" type="video/webm"/>
-</video>
-
-# Citizenfour
+<figure>
+  <video id="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/09/video-poster-snowden.jpg'>
+    <source src="https://archive.org/download/libreweb/citizenfour-spanish.webm" type="video/webm"/>
+  </video>
+  <figcaption>
+    <h1>Citizenfour</h1>
+  </figcaption>
+</figure>
 
 En enero de 2013, **Laura Poitras** comenzó a recibir correos electrónicos
 cifrados firmados por un tal  **"Citizenfour"**
diff --git a/content/articles/como-generar-freakspot.md b/content/articles/como-generar-freakspot.md
index 9cc8bce..bf4ab1b 100644
--- a/content/articles/como-generar-freakspot.md
+++ b/content/articles/como-generar-freakspot.md
@@ -10,11 +10,14 @@ Tags: educación, GNU/Linux, Pelican, Python, software libre, tutorial, video
 Time: 16:58
 Title: ¿Cómo generar Freak Spot?
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/libreweb/freakspot.webm" type="video/webm">
-</video>
-
-# ¿Cómo generar Freak Spot?
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/libreweb/freakspot.webm" type="video/webm">
+  </video>
+  <figcaption>
+    <h1>¿Cómo generar Freak Spot?</h1>
+  </figcaption>
+</figure>
 
 Alguno que otro usuario se ha preguntado alguna vez
 cómo generar el sitio web [freakspot][site]{:target="_blank" rel="noopener noreferrer"},
diff --git a/content/articles/course-html5/codificacion.md b/content/articles/course-html5/codificacion.md
index c0d340f..0d13350 100644
--- a/content/articles/course-html5/codificacion.md
+++ b/content/articles/course-html5/codificacion.md
@@ -9,12 +9,15 @@ Tags: html
 Time: 16:28
 Title: Codificación HTML5
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0004-Codificacion.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0004-codificacion-es.vtt" srclang="es" default>
-</video>
-
-# Codificación HTML5 4/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0004-Codificacion.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0004-codificacion-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Codificación HTML5 4/32</h1>
+  </figcaption>
+</figure>
 
 La etiqueta `<span>` se utiliza para agrupar elementos en línea en un documento.
 
diff --git a/content/articles/course-html5/etiqueta-a.md b/content/articles/course-html5/etiqueta-a.md
index fb7003a..0499bee 100644
--- a/content/articles/course-html5/etiqueta-a.md
+++ b/content/articles/course-html5/etiqueta-a.md
@@ -8,12 +8,15 @@ Tags: html5,video
 Time: 03:23
 Title: Etiqueta a
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0009-Etiqueta-a.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0009-etiqueta-a-es.vtt" srclang="es" default>
-</video>
-
-# Etiqueta a 9/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0009-Etiqueta-a.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0009-etiqueta-a-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Etiqueta a 9/32</h1>
+  </figcaption>
+</figure>
 
 Si el elemento `a` tiene un atributo href, entonces representa un hipervínculo (un ancla de hipertexto).
 
diff --git a/content/articles/course-html5/etiqueta-article.md b/content/articles/course-html5/etiqueta-article.md
index e9a2e12..08696a7 100644
--- a/content/articles/course-html5/etiqueta-article.md
+++ b/content/articles/course-html5/etiqueta-article.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 3:43
 Title: Etiqueta article
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0013-article.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0013-article-es.vtt" srclang="es" default>
-</video>
-
-# Etiqueta article 13/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0013-article.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0013-article-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Etiqueta article 13/32</h1>
+  </figcaption>
+</figure>
 
 Representa una sección de una página que consta de una composición que
 forma parte independiente de un documento, página o sitio.
diff --git a/content/articles/course-html5/etiqueta-aside.md b/content/articles/course-html5/etiqueta-aside.md
index 3207dc9..fa87ea1 100644
--- a/content/articles/course-html5/etiqueta-aside.md
+++ b/content/articles/course-html5/etiqueta-aside.md
@@ -8,12 +8,15 @@ Tags: html5
 Time: 5:55
 Title: Etiqueta aside
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0014-aside.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0014-aside-es.vtt" srclang="es" default>
-</video>
-
-# Etiqueta aside 14/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0014-aside.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0014-aside-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Etiqueta aside 14/32</h1>
+  </figcaption>
+</figure>
 
 Representa una sección de una página que consiste en una información que está relacionado tangencialmente
 con la información de alrededor del elemento aparte, y que podría considerarse separado de la información principal.
diff --git a/content/articles/course-html5/etiqueta-nav-ul-ol-li.md b/content/articles/course-html5/etiqueta-nav-ul-ol-li.md
index a0e538b..cae83c1 100644
--- a/content/articles/course-html5/etiqueta-nav-ul-ol-li.md
+++ b/content/articles/course-html5/etiqueta-nav-ul-ol-li.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 08:20
 Title: Etiqueta nav ul ol li
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0008-nav-ul-ol-li.webm" type="video/webm">
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0008-nav-ul-ol-li.webm" type="video/webm">
     <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0008-nav-ul-ol-li-es.vtt" srclang="es" default>
-</video>
-
-# Etiqueta nav ul ol li 8/32
+  </video>
+  <figcaption>
+    <h1>Etiqueta nav ul ol li 8/32</h1>
+  </figcaption>
+</figure>
 
 - El elemento de navegación «nav» es una sección que contiene enlaces a otros documentos o partes del documento actual.
 - El elemento ul representa una lista de elementos, donde el orden de los elementos no es importante.
diff --git a/content/articles/course-html5/etiqueta-section.md b/content/articles/course-html5/etiqueta-section.md
index 4f359bd..4c67f1f 100644
--- a/content/articles/course-html5/etiqueta-section.md
+++ b/content/articles/course-html5/etiqueta-section.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 2:42
 Title: Etiqueta section
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0012-section.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0012-section-es.vtt" srclang="es" default>
-</video>
-
-# Etiqueta section 12/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0012-section.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0012-section-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Etiqueta section 12/32</h1>
+  </figcaption>
+</figure>
 
 Representa un documento genérico o sección de aplicación. En este contexto, una sección es una agrupación
 temática de la información, normalmente con un encabezado, posiblemente con un pie de página.
diff --git a/content/articles/course-html5/etiquetas-p-y-span.md b/content/articles/course-html5/etiquetas-p-y-span.md
index aa09e88..f3f38d0 100644
--- a/content/articles/course-html5/etiquetas-p-y-span.md
+++ b/content/articles/course-html5/etiquetas-p-y-span.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 03:14
 Title: etiquetas p y span
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0010-Etiquetas-p-span.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0010-etiquetas-p-span-es.vtt" srclang="es" default>
-</video>
-
-# Etiquetas p y span 10/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0010-Etiquetas-p-span.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0010-etiquetas-p-span-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Etiquetas p y span 10/32</h1>
+  </figcaption>
+</figure>
 
 El elemento `p` representa un párrafo y el elemento `span` no significa nada por sí solo,
 pero puede ser útil cuando se usa junto con los atributos globales,
diff --git a/content/articles/course-html5/etiquetas-strong-y-em.md b/content/articles/course-html5/etiquetas-strong-y-em.md
index c32b40b..494515a 100644
--- a/content/articles/course-html5/etiquetas-strong-y-em.md
+++ b/content/articles/course-html5/etiquetas-strong-y-em.md
@@ -8,12 +8,15 @@ Tags: hml
 Time: 02:16
 Title: Etiquetas strong y em
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0011-Etiquetas-strong-em.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0011-etiquetas-strong-em-es.vtt" srclang="es" default>
-</video>
-
-# Etiquetas strong y em 11/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0011-Etiquetas-strong-em.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0011-etiquetas-strong-em-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Etiquetas strong y em 11/32</h1>
+  </figcaption>
+</figure>
 
 La etiqueta `strong` brinda una gran importancia a un parráfo, una palabra o una frase y
 `em` representa el énfasis del estrés de sus contenidos.
diff --git a/content/articles/course-html5/header.md b/content/articles/course-html5/header.md
index 9b04a76..8b37391 100644
--- a/content/articles/course-html5/header.md
+++ b/content/articles/course-html5/header.md
@@ -9,12 +9,15 @@ Tags: html
 Time: 05:37
 Title: Header
 
-<video id="player-ply" playsinline controls>
-<source src="https://archive.org/download/coursehtml5/0005-header.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0005-header-es.vtt" srclang="es" default>
-</video>
-
-# Header HTML5 5/32
+<figure>
+  <video id="player-ply" playsinline controls>
+  <source src="https://archive.org/download/coursehtml5/0005-header.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0005-header-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Header HTML5 5/32</h1>
+  </figcaption>
+</figure>
 
 Header representa el "encabezado" de un documento o sección de un documento.
 
diff --git a/content/articles/course-html5/hgroup.md b/content/articles/course-html5/hgroup.md
index 4cdcfb6..6c2aa20 100644
--- a/content/articles/course-html5/hgroup.md
+++ b/content/articles/course-html5/hgroup.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 03:19
 Title: hgroup
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0007-hgroup.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0007-hgroup-es.vtt" srclang="es" default>
-</video>
-
-# Hgroup HTML5 7/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0007-hgroup.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0007-hgroup-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Hgroup HTML5 7/32</h1>
+  </figcaption>
+</figure>
 
 Hgroup fue una etiqueta que apareció en HTML5, su función es agrupar las
 etiquetas de títulos las `h`. Pero desde las versión 5.1 de HTML ya no se
diff --git a/content/articles/course-html5/intro.md b/content/articles/course-html5/intro.md
index bc92d98..ece21c4 100644
--- a/content/articles/course-html5/intro.md
+++ b/content/articles/course-html5/intro.md
@@ -9,12 +9,15 @@ Tags: html
 Time: 09:16
 Title: Introducción a HTML5
 
-<video id="player-ply" playsinline controls poster=''>
-  <source src="https://archive.org/download/coursehtml5/0001-Introduccion.webm" type="video/webm"/>
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/introduccion-es.vtt" srclang="es" default>
-</video>
-
-# Introducción a HTML5 1/32
+<figure>
+  <video id="player-ply" playsinline controls poster=''>
+    <source src="https://archive.org/download/coursehtml5/0001-Introduccion.webm" type="video/webm"/>
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/introduccion-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Introducción a HTML5 1/32</h1>
+  </figcaption>
+</figure>
 
 HTML tiene una nueva versión desde hace unos años, hablamos de la versión 5 del mismo.
 Trayendo consigo nuevas etiquetas, las llamadas etiquetas semánticas.
diff --git a/content/articles/course-html5/nuevas-etiquetas.md b/content/articles/course-html5/nuevas-etiquetas.md
index b892ce9..7f0f842 100644
--- a/content/articles/course-html5/nuevas-etiquetas.md
+++ b/content/articles/course-html5/nuevas-etiquetas.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 2:36
 Title: Nuevas etiquetas de HTML5
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0002-nuevas-etiquetas.webm" type="video/webm"/>
-  <track kind="captions" src="{static}/wp-content/uploads/article/subtitles/2019/03/0002-nuevas-etiquetas-es.vtt" srclang="es" label="Español" default>
-</video>
-
-# Nuevas etiquetas de HTML5 2/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0002-nuevas-etiquetas.webm" type="video/webm"/>
+    <track kind="captions" src="{static}/wp-content/uploads/article/subtitles/2019/03/0002-nuevas-etiquetas-es.vtt" srclang="es" label="Español" default>
+  </video>
+  <figcaption>
+    <h1>Nuevas etiquetas de HTML5 2/32</h1>
+  </figcaption>
+</figure>
 
 Las nuevas etiquetas de HTML5 ahora son semánticas, es decir que dan
 sentido a la información escrita en una página web.
diff --git a/content/articles/course-html5/sintaxis-html5.md b/content/articles/course-html5/sintaxis-html5.md
index 80bccc8..2365a47 100644
--- a/content/articles/course-html5/sintaxis-html5.md
+++ b/content/articles/course-html5/sintaxis-html5.md
@@ -9,12 +9,15 @@ Tags: html
 Time: 09:57
 Title: Sintaxis HTML5
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0003-Sintaxis-HTML5.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0003-sintaxis-html5-es.vtt" srclang="es" default>
-</video>
-
-# Sintaxis HTML5 3/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0003-Sintaxis-HTML5.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0003-sintaxis-html5-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Sintaxis HTML5 3/32</h1>
+  </figcaption>
+</figure>
 
 En HTML5 se maneja una sintaxis simple sin tantos dolores de cabeza.
 También coloco un enlace al [validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C.
diff --git a/content/articles/course-html5/titulos.md b/content/articles/course-html5/titulos.md
index e1dbf65..4aca5dd 100644
--- a/content/articles/course-html5/titulos.md
+++ b/content/articles/course-html5/titulos.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 07:55
 Title: Títulos en HTML5
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0006-h1-h2-h3-h4-h5-h6.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0006-titulos-es.vtt" srclang="es" default>
-</video>
-
-# Títulos en HTML5 6/32
+<figure>
+  <video id="player-ply" playsinline controls>
+     <source src="https://archive.org/download/coursehtml5/0006-h1-h2-h3-h4-h5-h6.webm" type="video/webm">
+     <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0006-titulos-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Títulos en HTML5 6/32</h1>
+  </figcaption>
+</figure>
 
 En el vídeo se explica de la importancia de las etiquetas
 de título o también llamadas encabezados por su nombre en inglés
diff --git a/content/articles/happy-birthday-to-gnu.md b/content/articles/happy-birthday-to-gnu.md
index 03bd9cd..0df43a8 100644
--- a/content/articles/happy-birthday-to-gnu.md
+++ b/content/articles/happy-birthday-to-gnu.md
@@ -7,6 +7,7 @@ Tags: GNU
 Time: 5:51
 Title: Happy Birthday To GNU
 
+<figure>
 <video id="player-ply" playsinline controls poster="{static}/wp-content/uploads/article/images/2008/09/poster-happy-gnu.png">
   <source src="https://archive.org/download/libreweb/sf-large.webm" type="video/webm">
   <track kind="captions" label="Arabic" src="{static}/wp-content/uploads/article/subtitles/2008/09/happy-birthday-to-gnu-arabic.vtt" srclang="ar">
@@ -46,8 +47,10 @@ Title: Happy Birthday To GNU
   <track kind="captions" label="Turkish" src="{static}/wp-content/uploads/article/subtitles/2008/09/happy-birthday-to-gnu.tr.vtt" srclang="tr">
   <track kind="captions" label="Chinese (Simplified)" src="{static}/wp-content/uploads/article/subtitles/2008/09/happy-birthday-to-gnu-zh_CN.vtt" srclang="zh-Hans">
 </video>
-
-# Happy Birthday To GNU
+<figcaption>
+  <h1>Happy Birthday To GNU</h1>
+</figcaption>
+</figure>
 
 Sr. Stephen Fry introduces you to free software, and reminds you of a very special birthday.
 In this film, Stephen Fry, the actor, humorist and author introduces the viewer to free software and GNU.
diff --git a/content/articles/locutus-de-gnu.md b/content/articles/locutus-de-gnu.md
index ff2d464..1b78e14 100644
--- a/content/articles/locutus-de-gnu.md
+++ b/content/articles/locutus-de-gnu.md
@@ -11,12 +11,15 @@ Tags: GNU/Linux, gracioso, humor, software libre, software privativo, Star Trek,
 Time: 02:48
 Title: Locutus de GNU
 
-<video id="player-ply" playsinline controls
-       poster="{static}/wp-content/uploads/article/images/2017/02/video-poster-locutus.png">
-  <source src="https://archive.org/download/libreweb/locutus.webm" type="video/webm">
-</video>
-
-# Locutus de GNU
+<figure>
+  <video id="player-ply" playsinline controls
+         poster="{static}/wp-content/uploads/article/images/2017/02/video-poster-locutus.png">
+    <source src="https://archive.org/download/libreweb/locutus.webm" type="video/webm">
+  </video>
+  <figcaption>
+    <h1>Locutus de GNU</h1>
+  </figcaption>
+</figure>
 
 Encontré [esta parodia][locutus]{:target="_blank" rel="noopener noreferrer"}
 muy graciosa. Para entenderla al menos debéis saber qué son el software
diff --git a/content/articles/prompt-avanzado.md b/content/articles/prompt-avanzado.md
index 3835de0..fb7c972 100644
--- a/content/articles/prompt-avanzado.md
+++ b/content/articles/prompt-avanzado.md
@@ -9,11 +9,14 @@ Tags: bash, hyperbash, shell
 Time: 08:39
 Title: Prompt avanzado
 
-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/libreweb/0001-15599.webm" type="video/webm">
-</video>
-
-# Prompt avanzado
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/libreweb/0001-15599.webm" type="video/webm">
+  </video>
+  <figcaption>
+    <h1>Prompt avanzado</h1>
+  </figcaption>
+</figure>
 
 Mayormente necesitamos del [intérprete de comandos][bash]{:target="_blank" rel="noopener noreferrer"}
 para realizar una que otra tarea, quizás resulte tedioso armar
diff --git a/content/articles/rms-en-dominio-digital.md b/content/articles/rms-en-dominio-digital.md
index 33fa181..3c52118 100644
--- a/content/articles/rms-en-dominio-digital.md
+++ b/content/articles/rms-en-dominio-digital.md
@@ -8,11 +8,14 @@ Tags: GNU/Linux
 Time: 56:07
 Title: RMS en Dominio digital
 
-<video id="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/06/video-poster-rms.jpg'>
-  <source src="https://archive.org/download/libreweb/StallmanenDominioDigital.webm" type="video/webm"/>
-</video>
-
-# RMS en Dominio digital
+<figure>
+  <video id="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/06/video-poster-rms.jpg'>
+    <source src="https://archive.org/download/libreweb/StallmanenDominioDigital.webm" type="video/webm"/>
+  </video>
+  <figcaption>
+    <h1>RMS en Dominio digital</h1>
+  </figcaption>
+</figure>
 
 El pasado 30 de mayo, [Richard M. Stallman][rms]{:target="_blank" rel="noopener noreferrer"}
 se presentó en Argentina en el programa radial Dominio Digital.
diff --git a/content/articles/sin-parar.md b/content/articles/sin-parar.md
index 2f25b46..74583ce 100644
--- a/content/articles/sin-parar.md
+++ b/content/articles/sin-parar.md
@@ -10,11 +10,14 @@ Tags: capitalismo, ciencia, cortometraje, cultura libre, educación, sistema, vi
 Time: 07:28
 Title: Sin parar
 
-<video id="player-ply" playsinline controls poster="{static}/wp-content/uploads/article/images/2017/07/video-poster-sin-parar.png">
-  <source src="https://archive.org/download/libreweb/sin-parar.webm" type="video/webm">
-</video>
-
-# Sin parar
+<figure>
+  <video id="player-ply" playsinline controls poster="{static}/wp-content/uploads/article/images/2017/07/video-poster-sin-parar.png">
+    <source src="https://archive.org/download/libreweb/sin-parar.webm" type="video/webm">
+  </video>
+  <figcaption>
+    <h1>Sin Parar</h1>
+  </figcaption>
+</figure>
 
 «Desde que hace siglos apareciera el mayor invento creado por el hombre,
 generación tras generación hay alguien encargado de revisarlo
diff --git a/libretube-theme/static/css/styles.min.css b/libretube-theme/static/css/styles.min.css
index c457ce2..b0851d1 100644
--- a/libretube-theme/static/css/styles.min.css
+++ b/libretube-theme/static/css/styles.min.css
@@ -1 +1 @@
-@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(../fonts/opensans/latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body{font-family:'Open Sans', sans-serif;color:#fff;background:#111;overflow-x:hidden}p{line-height:24px}a{text-decoration:none;color:#007bff}a:hover{color:#0091EA;text-decoration:none;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.hr-author{margin:10px 0}a.link-author{color:#fff}a.link-author:hover{color:#fff}.style-scope svg{width:1rem;height:1rem;fill:#555}ul{padding:0}hr{width:100%;height:1px;background-color:#222;border:none;margin:30px 0}h2,h3,h4,h5,h6{margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}h1{margin-top:1rem;font-size:1.5rem}summary{font-weight:700;margin-top:1rem;margin-bottom:1rem;text-transform:uppercase;font-size:.8rem}.button{background-color:#0091EA;color:#fff;padding:17px 25px;text-transform:uppercase;font-weight:700;font-size:12px;border:2px solid #0091EA;float:left;border-radius:999px}.button:hover{background-color:#fff;color:#0288D1;border:2px solid #0288D1;text-decoration:none;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.clear{clear:both}video{width:100%}.highlighted{background:#0091EA;display:inline-block;font-weight:bold;padding:0 6px}code{background-color:#282828;color:#73d1ed}pre{background-color:#282828;color:#78dcfa;padding:1rem}.highlight{background:#000000;color:#cccccc}.highlight pre{font-size:75%}.highlight .hll{background-color:#222222}.highlight .c{color:#4E4F8E}.highlight .err{color:#cccccc;border:1px solid #FF0000}.highlight .esc,.highlight .g{color:#cccccc}.highlight .k{color:#cdcd00}.highlight .l,.highlight .n{color:#cccccc}.highlight .o{color:#3399cc}.highlight .x{color:#cccccc}.highlight .p{color:#fac0ba}.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1{color:#4E4F8E}.highlight .cs{color:#cd0000;font-weight:bold}.highlight .gd{color:#cd0000}.highlight .ge{color:#cccccc;font-style:italic}.highlight .gr{color:#FF0000}.highlight .gh{color:#4E4F8E;font-weight:bold}.highlight .gi{color:#00cd00}.highlight .go{color:#888888}.highlight .gp{color:#4E4F8E;font-weight:bold}.highlight .gs{color:#cccccc;font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#0044DD}.highlight .kc{color:#cdcd00}.highlight .kd{color:#00cd00}.highlight .kn{color:#cd00cd}.highlight .kp,.highlight .kr{color:#cdcd00}.highlight .kt{color:#00cd00}.highlight .ld{color:#cccccc}.highlight .m{color:#cd00cd}.highlight .s{color:#cd0000}.highlight .na{color:#cccccc}.highlight .nb{color:#cd00cd}.highlight .nc{color:#00cdcd}.highlight .no,.highlight .nd,.highlight .ni{color:#cccccc}.highlight .ne{color:#666699;font-weight:bold}.highlight .nf,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#cccccc}.highlight .nt{color:orange}.highlight .nv{color:#00cdcd}.highlight .ow{color:#cdcd00}.highlight .w{color:#cccccc}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#cd00cd}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:#cd0000}.highlight .bp{color:#cd00cd}.highlight .vc,.highlight .vg,.highlight .vi{color:#00cdcd}.highlight .il{color:#cd00cd}header{background:#222}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:4}.logo{max-width:60%}#menu-toggle{position:relative;color:white}#menu-toggle img{width:20px}.menu-bars{left:1rem}.menu-logo{position:relative;left:2rem}input{border:1px solid #000;color:#fff;font-size:12px;padding:0.5rem 1rem;width:100%;background:url(../images/search.png) #111 no-repeat right 35px center;background-size:3%;outline:none}.notifications{display:-ms-flexbox;display:flex;margin:0px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.notifications li{list-style:none}.notifications li:hover{cursor:pointer}.notifications i{color:#bbc3ca;font-size:20px;margin:0rem 0.2rem}.notifications span{border-radius:50px;background-color:#0091EA;color:#fff;font-weight:700;padding:4px 9px;font-size:11px;position:relative;top:-12px;left:-12px}.menu-profile{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}.menu-profile ul{display:-ms-inline-flexbox;display:inline-flex;list-style:none;margin-bottom:0px}.image-profile-menu{width:2rem}.image-profile-menu img{width:100%}.log-out a{background:#0091EA;color:white;padding:.2rem;font-size:.8rem;font-weight:700}.log-out a:hover{color:white}.username{color:#fff;font-weight:700}.mt-6,.my-6{margin-top:6rem !important}.tab{text-align:center;margin:-10px 0}.tab li{display:inline-block;text-transform:uppercase;color:#808791;font-weight:700;font-size:12px;margin:0 20px}.tab li:hover{color:#0091EA;cursor:pointer;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.tab li>a{color:white}.tab .active{border-bottom:3px solid #0091EA;padding-bottom:20px;margin-bottom:-20px;color:#fff}article ul,article ol{margin-left:1rem}caption{color:#fff;caption-side:top}.main-videos h2{margin:20px 0px 0px 0px;font-weight:900}.main-videos h2>a{color:white}.area{position:relative;margin-bottom:0.5rem}.duration{background-color:#000;color:#fff;padding:2px 5px;text-transform:uppercase;font-weight:700;font-size:12px;position:absolute;right:0;bottom:.2rem}p.views{color:#343434}.video p{margin:0;padding:0;color:#757a80;line-height:inherit}.area:hover .mask{display:block;cursor:pointer;opacity:100;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.vertical-align{position:relative;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%)}.mask{position:absolute;background-color:rgba(0,145,234,0.8);width:100%;height:100%;text-align:center;opacity:0}.mask p{color:#fff;font-weight:700}.mask i{color:#fff}.mini{list-style:none}.mini h4{margin-top:13px;font-weight:700}.mini p{font-size:12px;margin-top:6px}.mini .duration{padding:2px 5px}.mini .mask p{display:none}.mini .soumaicon.play svg{width:3rem;height:3rem}li.mini:nth-child(2){margin-bottom:30px}.video h4{margin-top:15px;font-weight:400}.single-channel .video p{margin-top:7px}.channel-bio hr{margin:20px 0}.channel-bio p{text-align:justify}.channel-bio .button{margin-top:10px}.channel-name{font-weight:500;font-size:16px}.channel-name img{margin-right:10px}.page-item:first-child .page-link>span,.page-item:last-child .page-link>span{color:white}.page-link{background-color:#222;border:1px solid #111;color:#fff}.page-item.disabled .page-link{pointer-events:none;cursor:auto;background-color:#111;border-color:#222}.page-link:hover{text-decoration:none;background-color:#0091EA;border:solid 1px #026de0;color:#fff}.page-item.active .page-link{color:#fff;background-color:#0091EA;border-color:#0091EA}footer{text-align:center;padding:0 0 30px}footer li{display:inline;margin:0 15px}footer ul:nth-child(1) a{font-size:16px;font-weight:600;color:#fff}footer ul:nth-child(2){margin:20px 0}footer ul:nth-child(2) a{color:#f5f5f5}footer li a:hover{color:#0091EA;text-decoration:none;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}footer>h4,footer>h6{color:#aaa7a7;font-weight:300}.title{color:#00A5FF;text-transform:uppercase;font-weight:700}.sidebar{margin-top:0px}.sidebar ul{margin-bottom:5px;list-style:none}.sidebar li{line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar a{color:#828c95;font-weight:500}.sidebar a:hover{color:#0091EA;text-decoration:none}.sidebar i{font-size:20px;margin-right:15px}.sidebar #subs img{margin-right:15px;width:25px}#playlist p{font-size:12px;font-weight:300;margin-left:35px;margin-top:-15px}#playlist i{float:left}#sidebar-wrapper{padding-top:10px;padding-left:30px;padding-right:30px;margin-bottom:-10px;font-weight:600;font-size:14px;background-color:#111;border-right:1px solid #dbdee0;top:0;bottom:0;z-index:1000;left:0;position:fixed;width:300px;margin-left:-300px;overflow-x:hidden;overflow-y:hidden;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}#sidebar-wrapper.active{left:300px;width:300px}#menu-close{padding:7px 0}#menu-close img{width:10px}h2.title-video{margin-left:1rem}soumaicon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center}.soumaicon svg{width:1rem;height:1rem;fill:currentcolor}.soumaicon:hover svg{fill:#0091EA}.soumaicon.play svg{width:4rem;height:4rem}.soumaicon.play:hover svg{fill:currentcolor}@media only screen and (max-width: 991px){.logo{max-width:15%;margin:.5rem 0}.menu-profile{-ms-flex-pack:center;justify-content:center}.mt-8{margin-top:8rem !important}.mt-10{margin-top:10rem !important}}@media only screen and (max-width: 480px){.logo{max-width:20%}.channel-bio .button{margin-bottom:1rem}ul#user-info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.notifications{position:relative;right:0px;top:0px;left:0px;margin:20px}.ml-1{margin-left:-15px !important}.mt-8,.mt-10{margin-top:1rem !important}.fixed-top{position:relative;top:0;right:0;left:0;z-index:3}}
+@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(../fonts/opensans/latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body{font-family:'Open Sans', sans-serif;color:#fff;background:#111;overflow-x:hidden}p{line-height:24px;font-size:14px}a{text-decoration:none;color:#007bff}a:hover{color:#0091EA;text-decoration:none;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.hr-author{margin:10px 0}a.link-author{color:#fff}a.link-author:hover{color:#fff}.style-scope svg{width:1rem;height:1rem;fill:#555}ul{padding:0}hr{width:100%;height:1px;background-color:#222;border:none;margin:30px 0}h2,h3,h4,h5,h6{margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}h1{margin-top:1rem;font-size:1rem;font-weight:700}summary{font-weight:700;margin-top:1rem;margin-bottom:1rem;text-transform:uppercase;font-size:.8rem}.button{background-color:#0091EA;color:#fff;padding:17px 25px;text-transform:uppercase;font-weight:700;font-size:12px;border:2px solid #0091EA;float:left;border-radius:999px}.button:hover{background-color:#fff;color:#0288D1;border:2px solid #0288D1;text-decoration:none;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.clear{clear:both}video{width:100%}.highlighted{background:#0091EA;display:inline-block;font-weight:bold;padding:0 6px}code{background-color:#282828;color:#73d1ed}pre{background-color:#282828;color:#78dcfa;padding:1rem}.highlight{background:#000000;color:#cccccc}.highlight pre{font-size:75%}.highlight .hll{background-color:#222222}.highlight .c{color:#4E4F8E}.highlight .err{color:#cccccc;border:1px solid #FF0000}.highlight .esc,.highlight .g{color:#cccccc}.highlight .k{color:#cdcd00}.highlight .l,.highlight .n{color:#cccccc}.highlight .o{color:#3399cc}.highlight .x{color:#cccccc}.highlight .p{color:#fac0ba}.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1{color:#4E4F8E}.highlight .cs{color:#cd0000;font-weight:bold}.highlight .gd{color:#cd0000}.highlight .ge{color:#cccccc;font-style:italic}.highlight .gr{color:#FF0000}.highlight .gh{color:#4E4F8E;font-weight:bold}.highlight .gi{color:#00cd00}.highlight .go{color:#888888}.highlight .gp{color:#4E4F8E;font-weight:bold}.highlight .gs{color:#cccccc;font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#0044DD}.highlight .kc{color:#cdcd00}.highlight .kd{color:#00cd00}.highlight .kn{color:#cd00cd}.highlight .kp,.highlight .kr{color:#cdcd00}.highlight .kt{color:#00cd00}.highlight .ld{color:#cccccc}.highlight .m{color:#cd00cd}.highlight .s{color:#cd0000}.highlight .na{color:#cccccc}.highlight .nb{color:#cd00cd}.highlight .nc{color:#00cdcd}.highlight .no,.highlight .nd,.highlight .ni{color:#cccccc}.highlight .ne{color:#666699;font-weight:bold}.highlight .nf,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#cccccc}.highlight .nt{color:orange}.highlight .nv{color:#00cdcd}.highlight .ow{color:#cdcd00}.highlight .w{color:#cccccc}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#cd00cd}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:#cd0000}.highlight .bp{color:#cd00cd}.highlight .vc,.highlight .vg,.highlight .vi{color:#00cdcd}.highlight .il{color:#cd00cd}header{background:#222}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:4}.logo{max-width:60%}#menu-toggle{position:relative;color:white}#menu-toggle img{width:20px}.menu-bars{left:1rem}.menu-logo{position:relative;left:2rem}input{border:1px solid #000;color:#fff;font-size:12px;padding:0.5rem 1rem;width:100%;background:url(../images/search.png) #111 no-repeat right 35px center;background-size:3%;outline:none}.notifications{display:-ms-flexbox;display:flex;margin:0px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.notifications li{list-style:none}.notifications li:hover{cursor:pointer}.notifications i{color:#bbc3ca;font-size:20px;margin:0rem 0.2rem}.notifications span{border-radius:50px;background-color:#0091EA;color:#fff;font-weight:700;padding:4px 9px;font-size:11px;position:relative;top:-12px;left:-12px}.menu-profile{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}.menu-profile ul{display:-ms-inline-flexbox;display:inline-flex;list-style:none;margin-bottom:0px}.image-profile-menu{width:2rem}.image-profile-menu img{width:100%}.log-out a{background:#0091EA;color:white;padding:.2rem;font-size:.8rem;font-weight:700}.log-out a:hover{color:white}.username{color:#fff;font-weight:700}.mt-6,.my-6{margin-top:6rem !important}.tab{text-align:center;margin:-10px 0}.tab li{display:inline-block;text-transform:uppercase;color:#808791;font-weight:700;font-size:12px;margin:0 20px}.tab li:hover{color:#0091EA;cursor:pointer;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.tab li>a{color:white}.tab .active{border-bottom:3px solid #0091EA;padding-bottom:20px;margin-bottom:-20px;color:#fff}details>ul,ol{margin-left:1rem}caption{color:#fff;caption-side:top}.main-videos h2{margin:20px 0px 0px 0px;font-weight:900}.main-videos h2>a{color:white}.area{position:relative;margin-bottom:0.5rem}.duration{background-color:#000;color:#fff;padding:2px 5px;text-transform:uppercase;font-weight:700;font-size:12px;position:absolute;right:0;bottom:.2rem}p.views{color:#343434}.video p{margin:0;padding:0;color:#757a80;line-height:inherit}.area:hover .mask{display:block;cursor:pointer;opacity:100;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.vertical-align{position:relative;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%)}.mask{position:absolute;background-color:rgba(0,145,234,0.8);width:100%;height:100%;text-align:center;opacity:0}.mask p{color:#fff;font-weight:700}.mask i{color:#fff}.mini{list-style:none}.mini h4{margin-top:13px;font-weight:700}.mini p{font-size:12px;margin-top:6px}.mini .duration{padding:2px 5px}.mini .mask p{display:none}.mini .soumaicon.play svg{width:3rem;height:3rem}li.mini:nth-child(2){margin-bottom:30px}.video h4{margin-top:15px;font-weight:400}.single-channel .video p{margin-top:7px}.channel-bio hr{margin:20px 0}.channel-bio p{text-align:justify}.channel-bio .button{margin-top:10px}.channel-name{font-weight:500;font-size:16px}.channel-name img{margin-right:10px}.page-item:first-child .page-link>span,.page-item:last-child .page-link>span{color:white}.page-link{background-color:#222;border:1px solid #111;color:#fff}.page-item.disabled .page-link{pointer-events:none;cursor:auto;background-color:#111;border-color:#222}.page-link:hover{text-decoration:none;background-color:#0091EA;border:solid 1px #026de0;color:#fff}.page-item.active .page-link{color:#fff;background-color:#0091EA;border-color:#0091EA}footer{text-align:center;padding:0 0 30px}footer li{display:inline;margin:0 15px}footer ul:nth-child(1) a{font-size:16px;font-weight:600;color:#fff}footer ul:nth-child(2){margin:20px 0}footer ul:nth-child(2) a{color:#f5f5f5}footer li a:hover{color:#0091EA;text-decoration:none;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}footer>h4,footer>h6{color:#aaa7a7;font-weight:300}.title{color:#00A5FF;text-transform:uppercase;font-weight:700}.sidebar{margin-top:0px}.sidebar ul{margin-bottom:5px;list-style:none}.sidebar li{line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar a{color:#828c95;font-weight:500}.sidebar a:hover{color:#0091EA;text-decoration:none}.sidebar i{font-size:20px;margin-right:15px}.sidebar #subs img{margin-right:15px;width:25px}#playlist p{font-size:12px;font-weight:300;margin-left:35px;margin-top:-15px}#playlist i{float:left}#sidebar-wrapper{padding-top:10px;padding-left:30px;padding-right:30px;margin-bottom:-10px;font-weight:600;font-size:14px;background-color:#111;border-right:1px solid #dbdee0;top:0;bottom:0;z-index:1000;left:0;position:fixed;width:300px;margin-left:-300px;overflow-x:hidden;overflow-y:hidden;transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}#sidebar-wrapper.active{left:300px;width:300px}#menu-close{padding:7px 0}#menu-close img{width:10px}h2.title-video{margin-left:1rem}soumaicon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center}.soumaicon svg{width:1rem;height:1rem;fill:currentcolor}.soumaicon:hover svg{fill:#0091EA}.soumaicon.play svg{width:4rem;height:4rem}.soumaicon.play:hover svg{fill:currentcolor}@media only screen and (max-width: 991px){.logo{max-width:15%;margin:.5rem 0}.menu-profile{-ms-flex-pack:center;justify-content:center}.mt-8{margin-top:8rem !important}.mt-10{margin-top:10rem !important}}@media only screen and (max-width: 480px){.logo{max-width:20%}.channel-bio .button{margin-bottom:1rem}ul#user-info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.notifications{position:relative;right:0px;top:0px;left:0px;margin:20px}.ml-1{margin-left:-15px !important}.mt-8,.mt-10{margin-top:1rem !important}.fixed-top{position:relative;top:0;right:0;left:0;z-index:3}}
diff --git a/libretube-theme/templates/article.html b/libretube-theme/templates/article.html
index b5ebc6b..d8ca305 100644
--- a/libretube-theme/templates/article.html
+++ b/libretube-theme/templates/article.html
@@ -73,7 +73,7 @@
     <div class="row mt-3 mt-10">
         <div class="col-md-12">
             <div class="row mr-3">
-                <article class="col-md-8">
+                <div class="col-md-8">
 
                     <!-- dinamic article content  -->
                     <div class="ml-3">
@@ -143,7 +143,7 @@
                     </div>
                     <!--End Comments -->
 
-                </article>
+                </div>
 
                 {% if SHOW_RECENT_POSTS %}