Quebec photos

content/photography/_index.md

@@ -0,0 +1,7 @@
+---
+title: Photography
+extra:
+    section_embed_mode: photos
+---
+
+## My photo collections

content/photography/quebec-2017.md

@@ -0,0 +1,41 @@
+---
+title: A trip around Québec
+date: 2017-06-22
+description: My favorites from a larger collection of photos taken on a trip around Québec
+extra:
+    cover_image: /photos/quebec-2017/20170622_112655-01.jpeg
+---
+
+Back in 2017, I took a school-organized trip around Québec. My friends and I brought our cameras, loaded up on SD cards, and went all out with some pretty creative shots.
+
+While I was mainly focused on shooting video, I did take a few hundred photos along the way, and later edited them all to fit a sort of rough grainy theme I was playing around with at the time.
+
+<!-- ## From the streets -->
+
+![](/photos/quebec-2017/20170621_132531-01.jpeg)
+
+![](/photos/quebec-2017/20170621_131126-01.jpeg)
+
+![](/photos/quebec-2017/20170621_225558-01.jpeg)
+
+<hr>
+
+I am quite fond of this one, a super wide shot made from stitching a bunch of photos together in [Microsoft ICE](https://en.wikipedia.org/wiki/Image_Composite_Editor).
+
+![](/photos/quebec-2017/20170621_105853-01.jpeg)
+
+<hr>
+
+![](/photos/quebec-2017/20170621_105921-01.jpeg)
+
+![](/photos/quebec-2017/20170622_112655-01.jpeg)
+
+<hr>
+
+I also took a bunch of neat waterfall photos:
+
+![](/photos/quebec-2017/20170622_152959-01.jpeg)
+
+![](/photos/quebec-2017/20170622_153509-02.jpeg)
+
+![](/photos/quebec-2017/20170622_153903-01.jpeg)

sass/styles/components/photo-collection-card.scss

@@ -0,0 +1,20 @@
+.photo-collection-card {
+  text-decoration: none !important;
+  color: unset !important;
+
+  .card {
+    .cover-image {
+      min-height: 100%;
+      min-width: 100%;
+      overflow: hidden;
+    }
+
+    .card-title {
+      margin: 0;
+    }
+
+    &:hover {
+        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
+    }
+  }
+}

templates/components/navbar.html

@@ -10,17 +10,18 @@
         <li class="separator">|</li>
         <li><a href="/blog">Blog</a></li>
         <li class="separator">|</li>
-        {# <li class="dropdown-center">
+        <li class="dropdown-center">
             <a href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                 More
             </a>
             <ul class="dropdown-menu">
-                <li><a class="dropdown-item" href="#">Action</a></li>
-                <li><a class="dropdown-item" href="#">Another action</a></li>
-                <li><a class="dropdown-item" href="#">Something else here</a></li>
+                {# <li>
+                    <p class="dropdown-header">More</p>
+                </li> #}
+                <li><a class="dropdown-item" href="/photography">Photography</a></li>
             </ul>
         </li>
-        <li class="separator">|</li> #}
+        <li class="separator">|</li>
         <li><a href="/contact">Contact</a></li>
     </ul>
     <hr>

templates/components/photo-collection-card.html

@@ -0,0 +1,24 @@
+{% block component_styles %}
+{{ super() }}
+<link rel="stylesheet" href="/styles/components/photo-collection-card.css">
+{% endblock component_styles %}
+
+<a class="photo-collection-card" href="{{collection.path}}">
+    <div class="card mb-3">
+        <div class="row g-0">
+            <div class="col-md-4">
+                <img src="{{collection.extra.cover_image}}" class="img-fluid rounded-start cover-image"
+                    alt="Cover image">
+            </div>
+            <div class="col-md-8">
+                <div class="card-body">
+                    <h3 class="card-title">{{collection.title}}</h3>
+                    {% if collection.description %}
+                    <p class="card-text">{{collection.description}}</p>
+                    {% endif %}
+                    <p class="card-text"><small class="text-muted">Published on {{collection.date}}</small></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</a>

templates/section.html

@@ -20,7 +20,7 @@
 {# Handle various embed modes #}
 {% if section.extra.section_embed_mode %}
 
-
+{# Blog post injection #}
 {% if section.extra.section_embed_mode == "blog_posts" %}
 {# <ul style="margin:0"> #}
   <div>
@@ -45,5 +45,14 @@
 </ul>
 </div>
 {% endif %}
+
+{# Photo collection injection #}
+{% if section.extra.section_embed_mode == "photos" %}
+{% for collection in section.pages %}
+{% include "components/photo-collection-card.html" %}
+{% endfor %}
+{% endif %}
+
+
 {% endif %}
 {% endblock content %}