fix semantic HTML5

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

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

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">

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>
 

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>
 

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>
 

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>

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>
 

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>

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>

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>
 

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>

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>

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>
 

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">

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>
+<summary>Mostrar más</summary>
-
+Más información sobre las etiquetas `h` en [w3schools][titles]{:target="_blank" rel="noopener noreferrer"}.
-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

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.

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`.

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

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">
+# Sin parar
-<summary>Sin parar</summary>
 
+<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>

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 {

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 %}
 

libretube-theme/templates/base.html

@@ -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">