Update CSS and page template

Author: ducarme

themes/pelican-tufte/pelican-tufte-theme/static/css/style.css

@@ -25,7 +25,37 @@ nav>ul>li {
     column-width: 200px;
 }
 
+.columns section {
+    break-inside: avoid;
+}
+
 .article-metadata {
     margin-top: -1rem;
     padding-top: 0;
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  padding: 1rem 0;
+}
+
+.gallery-grid figure {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+.gallery-grid img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.gallery-grid figcaption {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: #666;
 }

themes/pelican-tufte/pelican-tufte-theme/templates/page.html

@@ -28,24 +28,19 @@ <h1>{{ page.title }}</h1>
 <div class="columns">
   <section>
     <h2>Find me in:</h2>
-    <p>
       <ul>
         {% for name, link in SOCIAL %}
         <li><a href="{{ link }}">{{ name }}</a></li>
         {% endfor %}
       </ul>
-  </p>
   </section>
-  
   <section>
     <h2>Links:</h2>
-    <p>
       <ul>
         {% for name, link in LINKS %}
         <li><a href="{{ link }}">{{ name }}</a></li>
         {% endfor %}
       </ul>
-  </p>
   </section>
 </div>
 {% endif %}

themes/pelican-tufte/pelican-tufte-theme/templates/photos.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block title %}{{ page.title }}{% endblock %}
+
+{% block content %}
+<article>
+  <h2>{{ page.title }}</h2>
+  <div class="gallery-grid">
+    {{ content }}
+  </div>
+</article>
+{% endblock %}