Skip to content

Commit 44c106c

Browse files
rafaelfsilvarafaelfsilva
committed
improving website layout
1 parent cbd4520 commit 44c106c

File tree

5 files changed

+463
-137
lines changed

5 files changed

+463
-137
lines changed

‎_includes/head.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<link rel="apple-touch-icon" href="/favicon.ico" type="image/x-icon" />
2121

2222
<!-- stylesheets -->
23-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,700,800" />
23+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap" />
2424
<link rel="stylesheet" href="/assets/css/aos.css">
2525
<link rel="stylesheet" href="/assets/css/fontawesome-all.min.css" />
2626
<link rel="stylesheet" href="/assets/css/swiper-bundle.min.css" />

‎_includes/header.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<header id="header" class="header d-flex align-items-center sticked stikcy-menu">
22
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
33
<a href="/" class="logo d-flex align-items-center">
4-
<img src="/images/wci-logo-horizontal-white.png" alt="logo">
4+
<img src="/images/wci-logo-horizontal-white.png" alt="logo" class="logo-default">
5+
<img src="/images/wci-logo-horizontal.png" alt="logo" class="logo-sticky">
56
</a>
67
<nav id="navbar" class="navbar">
78
<ul>

‎_layouts/default.html‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,52 +15,53 @@
1515
<div id="particles-js"></div>
1616
<div id="repulse-circle-div"></div>
1717
<div class="container position-relative">
18-
<div class="row gy-5 aos-init aos-animate">
19-
<div class="col-lg-8 dark-bg order-lg-1 d-flex flex-column justify-content-start text-left caption">
20-
<h2 data-aos="fade-up">Elevating community-centered scientific workflow solutions <span style="color: #FFB020">through
18+
<div class="row gy-5 aos-init aos-animate hero-grid">
19+
<div class="col-lg-7 d-flex flex-column justify-content-start text-left hero-copy">
20+
<h2 data-aos="fade-up" data-aos-delay="100">Elevating community-centered scientific workflow solutions <span>through
2121
collective expertise</span><span class="circle" data-aos="fade-right"
2222
data-aos-delay="800">.</span></h2>
23-
<p data-aos="fade-up" data-aos-delay="400">Our goal is to bring the workflows community together
24-
(users, developers, researchers, and facilities) to provide <strong>community resources and
25-
capabilities</strong> to enable scientists and workflow systems developers to discover
26-
software products, related efforts, events, technical reports, etc. and engage in community-wide
27-
efforts to tackle workflows grand challenges.</p>
28-
<div class="social" data-aos="fade-up" data-aos-delay="600">
23+
<p class="hero-lead" data-aos="fade-up" data-aos-delay="200">We bring together users, developers, researchers, and facilities to
24+
share resources, showcase systems, and align on the grand challenges shaping workflow science.</p>
25+
<div class="hero-actions" data-aos="fade-up" data-aos-delay="300">
26+
<a href="/talks" class="btn-outer">Explore talks</a>
27+
<a href="/terminology" class="btn-outer">See our terminology</a>
28+
<a href="/systems" class="btn-outer">Explore systems</a>
29+
</div>
30+
<div class="social hero-social" data-aos="fade-up" data-aos-delay="400">
2931
<a href="https://www.youtube.com/channel/UCqCnXqWqKe9vF6cqKOj1CYw" target="_blank">
30-
<i class="fab fa-youtube" style="font-size: 1.5em; color: #fff !important"></i>
32+
<i class="fab fa-youtube"></i>
3133
</a>
3234
<a href="mailto:contact@workflows.community">
33-
<i class="fa fa-envelope" style="font-size: 1.5em; color: #fff !important"></i>
35+
<i class="fa fa-envelope"></i>
3436
</a>
3537
<a href="https://linkedin.com/company/workflows-community" target="_blank">
36-
<i class="fab fa-linkedin" style="font-size: 1.5em; color: #fff !important"></i>
38+
<i class="fab fa-linkedin"></i>
3739
</a>
3840
<a href="https://join.slack.com/t/workflowscommunity/shared_invite/zt-1s8u3ocgm-gNdsgRJgy6O2GNSFUf9eDQ"
3941
target="_blank">
40-
<i class="fab fa-slack" style="font-size: 1.5em; color: #fff !important"></i>
42+
<i class="fab fa-slack"></i>
4143
</a>
4244
</div>
4345
</div>
44-
<div class="col-lg-4 dark-bg order-lg-1 d-flex flex-column justify-content-start text-left caption">
45-
<div class="row" style="border: 3px solid #fff; border-radius: .5em">
46-
{% assign talks = site.talks| where: "given", false | sort: 'order'%}
47-
{% for talk in talks limit: 1 %}
48-
<div class="col-lg-12" style="padding: 0; background-color: rgba(109, 84, 170, 0.5);">
49-
<a href="/talks"><img src="/images/talks/talks-banner.png" width="100%" style="border-radius: 0.5em;" /></a>
46+
<div class="col-lg-5 d-flex flex-column justify-content-start hero-spotlight">
47+
{% assign talks = site.talks| where: "given", false | sort: 'order'%}
48+
{% for talk in talks limit: 1 %}
49+
<div class="hero-card" data-aos="fade-left" data-aos-delay="200">
50+
<a href="/talks" class="hero-card-media">
51+
<img src="/images/talks/talks-banner.png" alt="Community talk banner" />
52+
</a>
53+
<div class="hero-card-body">
54+
<span class="hero-tag">Community talk</span>
55+
<h3 class="hero-card-title"><a href="{{ talk.url }}">{{ talk.title }}</a></h3>
56+
<p class="hero-card-meta">{{ talk.authors }}</p>
57+
<p class="hero-card-date">{{ talk.event_date }}</p>
5058
</div>
51-
<div class="col-lg-12" style="background-color: rgba(109, 84, 170, 0.5); padding: 1em;">
52-
<strong><a href="{{ talk.url }}" style="color: #fff">{{ talk.title }}</a></strong><br />
53-
<span style="color: #aaa">{{ talk.authors }}</span><br />
54-
{{ talk.event_date }}
55-
<br />
59+
<div class="hero-card-footer">
60+
<a href="{{ talk.url }}" class="hero-card-link">Learn more</a>
5661
</div>
57-
<a href="{{ talk.url }}" class="col-lg-12" style="background-color: #fff; padding: 0.5em; text-align: center; font-size: 0.9em;">
58-
LEARN MORE >
59-
</a>
60-
{% endfor %}
6162
</div>
63+
{% endfor %}
6264
</div>
63-
6465
</div>
6566
</div>
6667
</section>
@@ -73,4 +74,4 @@ <h2 data-aos="fade-up">Elevating community-centered scientific workflow solution
7374

7475
</body>
7576

76-
</html>
77+
</html>

0 commit comments

Comments
 (0)