Pictures added

Author: nathaishik

_config.yml

@@ -91,3 +91,4 @@ defaults:
       type: lectures
     values:
       topic: "Other Topics"
+

_layouts/page.html

@@ -1,17 +1,21 @@
 ---
 layout: default
 ---
-<article class="post container">
 
-  {% if page.picture %}
-  <header class="post-header">
-    <h1 class="post-title">{{ page.title | escape }}</h1>
-  </header>
-  {% else %}
-  <header class="post-header">
+{% if page.picture %}
+<header class="post-header page-has-picture" style="background-image: url('{{ page.picture }}');">
+  <div class="container">
     <h1 class="post-title">{{ page.title | escape }}</h1>
-  </header>
-  {% endif %}
+  </div>
+</header>
+<article class="post container">
+{% else %}
+<article class="post container">
+<header class="post-header">
+  <h1 class="post-title">{{ page.title | escape }}</h1>
+</header>
+{% endif %}
+
 
   <div class="post-content">
     {{ content }}

_sass/base.scss

@@ -135,7 +135,21 @@ main{
   }
 }
 
+// Picture header
+
+.page-has-picture {
+    height: 80svh;
+    color: white;
+    background-size:  cover;
+    background-position: center;
+    align-content: end;
+    position: relative;
+
+    text-shadow: 0 0 20px black;
+}
+
 
 @import "index";
 @import "post";
 @import "team";
+@import "open-day";

_sass/minima/_layout.scss

@@ -345,55 +345,3 @@ section {
     border-radius: 5px;
   }
 }
-
-// .open-day-2025-wrapper {
-//   display: grid;
-//   grid-template-columns: repeat(3, 1fr);
-//   grid-auto-rows: 1fr;
-//   // gap: $spacing-unit;
-
-//   .open-day-2025-image {
-//     width: 100%;
-//     height: 100%;
-//     object-fit: cover;
-//     border-radius: 5px;
-//     box-sizing: border-box;
-//     border: 3px solid transparent;
-
-//     &:nth-child(1),
-//     &:nth-child(6),
-//     &:nth-child(9) {
-//       grid-row: span 3;
-//     }
-
-//     &:nth-child(3),
-//     &:nth-child(5) {
-//       grid-row: span 4;
-//     }
-
-//     &:nth-child(8),
-//     &:nth-child(11) {
-//       grid-row: span 1;
-//     }
-
-//     &:nth-child(2),
-//     &:nth-child(4),
-//     &:nth-child(7),
-//     &:nth-child(10) {
-//       grid-row: span 2;
-//     }
-//   }
-// }
-
-.open-day-2025-wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 1fr;
-  gap: $spacing-unit;
-
-  .open-day-2025-image {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-  }
-}

_sass/open-day.scss

@@ -0,0 +1,14 @@
+.open-day {
+    columns: 350px;
+    column-gap: 1em;
+
+    img {
+        margin-bottom: 1em;
+    }
+}
+
+// @include media-query($on-palm) {
+//     .open-day {
+//         columns: 1;
+//     }
+// }