diff options
| author | Jesús <heckyel@hyperbola.info> | 2020-06-23 19:56:53 -0500 |
|---|---|---|
| committer | Jesús <heckyel@hyperbola.info> | 2020-06-23 19:56:53 -0500 |
| commit | 690db4417ba5c5264584f1c08539f77a8e37bce6 (patch) | |
| tree | 55b519cb4e719d5e4f23cd51d3834b16cbecfb96 | |
| parent | e1e1c1f911fe2a123671cdb2ca2877c9da2f4473 (diff) | |
| download | libretube-theme-690db4417ba5c5264584f1c08539f77a8e37bce6.tar.lz libretube-theme-690db4417ba5c5264584f1c08539f77a8e37bce6.tar.xz libretube-theme-690db4417ba5c5264584f1c08539f77a8e37bce6.zip | |
Fix layout
| -rw-r--r-- | post.html | 523 |
1 files changed, 300 insertions, 223 deletions
@@ -95,256 +95,333 @@ </header> <!-- End Header --> </div> <!-- End Row --> - <!-- Main --> - <main class="row mt-6 mt-10"> + <div class="row mt-5 mt-8"> <div class="col-md-12"> - <div class="row mr-3"> - <article class="col-md-8"> - - <video controls> - <source src="https://archive.org/download/coursehtml5/0010-Etiquetas-p-span.webm" type="video/webm"> - </video> - <h2 class="title-video">Curso básico de HTML5 - Etiqueta p </h2> - - - <!-- Comments --> - <div class="comments-info-title"> - <h3>Comentarios </h3> - </div> - <div class="comments-container"> - <ul id="comments-list" class="comments-list comments-main"> - <!-- first comment --> - <li class="w-100"> - <div class="row comment-main-level"> - <!-- Avatar --> - <div class="comment-avatar"> - <img alt="user1" src="./dist/images/profile.png"/> - </div> - <!-- comment by user --> - <div class="comment-box"> - <div class="comment-head"> - <h6 class="comment-name by-author"> - <a href="https://heckyel.ga" rel="noopener noreferrer" target="_blank">Jesús E.</a> - </h6> - <span>hace <time datetime="PT2H30M">2h 30m</time></span> - <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#heart"/></svg></i> - <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#reply"/></svg></i> - </div> - <div class="comment-content"> - Hola soy un comentario, estoy aquí para hacer testing de los comentarios + <!-- Main --> + <main class="row mt-3 mt-10"> + <div class="col-md-12"> + <div class="row mr-3"> + <div class="col-md-8"> + <!-- dinamic article content --> + <div class="ml-3 mb-3"> + <figure> + <video id="player-ply" playsinline="" controls=""> + <source src="https://archive.org/download/libreweb/uso-de-cuenta-xmpp.webm" type="video/webm"> + </video> + <figcaption> + <h1>Usar cuenta Jabber/XMPP</h1> + </figcaption> + </figure> + + <p>Usar una cuenta de Jabber/XMPP es muy fácil.</p> + <p>Instalar <code>gajim</code> en Hyperbola GNU/Linux-libre:</p> + <div class="highlight"><pre><span></span>$ sudo pacman -S gajim python2-axolotl</pre></div> + <details> + <summary>Mostrar Más</summary> + <h6>¿Qué es Jabber/XMPP?</h6> + <p class="mt-2">Extensible Messaging and Presence Protocol, más conocido como XMPP + (Protocolo extensible de mensajería y comunicación de presencia) + (anteriormente llamado Jabber), es un protocolo abierto y extensible + basado en XML, originalmente ideado para mensajería instantánea.</p> + <p class="mt-2">Con el protocolo XMPP queda establecida una plataforma para el + intercambio de datos XML que puede ser usada en aplicaciones de + mensajería instantánea. Las características en cuanto a adaptabilidad + y sencillez del XML son heredadas de este modo por el protocolo XMPP.</p> + <p class="mt-2">A diferencia de los protocolos privativos de intercambio de mensajes + como ICQ, Y! y Windows Live Messenger, se encuentra documentado y se + insta a utilizarlo en cualquier proyecto. Existen servidores y + clientes libres que pueden ser usados sin coste alguno.</p> + <p class="mt-2">Tras varios años de su existencia, ha sido adoptado por empresas como + Facebook, WhatsApp Messenger y Nimbuzz, entre otras, para su servicio + de chat.</p></details> + </div> + <!-- End dinamic article content --> + + <!-- License --> + <div class="d-flex align-items-center ml-3"> + <h6 class="mr-3 font-weight-bold">Licencia</h6> + <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noopener noreferrer" target="_blank"> + <abbr title="Attribution-ShareAlike 4.0 International">CC BY-SA 4.0</abbr></a> + </div> + <!-- /License --> + + <!-- Author --> + <div class="ml-3"> + <hr class="hr-author"> + + <p class="mb-0"> + <span class="soumaicon text-info"> + <svg> + <use href="./dist/images/svg/master.svg#user"></use> + </svg> + </span> + <a class="link-author" href="#" title="Jesús E.">Jesús E.</a> + <span class="style-scope"> + <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"> + <g> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10 S17.52,2,12,2z M9.92,17.93l-4.95-4.95l2.05-2.05l2.9,2.9l7.35-7.35l2.05,2.05L9.92,17.93z" class="style-scope yt-icon"></path> + </g> + </svg> + </span> + </p> + + <!-- time publish --> + <time class="entry-date published" datetime="2020-05-20T15:23:44+02:00"> + <small> + Publicado el + mié 20 + <a class="text-info" href="#" title="Vídeos de mayo de 2020"> + mayo + </a> + de + <a class="text-secondary" href="#" title="Vídeos de 2020">2020 + </a> + </small> + </time> + <!-- /time publish --> + + <hr class="hr-author"> + </div> + <!-- /Author --> + + <!-- Comments --> + <div class="comments-info-title"> + <h4>Comentarios </h4> + </div> + <div class="comments-container"> + <ul id="comments-list" class="comments-list comments-main"> + <!-- first comment --> + <li class="w-100"> + <div class="row comment-main-level"> + <!-- Avatar --> + <div class="comment-avatar"> + <img alt="user1" src="./dist/images/profile.png"/> + </div> + <!-- comment by user --> + <div class="comment-box"> + <div class="comment-head"> + <h6 class="comment-name by-author"> + <a href="https://heckyel.ga" rel="noopener noreferrer" target="_blank">Jesús E.</a> + </h6> + <span>hace <time datetime="PT2H30M">2h 30m</time></span> + <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#heart"/></svg></i> + <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#reply"/></svg></i> + </div> + <div class="comment-content"> + Hola soy un comentario, estoy aquí para hacer testing de los comentarios + </div> + </div> </div> - </div> - </div> - <!-- Respond comments --> - <ul class="comments-list reply-list"> - <!-- first respond comment --> - <li class="row"> - <!-- Avatar --> - <div class="comment-avatar"> - <img alt="user1" src="./dist/images/shoes.png"/> - </div> - <!-- comment by user --> - <div class="comment-box"> - <div class="comment-head"> - <h6 class="comment-name"> - <a href="https://heckyel.ga" rel="noopener noreferrer" target="_blank">Anonymous</a> - </h6> - <span>hace <time datetime="PT3H30M">3h 30m</time></span> - <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#heart"/></svg></i> - <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#reply"/></svg></i> + <!-- Respond comments --> + <ul class="comments-list reply-list"> + <!-- first respond comment --> + <li class="row"> + <!-- Avatar --> + <div class="comment-avatar"> + <img alt="user1" src="./dist/images/shoes.png"/> + </div> + <!-- comment by user --> + <div class="comment-box"> + <div class="comment-head"> + <h6 class="comment-name"> + <a href="https://heckyel.ga" rel="noopener noreferrer" target="_blank">Anonymous</a> + </h6> + <span>hace <time datetime="PT3H30M">3h 30m</time></span> + <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#heart"/></svg></i> + <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#reply"/></svg></i> + </div> + <div class="comment-content"> + Hola soy una respuesta a un comentario. + </div> + </div> + </li><!-- End first respond comment --> + + </ul> + <!-- End Respond comments --> + </li><!-- End first comment --> + + <!-- second comment --> + <li class="w-100"> + <div class="row comment-main-level"> + <!-- Avatar --> + <div class="comment-avatar"> + <img alt="user1" src="./dist/images/shakira.png"/> </div> - <div class="comment-content"> - Hola soy una respuesta a un comentario. + <!-- comment by user --> + <div class="comment-box"> + <div class="comment-head"> + <h6 class="comment-name"> + <a href="https://heckyel.ga" rel="noopener noreferrer" target="_blank">Anonymous</a> + </h6> + <span>hace <time datetime="PT3H30M">3h 30m</time></span> + <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#heart"/></svg></i> + <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#reply"/></svg></i> + </div> + <div class="comment-content"> + Hola soy un comentario, estoy aquí para hacer testing de los comentarios + </div> </div> </div> - </li><!-- End first respond comment --> - + </li><!-- End second comment --> </ul> - <!-- End Respond comments --> - - </li><!-- End first comment --> - - <!-- second comment --> - <li class="w-100"> - <div class="row comment-main-level"> - <!-- Avatar --> - <div class="comment-avatar"> - <img alt="user1" src="./dist/images/shakira.png"/> - </div> - <!-- comment by user --> - <div class="comment-box"> - <div class="comment-head"> - <h6 class="comment-name"> - <a href="https://heckyel.ga" rel="noopener noreferrer" target="_blank">Anonymous</a> - </h6> - <span>hace <time datetime="PT3H30M">3h 30m</time></span> - <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#heart"/></svg></i> - <i class="soumaicon"><svg><use href="./dist/images/svg/master.svg#reply"/></svg></i> - </div> - <div class="comment-content"> - Hola soy un comentario, estoy aquí para hacer testing de los comentarios - </div> - </div> - </div> - </li><!-- End second comment --> - </ul> - </div> - <!--End Comments --> - </article> - - <div class="col-md-4"> - <!-- article video 1 --> - <article class="row justify-content-center align-items-center mt-1"> - <!-- video next --> - <div class="col-md-6"> - <a href="#"> - <div class="area"> - <div class="mask"> - - <div class="vertical-align"> - <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> - <p>Play Now</p> - </div> <!-- End Vertical Align --> - - </div> <!-- End Mask / Hover --> - - <img src="./dist/images/video.png" alt="video" class="img-fluid"> - <span class="duration">44:03</span> - - </div> <!-- End Area --> - </a> + </div> + <!--End Comments --> </div> - <!-- video next --> + <div class="col-md-4"> + <!-- article video 1 --> + <article class="row justify-content-center align-items-center mt-1"> + <!-- video next --> + <div class="col-md-6"> + <a href="#"> + <div class="area"> + <div class="mask"> + + <div class="vertical-align"> + <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> + <p>Play Now</p> + </div> <!-- End Vertical Align --> + + </div> <!-- End Mask / Hover --> + + <img src="./dist/images/video.png" alt="video" class="img-fluid"> + <span class="duration">44:03</span> + + </div> <!-- End Area --> + </a> + </div> + <!-- video next --> - <!-- description --> - <div class="col-md-6"> - <h6>Daft Punk - Get Lucky</h6> - <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> - </div> - </article> - <!-- article video 2 --> - <article class="row justify-content-center align-items-center mt-1"> - <!-- video next --> - <div class="col-md-6"> - <a href="#"> - <div class="area"> - <div class="mask"> - - <div class="vertical-align"> - <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> - <p>Play Now</p> - </div> <!-- End Vertical Align --> - - </div> <!-- End Mask / Hover --> - - <img src="./dist/images/video2.png" alt="video" class="img-fluid"> - <span class="duration">44:03</span> - - </div> <!-- End Area --> - </a> - </div> - <!-- video next --> + <!-- description --> + <div class="col-md-6"> + <h6>Daft Punk - Get Lucky</h6> + <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> + </div> + </article> + <!-- article video 2 --> + <article class="row justify-content-center align-items-center mt-1"> + <!-- video next --> + <div class="col-md-6"> + <a href="#"> + <div class="area"> + <div class="mask"> + + <div class="vertical-align"> + <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> + <p>Play Now</p> + </div> <!-- End Vertical Align --> + + </div> <!-- End Mask / Hover --> + + <img src="./dist/images/video2.png" alt="video" class="img-fluid"> + <span class="duration">44:03</span> + + </div> <!-- End Area --> + </a> + </div> + <!-- video next --> - <!-- description --> - <div class="col-md-6"> - <h6>Daft Punk - Get Lucky</h6> - <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> - </div> - </article> - - <!-- article video 3 --> - <article class="row justify-content-center align-items-center mt-1"> - <!-- video next --> - <div class="col-md-6"> - <a href="#"> - <div class="area"> - <div class="mask"> - <div class="vertical-align"> - <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> - <p>Play Now</p> - </div> <!-- End Vertical Align --> - </div> <!-- End Mask / Hover --> - <img src="./dist/images/video3.png" alt="video" class="img-fluid"> - <span class="duration">44:03</span> - </div> <!-- End Area --> - </a> - </div> - <!-- video next --> + <!-- description --> + <div class="col-md-6"> + <h6>Daft Punk - Get Lucky</h6> + <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> + </div> + </article> + + <!-- article video 3 --> + <article class="row justify-content-center align-items-center mt-1"> + <!-- video next --> + <div class="col-md-6"> + <a href="#"> + <div class="area"> + <div class="mask"> + <div class="vertical-align"> + <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> + <p>Play Now</p> + </div> <!-- End Vertical Align --> + </div> <!-- End Mask / Hover --> + <img src="./dist/images/video3.png" alt="video" class="img-fluid"> + <span class="duration">44:03</span> + </div> <!-- End Area --> + </a> + </div> + <!-- video next --> - <!-- description --> - <div class="col-md-6"> - <h6>Daft Punk - Get Lucky</h6> - <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> - </div> - </article> + <!-- description --> + <div class="col-md-6"> + <h6>Daft Punk - Get Lucky</h6> + <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> + </div> + </article> - <!-- article video 4 --> - <article class="row justify-content-center align-items-center mt-1"> - <!-- video next --> - <div class="col-md-6"> - <a href="#"> - <div class="area"> - <div class="mask"> + <!-- article video 4 --> + <article class="row justify-content-center align-items-center mt-1"> + <!-- video next --> + <div class="col-md-6"> + <a href="#"> + <div class="area"> + <div class="mask"> - <div class="vertical-align"> - <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> - <p>Play Now</p> - </div> <!-- End Vertical Align --> + <div class="vertical-align"> + <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> + <p>Play Now</p> + </div> <!-- End Vertical Align --> - </div> <!-- End Mask / Hover --> + </div> <!-- End Mask / Hover --> - <img src="./dist/images/video4.png" alt="video" class="img-fluid"> - <span class="duration">44:03</span> + <img src="./dist/images/video4.png" alt="video" class="img-fluid"> + <span class="duration">44:03</span> - </div> <!-- End Area --> - </a> - </div> - <!-- video next --> + </div> <!-- End Area --> + </a> + </div> + <!-- video next --> - <!-- description --> - <div class="col-md-6"> - <h6>Daft Punk - Get Lucky</h6> - <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> - </div> - </article> + <!-- description --> + <div class="col-md-6"> + <h6>Daft Punk - Get Lucky</h6> + <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> + </div> + </article> - <!-- article video 5 --> - <article class="row justify-content-center align-items-center mt-1"> - <!-- video next --> - <div class="col-md-6"> - <a href="#"> - <div class="area"> - <div class="mask"> + <!-- article video 5 --> + <article class="row justify-content-center align-items-center mt-1"> + <!-- video next --> + <div class="col-md-6"> + <a href="#"> + <div class="area"> + <div class="mask"> - <div class="vertical-align"> - <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> - <p>Play Now</p> - </div> <!-- End Vertical Align --> + <div class="vertical-align"> + <i class="soumaicon play"><svg><use href="./dist/images/svg/master.svg#play"/></svg></i> + <p>Play Now</p> + </div> <!-- End Vertical Align --> - </div> <!-- End Mask / Hover --> + </div> <!-- End Mask / Hover --> - <img src="./dist/images/video5.png" alt="video" class="img-fluid"> - <span class="duration">44:03</span> + <img src="./dist/images/video5.png" alt="video" class="img-fluid"> + <span class="duration">44:03</span> - </div> <!-- End Area --> - </a> - </div> - <!-- video next --> + </div> <!-- End Area --> + </a> + </div> + <!-- video next --> + + <!-- description --> + <div class="col-md-6"> + <h6>Daft Punk - Get Lucky</h6> + <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> + </div> + </article> - <!-- description --> - <div class="col-md-6"> - <h6>Daft Punk - Get Lucky</h6> - <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> </div> - </article> + </div> </div> - - </div> + </main> + <!-- End Main --> </div> - </main> - <!-- End Main --> + </div> <hr> |