Added gallery, newsletter, hep-group and made general improvements

Author: nathaishik

404.html

@@ -3,21 +3,7 @@
 layout: page
 ---
 
-<style type="text/css" media="screen">
-  .container {
-    margin: 10px auto;
-    max-width: 600px;
-    text-align: center;
-  }
-  h1 {
-    margin: 30px 0;
-    font-size: 4em;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-</style>
-
-<div class="container">
+<div class="container" class="text-align: center;">
   <h1>404</h1>
 
   <p><strong>Page not found :(</strong></p>

_config.yml

@@ -122,4 +122,9 @@ defaults:
       type: lectures
     values:
       topic: "Other Topics"
+  - scope:
+      path: "_lectures/hep-group"
+      type: lectures
+    values:
+      topic: "HEP Group"
 

_data/openday.yml

@@ -15,7 +15,10 @@ convenors:
     email: saivinayg@iisc.ac.in
     picture: "/assets/img/team/2025/vinay.webp"
 
+volunteer-team-name: "Design and Development Team"
+
 volunteers:
+
   - name: "Aishik Nath"
     role: Design and Dev Team Lead
     email: aishiknath@iisc.ac.in

_data/team/2025.yml

@@ -24,13 +24,13 @@ <h4 class="glow">{{ post.title }}</h4>
         </div>
     {% elsif topic %}
             <div>
-            <div class="item-image">
+            <!-- <div class="item-image">
                 {% assign slug = topic | slugify %}
                 {% assign address = '/assets/img/lectures/' | append: slug | append: '.webp' %}
                 <img src="{{ address }}" alt="{{ topic }}" class="" onerror="this.onerror=null;this.src='/assets/img/defaults/notopic.webp';">
-            </div>
+            </div> -->
             <div class="item-info">
-                <h4 class="glow">{{ topic }}</h4>
+                <h4 class="glow no-margin">{{ topic }}</h4>
             </div>
         </div>
         <div>

_includes/post_list.html

@@ -16,7 +16,7 @@ <h1 class="post-title p-name glow" itemprop="name headline">{{ page.title | esca
       {%- endif -%}</p>
   </header>
 
-  <div class="post-content e-content" itemprop="articleBody">
+  <div class="post-content e-content markdown-body" itemprop="articleBody">
     {{ content }}
   </div>
 

_layouts/post.html

@@ -3,10 +3,11 @@
 ---
 
 <div class="container">
-  <a class="boxglow nav-height-adjust" href="{{ site.baseurl }}/lectures/"><span class="material-symbols-outlined norm">arrow_back</span> All Lectures</a>
+  <a class="boxglow nav-height-adjust" href="{{ site.baseurl }}/lectures/"><span class="material-symbols-outlined norm">arrow_back</span> All Topics</a>
   <h1 class="pagetitle">{{ page.topic }}</h1>
-  
-    {{  content }}
+    <div class="markdown-body"> 
+      {{  content }}
+    </div>
       <ul class="item-list">
         {% assign filtered_lectures = site.lectures | where: "topic", page.topic %}
         {% for post in filtered_lectures %}

_layouts/topic-page.html

@@ -0,0 +1,9 @@
+---
+layout: topic-page
+permalink: '/lectures/hep-group/'
+title: HEP Group
+---
+
+| Session Name | Speaker | Material Link |
+| ------------ | ------- | ------------- |
+| To be filled | To be filled | To be filled |

_lectures/hep-group/index.md

@@ -45,6 +45,7 @@
 body {
   background-color: var(--bg);
   color: var(--foreground);
+  font-family: var(--sans-font);
 }
 
 nav.navbar {
@@ -181,6 +182,9 @@ hr {
 }
 
 
+.read-more {
+  margin-top: 2rem;
+}
 
 // Utitlity
 
@@ -201,6 +205,10 @@ hr {
   }
 }
 
+.no-margin {
+  margin: 0;
+}
+
 
 
 // Picture header
@@ -281,6 +289,9 @@ footer {
 
     .footer-right {
       padding: var(--padding);
+      @include media-query($on-palm) {
+        padding: 1rem;
+      }
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -297,8 +308,11 @@ footer {
   }
 }
 
+@import "markdown.scss";
 @import "index";
 @import "team";
 @import "open-day";
 @import "post";
-@import "utils";
+@import "newsletter";
+@import "gallery";
+@import "utils";

_sass/base.scss

@@ -0,0 +1,33 @@
+.gallery {
+    columns: 250px;
+    column-gap: 1em;
+
+    .gallery-item {
+        border-radius: var(--border-radius);
+        overflow: hidden;
+        margin-bottom: 1em;
+        position: relative;
+
+        img {
+            width: 100%;
+        }
+
+        p {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            color: white;
+            margin: 0;
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+            font-size: var(--size--1);
+            
+        }
+
+        &:hover p {
+            transform: translateY(0);
+        }
+    }
+}