diff options
author | InigoGutierrez <inigogf.95@gmail.com> | 2022-08-22 02:48:10 +0200 |
---|---|---|
committer | InigoGutierrez <inigogf.95@gmail.com> | 2022-08-22 02:48:10 +0200 |
commit | 06f03f0241f143a67e31850350b7b89a31643feb (patch) | |
tree | 489d4c8c25b0d4d88c1746fe096493c072c4b509 | |
parent | 4acfe0601af342ad8aabba16fdba85ad58c319b5 (diff) | |
download | taamas.xyz-06f03f0241f143a67e31850350b7b89a31643feb.tar.gz taamas.xyz-06f03f0241f143a67e31850350b7b89a31643feb.zip |
Responsiveness!
-rw-r--r-- | css/style.css | 128 | ||||
-rw-r--r-- | index.html | 55 |
2 files changed, 119 insertions, 64 deletions
diff --git a/css/style.css b/css/style.css index e449697..7064fbf 100644 --- a/css/style.css +++ b/css/style.css @@ -1,15 +1,15 @@ body { background-color: #17212B; - margin: 80px auto; + margin: 10% auto; padding: 0 10%; max-width: 1100px; font-family: "Mononoki", "Open Sans", "Sans", "Arial"; text-align: left; line-height: 1.5em; - font-size: 1.1em; color: #A6B0B9; + font-size: 100%; } a:link { @@ -20,34 +20,32 @@ a:visited { color: #D7B3FF; } -h1 { - padding: 1em; +:focus { + outline: 2px solid white; +} +h1 { + padding: 1em 0; font-variant: small-caps; text-align: center; - line-height: 0.2em; - font-size: 2em; -} - -h1, .navbar { - color: #CBD7E1; - background-color: #2B5278; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -h1, .navbar, .navbar li { - border-radius: 5px; + line-height: 1em; + font-size: 4em; } .navbar { list-style-type: none; margin: 0; padding: 0; - overflow: hidden; + font-size: 1.1em; + display: flex; + flex-flow: row; + flex-wrap: wrap; + justify-content: space-around; } .navbar li { - float: left; + flex-basis: 10%; + flex-grow: 1; } .navbar .liright { @@ -57,54 +55,91 @@ h1, .navbar, .navbar li { .navbar li a { display: block; color: #CBD7E1; - padding: 10px 20px; + padding: 20px 20px; text-align: center; text-decoration: none; } -.navbar li:hover { +.navbar li:hover a { background-color: #C8E8FF; + color: #17212B; } -.navbar li:hover a { - color: #17212B; +h1, .navbar { + color: #CBD7E1; + background-color: #2B5278; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +h1, .navbar, .navbar a { + border-radius: 5px; +} + +section { + overflow: auto; + margin: 60px 0 20px; +} + +h2 { + font-size: 2.4em; + text-align: center; + margin: 40px 0; + line-height: 1.2em; } p { + font-size: 1.1em; text-indent: 2em; } -img { - margin: 15px 50px; - 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; +ul { + font-size: 1.1em; +} + +/* Aumentar tamaño de fuente sólo para el primer nivel de lista. */ +ul ul { + font-size: 1em; } .column { display: grid; } +.odd, .even { + margin: 0 10% 5%; + max-width: 50%; + height: auto; +} + .odd { float: left; + margin-left: 0; } .even { float: right; + margin-right: 0; } -.final { - display: block; - margin: auto; - text-align: center; +.even img, .odd img { + max-width: 100%; + height: auto; + margin: 0; } -section { - overflow: auto; - margin: 60px 0 20px; +img { + 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; } -:focus { - outline: 2px solid white; +.final { + margin: 50px 0; + text-align: center; +} + +.final p { + text-indent: 0; } .oldButtons { @@ -128,3 +163,26 @@ section { box-shadow: none; background: white; } + +@media only screen and (max-width: 600px) { + + .odd, .even { + margin: 0 10% 20px; + max-width: 100%; + height: auto; + float: center; + } + + ul { + padding-left: 5%; + } + + body { + text-align: center; + } + + p { + text-indent: 0; + } + +} @@ -5,6 +5,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> @@ -14,22 +15,22 @@ </header> <ul class="navbar"> - <li><a href="servicios.html">🔌<br>Servicios</a></li> <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 class="liright"><a href="en.html">English<br>(old version)</a></li> + <li><a href="servicios.html">🔌<br>Servicios</a></li> + <li><a href="en.html">English<br>(old version)</a></li> </ul> <section> - <a class="odd" href="img/enRuta_full.jpg"> - <img src="img/enRuta.webp" alt="Contemplando las rocas en una ruta de montaña."> - </a> - <h2>¡Hola!</h2> + <a class="odd" href="img/enRuta_full.jpg"> + <img src="img/enRuta.webp" alt="Contemplando las rocas en una ruta de montaña."> + </a> + <p>Soy Íñigo, una persona con muchas preguntas en busca de muchas respuestas. Aunque en Internet uso el apodo de Taamas.</p> @@ -41,21 +42,21 @@ <section> - <a class="even" href="img/seimeira_full.webp"> - <img src="img/seimeira.jpg" class="even" alt="Seimeira."> - </a> - - <h2>Sobre mí</h2> + <a class="even" href="img/seimeira_full.webp"> + <img src="img/seimeira.jpg" alt="Seimeira."> + </a> + <p>Ahora mismo vivo en <a href="https://es.wikipedia.org/wiki/Asturias">Asturias</a>. Nací en <a href="https://es.wikipedia.org/wiki/Langreo">Langreo</a> y crecí en esta cuenca minera y en un pueblo de León <i>entre el Páramo y el Esla</i>.</p> <p>Mientras encuentro respuestas me gusta trastear con mi ordenador, practicar <a href="escalada.html">escalada</a> y explorar el - <a href="https://senseis.xmp.net/?Go">Go</a>. Lo encuentro un juego muy profundo y gratificante que enlaza - con principios de simplicidad y eficiencia. De vez en cuando incluso cojo algún libro.</p> + <a href="https://senseis.xmp.net/?Go">Go</a>. Lo encuentro un juego muy profundo y + gratificante que enlaza con principios de simplicidad y eficiencia. De vez en cuando incluso + cojo algún libro.</p> <p>Filosóficamente estoy interesado en el estoicismo y el wabi-sabi como inspiraciones para escapar del nihilismo y terror existencial que permean nuestra sociedad moderna y mi @@ -66,40 +67,37 @@ <section> + <h2>Mi sistema</h2> + <div class="column odd"> <a href="img/taamasArch_full.png"><img src="img/taamasArch.jpg" alt="Rice 1."></a> <a href="img/vaporwave_full.jpg"><img src="img/vaporwave.jpg" alt="Trabajando con JS."></a> </div> - <h2>Mi sistema</h2> - - <p> - Tiendo a la independencia y a las cosas hechas por uno mismo, así que Linux es mi sistema + <p>Tiendo a la independencia y a las cosas hechas por uno mismo, así que Linux es mi sistema operativo. En mi tiempo libre en el ordenador tiendo a trastear con programas y scripts para automatizar o simplificar mis tareas, o a dar vida a <a href="https://git.taamas.xyz/Taamas/scripts/src/branch/master/mapGen">ideas</a> <a href="https://git.taamas.xyz/Taamas/scripts/src/branch/master/cardGen">aleatorias</a>. Estas son dos capturas de pantalla de mi ordenador principal: la primera una vista poco práctica haciendo bonito; la otra una visión más común, unos cuantos buffers de Vim cubriendo - la pantalla. </p> + la pantalla.</p> - <p> - Usé Ubuntu por un corto periodo de tiempo dado que se supone que es una distribución para + <p>Usé Ubuntu por un corto periodo de tiempo dado que se supone que es una distribución para novatos. Al poco cambié a Arch, ya que notaba que Ubuntu tenía demasiados componentes que no me dejaban trastear, construir y aprender sobre el sistema cómodamente. He estado usándolo - durante los últimos dos años. - </p> + durante los últimos dos años.</p> </section> <section> - <a class="even" href="img/zoomTeclado_full.jpg"> - <img src="img/zoomTeclado.webp" alt="Zoom de parte de mi teclado."> - </a> - <h2>Mi trabajo y estudios</h2> + <a class="even" href="img/zoomTeclado_full.jpg"> + <img src="img/zoomTeclado.webp" alt="Zoom de parte de mi teclado."> + </a> + <p>Cuando terminé la educación obligatoria y bachillerato entré en la <a href="https://www.uniovi.es">Universidad de Oviedo</a> en la carrera de Biotecnología. Estuve allí unos años aprendiendo sobre el ADN y las proteínas y el mundo científico y esas @@ -113,8 +111,7 @@ <a href="https://gmeana.com/">Grupo Meana</a>, donde soy parte de un equipo que desarrolla una plataforma de gestión de recintos y venta de entradas.</p> - <p> - Pueden encontrarse ejemplos de mi trabajo en mi + <p>Pueden encontrarse ejemplos de mi trabajo en mi <a href="https://git.taamas.xyz/Taamas">instancia personal de Gitea</a>, tanto para la Universidad como por mi cuenta para aprender y divertirme. Allí encontrarás: </p> @@ -195,7 +192,7 @@ <a href="https://github.com/InigoGutierrez/viade_en1b">aplicación para manejo de rutas</a> basada en <a href="https://reactjs.org/">React</a> y - <a href="https://solidproject.org/">Solid</a> (el de Tim, no los principios). + <a href="https://solidproject.org/">Solid</a>. </li> </ul> |