Añadido viewport y eliminada estructura de lista de la barra de navegación.

author: InigoGutierrez <inigogf.95@gmail.com> 2022-08-22 19:52:41 +0200
committer: InigoGutierrez <inigogf.95@gmail.com> 2022-08-22 19:52:41 +0200
commit: 12020567638455e5922e9713bc082d74251b4ab6 (patch)
tree: 3af1c5c73ea34c3c3eefda9a596f27448f797740
parent: 9d2e46397c220bd452f4a8cd22dc5dc087e99c93 (diff)
download: taamas.xyz-12020567638455e5922e9713bc082d74251b4ab6.tar.gz
taamas.xyz-12020567638455e5922e9713bc082d74251b4ab6.zip
17 files changed, 106 insertions, 77 deletions
diff --git a/artículos/index.html b/artículos/index.html
index ce2443f..9356487 100644
--- a/artículos/index.html
+++ b/artículos/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Taamas - Artículos</title>
     <link rel="stylesheet" type="text/css" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
 
@@ -11,9 +12,9 @@
       <h1>🗞️ Artículos 🗞️</h1>
     </header>
 
-    <ul class="navbar">
-  <li><a href="../index.html">Portada</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="../index.html">Portada</a>
+    </div>
 
     <section>
       <p>
diff --git a/artículos/kyria.html b/artículos/kyria.html
index 58a1438..966a47e 100644
--- a/artículos/kyria.html
+++ b/artículos/kyria.html
@@ -10,10 +10,10 @@
 </head>
 <body>
 <h1 id="construyendo-un-teclado">Construyendo un teclado</h1>
-<ul class="navbar">
-  <li><a href="index.html">Índice de artículos</a></li>
-  <li><a href="../index.html">Portada</a></li>
-</ul>
+<div class="navbar">
+  <a href="index.html">Índice de artículos</a>
+  <a href="../index.html">Portada</a>
+</div>
 <p>En Febrero de 2021 decidí construir un teclado mecánico. Comparto aquí mis motivaciones, el camino que seguí y unas cuantas imágenes del proceso de construcción.</p>
 <p>Me parece importante destacar que escribo desde el punto de vista de alguien que aprendió mecanografía antes de cumplir 11 años. Esto significa que escribo reposando los dedos en posiciones concretas (sobre la fila central de letras, con los índices sobre las teclas F y J en un teclado QWERTY) y apenas muevo las manos a no ser que necesite usar alguna tecla lejana como las flechas o el Escape. Algunas de mis necesidades y críticas a los teclados convencionales seguramente no sean aplicables a quien teclee con un movimiento más libre de las manos.</p>
 <h2 id="por-qué-construir-un-teclado-propio">¿Por qué construir un teclado propio?</h2>
diff --git a/artículos/whatsapp.html b/artículos/whatsapp.html
index c41305b..0a98747 100644
--- a/artículos/whatsapp.html
+++ b/artículos/whatsapp.html
@@ -4,17 +4,19 @@
 Abandonando WhatsApp
 </title>
 <link rel="stylesheet" type="text/css" href="../css/style.css">
+<link rel="stylesheet" type="text/css" href="./styleArticles.css">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 <h1 id="abandonando-whatsapp">Abandonando WhatsApp</h1>
-<ul class="navbar">
-  <li><a href="index.html">Índice de artículos</a></li>
-  <li><a href="../index.html">Portada</a></li>
-</ul>
+<div class="navbar">
+  <a href="index.html">Índice de artículos</a>
+  <a href="../index.html">Portada</a>
+</div>
 <h2 id="por-qué-dejar-de-usar-whatsapp">¿Por qué dejar de usar WhatsApp?</h2>
 <p>Probablemente uses WhatsApp. WhatsApp es una aplicación de Facebook, una empresa estadounidense cuyo modelo económico consiste en la recopilación de datos de los usuarios de sus servicios y la venta de estos a empresas a fin de que puedan anunciarse a usuarios más específicos. WhatsApp ha actualizado su política de gestión de datos y obliga a aceptar las nuevas condiciones a partir del 8 de Febrero de 2021. Estas nuevas condiciones dan acceso a Facebook a información como el número de teléfono, con quién tenemos conversaciones, la IP, la calidad de la conexión, la batería del dispositivo y otros datos identificadores a fin de potenciar su modelo económico.</p>
-<p><img alt="Comparación de datos enlazados a un usuario entre Signal, iMessage, WhatsApp y Facebook
-Messenger. WhatsApp y Facebook messenger muestran gran cantidad de tipos de datos." src="../img/waPrivacy.jpg" width="800px" /></p>
+<img alt="Comparación de datos enlazados a un usuario entre Signal, iMessage, WhatsApp y Facebook
+          Messenger. WhatsApp y Facebook messenger muestran gran cantidad de tipos de datos." src="../img/waPrivacy.jpg" width="800px" />
 <p>WhatsApp es la aplicación de mensajería más utilizada del mundo. Es donde están todos nuestros contactos, lo que hace difícil dejar de usarlo sin sentir que quedaremos incomunicados. Aún así, antes que rendirnos y permitir que Facebook tenga el control sobre las comunicaciones personales de todo el planeta, prefiero hacer lo que esté en mi mano a fin de que todos podamos tener conversaciones seguras y privadas. Quiero que esto sea algo de lo que se hable y que entre todos tomemos conciencia y actuemos. La infraestructura existe. Hay alternativas.</p>
 <h2 id="alternativas">Alternativas</h2>
 <p>Dejo aquí algunos servicios alternativos a WhatsApp a través de los cuales se puede contactar conmigo junto con mi opinión sobre cada uno. El orden indica simplemente mi preferencia personal.</p>
diff --git a/css/style.css b/css/style.css
index 5ca12a8..5be730e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -24,6 +24,11 @@ a:visited {
   outline: 2px solid white;
 }
 
+/* No outline cuando es por clic. */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
 h1 {
   padding: 1em 0;
 	font-variant: small-caps;
@@ -43,16 +48,9 @@ h1 {
   justify-content: space-around;
 }
 
-.navbar li {
+.navbar a {
   flex-basis: 10%;
   flex-grow: 1;
-}
-
-.navbar .liright {
-  float: right;
-}
-
-.navbar li a {
   display: block;
   color: #CBD7E1;
   padding: 20px 20px;
@@ -60,7 +58,7 @@ h1 {
   text-decoration: none;
 }
 
-.navbar li:hover a {
+.navbar a:hover {
   background-color: #C8E8FF;
   color: #17212B;
 }
@@ -105,6 +103,12 @@ ul ul {
   display: grid;
 }
 
+.odd, .even {
+  margin: 0 5% 5%;
+  max-width: 50%;
+  height: auto;
+}
+
 .odd {
   float: left;
   margin-left: 0;
@@ -115,20 +119,13 @@ ul ul {
   margin-right: 0;
 }
 
-.odd, .even {
-  margin: 0 10% 5%;
-  max-width: 50%;
-  height: auto;
-}
-
 .odd img, .even img {
-  display: block;
   max-width: 100%;
   height: auto;
   margin: 0;
 }
 
-img {
+img, video {
   max-width: 100%;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 15px;
@@ -167,11 +164,21 @@ img {
 
 @media only screen and (max-width: 600px) {
 
+  h1 {
+    font-size: 2em;
+  }
+
+  .navbar {
+    font-size: 1em;
+  }
+
   .odd, .even {
+    float: none;
     margin: 0 10% 20px;
     max-width: 100%;
     height: auto;
-    float: none;
+    display: block;
+    text-align: center;
   }
 
   ul {
diff --git a/en.html b/en.html
index 125c0b1..88fcf34 100644
--- a/en.html
+++ b/en.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Taamas</title>
     <link rel="stylesheet" type="text/css" href="css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
 
@@ -11,9 +12,9 @@
       <h1>Taamas</h1>
     </header>
 
-    <ul class="navbar">
-      <li class="liright"><a href="index.html">Castellano</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="index.html">Castellano</a>
+    </div>
 
     <section>
       <img src="img/walking.jpg" class="odd" alt="Walking into the forest">
diff --git a/escalada.html b/escalada.html
index fc6aa6f..3dffd2f 100644
--- a/escalada.html
+++ b/escalada.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <title>Taamas - Escalada</title>
     <link rel="stylesheet" type="text/css" href="css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
 
   <body>
@@ -13,9 +14,9 @@
       <h1>🧗 Escalada 🧗</h1>
     </header>
 
-    <ul class="navbar">
-      <li><a href="index.html">Portada</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="index.html">Portada</a>
+    </div>
 
     <section>
       <p>Aprovecho este rinconcito de la red para dejar algunos vídeos de mis visitas al
diff --git a/escritos/cthulhu/cthulhu.html b/escritos/cthulhu/cthulhu.html
index e2afa59..534a8a8 100644
--- a/escritos/cthulhu/cthulhu.html
+++ b/escritos/cthulhu/cthulhu.html
@@ -1,18 +1,21 @@
+<!DOCTYPE html>
+<html lang="es">
 <head>
   <meta charset="UTF-8">
   <title>
     Taamas - Los Harapos del Rey
   </title>
   <link rel="stylesheet" type="text/css" href="../../css/style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
 <body>
 
   <h1 id="los-harapos-del-rey">Los Harapos del Rey</h1>
 
-  <ul class="navbar">
-    <li><a href="../index.html">A escritos</a></li>
-  </ul>
+  <div class="navbar">
+    <a href="../index.html">A escritos</a>
+  </div>
 
   <p>Apuntes de una campaña de La Llamada de Cthulhu.</p>
 
@@ -22,3 +25,4 @@
   </ul>
 
 </body>
+</html>
diff --git a/escritos/cthulhu/primeraSesión.html b/escritos/cthulhu/primeraSesión.html
index 177ec51..b4fd378 100644
--- a/escritos/cthulhu/primeraSesión.html
+++ b/escritos/cthulhu/primeraSesión.html
@@ -1,18 +1,21 @@
+<!DOCTYPE html>
+<html lang="es">
 <head>
   <meta charset="UTF-8">
   <title>
     Taamas - Los Harapos del Rey - Primera Sesión
   </title>
   <link rel="stylesheet" type="text/css" href="../../css/style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 
   <h1 id="los-harapos-del-rey">Los Harapos del Rey</h1>
 
-  <ul class="navbar">
-    <li><a href="cthulhu.html">Índice</a></li>
-    <li><a href="../index.html">A escritos</a></li>
-  </ul>
+  <div class="navbar">
+    <a href="cthulhu.html">Índice</a>
+    <a href="../index.html">A escritos</a>
+  </div>
 
 
   <h2 id="primera-sesión">Primera sesión</h2>
@@ -94,3 +97,4 @@
   </p>
 
 </body>
+</html>
diff --git a/escritos/cthulhu/segundaSesión.html b/escritos/cthulhu/segundaSesión.html
index f2bd2ed..f545342 100644
--- a/escritos/cthulhu/segundaSesión.html
+++ b/escritos/cthulhu/segundaSesión.html
@@ -1,3 +1,5 @@
+<!DOCTYPE html>
+<html lang="es">
 <head>
   <meta charset="UTF-8">
   <title>
@@ -10,10 +12,10 @@
 
   <h1 id="los-harapos-del-rey">Los Harapos del Rey</h1>
 
-  <ul class="navbar">
-    <li><a href="cthulhu.html">Índice</a></li>
-    <li><a href="../index.html">A escritos</a></li>
-  </ul>
+  <div class="navbar">
+    <a href="cthulhu.html">Índice</a>
+    <a href="../index.html">A escritos</a>
+  </div>
 
   <h2 id="segunda-sesión">Segunda sesión</h2>
 
@@ -76,3 +78,4 @@
   sospechosos.</p>
 
 </body>
+</html>
diff --git a/escritos/enTierrasLejanas/enTierrasLejanas.html b/escritos/enTierrasLejanas/enTierrasLejanas.html
index bade95f..fa62091 100644
--- a/escritos/enTierrasLejanas/enTierrasLejanas.html
+++ b/escritos/enTierrasLejanas/enTierrasLejanas.html
@@ -5,6 +5,7 @@
     <title>Taamas --- En Tierras Lejanas</title>
     <link rel="stylesheet" type="text/css" href="../../css/style.css">
     <link rel="stylesheet" type="text/css" href="enTierrasLejanas.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
 
@@ -12,9 +13,9 @@
       <h1>En Tierras Lejanas</h1>
     </header>
 
-    <ul class="navbar">
-      <li><a href="../index.html">Escritos</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="../index.html">Escritos</a>
+    </div>
 
     <section class="nota">
 
diff --git a/escritos/index.html b/escritos/index.html
index 95389f2..fd9e032 100644
--- a/escritos/index.html
+++ b/escritos/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Taamas - Escritos</title>
     <link rel="stylesheet" type="text/css" href="../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
 
@@ -11,9 +12,9 @@
       <h1>✍️ Escritos ✍️</h1>
     </header>
 
-    <ul class="navbar">
-      <li><a href="../index.html">Portada</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="../index.html">Portada</a>
+    </div>
 
     <section>
       <h2>Viejos escritos</h2>
diff --git a/escritos/wordpress/alegoriaDeLaFisica.html b/escritos/wordpress/alegoriaDeLaFisica.html
index 4f857cf..0a5bac3 100644
--- a/escritos/wordpress/alegoriaDeLaFisica.html
+++ b/escritos/wordpress/alegoriaDeLaFisica.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Taamas --- Alegoría de la Física</title>
     <link rel="stylesheet" type="text/css" href="../../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
 
@@ -11,9 +12,9 @@
       <h1>Alegoría de la Física</h1>
     </header>
 
-    <ul class="navbar">
-      <li><a href="../index.html">A escritos</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="../index.html">A escritos</a>
+    </div>
 
     <p>
     Una existencia sin forma, tamaño o posición oscila en el mar de líquidos, sustancias, choques e
diff --git a/escritos/wordpress/elSolDeSeda.html b/escritos/wordpress/elSolDeSeda.html
index 5cc8adf..1ca2d7e 100644
--- a/escritos/wordpress/elSolDeSeda.html
+++ b/escritos/wordpress/elSolDeSeda.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Taamas --- El sol de seda</title>
     <link rel="stylesheet" type="text/css" href="../../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
 
@@ -11,9 +12,9 @@
       <h1>El sol de seda</h1>
     </header>
 
-    <ul class="navbar">
-      <li><a href="../index.html">A escritos</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="../index.html">A escritos</a>
+    </div>
 
     <p>
     Nació en cuclillas, abrazando sus piernas, entre la hierba golpeada por el Sol. Se incorporó
diff --git a/escritos/wordpress/elVueloOcre.html b/escritos/wordpress/elVueloOcre.html
index e6315d1..cadf7c7 100644
--- a/escritos/wordpress/elVueloOcre.html
+++ b/escritos/wordpress/elVueloOcre.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Taamas --- El vuelo ocre</title>
     <link rel="stylesheet" type="text/css" href="../../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
 
@@ -11,9 +12,9 @@
       <h1>El vuelo ocre</h1>
     </header>
 
-    <ul class="navbar">
-      <li><a href="../index.html">A escritos</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="../index.html">A escritos</a>
+    </div>
 
     <p>
     Humo y brasas crepitantes, y un océano de absoluta nada. Las llamas saltaron de la madera a su
diff --git a/escritos/wordpress/taamas.html b/escritos/wordpress/taamas.html
index a6d9945..180f905 100644
--- a/escritos/wordpress/taamas.html
+++ b/escritos/wordpress/taamas.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Taamas --- Taamas</title>
     <link rel="stylesheet" type="text/css" href="../../css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
 
@@ -11,9 +12,9 @@
       <h1>Taamas</h1>
     </header>
 
-    <ul class="navbar">
-      <li><a href="../index.html">A escritos</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="../index.html">A escritos</a>
+    </div>
 
     <p>
     Las conversaciones de los marineros y el suave rugido del motor son lo único que tapa el
diff --git a/index.html b/index.html
index 231aad2..6e9e7bd 100644
--- a/index.html
+++ b/index.html
@@ -14,14 +14,14 @@
       <h1>Taamas</h1>
     </header>
 
-    <ul class="navbar">
-      <li><a href="artículos/index.html">🗞️<br>Artículos</a></li>
-      <li><a href="escritos/index.html">✍️<br>Escritos</a></li>
-      <li><a href="zettelkasten/index.html">📔<br>Zettelkasten</a></li>
-      <li><a href="escalada.html">🧗<br>Escalada</a></li>
-      <li><a href="servicios.html">🔌<br>Servicios</a></li>
-      <li><a href="en.html">English<br>(old version)</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="artículos/index.html">🗞️<br>Artículos</a>
+      <a href="escritos/index.html">✍️<br>Escritos</a>
+      <a href="zettelkasten/index.html">📔<br>Zettelkasten</a>
+      <a href="escalada.html">🧗<br>Escalada</a>
+      <a href="servicios.html">🔌<br>Servicios</a>
+      <a href="en.html">English<br>(old version)</a>
+    </div>
 
     <section>
 
diff --git a/servicios.html b/servicios.html
index 775ca3d..dcfa29e 100644
--- a/servicios.html
+++ b/servicios.html
@@ -13,9 +13,9 @@
       <h1>🔌 Servicios 🔌</h1>
     </header>
 
-    <ul class="navbar">
-      <li><a href="index.html">Portada</a></li>
-    </ul>
+    <div class="navbar">
+      <a href="index.html">Portada</a>
+    </div>
 
     <section>
       <p>Aquí enlazo algunos servicios desplegados en este servidor que invito a cualquiera a usar.</p>
author	InigoGutierrez <inigogf.95@gmail.com>	2022-08-22 19:52:41 +0200
committer	InigoGutierrez <inigogf.95@gmail.com>	2022-08-22 19:52:41 +0200
commit	12020567638455e5922e9713bc082d74251b4ab6 (patch)
tree	3af1c5c73ea34c3c3eefda9a596f27448f797740
parent	9d2e46397c220bd452f4a8cd22dc5dc087e99c93 (diff)
download	taamas.xyz-12020567638455e5922e9713bc082d74251b4ab6.tar.gz taamas.xyz-12020567638455e5922e9713bc082d74251b4ab6.zip