Skip to content

Commit e837fa1

Browse files
rafaelfsilvarafaelfsilva
committed
improving website layout
1 parent b835988 commit e837fa1

2 files changed

Lines changed: 177 additions & 26 deletions

File tree

‎assets/css/styles.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6571,6 +6571,134 @@ canvas{
65716571
color: var(--color-secondary);
65726572
}
65736573

6574+
.summit-index-hero {
6575+
padding: 4em 0 2.5em;
6576+
background: #ffffff;
6577+
}
6578+
6579+
.summit-index-hero-card {
6580+
background: #ffffff;
6581+
border-radius: var(--radius-xl);
6582+
padding: 2.5em;
6583+
box-shadow: var(--shadow-md);
6584+
border: 1px solid #ededed;
6585+
}
6586+
6587+
.summit-index-hero-card h1 {
6588+
font-size: 2.4em;
6589+
margin-bottom: 0.6em;
6590+
}
6591+
6592+
.summit-index-hero-card p {
6593+
color: #4a4a4a;
6594+
max-width: 44em;
6595+
}
6596+
6597+
.summit-index-eyebrow {
6598+
text-transform: uppercase;
6599+
font-size: 0.8em;
6600+
letter-spacing: 0.2em;
6601+
color: #6c6c6c;
6602+
margin-bottom: 0.6em;
6603+
font-weight: 600;
6604+
}
6605+
6606+
.summit-index-section {
6607+
padding: 2.5em 0 4em;
6608+
background: #f7f7f4;
6609+
}
6610+
6611+
.summit-index-header {
6612+
margin-bottom: 2em;
6613+
}
6614+
6615+
.summit-index-header h2 {
6616+
margin-bottom: 0.4em;
6617+
}
6618+
6619+
.summit-index-header p {
6620+
color: #5b5b5b;
6621+
margin: 0;
6622+
}
6623+
6624+
.summit-index-grid {
6625+
display: grid;
6626+
grid-template-columns: repeat(2, minmax(0, 1fr));
6627+
gap: 1.2em;
6628+
}
6629+
6630+
.summit-index-card {
6631+
display: flex;
6632+
flex-direction: column;
6633+
gap: 1em;
6634+
padding: 1.2em;
6635+
background: #ffffff;
6636+
border-radius: 1.2em;
6637+
border: 1px solid #ededed;
6638+
box-shadow: 0 12px 24px rgb(82 90 101 / 10%);
6639+
text-decoration: none;
6640+
color: inherit;
6641+
transition: transform 0.2s ease, box-shadow 0.2s ease;
6642+
}
6643+
6644+
.summit-index-card:hover {
6645+
transform: translateY(-4px);
6646+
box-shadow: 0 16px 30px rgb(82 90 101 / 16%);
6647+
}
6648+
6649+
.summit-index-media {
6650+
border-radius: 0.9em;
6651+
overflow: hidden;
6652+
border: 1px solid #ededed;
6653+
background: #f4f1ea;
6654+
}
6655+
6656+
.summit-index-media img {
6657+
width: 100%;
6658+
height: 180px;
6659+
object-fit: cover;
6660+
display: block;
6661+
}
6662+
6663+
.summit-index-body h3 {
6664+
margin-bottom: 0.35em;
6665+
font-size: 1.1em;
6666+
line-height: 1.3;
6667+
}
6668+
6669+
.summit-index-body p {
6670+
color: #5b5b5b;
6671+
margin: 0 0 0.9em;
6672+
line-height: 1.4;
6673+
}
6674+
6675+
.summit-index-date {
6676+
display: inline-block;
6677+
font-size: 0.75em;
6678+
color: #6b6b6b;
6679+
margin-bottom: 0.45em;
6680+
text-transform: uppercase;
6681+
letter-spacing: 0.08em;
6682+
}
6683+
6684+
.summit-index-meta {
6685+
display: flex;
6686+
align-items: center;
6687+
justify-content: space-between;
6688+
gap: 0.6em;
6689+
font-size: 0.9em;
6690+
color: #5b5b5b;
6691+
}
6692+
6693+
.summit-index-badge img {
6694+
height: 2em;
6695+
}
6696+
6697+
.summit-index-link {
6698+
font-weight: 600;
6699+
color: var(--color-secondary);
6700+
}
6701+
65746702
.wg-role-pill {
65756703
color: #aa6821;
65766704
border: 1px solid #aa6821;
@@ -6674,6 +6802,14 @@ pre {
66746802
.bof-panel {
66756803
padding: 1.5em;
66766804
}
6805+
6806+
.summit-index-hero-card {
6807+
padding: 1.7em;
6808+
}
6809+
6810+
.summit-index-hero-card h1 {
6811+
font-size: 1.9em;
6812+
}
66776813
}
66786814

66796815
@media (max-width: 1200px) {
@@ -6688,6 +6824,10 @@ pre {
66886824
.bof-index-grid {
66896825
grid-template-columns: 1fr;
66906826
}
6827+
6828+
.summit-index-grid {
6829+
grid-template-columns: repeat(2, minmax(0, 1fr));
6830+
}
66916831
}
66926832

66936833
@media (max-width: 768px) {
@@ -6702,6 +6842,10 @@ pre {
67026842
.bof-index-grid {
67036843
grid-template-columns: 1fr;
67046844
}
6845+
6846+
.summit-index-grid {
6847+
grid-template-columns: 1fr;
6848+
}
67056849
}
67066850

67076851
.breadcrumb {

‎page_summits.html‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,44 @@
44
permalink: /summits
55
---
66

7-
<div class="container text-center" data-aos="fade-up" style="padding: 4em 0; margin-bottom: 0;">
8-
<h4>Pioneering <strong style="color: #db8e1b">Workflow Summit</strong> Series</h4>
9-
<p>Bringing together diverse experts across workflow ecosystems to collaborate, innovate, and address the most
10-
pressing challenges facing our community.</p>
11-
</div>
7+
<section class="summit-index-hero">
8+
<div class="container" data-aos="fade-up">
9+
<div class="summit-index-hero-card">
10+
<div class="summit-index-eyebrow">Workflows Community Summits</div>
11+
<h1>Pioneering the Workflow Summit series</h1>
12+
<p>Bringing together diverse experts across workflow ecosystems to collaborate, innovate, and address the most pressing challenges facing our community.</p>
13+
</div>
14+
</div>
15+
</section>
1216

13-
<section id="recent-posts" class="recent-posts sections-bg">
17+
<section class="summit-index-section">
1418
<div class="container" data-aos="fade-up">
15-
<div class="row gy-4">
19+
<div class="summit-index-header">
20+
<h2>Summit editions</h2>
21+
<p>Explore recent and past summits.</p>
22+
</div>
23+
<div class="summit-index-grid">
1624
{% assign summits = site.summits | sort: 'order' | reverse %}
1725
{% for summit in summits %}
18-
<div class="col-lg-4">
19-
<article>
20-
<div class="post-img">
21-
<img src="{{summit.image}}" alt="" class="img-fluid">
22-
</div>
23-
<p class="post-category">{{summit.event_date | date: "%b %d, %Y" }}</p>
24-
<h2 class="title">
25-
<a href="{{summit.url}}">{{summit.title}}</a>
26-
</h2>
27-
<div class="d-flex align-items-center">
28-
<div class="post-meta">
29-
<p class="post-author">{{summit.subtitle}}</p>
30-
{% if summit.report_link %}
31-
<img src="{{summit.report_badge}}" alt="DOI" style="padding-top: 0.5em" />
32-
{% endif %}
33-
</div>
26+
<a class="summit-index-card" href="{{ summit.url }}">
27+
<div class="summit-index-media">
28+
<img src="{{ summit.image }}" alt="{{ summit.title }}" />
29+
</div>
30+
<div class="summit-index-body">
31+
<span class="summit-index-date">{{ summit.event_date | date: "%b %d, %Y" }}</span>
32+
<h3>{{ summit.title }}</h3>
33+
<p>{{ summit.subtitle }}</p>
34+
<div class="summit-index-meta">
35+
{% if summit.report_link %}
36+
<span class="summit-index-badge">
37+
<img src="{{ summit.report_badge }}" alt="DOI" />
38+
</span>
39+
{% endif %}
40+
<span class="summit-index-link">View details</span>
3441
</div>
35-
</article>
36-
</div>
42+
</div>
43+
</a>
3744
{% endfor %}
3845
</div>
3946
</div>
40-
</section>
47+
</section>

0 commit comments

Comments
 (0)