]> git.r.bdr.sh - rbdr/r.bdr.sh/commitdiff
git.r.bdr.sh / rbdr / r.bdr.sh / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side (parent: beaf291)
Simplify reading of page
authorBen Beltran <redacted>
Mon, 27 Jan 2020 22:00:08 +0000 (23:00 +0100)
committerBen Beltran <redacted>
Mon, 27 Jan 2020 22:00:08 +0000 (23:00 +0100)
jekyll/_layouts/default.html patch | blob | blame | history
jekyll/css/application.css patch | blob | blame | history
jekyll/index.html patch | blob | blame | history

diff --git a/jekyll/_layouts/default.html b/jekyll/_layouts/default.html
index 50fe27cde76ca8dc1e714ba7d279d2220537d8ab..d3826189951f6d3789beeb2ef0a91b55865eded3 100644 (file)
--- a/jekyll/_layouts/default.html
+++ b/jekyll/_layouts/default.html
@@ -29,15 +29,9 @@
   </head>
   <body>
     <header>
   </head>
   <body>
     <header>
-      <h1>
-        <a href="/">Unlimited 🍕  Pizza</a>
-      </h1>
+      <a href="/">Unlimited <span aria-hidden="true">🍕</span> Pizza</a>
     </header>
     </header>
-    <div class="main-container">
-      <section>
-        {{ content }}
-      </section>
-    </div>
-    <canvas id="breadsticks" class="background"></canvas>
+    {{ content }}
+    <canvas aria-hidden="true" id="breadsticks" class="background"></canvas>
   </body>
 </html>
   </body>
 </html>
diff --git a/jekyll/css/application.css b/jekyll/css/application.css
index 171764cbdc52d8a481a0b4d828c4ae3e4244edb6..43c15f8f5da148690d744142a779ae3641228730 100644 (file)
--- a/jekyll/css/application.css
+++ b/jekyll/css/application.css
@@ -12,21 +12,21 @@ header a, header a:visited {
   color: black;
 }
 
   color: black;
 }
 
-h2,
-h3 {
+h1,
+h2 {
   display: inline-block;
   margin-left: 10px;
   font-weight: 300;
 }
 
   display: inline-block;
   margin-left: 10px;
   font-weight: 300;
 }
 
-h1 {
+header {
   margin: -0.3em 0 0 -0.1em;
   font-size: 9.6em;
   font-style: italic;
   text-transform: uppercase;
 }
 
   margin: -0.3em 0 0 -0.1em;
   font-size: 9.6em;
   font-style: italic;
   text-transform: uppercase;
 }
 
-h2 {
+h1 {
   font-size: 4.8em;
 }
 
   font-size: 4.8em;
 }
 
@@ -46,26 +46,27 @@ ul, p {
   font-family: 'Helvetica Neue', Arial, sans-serif;
 }
 
   font-family: 'Helvetica Neue', Arial, sans-serif;
 }
 
-ul {
-  list-style: square;
+li {
+  display: block;
 }
 
 }
 
-li {
+li article {
   display: inline-block;
   line-height: 1.82em;
 }
 
   display: inline-block;
   line-height: 1.82em;
 }
 
-aside {
+span {
   display: inline;
   color: grey;
 }
 
 img,
 video {
   display: inline;
   color: grey;
 }
 
 img,
 video {
+  display: block;
   max-width: 100vw;
 }
 
   max-width: 100vw;
 }
 
-li, h2, h3, p {
+header a, li article, h2, h3, p {
   background-color: white;
 }
 
   background-color: white;
 }
 
@@ -76,7 +77,7 @@ li, h2, h3, p {
     color: white;
   }
 
     color: white;
   }
 
-  h1 a, h1 a:visited {
+  header a, header a:visited {
     color: white;
   }
 
     color: white;
   }
 
@@ -92,11 +93,11 @@ li, h2, h3, p {
     color: #55FF55;
   }
 
     color: #55FF55;
   }
 
-  aside {
+  span {
     color: #FFEC27;
   }
 
     color: #FFEC27;
   }
 
-  li, h2, h3, p {
+  header a, li article, h1, h2, p {
     background-color: black;
   }
 }
     background-color: black;
   }
 }
@@ -105,7 +106,7 @@ li, h2, h3, p {
  * Mini header
  */
 @media (max-width: 600px) {
  * Mini header
  */
 @media (max-width: 600px) {
-  h1 {
+  header {
     font-size: 4.8em;
   }
 }
     font-size: 4.8em;
   }
 }
diff --git a/jekyll/index.html b/jekyll/index.html
index 2c3b8af9f68ba4c8b76d0a1c81eba9507d0a4846..4a6bbe26366141a599ea7fa3173abdd9785b0c42 100644 (file)
--- a/jekyll/index.html
+++ b/jekyll/index.html
@@ -3,61 +3,63 @@ layout: default
 title: /index.html
 description: "unlimited.pizza - ruben beltran del río surfs the internet: programming, music, fun times, hugs, bad jokes, and unlimited pizza"
 ---
 title: /index.html
 description: "unlimited.pizza - ruben beltran del río surfs the internet: programming, music, fun times, hugs, bad jokes, and unlimited pizza"
 ---
-<div>
-  <h2> Projects</h2>
+<main title="Projects">
+  <h1>Projects</h1>
 
   <ul>
     <li>
       <article>
         <a href="http://blog.unlimited.pizza">blog</a>
 
   <ul>
     <li>
       <article>
         <a href="http://blog.unlimited.pizza">blog</a>
-        <aside>(Ongoing)</aside>:
+        <span>(Ongoing)</span>:
         My blog. Only 3 posts at a time.
         My blog. Only 3 posts at a time.
-        <a href="https://gitlab.com/rbdr/blog">See the source</a>.
+        <a aria-label="See the source of my blog" href="https://gitlab.com/rbdr/blog">See the source</a>.
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/serpentity">Serpentity</a>
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/serpentity">Serpentity</a>
-        <aside>(Ongoing)</aside>:
+        <span>(Ongoing)</span>:
         An entity framework for JavaScript.
       </article>
     </li>
     <li>
       <article>
         An entity framework for JavaScript.
       </article>
     </li>
     <li>
       <article>
-        <a href="https://gitlab.com/rbdr/api-notation.vim">API Notation for vim</a>,
+        <a href="https://gitlab.com/rbdr/api-notation.vim">API notation for vim</a>,
         <a href="https://gitlab.com/rbdr/api-notation-atom">atom</a>, &amp;
         <a href="https://gitlab.com/rbdr/api-notation.vscode">vscode</a>, &amp;
         <a href="https://gitlab.com/rbdr/api-notation.tmLanguage">sublime text</a>
         <a href="https://gitlab.com/rbdr/api-notation-atom">atom</a>, &amp;
         <a href="https://gitlab.com/rbdr/api-notation.vscode">vscode</a>, &amp;
         <a href="https://gitlab.com/rbdr/api-notation.tmLanguage">sublime text</a>
-        <aside>(Ongoing)</aside>:
+        <span>(Ongoing)</span>:
         A syntax for notating component APIs in a way that's easy to embed in text documents.
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/rbdr/ngx_http_office_hours_filter_module">Nginx Office Hours</a>
         A syntax for notating component APIs in a way that's easy to embed in text documents.
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/rbdr/ngx_http_office_hours_filter_module">Nginx Office Hours</a>
-        <aside>(2019)</aside>:
+        <span>(2019)</span>:
         A victory for the server's labor rights: An nginx module that allows you to serve your content only during office hours.
       </article>
     </li>
     <li>
       <article>
         <a href="https://flower.unlimited.pizza">Flower</a>
         A victory for the server's labor rights: An nginx module that allows you to serve your content only during office hours.
       </article>
     </li>
     <li>
       <article>
         <a href="https://flower.unlimited.pizza">Flower</a>
-        <aside>(2018)</aside>:
-        🌹🌸🌺💐🌼🌻🌷 draw a flower rotating a cube 🌷🌻🌼💐🌺🌸🌹
+        <span>(2018)</span>:
+        <span aria-hidden="true">🌹🌸🌺💐🌼🌻🌷</span>
+        draw a flower rotating a cube
+        <span aria-hidden="true">🌷🌻🌼💐🌺🌸🌹</span>
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/rbdr/sorting-hat">Sorting Hat</a>
         &amp; <a href="https://gitlab.com/rbdr/sorting-hat-renderer">Renderer</a>
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/rbdr/sorting-hat">Sorting Hat</a>
         &amp; <a href="https://gitlab.com/rbdr/sorting-hat-renderer">Renderer</a>
-        <aside>(2017)</aside>:
+        <span>(2017)</span>:
         Reads your brain and places you in a category based on your mental activity
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/rbdr/dasein">Dasein</a>
         Reads your brain and places you in a category based on your mental activity
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/rbdr/dasein">Dasein</a>
-        <aside>(2017)</aside>:
+        <span>(2017)</span>:
         Ephemeral posts experiment: the posts stay alive as the conversation
         continues, but disappear shortly after activity stops.
       </article>
         Ephemeral posts experiment: the posts stay alive as the conversation
         continues, but disappear shortly after activity stops.
       </article>
@@ -65,20 +67,21 @@ description: "unlimited.pizza - ruben beltran del río surfs the internet: progr
     <li>
       <article>
         <a href="https://frames.unlimited.pizza">Frames</a>
     <li>
       <article>
         <a href="https://frames.unlimited.pizza">Frames</a>
-        <aside>(2017)</aside>:
+        <span>(2017)</span>:
         🆒
       </article>
     </li>
     <li lang="es-MX">
       <article>
         <a href="https://gitlab.com/rbdr/dead-drop/">Dead Drop</a>
         🆒
       </article>
     </li>
     <li lang="es-MX">
       <article>
         <a href="https://gitlab.com/rbdr/dead-drop/">Dead Drop</a>
-        <aside>(2017, Spanish)</aside>:
+        <span>(2017, Spanish)</span>:
         Marca un número de 📞 y deja un mensaje secreto, o escucha algo al azar.
         Marca un número de 📞 y deja un mensaje secreto, o escucha algo al azar.
+      </article>
     </li>
     <li>
       <article>
         <a href="telnet:unlimited.pizza:7777">telnet unlimited.pizza 7777</a>
     </li>
     <li>
       <article>
         <a href="telnet:unlimited.pizza:7777">telnet unlimited.pizza 7777</a>
-        <aside>(2016)</aside>:
+        <span>(2016)</span>:
         a random work of ansi art. Better with 24-bit enabled terminals. Powered by
         <a href="https://gitlab.com/rbdr/tomato-sauce">Tomato Sauce</a>.
       </article>
         a random work of ansi art. Better with 24-bit enabled terminals. Powered by
         <a href="https://gitlab.com/rbdr/tomato-sauce">Tomato Sauce</a>.
       </article>
@@ -86,22 +89,22 @@ description: "unlimited.pizza - ruben beltran del río surfs the internet: progr
     <li>
       <article>
         <a href="https://lgtm.unlimited.pizza">LGTM</a>
     <li>
       <article>
         <a href="https://lgtm.unlimited.pizza">LGTM</a>
-        <aside>(2016)</aside>:
+        <span>(2016)</span>:
         Looks Good To Me! 👍
         Looks Good To Me! 👍
-        <a href="https://gitlab.com/rbdr/lgtm">See the source</a>.
+        <a aria-label="See the source of LGTM" href="https://gitlab.com/rbdr/lgtm">See the source</a>.
       </article>
     </li>
     <li>
       <article>
         <a href="https://heart.unlimited.pizza">Heart</a>
       </article>
     </li>
     <li>
       <article>
         <a href="https://heart.unlimited.pizza">Heart</a>
-        <aside>(2016)</aside>:
+        <span>(2016)</span>:
         ❤️💜💙💛💚
       </article>
     </li>
     <li lang="es-MX">
       <article>
         <a href="http://insultos.unlimited.pizza">Generador de Insultos</a>
         ❤️💜💙💛💚
       </article>
     </li>
     <li lang="es-MX">
       <article>
         <a href="http://insultos.unlimited.pizza">Generador de Insultos</a>
-        <aside>(2015, Spanish)</aside>:
+        <span>(2015, Spanish)</span>:
         Un generador de insultos multi-usos que te da un insulto nuevo cada vez
         que lo cargas.
       </article>
         Un generador de insultos multi-usos que te da un insulto nuevo cada vez
         que lo cargas.
       </article>
@@ -109,43 +112,43 @@ description: "unlimited.pizza - ruben beltran del río surfs the internet: progr
     <li lang="es-MX">
       <article>
         <a href="https://gitlab.com/rbdr/Grita">Grita</a>
     <li lang="es-MX">
       <article>
         <a href="https://gitlab.com/rbdr/Grita">Grita</a>
-        <aside>(2010, Spanish)</aside>:
+        <span>(2010, Spanish)</span>:
         Comparte texto anónimamente y distribuyelo con QR codes y URLs cortas.
       </article>
     </li>
     <li>
       <article>
         <a href="/files/polarity.zip">Polarity</a>
         Comparte texto anónimamente y distribuyelo con QR codes y URLs cortas.
       </article>
     </li>
     <li>
       <article>
         <a href="/files/polarity.zip">Polarity</a>
-        <aside>(2009)</aside>:
+        <span>(2009)</span>:
         Top-down arena shooter game with magnetism.
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/rbdr/Pico-Engine">Pico Engine</a>
         Top-down arena shooter game with magnetism.
       </article>
     </li>
     <li>
       <article>
         <a href="https://gitlab.com/rbdr/Pico-Engine">Pico Engine</a>
-        <aside>(2009)</aside>:
+        <span>(2009)</span>:
         Platform game engine with lua scripting.
       </article>
     </li>
   </ul>
         Platform game engine with lua scripting.
       </article>
     </li>
   </ul>
+</main>
 
 
-  <h2>Even more stuff.</h2>
+<aside title="Even more stuff.">
+  <h1>Even more stuff.</h1>
 
 
-  <div>
-    <video autoplay muted loop>
-      <source src="/video/selfie.webm" type="video/webm">
-      <source src="/video/selfie.mp4" type="video/mp4">
-    </video>
-  </div>
+  <video autoplay muted loop aria-label="A picture of Rubén sleeping with an animated overlay changing the eyes, and showing a snake-like tongue">
+    <source src="/video/selfie.webm" type="video/webm">
+    <source src="/video/selfie.mp4" type="video/mp4">
+  </video>
 
 
-  <p>🍕 Unlimited pizza 🍕 Rubén Beltrán del Río. I have words written
-  <span lang="es-mx">(español e inglés)</span> on
+  <p><span aria-hidden="true">🍕</span> Unlimited pizza <span aria-hidden="true">🍕</span> / Rubén Beltrán del Río.
+  I have words written <span lang="es-mx">(español e inglés)</span> on
   <a href="https://medium.com/@expertosenbing">medium</a>,
   spoken in <a href="https://www.youtube.com/playlist?list=PLYxitPB3WXb1B4zPAsj92l9ay5pBOyynt">a handy playlist</a>,
   music at <a href="https://soundcloud.com/benbeltran">soundcloud</a>
   and <a href="https://myspace.bandcamp.com">bandcamp</a>,
   <a href="https://medium.com/@expertosenbing">medium</a>,
   spoken in <a href="https://www.youtube.com/playlist?list=PLYxitPB3WXb1B4zPAsj92l9ay5pBOyynt">a handy playlist</a>,
   music at <a href="https://soundcloud.com/benbeltran">soundcloud</a>
   and <a href="https://myspace.bandcamp.com">bandcamp</a>,
-  and code at <a href="https://gitlab.com/rbdr">gitlab</a>. I sometimes post
-  gifs in <a href="https://ello.co/ososol">ello</a> and
+  and code at <a href="https://gitlab.com/rbdr">gitlab</a>.
+  I sometimes post gifs in <a href="https://ello.co/ososol">ello</a> and
   pictures in <a href="https://youpic.com/photographer/microsoft/">youpic</a>
   You can <a href="mailto:ruben+up@unlimited.pizza">write me an e-mail</a> if you
   find a cool rock you want to show me, if you want to tell a story, if
   pictures in <a href="https://youpic.com/photographer/microsoft/">youpic</a>
   You can <a href="mailto:ruben+up@unlimited.pizza">write me an e-mail</a> if you
   find a cool rock you want to show me, if you want to tell a story, if
@@ -154,5 +157,5 @@ description: "unlimited.pizza - ruben beltran del río surfs the internet: progr
   But <a href="https://twitter.com/pigeonfolk">twitter</a> works better.
   </p>
 
   But <a href="https://twitter.com/pigeonfolk">twitter</a> works better.
   </p>
 
-  <p>🦌.🛠.🐝</p>
-</div>
+  <p aria-label="Emoji Version">🌱.🏀.🐝</p>
+</aside>
The contents of r.bdr.sh #personal