Skip to content

Commit 9f3dccd

Browse files
katshann-raspberrykatshann-raspberry
authored
Merge pull request #4210 from raspberrypi/related-resources
Add related resources to the bottom of each tile page.
2 parents 4b5a6a7 + eef9ce0 commit 9f3dccd

File tree

2 files changed

+84
-42
lines changed

2 files changed

+84
-42
lines changed

‎jekyll-assets/_layouts/boxes.html‎

Lines changed: 60 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,70 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
{% include head.html %}
5-
</head>
6-
<body>
7-
{% include header.html %}
8-
9-
<div class="toptitle">
10-
<h1><a href="/documentation/"><b>Raspberry Pi</b> Documentation</a></h1>
11-
<div id="search-container">
12-
<div id="docsearch" role="search"></div>
13-
</div>
14-
{% include tabs.html %}
3+
4+
<head>
5+
{% include head.html %}
6+
</head>
7+
8+
<body>
9+
{% include header.html %}
10+
11+
<div class="toptitle">
12+
<h1><a href="/documentation/"><b>Raspberry Pi</b> Documentation</a></h1>
13+
<div id="search-container">
14+
<div id="docsearch" role="search"></div>
1515
</div>
16+
{% include tabs.html %}
17+
</div>
1618

17-
<div id="container" role="main">
18-
<section id="box-content">
19-
{% for item in site.data.index.tabs %}
20-
{% if page.dir == item.path or page.dir == "/" and item.default_tab and item.default_tab == "yes" %}
21-
{% for entry in item.subitems %}
22-
{% if entry.path %}
23-
<a class="box" href="{{ site.baseurl }}{{ entry.path }}">
24-
{% else %}
25-
<a class="box" href="{{ entry.url }}">
26-
{% endif %}
27-
<span><img src="{{ site.baseurl }}{{ entry.imagepath }}" width="121" height="121" alt=""></span>
28-
<span class="title">{{ entry.title | markdownify }}</span>
29-
<span>{{ entry.description }}</span>
30-
</a>
31-
{% endfor %}
19+
<div id="container" role="main">
20+
<section id="box-content">
21+
{% for item in site.data.index.tabs %}
22+
{% if page.dir == item.path or page.dir == "/" and item.default_tab and item.default_tab == "yes" %}
23+
{% for entry in item.subitems %}
24+
{% if entry.path %}
25+
<a class="box" href="{{ site.baseurl }}{{ entry.path }}">
26+
{% else %}
27+
<a class="box" href="{{ entry.url }}">
3228
{% endif %}
29+
<span><img src="{{ site.baseurl }}{{ entry.imagepath }}" width="121" height="121" alt=""></span>
30+
<span class="title">{{ entry.title | markdownify }}</span>
31+
<span>{{ entry.description }}</span>
32+
</a>
33+
{% endfor %}
34+
{% endif %}
3335
{% endfor %}
36+
</section>
37+
</div>
38+
39+
<div id="related" role="complementary">
40+
<div id="related-title">
41+
<h2>Related resources</h2>
42+
</div>
43+
<div id="related-container" role="complementary">
44+
<section id="related-content">
45+
<a class="box" href="https://pip.raspberrypi.com/">
46+
<span><img src="/documentation/images/full-sized/PIP.png" width="121" height="121" alt=""></span>
47+
<span class="title">Product Information Portal</span>
48+
<span>Documents, reports, and notices for all Raspberry Pi products</span>
49+
</a>
50+
<a class="box" href="https://www.raspberrypi.com/tutorials/">
51+
<span><img src="/documentation/images/full-sized/Tutorials.png" width="121" height="121" alt=""></span>
52+
<span class="title">Tutorials</span>
53+
<span>Hands-on hardware and software tutorials</span>
54+
</a>
55+
<a class="box" href="https://forums.raspberrypi.com/">
56+
<span><img src="/documentation/images/full-sized/Forums.png" width="121" height="121" alt=""></span>
57+
<span class="title">Forums</span>
58+
<span>User and product support forums</span>
59+
</a>
3460
</section>
3561
</div>
62+
</div>
63+
64+
{% include legal.html %}
65+
{% include footer.html %}
66+
{% include search.html %}
3667

37-
{% include legal.html %}
38-
{% include footer.html %}
39-
{% include search.html %}
68+
</body>
4069

41-
</body>
42-
</html>
70+
</html>

‎jekyll-assets/css/style.css‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -234,13 +234,24 @@ div.subtitle p {
234234
margin-right: 0px;
235235
}
236236

237-
#container .section {
237+
#container .section,
238+
#related-container .section {
238239
display: flex;
239240
flex-direction: column;
240241
width: 100%;
241242
}
242243

243-
#docs-content #container {
244+
#related-title {
245+
text-align: center;
246+
}
247+
248+
#related-title h2 {
249+
padding-top: 20px;
250+
font-size: 1.5em;
251+
}
252+
253+
#docs-content #container,
254+
#docs-content #related-container {
244255
align-items: start;
245256
}
246257

@@ -520,7 +531,8 @@ li > a {
520531
color: var(--subtle-text);
521532
}
522533
523-
#container section#content {
534+
#container section#content,
535+
#related-container section#content {
524536
flex-grow: 1;
525537
}
526538
@@ -1403,7 +1415,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
14031415
content: "";
14041416
display: block;
14051417
height: 60px;
1406-
margin -60px 0 0;
1418+
margin: -60px 0 0;
14071419
}
14081420

14091421
/* when the mobile menu is visible, hide all page content so we don't end up with dueling scrollbars */
@@ -1443,7 +1455,8 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
14431455
max-width: 100vw;
14441456
}
14451457

1446-
#container {
1458+
#container,
1459+
#related-container {
14471460
justify-content: center;
14481461
flex-wrap: wrap;
14491462
margin-left: 3px;
@@ -1544,8 +1557,6 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
15441557
#content {
15451558
margin-left: 0px;
15461559
}
1547-
#container {
1548-
}
15491560
}
15501561

15511562
@media print {
@@ -1560,7 +1571,8 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
15601571
ul#tab-container li a {
15611572
display: none !important;
15621573
}
1563-
div#container {
1574+
div#container,
1575+
div#related-container {
15641576
margin-left: 0;
15651577
margin-right: 0;
15661578
justify-content: center !important;
@@ -1581,7 +1593,8 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
15811593
box-sizing: border-box;
15821594
}
15831595

1584-
section#box-content {
1596+
section#box-content,
1597+
section#related-content {
15851598
display: flex;
15861599
flex-wrap: wrap;
15871600
flex-direction: row;
@@ -1639,7 +1652,8 @@ div.subtitle.error-message p a {
16391652
color: var(--bg);
16401653
}
16411654

1642-
#container {
1655+
#container,
1656+
#related-container {
16431657
display: flex;
16441658
justify-content: center;
16451659
margin-right: 10px;

0 commit comments

Comments
 (0)