Skip to content

Commit 14fc7a5

Browse files
supernordsupernord
committed
update news
1 parent 55ccbb3 commit 14fc7a5

2 files changed

Lines changed: 241 additions & 6 deletions

File tree

‎_data/news.yml‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
- name: "Script for Alphafold output validation metrics!"
2-
date: 2024-11-01
3-
description: "Python Script and info about configuring AF2 to output pTM, ipTM and MSA depth. Many thanks to the Australian Galaxy team (special shout out to Cam!) for making this happen (<https://github.com/usegalaxy-au/tools-au/tree/master/tools/alphafold#generating-additional-outputs>)"
4-
- name: "Script for updating Alphafold2 dependencies to stop 'template missing' failures (MMCIF patch)"
5-
date: 2024-11-01
6-
description: "MMCIF patch python script. Many thanks to the Australian Galaxy team (Cam again!) for making this happen (<https://github.com/usegalaxy-au/tools-au/tree/master/tools/alphafold/scripts/db/patch_mmcif>)"
1+
- name: "View the webinar series for protein design"
2+
date: 2025-11-11
3+
url: https://youtube.com/playlist?list=PL3KeWF8P6MjzKtxXLp83w78K_AGUskL0a&si=eMvuLoQzcg9sIws5
4+
description: "A limited series webinar from 2025 that shared strategies to get the best outcomes from protein design projects. Speakers included: Richard Birkinshaw, Rhys Grinter, Josh Hardy, Joel Mackay, and Cyntia Taveneau."

‎_includes/news.html‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<div class="events {{ include.event_type }}">
2+
<div class="news-container">
3+
<div class="news-section">
4+
{%- assign current_date = "now" | date: "%s" -%}
5+
<div class="news-category">
6+
{%- assign news = site.data.news | sort: "date" | reverse %}
7+
{%- assign count = 0 -%}
8+
<div class="news-list">
9+
{%- for item in news -%}
10+
<div class="news-item" onclick="redirectToNews('{{ item.url }}')">
11+
<div class="news-date-block">
12+
<div class="news-date">
13+
<div class="news-day">{{ item.date | date: "%d" | escape }}</div>
14+
<div class="news-month">{{ item.date | date: "%b" | escape }}</div>
15+
<div class="news-year">{{ item.date | date: "%Y" | escape }}</div>
16+
</div>
17+
<div class="news-content">
18+
<h3 class="news-title">{{ item.name | escape }}</h3>
19+
<p class="news-description">{{ item.description | markdownify }}</p>
20+
</div>
21+
<div class="event-arrow">→</div>
22+
</div>
23+
</div>
24+
{%- assign count = count | plus: 1 -%}
25+
{%- if include.limit and count == include.limit -%}
26+
{%- break -%}
27+
{%- endif -%}
28+
{%- endfor -%}
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
34+
<style>
35+
* {
36+
margin: 0;
37+
padding: 0;
38+
box-sizing: border-box;
39+
}
40+
41+
.news{
42+
display: block;
43+
};
44+
45+
.news-container {
46+
max-width: 800px;
47+
margin: 0 0;
48+
padding: 3px 4px;
49+
}
50+
51+
.news-section {
52+
position: relative;
53+
}
54+
55+
.news-header {
56+
margin-bottom: 30px;
57+
text-align: left;
58+
}
59+
60+
.news-title {
61+
font-size: clamp(2rem, 6vw, 3rem);
62+
font-weight: 300;
63+
letter-spacing: -0.01em;
64+
margin-bottom: 5px;
65+
color: #2d2d2d;
66+
}
67+
68+
.news-subtitle {
69+
font-size: 1rem;
70+
color: #666;
71+
font-weight: 400;
72+
}
73+
74+
.news-category {
75+
margin-bottom: 30px;
76+
}
77+
78+
.news-category:last-child {
79+
margin-bottom: 0;
80+
}
81+
82+
.news-list {
83+
display: grid;
84+
grid-template-columns: 1fr 1fr;
85+
gap: 30px;
86+
}
87+
88+
.news-item {
89+
border: 1px solid #e0e0e0;
90+
border-radius: 12px;
91+
padding: 20px;
92+
transition: all 0.3s ease;
93+
cursor: pointer;
94+
background: #ffffff;
95+
}
96+
97+
.news-item:hover {
98+
background: #f8f8f8;
99+
transform: translateY(-4px);
100+
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
101+
border-color: #012152;
102+
}
103+
104+
.news-date-block {
105+
display: flex;
106+
align-items: flex-start;
107+
gap: 15px;
108+
margin-bottom: 10px;
109+
}
110+
111+
.news-date {
112+
text-align: center;
113+
background: #f8f8f8;
114+
border-radius: 6px;
115+
padding: 8px 6px;
116+
width: 50px;
117+
flex-shrink: 0;
118+
}
119+
120+
.news-day {
121+
font-size: 1.4rem;
122+
font-weight: 700;
123+
line-height: 1;
124+
color: #012152;
125+
}
126+
127+
.news-month {
128+
font-size: 0.7rem;
129+
text-transform: uppercase;
130+
letter-spacing: 0.05em;
131+
color: #666;
132+
font-weight: 600;
133+
margin-top: 1px;
134+
}
135+
136+
.news-year {
137+
font-size: 0.6rem;
138+
color: #999;
139+
font-weight: 400;
140+
}
141+
142+
.past-news .news-item {
143+
opacity: 0.7;
144+
}
145+
146+
.past-news .news-day {
147+
color: #999;
148+
}
149+
150+
.news-content {
151+
flex: 1;
152+
position: relative;
153+
}
154+
155+
.news-title {
156+
font-size: 1.3rem;
157+
font-weight: 600;
158+
margin-bottom: 3px;
159+
color: #2d2d2d;
160+
line-height: 1.2;
161+
}
162+
163+
.news-description {
164+
color: #888;
165+
font-size: 0.85rem;
166+
line-height: 1.4;
167+
display: -webkit-box;
168+
-webkit-line-clamp: 3;
169+
-webkit-box-orient: vertical;
170+
overflow: hidden;
171+
}
172+
173+
.news-arrow {
174+
position: absolute;
175+
top: 15px;
176+
right: 15px;
177+
width: 20px;
178+
height: 20px;
179+
opacity: 0;
180+
transition: opacity 0.3s ease;
181+
color: #012152;
182+
}
183+
184+
.news-item:hover .event-arrow {
185+
opacity: 1;
186+
}
187+
188+
/* Responsive Design */
189+
@media (max-width: 768px) {
190+
.news-container {
191+
padding: 30px 20px;
192+
}
193+
194+
.news-list {
195+
grid-template-columns: 1fr;
196+
gap: 15px;
197+
}
198+
199+
.news-date-block {
200+
flex-direction: row;
201+
align-items: flex-start;
202+
gap: 12px;
203+
}
204+
205+
.news-date {
206+
text-align: center;
207+
width: 45px;
208+
flex-shrink: 0;
209+
}
210+
}
211+
212+
/* Smooth scroll behavior */
213+
html {
214+
scroll-behavior: smooth;
215+
}
216+
217+
/* Custom scrollbar */
218+
::-webkit-scrollbar {
219+
width: 8px;
220+
}
221+
222+
::-webkit-scrollbar-track {
223+
background: #f1f1f1;
224+
}
225+
226+
::-webkit-scrollbar-thumb {
227+
background: #012152;
228+
border-radius: 4px;
229+
}
230+
</style>
231+
232+
<script>
233+
function redirectToNews(news_url) {
234+
window.open(`${news_url}`, '_blank');
235+
}
236+
</script>
237+
</div>

0 commit comments

Comments
 (0)