photo-gallery-styles

diff --git a/index.haml b/index.haml
@@ -21,9 +21,10 @@
       %ul#gallery
         - for img in Dir["photos/*.*"].sort
           %li
-            -# TODO: Render WEBP preview images instead
-            -# TODO: Add alt text
-            %img{ :src => "./" + img }
+            %a{ :href => "./pictures/" + img + ".html" }
+              -# TODO: Render WEBP preview images instead
+              -# TODO: Add alt text
+              %img{ :src => "./" + img }
     %footer
       made with 💛 by
       %a(role="author" href="https://pablopie.xyz") @pablo

diff --git a/index.html b/index.html
@@ -29,43 +29,69 @@
 </nav>
 <ul id='gallery'>
 <li>
+<a href='./pictures/photos/1.png.html'>
 <img src='./photos/1.png'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/10.jpg.html'>
 <img src='./photos/10.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/11.jpg.html'>
 <img src='./photos/11.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/12.jpg.html'>
 <img src='./photos/12.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/13.jpg.html'>
 <img src='./photos/13.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/2.jpg.html'>
 <img src='./photos/2.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/3.jpg.html'>
 <img src='./photos/3.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/4.jpg.html'>
 <img src='./photos/4.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/5.jpg.html'>
 <img src='./photos/5.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/6.jpg.html'>
 <img src='./photos/6.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/7.jpg.html'>
 <img src='./photos/7.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/8.jpg.html'>
 <img src='./photos/8.jpg'>
+</a>
 </li>
 <li>
+<a href='./pictures/photos/9.png.html'>
 <img src='./photos/9.png'>
+</a>
 </li>
 </ul>
 </main>