Skip to content

Commit f51b7cc

Browse files
rafaelfsilvarafaelfsilva
committed
improving website layout
1 parent 87ec2d0 commit f51b7cc

3 files changed

Lines changed: 217 additions & 46 deletions

File tree

‎assets/css/styles.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5804,6 +5804,143 @@ canvas{
58045804
text-decoration: underline;
58055805
}
58065806

5807+
.wg-index-hero {
5808+
padding: 4em 0 2.5em;
5809+
background: linear-gradient(120deg, #f4f1ea 0%, #f7f7f2 50%, #e6eef2 100%);
5810+
}
5811+
5812+
.wg-index-hero-card {
5813+
background: #ffffff;
5814+
border-radius: var(--radius-xl);
5815+
padding: 2.5em;
5816+
box-shadow: var(--shadow-md);
5817+
}
5818+
5819+
.wg-index-hero-card h1 {
5820+
font-size: 2.4em;
5821+
margin-bottom: 0.6em;
5822+
}
5823+
5824+
.wg-index-hero-card p {
5825+
color: #4a4a4a;
5826+
max-width: 44em;
5827+
}
5828+
5829+
.wg-index-eyebrow {
5830+
text-transform: uppercase;
5831+
font-size: 0.8em;
5832+
letter-spacing: 0.2em;
5833+
color: #6c6c6c;
5834+
margin-bottom: 0.6em;
5835+
font-weight: 600;
5836+
}
5837+
5838+
.wg-index-section {
5839+
padding: 2.5em 0 4em;
5840+
background: #f7f7f4;
5841+
}
5842+
5843+
.wg-index-section-alt {
5844+
background: #ffffff;
5845+
}
5846+
5847+
.wg-index-header {
5848+
margin-bottom: 2em;
5849+
}
5850+
5851+
.wg-index-header h2 {
5852+
margin-bottom: 0.4em;
5853+
}
5854+
5855+
.wg-index-header p {
5856+
color: #5b5b5b;
5857+
margin: 0;
5858+
}
5859+
5860+
.wg-index-grid {
5861+
display: grid;
5862+
grid-template-columns: repeat(3, minmax(0, 1fr));
5863+
gap: 1.2em;
5864+
}
5865+
5866+
.wg-index-card {
5867+
display: flex;
5868+
flex-direction: column;
5869+
gap: 1em;
5870+
padding: 1.4em;
5871+
background: #ffffff;
5872+
border-radius: 1.2em;
5873+
border: 1px solid #ededed;
5874+
box-shadow: 0 12px 24px rgb(82 90 101 / 10%);
5875+
text-decoration: none;
5876+
color: inherit;
5877+
transition: transform 0.2s ease, box-shadow 0.2s ease;
5878+
}
5879+
5880+
.wg-index-card:hover {
5881+
transform: translateY(-4px);
5882+
box-shadow: 0 16px 30px rgb(82 90 101 / 16%);
5883+
}
5884+
5885+
.wg-index-card-top {
5886+
display: flex;
5887+
align-items: flex-start;
5888+
justify-content: space-between;
5889+
gap: 0.8em;
5890+
}
5891+
5892+
.wg-index-title {
5893+
display: flex;
5894+
align-items: center;
5895+
gap: 0.6em;
5896+
font-weight: 600;
5897+
font-size: 1.05em;
5898+
}
5899+
5900+
.wg-index-title img {
5901+
width: 28px;
5902+
height: 28px;
5903+
border-radius: 8px;
5904+
}
5905+
5906+
.wg-index-pill {
5907+
display: inline-flex;
5908+
align-items: center;
5909+
gap: 0.4em;
5910+
padding: 0.25em 0.7em;
5911+
border-radius: 999px;
5912+
border: 1px solid var(--status-color);
5913+
color: var(--status-color);
5914+
font-size: 0.75em;
5915+
font-weight: 600;
5916+
white-space: nowrap;
5917+
}
5918+
5919+
.wg-index-pill-dot {
5920+
width: 0.5em;
5921+
height: 0.5em;
5922+
border-radius: 999px;
5923+
background: var(--status-color);
5924+
}
5925+
5926+
.wg-index-card p {
5927+
margin: 0;
5928+
color: #4a4a4a;
5929+
}
5930+
5931+
.wg-index-meta {
5932+
display: flex;
5933+
align-items: center;
5934+
justify-content: space-between;
5935+
font-size: 0.9em;
5936+
color: #5b5b5b;
5937+
}
5938+
5939+
.wg-index-link {
5940+
font-weight: 600;
5941+
color: var(--color-secondary);
5942+
}
5943+
58075944
.wg-role-pill {
58085945
color: #aa6821;
58095946
border: 1px solid #aa6821;
@@ -5859,6 +5996,26 @@ pre {
58595996
.wg-members-panel {
58605997
padding: 0.9em;
58615998
}
5999+
6000+
.wg-index-hero-card {
6001+
padding: 1.7em;
6002+
}
6003+
6004+
.wg-index-hero-card h1 {
6005+
font-size: 1.9em;
6006+
}
6007+
}
6008+
6009+
@media (max-width: 1200px) {
6010+
.wg-index-grid {
6011+
grid-template-columns: repeat(2, minmax(0, 1fr));
6012+
}
6013+
}
6014+
6015+
@media (max-width: 768px) {
6016+
.wg-index-grid {
6017+
grid-template-columns: 1fr;
6018+
}
58626019
}
58636020

58646021
.breadcrumb {

‎images/talks/janssen-banner.jpg‎

759 KB
Loading

‎page_working_groups.html‎

Lines changed: 60 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,71 +4,85 @@
44
permalink: /groups
55
---
66

7-
<div class="container text-center" data-aos="fade-up" style="padding: 4em 0; margin-bottom: 0;">
8-
<h4>Collaborative Initiatives in <strong style="color: #db8e1b">Workflow Research</strong></h4>
9-
<p>Discover the ongoing projects and achievements of specialized working groups and task forces advancing workflow
10-
research, development, and real-world applications.</p>
11-
</div>
7+
<section class="wg-index-hero">
8+
<div class="container" data-aos="fade-up">
9+
<div class="wg-index-hero-card">
10+
<div class="wg-index-eyebrow">Working Groups</div>
11+
<h1>Collaborative initiatives in workflow research</h1>
12+
<p>Discover the ongoing projects and achievements of specialized working groups and task forces advancing workflow research, development, and real-world applications.</p>
13+
</div>
14+
</div>
15+
</section>
1216

13-
<section id="testimonials" class="testimonials bg-light" style="padding-top: 0;">
17+
<section class="wg-index-section">
1418
<div class="container" data-aos="fade-up">
15-
<div data-aos="fade-up" data-aos-delay="100">
16-
<!-- WCI Groups -->
19+
<div class="wg-index-header">
20+
<h2>Workflow Community Working Groups</h2>
21+
<p>Groups hosted by the Workflows Community Initiative.</p>
22+
</div>
23+
<div class="wg-index-grid">
1724
{% assign groups = site.working_groups | where:"layout","working_groups" | sort: "title" %}
1825
{% for group in groups %}
19-
{% assign status_color = "color-2" %}
26+
{% assign status_color = "#8B949E" %}
2027
{% if group.status == "Establishing" %}
21-
{% assign status_color = "#D4D62D" %}
28+
{% assign status_color = "#8A8F1A" %}
2229
{% elsif group.status == "Active" %}
2330
{% assign status_color = "#78c315" %}
2431
{% endif %}
25-
<div class="swiper-slide">
26-
<div class="testimonial-wrap">
27-
<div class="testimonial-item">
28-
<div class="d-flex align-items-center info-box">
29-
<div>
30-
<h3><a href="{{group.url}}"><img src="/favicon.ico"
31-
style="width: 30px; vertical-align: middle;" /> {{group.title}}</a></h3>
32-
<h4>{{group.description}}</h4>
33-
<h4 style="color: #3a3a3a; padding-top: 1em;">
34-
<i class="fas fa-users"></i>&nbsp;&nbsp;{{group.members | size}} Members &mdash;
35-
<i class="fas fa-circle-notch" style="color: {{status_color}}"></i>
36-
&nbsp;{{group.status}}
37-
</h4>
38-
</div>
39-
</div>
32+
<a class="wg-index-card" href="{{ group.url }}" style="--status-color: {{ status_color }};">
33+
<div class="wg-index-card-top">
34+
<div class="wg-index-title">
35+
<img src="/favicon.ico" alt="WCI" />
36+
<span>{{ group.title }}</span>
4037
</div>
38+
<span class="wg-index-pill">
39+
<span class="wg-index-pill-dot"></span>
40+
{{ group.status }}
41+
</span>
42+
</div>
43+
<p>{{ group.description }}</p>
44+
<div class="wg-index-meta">
45+
<span><i class="fas fa-users"></i> {{ group.members | size }} members</span>
46+
<span class="wg-index-link">Explore</span>
4147
</div>
42-
</div>
48+
</a>
4349
{% endfor %}
50+
</div>
51+
</div>
52+
</section>
4453

45-
<!-- External WGs-->
54+
<section class="wg-index-section wg-index-section-alt">
55+
<div class="container" data-aos="fade-up">
56+
<div class="wg-index-header">
57+
<h2>External Working Groups</h2>
58+
<p>Related efforts from other communities.</p>
59+
</div>
60+
<div class="wg-index-grid">
4661
{% assign groups = site.data.working_groups | sort: "name" %}
4762
{% for group in groups %}
48-
{% assign status_color = "#8CCA60" %}
63+
{% assign status_color = "#8B949E" %}
4964
{% if group.status == "Establishing" %}
50-
{% assign status_color = "#D4D62D" %}
51-
{% elsif group.status == "Establishing" %}
65+
{% assign status_color = "#8A8F1A" %}
66+
{% elsif group.status == "Active" %}
5267
{% assign status_color = "#78c315" %}
5368
{% endif %}
54-
<div class="swiper-slide">
55-
<div class="testimonial-wrap">
56-
<div class="testimonial-item">
57-
<div class="d-flex align-items-center info-box">
58-
<div>
59-
<h3><a href="{{group.link}}" target="_blank">{{group.name}}</a></h3>
60-
<h4>{{group.description}}</h4>
61-
<h4 style="color: #3a3a3a; padding-top: 1em;">
62-
<i class="fas fa-circle-notch" style="color: {{status_color}}"></i>
63-
&nbsp;{{group.status}}
64-
</h4>
65-
</div>
66-
</div>
69+
<a class="wg-index-card" href="{{ group.link }}" target="_blank" rel="noopener" style="--status-color: {{ status_color }};">
70+
<div class="wg-index-card-top">
71+
<div class="wg-index-title">
72+
<span>{{ group.name }}</span>
6773
</div>
74+
<span class="wg-index-pill">
75+
<span class="wg-index-pill-dot"></span>
76+
{{ group.status }}
77+
</span>
78+
</div>
79+
<p>{{ group.description }}</p>
80+
<div class="wg-index-meta">
81+
<span>External group</span>
82+
<span class="wg-index-link">Visit</span>
6883
</div>
69-
</div>
84+
</a>
7085
{% endfor %}
71-
7286
</div>
7387
</div>
74-
</section>
88+
</section>

0 commit comments

Comments
 (0)