From 5fcc3367f12994d269b0a861b09361b3fb571540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs?= <heckyel@hyperbola.info>
Date: Wed, 10 Apr 2019 19:48:12 -0500
Subject: [PATCH] fix semantic HTML5

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

diff --git a/content/articles/citizenfour.md b/content/articles/citizenfour.md
index c18930f..36608fc 100644
--- a/content/articles/citizenfour.md
+++ b/content/articles/citizenfour.md
@@ -12,8 +12,10 @@ Title: Citizenfour
   <source src="https://archive.org/download/libreweb/citizenfour-spanish.webm" type="video/webm"/>
 </video>
 
+# Citizenfour
+
 <details markdown="span">
-<summary>Citizenfour</summary>
+<summary>Mostrar Más</summary>
 En enero de 2013, **Laura Poitras** comenzó a recibir correos electrónicos
 cifrados firmados por un tal  **"Citizenfour"**, que le aseguraba tener
 pruebas de los programas de vigilancia ilegales dirigidos por la NSA
diff --git a/content/articles/como-generar-freakspot.md b/content/articles/como-generar-freakspot.md
index 69c4de4..af76599 100644
--- a/content/articles/como-generar-freakspot.md
+++ b/content/articles/como-generar-freakspot.md
@@ -13,8 +13,10 @@ Title: ¿Cómo generar Freak Spot?
   <source src="https://archive.org/download/libreweb/freakspot.webm" type="video/webm">
 </video>
 
+# ¿Cómo generar Freak Spot?
+
 <details markdown="span">
-<summary>¿Cómo generar Freak Spot?</summary>
+<summary>Mostrar Más</summary>
 
 Alguno que otro usuario se ha preguntado alguna vez
 cómo generar el sitio web [freakspot][site], la verdad es que es bastante sencillo
diff --git a/content/articles/course-html5/codificacion.md b/content/articles/course-html5/codificacion.md
index 4c54cf0..a48dc1d 100644
--- a/content/articles/course-html5/codificacion.md
+++ b/content/articles/course-html5/codificacion.md
@@ -13,8 +13,10 @@ Title: Codificación HTML5
   <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
+
 <details markdown="span">
-<summary>Codificación HTML5 4/32</summary>
+<summary>Mostrar Más</summary>
 Código de ayuda:
 ~~~~{.html}
 <meta charset="UTF-8">
diff --git a/content/articles/course-html5/etiqueta-a.md b/content/articles/course-html5/etiqueta-a.md
index 426ea12..0c399e2 100644
--- a/content/articles/course-html5/etiqueta-a.md
+++ b/content/articles/course-html5/etiqueta-a.md
@@ -12,8 +12,10 @@ Title: Etiqueta a
   <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
+
 <details markdown="span">
-<summary>Etiqueta a 9/32</summary>
+<summary>Mostrar Más</summary>
 Más sobre la etiqueta `<a>` en la [w3schools][w3school]{:target="_blank" rel="noopener noreferrer"}
 </details>
 
diff --git a/content/articles/course-html5/etiqueta-article.md b/content/articles/course-html5/etiqueta-article.md
index e97cd36..4f6d5e7 100644
--- a/content/articles/course-html5/etiqueta-article.md
+++ b/content/articles/course-html5/etiqueta-article.md
@@ -12,8 +12,10 @@ Title: Etiqueta article
   <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
+
 <details markdown="span">
-<summary>Etiqueta article 13/32</summary>
+<summary>Mostrar Más</summary>
 <p class="mb-0">Más sobre la etiqueta `<article>` en la [w3schools][w3-article]{:target="_blank" rel="noopener noreferrer"}</p>
 </details>
 
diff --git a/content/articles/course-html5/etiqueta-aside.md b/content/articles/course-html5/etiqueta-aside.md
index a4b51c9..7777e0a 100644
--- a/content/articles/course-html5/etiqueta-aside.md
+++ b/content/articles/course-html5/etiqueta-aside.md
@@ -12,8 +12,10 @@ Title: Etiqueta aside
   <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
+
 <details markdown="span">
-<summary>Etiqueta aside 14/32</summary>
+<summary>Mostrar Más</summary>
 <p class="mb-0">Más sobre la etiqueta `<aside>` en la [w3schools][w3-aside]{:target="_blank" rel="noopener noreferrer"}</p>
 </details>
 
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 9a498a1..0c95115 100644
--- a/content/articles/course-html5/etiqueta-nav-ul-ol-li.md
+++ b/content/articles/course-html5/etiqueta-nav-ul-ol-li.md
@@ -12,8 +12,10 @@ Title: Etiqueta nav ul ol li
     <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
+
 <details markdown="span">
-<summary>Etiqueta nav ul ol li 8/32</summary>
+<summary>Mostrar Más</summary>
 <p class="mb-0">Más sobre la etiqueta `<nav>` en la [w3schools][w3-nav]{:target="_blank" rel="noopener noreferrer"}</p>
 <p class="mb-0">Más sobre la etiqueta `<ul>` en la [w3schools][w3-ul]{:target="_blank" rel="noopener noreferrer"}</p>
 <p class="mb-0">Más sobre la etiqueta `<ol>` en la [w3schools][w3-ol]{:target="_blank" rel="noopener noreferrer"}</p>
diff --git a/content/articles/course-html5/etiqueta-section.md b/content/articles/course-html5/etiqueta-section.md
index 6b4536c..751e599 100644
--- a/content/articles/course-html5/etiqueta-section.md
+++ b/content/articles/course-html5/etiqueta-section.md
@@ -12,8 +12,10 @@ Title: Etiqueta section
   <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
+
 <details markdown="span">
-<summary>Etiqueta section 12/32</summary>
+<summary>Mostrar Más</summary>
 <p class="mb-0">Más sobre la etiqueta `<section>` en la [w3schools][w3-section]{:target="_blank" rel="noopener noreferrer"}</p>
 </details>
 
diff --git a/content/articles/course-html5/etiquetas-p-y-span.md b/content/articles/course-html5/etiquetas-p-y-span.md
index 9024123..ea8d988 100644
--- a/content/articles/course-html5/etiquetas-p-y-span.md
+++ b/content/articles/course-html5/etiquetas-p-y-span.md
@@ -12,8 +12,10 @@ Title: etiquetas p y span
   <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
+
 <details markdown="span">
-<summary>Etiquetas p y span 10/32</summary>
+<summary>Mostrar Más</summary>
 <p class="mb-0">Más sobre la etiqueta `<p>` en la [w3schools][w3-p]{:target="_blank" rel="noopener noreferrer"}</p>
 <p>Más sobre la etiqueta `<span>` en la [w3schools][w3-span]{:target="_blank" rel="noopener noreferrer"}</p>
 </details>
diff --git a/content/articles/course-html5/etiquetas-strong-y-em.md b/content/articles/course-html5/etiquetas-strong-y-em.md
index acfc0c3..05d88a0 100644
--- a/content/articles/course-html5/etiquetas-strong-y-em.md
+++ b/content/articles/course-html5/etiquetas-strong-y-em.md
@@ -12,8 +12,10 @@ Title: Etiquetas strong y em
   <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
+
 <details markdown="span">
-<summary>Etiquetas strong y em 11/32</summary>
+<summary>Mostrar Más</summary>
 <p class="mb-0">Más sobre la etiqueta `<strong>` en la [w3schools][w3-strong]{:target="_blank" rel="noopener noreferrer"}</p>
 <p>Más sobre la etiqueta `<em>` en la [w3schools][w3-em]{:target="_blank" rel="noopener noreferrer"}</p>
 </details>
diff --git a/content/articles/course-html5/header.md b/content/articles/course-html5/header.md
index cde36c4..1018151 100644
--- a/content/articles/course-html5/header.md
+++ b/content/articles/course-html5/header.md
@@ -13,8 +13,10 @@ Title: Header
   <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
+
 <details markdown="span">
-<summary>Header HTML5 5/32</summary>
+<summary>Mostrar Más</summary>
 Más información sobre la etiqueta `<header>` en [w3schools][header]{:target="_blank" rel="noopener noreferrer"}.
 </details>
 
diff --git a/content/articles/course-html5/hgroup.md b/content/articles/course-html5/hgroup.md
index 025676c..5550140 100644
--- a/content/articles/course-html5/hgroup.md
+++ b/content/articles/course-html5/hgroup.md
@@ -12,8 +12,10 @@ Title: hgroup
   <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
+
 <details markdown="span">
-<summary>Hgroup HTML5 7/32</summary>
+<summary>Mostrar Más</summary>
 <p class="mb-0">Etiqueta hgroup en desuso.</p>
 <p class="mb-0">Este elemento fue removido de la especificacion HTML5 (W3C), por favor no usar más.</p>
 <p class="mb-0">Referencia: [https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup){:target="_blank" rel="noopener noreferrer"}</p>
diff --git a/content/articles/course-html5/intro.md b/content/articles/course-html5/intro.md
index a181639..8685a2a 100644
--- a/content/articles/course-html5/intro.md
+++ b/content/articles/course-html5/intro.md
@@ -13,8 +13,10 @@ Title: Introducción a HTML5
   <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
+
 <details markdown="span">
-<summary>Introducción a HTML5 1/32</summary>
+<summary>Mostrar Más</summary>
 <ul class="ml-3">
 <li>[Respositorio oficial][html]{:target="_blank" rel="noopener noreferrer"} de HTML</li>
 <li>[w3schools][w3c]{:target="_blank" rel="noopener noreferrer"}</li>
diff --git a/content/articles/course-html5/nuevas-etiquetas.md b/content/articles/course-html5/nuevas-etiquetas.md
index 4e58b74..fe49897 100644
--- a/content/articles/course-html5/nuevas-etiquetas.md
+++ b/content/articles/course-html5/nuevas-etiquetas.md
@@ -12,8 +12,10 @@ Title: Nuevas etiquetas de HTML5
   <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
+
 <details markdown="span">
-<summary>Nuevas etiquetas de HTML5 2/32</summary>
+<summary>Mostrar Más</summary>
 Más información sobre HTML5 en [w3schools][w3c-html5]{:target="_blank" rel="noopener noreferrer"}.
 </details>
 
diff --git a/content/articles/course-html5/sintaxis-html5.md b/content/articles/course-html5/sintaxis-html5.md
index 0332b1d..7ff626f 100644
--- a/content/articles/course-html5/sintaxis-html5.md
+++ b/content/articles/course-html5/sintaxis-html5.md
@@ -13,8 +13,10 @@ Title: Sintaxis HTML5
   <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
+
 <details markdown="span">
-<summary>Sintaxis HTML5 3/32</summary>
+<summary>Mostrar Más</summary>
 ~~~~{.html}
 <!doctype html>
 <html lang="en">
diff --git a/content/articles/course-html5/titulos.md b/content/articles/course-html5/titulos.md
index cd80a1b..23403ff 100644
--- a/content/articles/course-html5/titulos.md
+++ b/content/articles/course-html5/titulos.md
@@ -12,11 +12,11 @@ Title: Títulos en HTML5
   <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
+
 <details markdown="span">
-<summary>Títulos en HTML5 6/32</summary>
-
-Más información sobre las etiquetas [«h» en w3schools][titles]{:target="_blank" rel="noopener noreferrer"}.
-
+<summary>Mostrar más</summary>
+Más información sobre las etiquetas `h` en [w3schools][titles]{:target="_blank" rel="noopener noreferrer"}.
 </details>
 
 [titles]: https://www.w3schools.com/hTml/html_headings.asp
diff --git a/content/articles/locutus-de-gnu.md b/content/articles/locutus-de-gnu.md
index 190e66f..072c301 100644
--- a/content/articles/locutus-de-gnu.md
+++ b/content/articles/locutus-de-gnu.md
@@ -15,8 +15,10 @@ Title: Locutus de GNU
   <source src="https://archive.org/download/libreweb/locutus.webm" type="video/webm">
 </video>
 
+# Locutus de GNU
+
 <details markdown="span">
-<summary>Locutus de GNU</summary>
+<summary>Mostrar Más</summary>
 Encontré [esta parodia](https://goblinrefuge.com/mediagoblin/u/locutus/m/locutus-de-gnu/)
 muy graciosa. Para entenderla al menos debéis saber qué son el software
 libre y el software privativo. Espero que os guste.
diff --git a/content/articles/prompt-avanzado.md b/content/articles/prompt-avanzado.md
index 6212883..b13e168 100644
--- a/content/articles/prompt-avanzado.md
+++ b/content/articles/prompt-avanzado.md
@@ -12,8 +12,10 @@ Title: Prompt avanzado
   <source src="https://archive.org/download/libreweb/0001-15599.webm" type="video/webm">
 </video>
 
+# Prompt avanzado
+
 <details markdown="span">
-<summary>Prompt avanzado</summary>
+<summary>Mostrar Más</summary>
 Muchas veces necesitamos del [intérprete de comandos][bash]
 para realizar una que otra tarea, quizás resulte tedioso armar
 nuestra propia configuración de `.bashrc`.
diff --git a/content/articles/rms-en-dominio-digital.md b/content/articles/rms-en-dominio-digital.md
index ab6f762..004a35f 100644
--- a/content/articles/rms-en-dominio-digital.md
+++ b/content/articles/rms-en-dominio-digital.md
@@ -11,8 +11,10 @@ Title: RMS en Dominio digital
   <source src="https://archive.org/download/libreweb/StallmanenDominioDigital.webm" type="video/webm"/>
 </video>
 
+# RMS en Dominio digital
+
 <details markdown="span">
-<summary>RMS en Dominio digital</summary>
+<summary>Mostrar Más</summary>
 El pasado 30 de mayo, [Richard M. Stallman][rms] se presentó en Argentina
 en el programa radial Dominio Digital. Dado que hay bastantes
 puntos importantes que se tomaron en cuenta durante el programa
diff --git a/content/articles/sin-parar.md b/content/articles/sin-parar.md
index 3684e29..1a751dd 100644
--- a/content/articles/sin-parar.md
+++ b/content/articles/sin-parar.md
@@ -13,9 +13,10 @@ Title: Sin parar
   <source src="https://archive.org/download/libreweb/sin_parar.webm" type="video/webm">
 </video>
 
-<details markdown="span">
-<summary>Sin parar</summary>
+# Sin parar
 
+<details markdown="span">
+<summary>Mostrar Más</summary>
 «Desde que hace siglos apareciera el mayor invento creado por el hombre,
 generación tras generación hay alguien encargado de revisarlo
 minuciosamente [...] y que pueda seguir funcionando en todo el mundo sin
@@ -26,5 +27,4 @@ El vídeo se encuentra bajo la licencia <a href="http://creativecommons.org/lice
 <abbr title="Attribution-ShareAlike 3.0 Unported">CC BY-SA 3.0</abbr></a> y fue
 obtenido de
 [la instancia de Mediagoblin de Roaming Initiative](http://roaming-initiative.com/mediagoblin/u/rafapoverello/m/sin-parar/).
-
 </details>
diff --git a/libretube-theme/static/css/styles.css b/libretube-theme/static/css/styles.css
index 72fd026..3beef8a 100644
--- a/libretube-theme/static/css/styles.css
+++ b/libretube-theme/static/css/styles.css
@@ -53,10 +53,6 @@ a.link-author:hover {
   fill: #555;
 }
 
-article span {
-  color: #e00918;
-}
-
 ul {
   padding: 0;
 }
@@ -69,7 +65,7 @@ hr {
   margin: 30px 0;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h2, h3, h4, h5, h6 {
   margin: 0;
   padding: 0;
   white-space: nowrap;
@@ -77,10 +73,17 @@ h1, h2, h3, h4, h5, h6 {
   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 {
diff --git a/libretube-theme/templates/article.html b/libretube-theme/templates/article.html
index 48d0f20..51fb2cc 100644
--- a/libretube-theme/templates/article.html
+++ b/libretube-theme/templates/article.html
@@ -60,7 +60,7 @@
     <div class="row mt-3 mt-10">
         <div class="col-md-12">
             <div class="row mr-3">
-                <div class="col-md-8">
+                <article class="col-md-8">
 
                     <!-- dinamic article content  -->
                     <div class="ml-3">
@@ -118,7 +118,7 @@
                     <!-- /Author -->
 
                     <!-- Comments -->
-                    <div id="hashover" class="comments-container mt-4">
+                    <div id="hashover" class="comments-container mt-4 ml-3">
                         <script src="{{ SITEURL }}/hashover-next/comments.php"></script>
                         <noscript>
                             <p>{% trans trimmed abre_enlace='<a href="mailto:heckyel@hyperbola.info?subject=Comentario_«%(titulo_art)s»">'|format(titulo_art=article.title|replace(' ', '%20')), cierra_enlace='</a>' %}
@@ -130,7 +130,7 @@
                     </div>
                     <!--End Comments -->
 
-                </div>
+                </article>
 
                 {% if SHOW_RECENT_POSTS %}
 
diff --git a/libretube-theme/templates/base.html b/libretube-theme/templates/base.html
index ee5291e..c91fb39 100644
--- a/libretube-theme/templates/base.html
+++ b/libretube-theme/templates/base.html
@@ -8,12 +8,12 @@
             <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
 
             {% block extra_head %}
-                {% set SITE_DESCRIPTION = _('Videoteca de software libre brindando avance tecnológico') %}
-                <meta name="description" content="{{ SITE_DESCRIPTION }}">
-                <meta property="og:title" content="{{ SITENAME }}">
-                <meta property="og:type" content="website">
-                <meta property="og:url" content="{{ SITEURL }}">
-                <meta property="og:description" content="{{ SITE_DESCRIPTION }}">
+            {% set SITE_DESCRIPTION = _('Videoteca de software libre brindando avance tecnológico') %}
+            <meta name="description" content="{{ SITE_DESCRIPTION }}">
+            <meta property="og:title" content="{{ SITENAME }}">
+            <meta property="og:type" content="website">
+            <meta property="og:url" content="{{ SITEURL }}">
+            <meta property="og:description" content="{{ SITE_DESCRIPTION }}">
             {% endblock %}
 
             <!-- Bootstrap 4.3.1 -->
@@ -21,7 +21,7 @@
                   integrity="sha512-tDXPcamuZsWWd6OsKFyH6nAqh/MjZ/5Yk88T5o+aMfygqNFPan1pLyPFAndRzmOWHKT+jSDzWpJv8krj6x1LMA==">
             <!-- Main Styling -->
             <link href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/styles.css" rel="stylesheet"
-                  integrity="sha512-AMx9aFBum33Nv9QNI+pTFV8UFZiVuJ832380rAVOoG4zha0yUxWW8G6TEGwAQuIy5ADVVhuNin2ixPKQoDCrOg==">
+                  integrity="sha512-mKduf+g5XnY9yrr7FIa4RX+iprre7ZPora9ROTVIvPje3NCCitToxWlo0rmh+LhUlKTvtRWtFm70zBfqdNS/ow==">
 
             <!-- favicon -->
             <link rel="icon" type="image/png" sizes="192x192" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-192x192.png">