Skip to content

Commit bee6f50

Browse files
mremre
committed
Revamp Learn page layout and improve styling
- Add title and description to Learn section front matter - Refactor learn.html for improved structure and content hierarchy - Enhance .learn-list and related styles for better spacing and readability - Add introductory text to resource sections for clarity
1 parent 5cb1531 commit bee6f50

3 files changed

Lines changed: 152 additions & 118 deletions

File tree

‎content/learn/_index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
+++
2+
title = "Learn"
3+
description = "A collection of resources, case studies, and guides to help you learn Rust and adopt it in your organization."
24
sort_by = "date"
35
insert_anchor_links = "heading"
46
template = "learn.html"

‎sass/_learn.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
.learn-list {
66
list-style-type: none;
77
padding: 0;
8+
margin-top: 30px;
9+
margin-bottom: 60px;
810
border: 1px solid $heroDark;
911
border-radius: 8px;
1012
}
@@ -30,14 +32,14 @@
3032
display: block;
3133
text-decoration: none;
3234
color: inherit;
33-
padding: 20px;
35+
padding: 30px;
3436
}
3537

3638
.learn-item {
3739
display: flex;
3840
justify-content: space-between;
3941
align-items: center;
40-
gap: 20px;
42+
gap: 40px;
4143
}
4244

4345
.learn-item img {
@@ -59,6 +61,7 @@
5961
font-size: 0.9em;
6062
opacity: 0.8;
6163
line-height: 1.4;
64+
margin-top: 15px;
6265
margin-bottom: 15px;
6366
}
6467

@@ -76,7 +79,7 @@
7679
.card-item {
7780
display: flex;
7881
align-items: center;
79-
gap: 16px;
82+
gap: 24px;
8083
padding: 12px 0;
8184
}
8285

@@ -132,7 +135,7 @@
132135
}
133136

134137
.learn-link {
135-
padding: 15px;
138+
padding: 20px;
136139
}
137140
}
138141

‎templates/learn.html‎

Lines changed: 143 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,149 @@
11
{% extends "base.html" %} {% block content %}
2-
<article class="section-wrapper">
3-
<h1>{{section.title}}</h1>
4-
{{ section.description | safe }}
5-
<div>{{ section.content | safe }}</div>
6-
7-
<h2>Learning Resources</h2>
8-
<ul class="learn-list">
9-
<li>
10-
<a href="/blog/rust-learning-resources-2026/" class="learn-link">
11-
<div class="learn-item">
12-
<img src="/learn/ferris-learn.png" />
13-
<div class="learn-content">
14-
<div class="learn-title">Rust Learning Resources</div>
15-
<div class="learn-description">
16-
Want to learn Rust? The resources you choose will have a big
17-
impact on your learning progress. I've curated a list of workshops
18-
and tutorials that I would recommend to professional developers
19-
who need to get up to speed with Rust quickly.
20-
</div>
21-
</div>
22-
<div class="learn-details">
23-
<div class="chevron"></div>
24-
</div>
25-
</div>
26-
</a>
27-
</li>
28-
<li>
29-
<a href="/blog/idiomatic-rust-resources/" class="learn-link">
30-
<div class="learn-item">
31-
<img src="/learn/ferris-master.png" />
32-
<div class="learn-content">
33-
<div class="learn-title">Idiomatic Rust</div>
34-
<div class="learn-description">
35-
Already know Rust? Want to get better at writing ergonomic,
36-
idiomatic Rust code? A while ago, I started a GitHub repository to
37-
collect learning material for experienced Rust developers. Over
38-
time, it has grown into a popular project with many awesome
39-
contributions. I've decided to turn it into a searchable table.
40-
</div>
41-
</div>
42-
<div class="learn-details">
43-
<div class="chevron"></div>
44-
</div>
45-
</div>
46-
</a>
47-
</li>
48-
</ul>
49-
50-
{% set sorted_pages = section.pages | filter(attribute="draft", value=false) |
51-
sort(attribute="date") %} {% set case_studies = sorted_pages |
52-
filter(attribute="extra.series", value="Company Case Studies") %} {% if
53-
case_studies %}
54-
<h2>Company Case Studies</h2>
55-
<p class="learn-description">
56-
What are the challenges and opportunities that companies face when adopting
57-
Rust? What advice do they have for others considering Rust? Read on to find
58-
out!
59-
</p>
60-
61-
<ul class="learn-list">
62-
{% for page in case_studies %}
63-
<li>
64-
<a href="{{ page.permalink }}" class="learn-link">
65-
<div class="learn-item">
66-
<img src="{{ page.permalink }}/{{ page.extra.card }}" />
67-
<div class="learn-content">
68-
<div class="learn-title">{{ page.title }}</div>
69-
<div class="learn-description">{{ page.description }}</div>
70-
</div>
71-
<div class="learn-details">
72-
<div class="chevron"></div>
73-
</div>
74-
</div>
75-
</a>
76-
</li>
77-
{% endfor %}
78-
</ul>
79-
{% endif %}
2+
<article>
3+
<div class="article-heading">
4+
<h1>{{section.title}}</h1>
5+
{{ section.description | safe }}
6+
<div>{{ section.content | safe }}</div>
7+
</div>
8+
<div class="article-content-wrapper">
9+
<div class="article-content">
10+
<h2>Learning Resources</h2>
11+
<p class="learn-description">
12+
Whether you are just starting out with Rust or looking to master
13+
advanced concepts, these curated resources will help you level
14+
up your skills.
15+
</p>
16+
<ul class="learn-list">
17+
<li>
18+
<a
19+
href="/blog/rust-learning-resources-2026/"
20+
class="learn-link"
21+
>
22+
<div class="learn-item">
23+
<img src="/learn/ferris-learn.png" />
24+
<div class="learn-content">
25+
<div class="learn-title">
26+
Rust Learning Resources
27+
</div>
28+
<div class="learn-description">
29+
Want to learn Rust? The resources you choose
30+
will have a big impact on your learning
31+
progress. I've curated a list of workshops
32+
and tutorials that I would recommend to
33+
professional developers who need to get up
34+
to speed with Rust quickly.
35+
</div>
36+
</div>
37+
<div class="learn-details">
38+
<div class="chevron"></div>
39+
</div>
40+
</div>
41+
</a>
42+
</li>
43+
<li>
44+
<a
45+
href="/blog/idiomatic-rust-resources/"
46+
class="learn-link"
47+
>
48+
<div class="learn-item">
49+
<img src="/learn/ferris-master.png" />
50+
<div class="learn-content">
51+
<div class="learn-title">Idiomatic Rust</div>
52+
<div class="learn-description">
53+
Already know Rust? Want to get better at
54+
writing ergonomic, idiomatic Rust code? A
55+
while ago, I started a GitHub repository to
56+
collect learning material for experienced
57+
Rust developers. Over time, it has grown
58+
into a popular project with many awesome
59+
contributions. I've decided to turn it into
60+
a searchable table.
61+
</div>
62+
</div>
63+
<div class="learn-details">
64+
<div class="chevron"></div>
65+
</div>
66+
</div>
67+
</a>
68+
</li>
69+
</ul>
8070

71+
{% set sorted_pages = section.pages | filter(attribute="draft", value=false) | sort(attribute="date") %}
72+
{% set case_studies = sorted_pages | filter(attribute="extra.series", value="Company Case Studies") %}
73+
{% if case_studies %}
74+
<h2>Company Case Studies</h2>
75+
<p class="learn-description">
76+
What are the challenges and opportunities that companies face
77+
when adopting Rust? What advice do they have for others
78+
considering Rust? Read on to find out!
79+
</p>
8180

82-
{% set guides = sorted_pages | filter(attribute="extra.series",
83-
value="Migration Guides") %} {% if guides %}
84-
<h2>Migration Guides</h2>
85-
<p class="learn-description">
86-
Are you considering migrating your codebase to Rust? These guides will help
87-
you understand the process and make the transition as smooth as possible.
88-
Pick your current language below:
89-
</p>
90-
<ul class="learn-list">
91-
{% for page in guides %}
92-
<li>
93-
<a href="{{ page.permalink }}" class="learn-link">
94-
<div class="card-item">
95-
<div class="card-logo-wrapper">
96-
<img
97-
class="card-img invert"
98-
src="{{ page.permalink }}/{{ page.extra.icon }}"
99-
alt="{{ page.title }}"
100-
/>
101-
</div>
102-
<div class="card-content">
103-
<div class="card-title">{{ page.title }}</div>
104-
<div class="card-meta">
105-
{% if page.updated %}
106-
<time datetime="{{ page.updated }}">{{ page.updated }}</time>
107-
{% else %}
108-
<time datetime="{{ page.date }}">{{ page.date }}</time>
109-
{% endif %}
110-
</div>
111-
</div>
112-
<div class="chevron"></div>
81+
<ul class="learn-list">
82+
{% for page in case_studies %}
83+
<li>
84+
<a href="{{ page.permalink }}" class="learn-link">
85+
<div class="learn-item">
86+
<img
87+
src="{{ page.permalink }}/{{ page.extra.card }}"
88+
/>
89+
<div class="learn-content">
90+
<div class="learn-title">{{ page.title }}</div>
91+
<div class="learn-description">
92+
{{ page.description }}
93+
</div>
94+
</div>
95+
<div class="learn-details">
96+
<div class="chevron"></div>
97+
</div>
98+
</div>
99+
</a>
100+
</li>
101+
{% endfor %}
102+
</ul>
103+
{% endif %}
104+
{% set guides = sorted_pages | filter(attribute="extra.series", value="Migration Guides") %}
105+
{% if guides %}
106+
<h2>Migration Guides</h2>
107+
<p class="learn-description">
108+
Are you considering migrating your codebase to Rust? These
109+
guides will help you understand the process and make the
110+
transition as smooth as possible. Pick your current language
111+
below:
112+
</p>
113+
<ul class="learn-list">
114+
{% for page in guides %}
115+
<li>
116+
<a href="{{ page.permalink }}" class="learn-link">
117+
<div class="card-item">
118+
<div class="card-logo-wrapper">
119+
<img
120+
class="card-img invert"
121+
src="{{ page.permalink }}/{{ page.extra.icon }}"
122+
alt="{{ page.title }}"
123+
/>
124+
</div>
125+
<div class="card-content">
126+
<div class="card-title">{{ page.title }}</div>
127+
<div class="card-meta">
128+
{% if page.updated %}
129+
<time datetime="{{ page.updated }}"
130+
>{{ page.updated }}</time
131+
>
132+
{% else %}
133+
<time datetime="{{ page.date }}"
134+
>{{ page.date }}</time
135+
>
136+
{% endif %}
137+
</div>
138+
</div>
139+
<div class="chevron"></div>
140+
</div>
141+
</a>
142+
</li>
143+
{% endfor %}
144+
</ul>
145+
{% endif %} {% include "snippets/newsletter.html" %}
113146
</div>
114-
</a>
115-
</li>
116-
{% endfor %}
117-
</ul>
118-
{% endif %} {% include "snippets/newsletter.html" %}
147+
</div>
119148
</article>
120149
{% endblock content %}

0 commit comments

Comments
 (0)