Skip to content

Commit 87ec2d0

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

3 files changed

Lines changed: 310 additions & 32 deletions

File tree

‎Gemfile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,6 @@ gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
1414

1515
gem "webrick", "~> 1.7"
1616
gem "ffi", "1.16.3"
17+
gem "csv"
18+
gem "base64"
19+
gem "bigdecimal"

‎_layouts/working_groups.html‎

Lines changed: 65 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,77 @@
22
layout: page
33
---
44

5-
{% assign status_color = "color-2" %}
5+
{% assign status_color = "#8B949E" %}
66
{% if page.status == "Establishing" %}
7-
{% assign status_color = "#D4D62D" %}
7+
{% assign status_color = "#8A8F1A" %}
88
{% elsif page.status == "Active" %}
99
{% assign status_color = "#78c315" %}
1010
{% endif %}
11+
{% assign members_count = page.members | size %}
1112

12-
<div class="container" data-aos="fade-up" style="padding: 3em 0;">
13+
<div class="container wg-page" data-aos="fade-up" style="padding: 3em 0;">
1314
<div class="row">
14-
<div class="col-lg-8 wg wg-contents">
15-
<p class="breadcrumb">
16-
<a href="/groups">WORKING GROUPS&nbsp;</a> > {{ page.title | upcase }}
17-
</p>
18-
{{content | markdownify}}
19-
</div>
20-
<div class="col-lg-4">
21-
<div class="blog-sidbar">
22-
{% if page.join %}
23-
<a href="{{ page.join }}" target="_blank" class="btn btn-primary mt-3 py-3 px-5"><i
24-
class="fas fa-user-plus"></i> Join</a><br /><br />
25-
{% endif %}
26-
<i class="fas fa-users"></i>&nbsp;&nbsp;{{page.members | size}} members<br />
27-
<i class="fas fa-circle-notch" style="color: {{status_color}}"></i>&nbsp;{{ page.status }}
28-
<br /><br />
29-
<hr />
30-
<h4>Members</h4>
31-
{% for member in page.members %}
32-
{% if member.role %}
33-
<span style="color: #aa6821; border: 1px solid #aa6821; font-size: 0.6em; border-radius: 0.5em; padding: 0.25em 0.5em;">{{member.role}}</span>
34-
{% endif %}
35-
{% if member.link %}
36-
<a href="{{member.link}}" target="_blank">{{member.name}}</a>
37-
{% else %}
38-
{{member.name}}
39-
{% endif %}
40-
<br />
41-
{% endfor %}
15+
<div class="col-lg-12 wg wg-contents">
16+
<div class="wg-hero" style="--status-color: {{ status_color }};">
17+
<div class="wg-hero-card">
18+
<p class="wg-breadcrumb">
19+
<a href="/groups">Working Groups</a>
20+
<span>/</span>
21+
{{ page.title }}
22+
</p>
23+
<div class="wg-hero-eyebrow">Working Group</div>
24+
<h1>{{ page.title }}</h1>
25+
{% if page.description %}
26+
<p class="wg-hero-desc">{{ page.description }}</p>
27+
{% endif %}
28+
<div class="wg-meta">
29+
{% if page.status %}
30+
<span class="wg-pill wg-pill-status">
31+
<span class="wg-pill-dot"></span>
32+
{{ page.status }}
33+
</span>
34+
{% endif %}
35+
<span class="wg-pill wg-pill-count">
36+
<i class="fas fa-users"></i>
37+
{{ members_count }} members
38+
</span>
39+
</div>
40+
<div class="wg-actions">
41+
{% if page.join %}
42+
<a href="{{ page.join }}" target="_blank" rel="noopener" class="btn btn-primary py-3 px-5">
43+
<i class="fas fa-user-plus"></i> Join
44+
</a>
45+
{% endif %}
46+
</div>
47+
</div>
48+
</div>
49+
50+
<div class="wg-members-panel" id="wg-members">
51+
<div class="wg-members-header">
52+
<h3>Members</h3>
53+
<span class="wg-members-count">{{ members_count }} people</span>
54+
</div>
55+
<div class="wg-members-grid">
56+
{% for member in page.members %}
57+
<div class="wg-member-card">
58+
{% if member.role %}
59+
<div class="wg-member-role">{{ member.role }}</div>
60+
{% endif %}
61+
<div class="wg-member-name">
62+
{% if member.link %}
63+
<a href="{{ member.link }}" target="_blank" rel="noopener">{{ member.name }}</a>
64+
{% else %}
65+
{{ member.name }}
66+
{% endif %}
67+
</div>
68+
</div>
69+
{% endfor %}
70+
</div>
71+
</div>
72+
73+
<div class="wg-content-card">
74+
{{ content | markdownify }}
4275
</div>
4376
</div>
4477
</div>
45-
</div>
78+
</div>

‎assets/css/styles.css‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5601,6 +5601,221 @@ canvas{
56015601
margin: 1em 0;
56025602
}
56035603

5604+
.wg-page .breadcrumb {
5605+
margin-bottom: 1.5em;
5606+
}
5607+
5608+
.wg-hero {
5609+
position: relative;
5610+
padding: 1.5em;
5611+
border-radius: var(--radius-xl);
5612+
background: linear-gradient(135deg, #f4f1ea 0%, #f7f7f2 45%, #e6eef2 100%);
5613+
box-shadow: var(--shadow-md);
5614+
overflow: hidden;
5615+
margin-bottom: 2.5em;
5616+
}
5617+
5618+
.wg-hero::before {
5619+
content: "";
5620+
position: absolute;
5621+
inset: 0;
5622+
background: radial-gradient(circle at 15% 20%, rgb(255 255 255 / 55%) 0%, transparent 45%),
5623+
radial-gradient(circle at 85% 30%, rgb(255 255 255 / 35%) 0%, transparent 50%),
5624+
radial-gradient(circle at 55% 80%, rgb(13 17 23 / 8%) 0%, transparent 55%);
5625+
pointer-events: none;
5626+
}
5627+
5628+
.wg-hero-card {
5629+
position: relative;
5630+
z-index: 1;
5631+
background: #ffffff;
5632+
border-radius: var(--radius-lg);
5633+
padding: 2em;
5634+
box-shadow: var(--shadow-sm);
5635+
}
5636+
5637+
.wg-breadcrumb {
5638+
font-size: 0.8em;
5639+
margin: 0 0 1.4em;
5640+
background-color: #f4f4f4;
5641+
padding: 0.4em 0.9em;
5642+
border-radius: 999px;
5643+
display: inline-flex;
5644+
align-items: center;
5645+
gap: 0.5em;
5646+
color: #5b5b5b;
5647+
}
5648+
5649+
.wg-breadcrumb a {
5650+
color: inherit;
5651+
text-decoration: none;
5652+
}
5653+
5654+
.wg-breadcrumb a:hover {
5655+
color: var(--color-secondary);
5656+
}
5657+
5658+
.wg-hero-card h1 {
5659+
font-size: 2.3em;
5660+
margin-bottom: 0.4em;
5661+
}
5662+
5663+
.wg-hero-eyebrow {
5664+
text-transform: uppercase;
5665+
font-size: 0.8em;
5666+
letter-spacing: 0.2em;
5667+
color: #6c6c6c;
5668+
margin-bottom: 0.6em;
5669+
font-weight: 600;
5670+
}
5671+
5672+
.wg-hero-desc {
5673+
font-size: 1.1em;
5674+
color: #4a4a4a;
5675+
max-width: 36em;
5676+
margin-bottom: 1.2em;
5677+
}
5678+
5679+
.wg-meta {
5680+
display: flex;
5681+
flex-wrap: wrap;
5682+
gap: 0.8em;
5683+
align-items: center;
5684+
margin-bottom: 1.5em;
5685+
}
5686+
5687+
.wg-pill {
5688+
display: inline-flex;
5689+
align-items: center;
5690+
gap: 0.45em;
5691+
padding: 0.35em 0.85em;
5692+
border-radius: 999px;
5693+
font-size: 0.85em;
5694+
font-weight: 600;
5695+
border: 1px solid #d5d5d5;
5696+
background: #ffffff;
5697+
color: #1f2a2a;
5698+
}
5699+
5700+
.wg-pill-status {
5701+
border-color: var(--status-color);
5702+
color: var(--status-color);
5703+
}
5704+
5705+
.wg-pill-dot {
5706+
width: 0.6em;
5707+
height: 0.6em;
5708+
border-radius: 999px;
5709+
background: var(--status-color);
5710+
}
5711+
5712+
.wg-actions {
5713+
display: flex;
5714+
flex-wrap: wrap;
5715+
gap: 1em;
5716+
align-items: center;
5717+
}
5718+
5719+
.wg-link {
5720+
font-weight: 600;
5721+
color: var(--text-color);
5722+
text-decoration: none;
5723+
border-bottom: 2px solid rgb(42 180 184 / 40%);
5724+
padding-bottom: 0.1em;
5725+
}
5726+
5727+
.wg-link:hover {
5728+
color: var(--color-secondary);
5729+
border-bottom-color: var(--color-secondary);
5730+
}
5731+
5732+
.wg-content-card {
5733+
background: #ffffff;
5734+
border-radius: var(--radius-lg);
5735+
padding: 2em;
5736+
box-shadow: var(--shadow-sm);
5737+
}
5738+
5739+
.wg-members-panel {
5740+
background: #ffffff;
5741+
border-radius: var(--radius-lg);
5742+
padding: 1.1em;
5743+
box-shadow: var(--shadow-sm);
5744+
margin-bottom: 2em;
5745+
}
5746+
5747+
.wg-members-header {
5748+
display: flex;
5749+
flex-wrap: wrap;
5750+
align-items: baseline;
5751+
gap: 0.4em;
5752+
justify-content: space-between;
5753+
margin-bottom: 0.7em;
5754+
}
5755+
5756+
.wg-members-header h3 {
5757+
margin: 0;
5758+
}
5759+
5760+
.wg-members-count {
5761+
font-weight: 600;
5762+
color: #4a4a4a;
5763+
}
5764+
5765+
.wg-members-grid {
5766+
display: grid;
5767+
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
5768+
gap: 0.4em;
5769+
}
5770+
5771+
.wg-member-card {
5772+
border: 1px solid #e6e6e6;
5773+
border-radius: 0.75em;
5774+
padding: 0.55em 0.65em;
5775+
background: #f5f6f3;
5776+
box-shadow: none;
5777+
display: flex;
5778+
flex-direction: column;
5779+
gap: 0.3em;
5780+
}
5781+
5782+
.wg-member-role {
5783+
font-size: 0.55em;
5784+
font-weight: 700;
5785+
text-transform: uppercase;
5786+
letter-spacing: 0.08em;
5787+
color: #aa6821;
5788+
}
5789+
5790+
.wg-member-name {
5791+
font-weight: 600;
5792+
margin-bottom: 0;
5793+
font-size: 0.9em;
5794+
line-height: 1.2;
5795+
}
5796+
5797+
.wg-member-name a {
5798+
color: inherit;
5799+
text-decoration: none;
5800+
}
5801+
5802+
.wg-member-name a:hover {
5803+
color: var(--color-secondary);
5804+
text-decoration: underline;
5805+
}
5806+
5807+
.wg-role-pill {
5808+
color: #aa6821;
5809+
border: 1px solid #aa6821;
5810+
font-size: 0.55em;
5811+
border-radius: 0.6em;
5812+
padding: 0.12em 0.4em;
5813+
font-weight: 600;
5814+
display: inline-block;
5815+
text-transform: uppercase;
5816+
letter-spacing: 0.05em;
5817+
}
5818+
56045819
pre {
56055820
background-color: #e5e5e5;
56065821
border-radius: 0.5em;
@@ -5619,6 +5834,33 @@ pre {
56195834
padding-left: 1em;
56205835
}
56215836

5837+
@media (max-width: 991px) {
5838+
.wg-hero {
5839+
padding: 1.1em;
5840+
}
5841+
5842+
.wg-hero-card {
5843+
padding: 1.5em;
5844+
}
5845+
5846+
.wg-hero-card h1 {
5847+
font-size: 1.9em;
5848+
}
5849+
5850+
.wg-actions {
5851+
flex-direction: column;
5852+
align-items: flex-start;
5853+
}
5854+
5855+
.wg-content-card {
5856+
padding: 1.5em;
5857+
}
5858+
5859+
.wg-members-panel {
5860+
padding: 0.9em;
5861+
}
5862+
}
5863+
56225864
.breadcrumb {
56235865
font-size: 0.8em;
56245866
margin-bottom: 3em;

0 commit comments

Comments
 (0)