Skip to content

Commit 3c731db

Browse files
federicobucchifedericobucchi
committed
Add social element list
1 parent 1d40a44 commit 3c731db

File tree

6 files changed

+144
-28
lines changed

6 files changed

+144
-28
lines changed

‎_data/events.yaml

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
# - name: "Conference name"
2-
# description: "Conference description"
3-
# date: 2024-04-29 18:00:00
4-
# link: "https://www.apple.com"
1+
# - name: "ServerSide.swift Conference"
2+
# description: "Description Text"
3+
# date: YYYY-MM-DD HH:MM:SS
4+
# location: "Location Text"
5+
# link: "URL"

‎_data/socials.yaml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# - name: "Title Text"
2+
# description: "Description Text"
3+
# date: YYYY-MM-DD HH:MM:SS
4+
# link: "URL"
5+
# external: true

‎_includes/list-element.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<li>
2+
<h4>
3+
<a target="{% if include.element.external == true %}_blank{% endif %}" href="{{ include.element.link }}">{{ include.element.name }}</a>
4+
</h4>
5+
<div class="date">
6+
<time pubdate datetime="{{ include.element.date | date_to_xmlschema }}">
7+
{{ include.element.date | date: "%B %-d, %Y" }}
8+
</time>
9+
{% if include.element.location and include.element.location != "" %}
10+
<span class="location"> - {{ include.element.location }}</span>
11+
{% endif %}
12+
</div>
13+
{% if include.element.description and include.element.description != "" %}
14+
<p>{{ include.element.description }}</p>
15+
{% endif %}
16+
</li>

‎assets/images/icon-discourse.svg

+2
Loading

‎assets/stylesheets/pages/_landing.scss

+99-9
Original file line numberDiff line numberDiff line change
@@ -172,11 +172,16 @@
172172

173173
.community {
174174
list-style: none;
175-
display: grid;
176175
gap: 1rem;
177176
padding: 0;
177+
display: grid;
178+
gap: 1rem;
178179
grid-template-columns: repeat(2, 1fr);
179180

181+
p {
182+
color: var(--color-secondary-label);
183+
}
184+
180185
@media only screen and (max-width: 767px) {
181186
h4 {
182187
font-size: 1.25em;
@@ -191,17 +196,53 @@
191196
}
192197
}
193198

199+
.article-list {
200+
flex-grow: 1;
201+
padding-bottom: 2rem;
202+
203+
li {
204+
padding-top: 1.6rem;
205+
206+
&:first-child {
207+
p {
208+
font-size: 18px;
209+
}
210+
}
211+
212+
p {
213+
font-size: 16px;
214+
margin-bottom: 0;
215+
}
216+
}
217+
}
218+
194219
&.connect-only {
195220
display: block;
196221

197-
.link-grid {
198-
ul {
199-
@media (min-width: 1000px) {
200-
display: grid;
201-
grid-template-columns: repeat(3, 1fr);
222+
& > li {
223+
display: grid;
224+
grid-gap: 20px;
225+
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
226+
}
227+
228+
.article-list {
229+
grid-column: span 2;
230+
}
231+
232+
.no-grid {
233+
display: block;
234+
}
202235

203-
li {
204-
padding-top: 0;
236+
.link-grid {
237+
&.link-grid-only {
238+
ul {
239+
@media (min-width: 1000px) {
240+
display: grid;
241+
grid-template-columns: repeat(3, 1fr);
242+
243+
li {
244+
padding-top: 0;
245+
}
205246
}
206247
}
207248
}
@@ -220,6 +261,45 @@
220261
}
221262
}
222263
}
264+
265+
&.link-grid-small {
266+
ul {
267+
display: flex;
268+
justify-content: flex-end;
269+
270+
li {
271+
padding: 0;
272+
273+
a {
274+
padding: 0;
275+
border: 0;
276+
277+
img {
278+
width: 32px;
279+
height: 32px;
280+
}
281+
282+
&:hover {
283+
background-color: initial;
284+
285+
img {
286+
filter: var(--icon-filter);
287+
}
288+
}
289+
290+
&.link-external {
291+
&:after {
292+
content: none;
293+
}
294+
}
295+
296+
span {
297+
display: none;
298+
}
299+
}
300+
}
301+
}
302+
}
223303
}
224304

225305
& > li {
@@ -279,8 +359,14 @@
279359
-webkit-box-orient: vertical;
280360
-webkit-line-clamp: 2;
281361
text-overflow: ellipsis;
362+
margin-bottom: 0;
282363
}
283364
}
365+
366+
.location {
367+
font-size: 12px;
368+
color: var(--color-secondary-label);
369+
}
284370
}
285371

286372
img {
@@ -293,10 +379,14 @@
293379
h4 {
294380
border: 0;
295381
padding: 0;
382+
margin-bottom: 0;
383+
}
384+
385+
.date {
386+
margin-bottom: .4em;
296387
}
297388

298389
time {
299-
display: block;
300390
text-transform: uppercase;
301391
font-size: 12px;
302392
color: var(--color-figure-gray-tertiary);

‎index.md

+17-15
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,22 @@ atom: true
9191

9292
## Community
9393

94+
{% assign socials = site.data.socials %}
9495
{% assign events = site.data.events | where_exp:"event", "event.date > site.time" %}
9596
<ul class="community {% unless events.size > 0 %}connect-only{% endunless %}" markdown="1">
96-
<li>
97-
<h3>Connect</h3>
98-
<p>Stay up-to-date with the latest in the Swift community.</p>
99-
<div class="link-grid">
97+
<li class="{% unless socials.size > 0 and events.size > 0 %}no-grid{% endunless %}">
98+
<div>
99+
<h3>Connect</h3>
100+
<p>Stay up-to-date with the latest in the Swift community.</p>
101+
</div>
102+
{% if socials.size > 0 %}
103+
<ul class="article-list">
104+
{%- for social in socials %}
105+
{% include list-element.html element=social %}
106+
{% endfor %}
107+
</ul>
108+
{% endif %}
109+
<div class="link-grid {% unless socials.size > 0 %}link-grid-only{% endunless %} {% if socials.size > 0 %}link-grid-small{% endif %}">
100110
<ul>
101111
<li>
102112
<a href="/blog/">
@@ -105,11 +115,11 @@ atom: true
105115
</li>
106116
<li>
107117
<a href="https://forums.swift.org">
108-
<img src="/assets/images/icon-swift.svg" /><span>Visit the Swift forums</span>
118+
<img src="/assets/images/icon-discourse.svg" /><span>Visit the Swift forums</span>
109119
</a>
110120
</li>
111121
<li>
112-
<a href="https://twitter.com/swiftlang" class="link-external">
122+
<a target="_blank" href="https://twitter.com/swiftlang" class="link-external">
113123
<img src="/assets/images/icon-x.svg" class="with-invert" /><span>Follow @swiftlang on X</span>
114124
</a>
115125
</li>
@@ -122,15 +132,7 @@ atom: true
122132
<p>Check the upcoming Swift related events.</p>
123133
<ul class="event-list">
124134
{%- for event in events %}
125-
<li>
126-
<h4>
127-
<a href="#">{{ event.name }}</a>
128-
</h4>
129-
<time pubdate datetime="{{ event.date | date_to_xmlschema }}">
130-
{{ event.date | date: "%B %-d, %Y" }}
131-
</time>
132-
<p>{{ event.description }}</p>
133-
</li>
135+
{% include list-element.html element=event %}
134136
{% endfor %}
135137
</ul>
136138
</li>

0 commit comments

Comments
 (0)