Skip to content

Commit d3079a7

Browse files
dataGriffdataGriff
committed
docs: enhance navigation buttons and responsive design across documentation
1 parent 30aa21e commit d3079a7

File tree

6 files changed

+155
-11
lines changed

6 files changed

+155
-11
lines changed

‎docs/audiences.md‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,29 @@
1414

1515
Now that you understand the audiences its time to explore the interfaces designed for each audience.
1616

17-
[← Previous: Principles](../){ .md-button }
18-
[Next: Interfaces →](../interfaces/){ .md-button .md-button--primary style="float: right;" }
17+
<!-- markdownlint-disable MD033 -->
18+
<div class="navigation-buttons" markdown="1" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem;">
19+
20+
<div markdown="1">
21+
[← Previous: Principles](../principles/){ .md-button }
22+
</div>
23+
24+
<div markdown="1" style="text-align: right;">
25+
[Next: Interfaces →](../interfaces/){ .md-button .md-button--primary }
26+
</div>
27+
28+
</div>
29+
30+
<style>
31+
@media (max-width: 768px) {
32+
.navigation-buttons {
33+
display: grid !important;
34+
grid-template-columns: 1fr !important;
35+
gap: 0.5rem !important;
36+
}
37+
.navigation-buttons > div:last-child {
38+
text-align: left !important;
39+
}
40+
}
41+
</style>
42+
<!-- markdownlint-enable MD033 -->

‎docs/benefits.md‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,29 @@ Benefits can be broken down per codebase audience type as they have been defined
2222

2323
## Build Agents
2424

25-
[← Previous: Interfaces](../){ .md-button }
26-
[Next: Tooling →](../tooling/){ .md-button .md-button--primary style="float: right;" }
25+
<!-- markdownlint-disable MD033 -->
26+
<div class="navigation-buttons" markdown="1" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem;">
27+
28+
<div markdown="1">
29+
[← Previous: Interfaces](../interfaces/){ .md-button }
30+
</div>
31+
32+
<div markdown="1" style="text-align: right;">
33+
[Next: Tooling →](../tooling/){ .md-button .md-button--primary }
34+
</div>
35+
36+
</div>
37+
38+
<style>
39+
@media (max-width: 768px) {
40+
.navigation-buttons {
41+
display: grid !important;
42+
grid-template-columns: 1fr !important;
43+
gap: 0.5rem !important;
44+
}
45+
.navigation-buttons > div:last-child {
46+
text-align: left !important;
47+
}
48+
}
49+
</style>
50+
<!-- markdownlint-enable MD033 -->

‎docs/examples.md‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,5 +80,29 @@
8080

8181
```
8282

83-
[← Previous: Tooling](../){ .md-button }
84-
[Next: Welcome →](../){ .md-button .md-button--primary style="float: right;" }
83+
<!-- markdownlint-disable MD033 -->
84+
<div class="navigation-buttons" markdown="1" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem;">
85+
86+
<div markdown="1">
87+
[← Previous: Tooling](../tooling/){ .md-button }
88+
</div>
89+
90+
<div markdown="1" style="text-align: right;">
91+
[Next: Welcome →](../){ .md-button .md-button--primary }
92+
</div>
93+
94+
</div>
95+
96+
<style>
97+
@media (max-width: 768px) {
98+
.navigation-buttons {
99+
display: grid !important;
100+
grid-template-columns: 1fr !important;
101+
gap: 0.5rem !important;
102+
}
103+
.navigation-buttons > div:last-child {
104+
text-align: left !important;
105+
}
106+
}
107+
</style>
108+
<!-- markdownlint-enable MD033 -->

‎docs/interfaces.md‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,29 @@
3030

3131
Now that you understand the interfaces, its time to explore the benefits of adopting the Codebase Interface principles.
3232

33-
[← Previous: Audiences](../){ .md-button }
34-
[Next: Benefits →](../benefits/){ .md-button .md-button--primary style="float: right;" }
33+
<!-- markdownlint-disable MD033 -->
34+
<div class="navigation-buttons" markdown="1" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem;">
35+
36+
<div markdown="1">
37+
[← Previous: Audiences](../audiences/){ .md-button }
38+
</div>
39+
40+
<div markdown="1" style="text-align: right;">
41+
[Next: Benefits →](../benefits/){ .md-button .md-button--primary }
42+
</div>
43+
44+
</div>
45+
46+
<style>
47+
@media (max-width: 768px) {
48+
.navigation-buttons {
49+
display: grid !important;
50+
grid-template-columns: 1fr !important;
51+
gap: 0.5rem !important;
52+
}
53+
.navigation-buttons > div:last-child {
54+
text-align: left !important;
55+
}
56+
}
57+
</style>
58+
<!-- markdownlint-enable MD033 -->

‎docs/principles.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,29 @@
1515

1616
Now that you understand the core principles, its time to understand the different audiences of our codebase.
1717

18+
<!-- markdownlint-disable MD033 -->
19+
<div class="navigation-buttons" markdown="1" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem;">
20+
21+
<div markdown="1">
1822
[← Previous: Welcome](../){ .md-button }
19-
[Next: Audiences →](../audiences/){ .md-button .md-button--primary style="float: right;" }
23+
</div>
24+
25+
<div markdown="1" style="text-align: right;">
26+
[Next: Audiences →](../audiences/){ .md-button .md-button--primary }
27+
</div>
28+
29+
</div>
30+
31+
<style>
32+
@media (max-width: 768px) {
33+
.navigation-buttons {
34+
display: grid !important;
35+
grid-template-columns: 1fr !important;
36+
gap: 0.5rem !important;
37+
}
38+
.navigation-buttons > div:last-child {
39+
text-align: left !important;
40+
}
41+
}
42+
</style>
43+
<!-- markdownlint-enable MD033 -->

‎docs/tooling.md‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,30 @@ Whilst git is not the only source control methodology out there and can be chall
3333

3434
- [`.dockerignore`](https://docs.docker.com/engine/reference/builder/#dockerignore-file){target="_blank"} - A plain text file that tells Docker which files and directories to ignore when building an image. It is cross platform and works on Windows, MacOS and Linux. It is also IDE agnostic as it can be used with any text editor or IDE that supports Docker.
3535

36-
[← Previous: Benefits](../){ .md-button }
37-
[Next: Examples →](../examples/){ .md-button .md-button--primary style="float: right;" }
36+
<!-- markdownlint-disable MD033 -->
37+
<div class="navigation-buttons" markdown="1" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem;">
38+
39+
<div markdown="1">
40+
[← Previous: Benefits](../benefits/){ .md-button }
41+
</div>
42+
43+
<div markdown="1" style="text-align: right;">
44+
[Next: Examples →](../examples/){ .md-button .md-button--primary }
45+
</div>
46+
47+
</div>
48+
49+
<style>
50+
@media (max-width: 768px) {
51+
.navigation-buttons {
52+
display: grid !important;
53+
grid-template-columns: 1fr !important;
54+
gap: 0.5rem !important;
55+
}
56+
.navigation-buttons > div:last-child {
57+
text-align: left !important;
58+
}
59+
}
60+
</style>
61+
<!-- markdownlint-enable MD033 -->
3862

0 commit comments

Comments
 (0)