beiko-lab.github.io/_pages/news.html at main · beiko-lab/beiko-lab.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
---
title: "News"
layout: default
excerpt: "Beiko Lab"
sitemap: false
permalink: /news.html
---

<style>

h2 {
  margin-top: 40px;
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 600;
}

.news-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* CARD */
.news-card {
  position: relative;
  display: block;
  overflow: visible;   /* important: allow full image */
  border-radius: 8px;
  text-decoration: none;
}

/* IMAGE - NO CROPPING */
.news-card img {
  width: 100%;
  height: auto;        /* key fix */
  display: block;
  object-fit: contain; /* ensures full image always */
  background: #f5f5f5; /* fills empty space nicely */
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* hover effect */
.news-card:hover img {
  transform: scale(1.02);
}

/* OVERLAY TEXT */
.news-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border-radius: 0 0 8px 8px;
}

.news-overlay h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: white;
}

.news-overlay p {
  margin: 2px 0;
  font-size: 14px;
  color: white;
}

</style>
<h1>News</h1>
<p>
In our lab, we actively disseminate our research through conferences, workshops, and seminars. Below are some events where lab members have presented their work or are planning to do so.</p>
<!-- UPCOMING -->
<h2>Upcoming</h2>
- Stay tuned for updates on our future conferences, presentations and events.
<div class="news-grid">
  {% for item in site.data.news %}
    {% if item.category == "upcoming" %}

    <a href="{{ item.link }}" target="_blank" class="news-card">

      <img src="{{ '/images/news/' | append: item.image | relative_url }}" alt="{{ item.title }}">

      <div class="news-overlay">
        <h3>{{ item.title }}</h3>
        <p>{{ item.date }}</p>
        <p>{{ item.location }}</p>
      </div>

    </a>

    {% endif %}
  {% endfor %}
</div>


<!-- PAST -->
<h2>Past</h2>

<div class="news-grid">
  {% for item in site.data.news %}
    {% if item.category == "past" %}

    <a href="{{ item.link }}" target="_blank" class="news-card">

      <img src="{{ '/images/news/' | append: item.image | relative_url }}" alt="{{ item.title }}">

      <div class="news-overlay">
        <h3>{{ item.title }}</h3>
        <p>{{ item.date }}</p>
        <p>{{ item.location }}</p>
      </div>

    </a>

    {% endif %}
  {% endfor %}
</div>