css: Align ponts in a row to the same height

This makes the page a bit more beautiful on large screens.

Author: encukou

static/style.css

@@ -48,6 +48,9 @@ section.point {
     padding-right: 1rem;
     padding-bottom: 0;
     position: relative;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
 }
 section.point div.point-logo {
     text-align: center;
@@ -86,6 +89,9 @@ section.point p+p {
     margin-top: 1rem;
     margin-bottom: 1rem;
 }
+section.point div.point-content {
+    flex-grow: 1;
+}
 section.point div.link a {
     color: #ffffff;
     text-decoration: none;

templates/index.html

@@ -22,7 +22,9 @@ <h1>Fedora Loves Python</h1>
         </div>
         {% endif %}
         <h2>{{ point.name }}</h2>
-        {{ point.content | markdown }}
+        <div class="point-content">
+          {{ point.content | markdown }}
+        </div>
         <div class="link">
           <a href="{{ point.link.href }}">{{ point.link.caption }}</a>
         </div>