Add pictures

Author: RishabhKarnad

_pages/pictures.md

@@ -0,0 +1,174 @@
+---
+layout: page
+title: pictures
+permalink: /pictures/
+description: You know, I'm something of a photographer myself
+nav: true
+nav_order: 10
+horizontal: false
+---
+
+<div class="picture-container">
+<p>IIT Hyderabad's main quad</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/academia.jpg"
+    sizes = "250px"
+    alt="IITH main quad"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>Academic block B as seen from the terrace of the AI center</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/block-b.jpg"
+    sizes = "250px"
+    alt="IITH Block B"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>Academic block B - the innards</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/the-innards.jpg"
+    sizes = "250px"
+    alt="IITH Block B inside view"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>Peace and tranquility</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/happiness-dont-cost-a-dime.jpg"
+    sizes = "250px"
+    alt="IITH sunset"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>I've been as busy as a cat</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/busy-as-a-cat.jpg"
+    sizes = "250px"
+    alt="Somewhere near Vizag"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>Help, I've fallen down a cave</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/fell-down-a-cave.jpg"
+    sizes = "250px"
+    alt="Somewhere inside a cave"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>A street in Tokyo</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/japan-street.jpg"
+    sizes = "250px"
+    alt="A street in Tokyo"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>Liminal spaces</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/ramen.jpg"
+    sizes = "250px"
+    alt="Another street in Tokyo"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>Calm as cookies and cream</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/cookies-and-cream.jpg"
+    sizes = "250px"
+    alt="Somewhere above Hyderabad"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>Woah, that's a big one!</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/thats-a-big-one.jpg"
+    sizes = "250px"
+    alt="Airbus A380 at Narita"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>A herd of grazing Dreamliners</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/dreamliners.jpg"
+    sizes = "250px"
+    alt="Boeing 787s at Narita"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>She's a beaut</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/787.jpg"
+    sizes = "250px"
+    alt="Boeing 787 at Narita"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>Definitely wallpaper worthy</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/wallpaper-worthy.jpg"
+    sizes = "250px"
+    alt="Mumbai airport arrivals"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>Cyber-gatto</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/cyber-gatto.jpg"
+    sizes = "250px"
+    alt="A cat"
+    class="card-img-top"
+%}
+</div>
+
+<div class="picture-container">
+<p>ACML 2022</p>
+{%
+    include figure.liquid
+    path="/assets/img/pictures/acml2022.jpeg"
+    sizes = "250px"
+    alt="ACML 2022"
+    class="card-img-top"
+%}
+</div>

_sass/_layout.scss

@@ -31,6 +31,12 @@ body.sticky-bottom-footer {
   max-width: $max-content-width;
 }
 
+.picture-container {
+    border-bottom: 1px solid var(--global-divider-color);
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
 // Profile
 .profile {
   img {