Skip to content

Commit 33f5e96

Browse files
anmol372anmol372
authored
[docs] Improve Website Styling (#4004)
1. Increased the size of headings 2. Added styling to the left-nav bar 3. Corrected doc names and subsequent links to ensure correct generation of subsequent HTML pages 4. And corrected styling for Breadcrumb Navigation
1 parent 5ec47c0 commit 33f5e96

File tree

21 files changed

+569
-603
lines changed

21 files changed

+569
-603
lines changed

‎website/assets/scss/_breadcrumb.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.breadcrumb {
2+
display: flex;
3+
flex-wrap: wrap;
4+
padding-left: 0rem;
5+
padding-top: 0.75rem;
6+
7+
margin-bottom: $breadcrumb-margin-bottom;
8+
list-style: none;
9+
background-color: initial;
10+
margin-left: 0px;
11+
border-bottom-left-radius: 0rem;
12+
border-top-left-radius: 0rem;
13+
}
14+
15+
.breadcrumb-item {
16+
display: -ms-flexbox;
17+
display: flex;
18+
}
19+
20+
.breadcrumb-item + .breadcrumb-item {
21+
padding-left: 0.5rem;
22+
}
23+
24+
.breadcrumb-item + .breadcrumb-item::before {
25+
display: inline-block;
26+
padding-right: 0.5rem;
27+
color: $breadcrumb-divider-color;
28+
content: "/";
29+
}
30+
31+
.breadcrumb-item + .breadcrumb-item:hover::before {
32+
text-decoration: underline;
33+
}
34+
35+
.breadcrumb-item + .breadcrumb-item:hover::before {
36+
text-decoration: none;
37+
}
38+
39+
.breadcrumb-item.active {
40+
color: $breadcrumb-active-color;;
41+
}

‎website/assets/scss/_docs.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.td-sidebar-nav .td-sidebar-link__page {
22
color: #222;
3-
font-weight: normal;
43
}
54

65
.of-docs__wrapper {
@@ -18,6 +17,7 @@
1817
color: var(--of--Color--brand--200);
1918
font-weight: 800;
2019
letter-spacing: 2px;
20+
margin: var(--of--spacer--md) 0 var(--of--spacer--sm);
2121
}
2222

2323
h5, h6 {

‎website/assets/scss/_global.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,8 @@ ol {
3030
li {
3131
counter-increment: ordered-list-counter;
3232
position: relative;
33-
padding-left: var(--of--spacer--lg);
3433
}
3534
li::before {
36-
content: counter(ordered-list-counter) ". ";
3735
position: absolute;
3836
left: 0;
3937
top: 0;

‎website/assets/scss/_sidebar-tree.scss

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
.td-sidebar-nav {
2+
padding-right: 0.5rem;
3+
margin-right: -15px;
4+
margin-left: -15px;
5+
6+
@include media-breakpoint-up(md) {
7+
@supports (position: sticky) {
8+
max-height: calc(100vh - 4rem);
9+
overflow-y: auto;
10+
}
11+
}
12+
13+
14+
@include media-breakpoint-up(md) {
15+
display: block !important;
16+
}
17+
18+
19+
&__section {
20+
li {
21+
list-style: none;
22+
}
23+
24+
ul {
25+
padding: 0;
26+
margin: 0;
27+
}
28+
29+
@include media-breakpoint-up(md) {
30+
& > ul {
31+
padding-left: .5rem;
32+
}
33+
}
34+
35+
36+
padding-left: 0;
37+
}
38+
39+
&__section-title {
40+
display: block;
41+
font-weight: 550;
42+
43+
.active {
44+
font-weight: 800;
45+
color: $gray-900;
46+
}
47+
48+
a {
49+
color: $gray-700;
50+
}
51+
}
52+
53+
.td-sidebar-link {
54+
display: block;
55+
padding-bottom: 0.375rem;
56+
57+
&__page {
58+
color: $gray-600;
59+
font-weight: $font-weight-light;
60+
}
61+
}
62+
63+
a {
64+
&:hover {
65+
color: $blue;
66+
text-decoration: none;
67+
}
68+
69+
&.active {
70+
font-weight: 800;
71+
color: $gray-800;
72+
73+
}
74+
}
75+
76+
.dropdown {
77+
a {
78+
color: $gray-700;
79+
}
80+
81+
.nav-link {
82+
padding: 0 0 1rem;
83+
}
84+
}
85+
}
86+
87+
.td-sidebar {
88+
padding-top: 4rem;
89+
margin-bottom: var(--of--spacer--md);
90+
display:flex;
91+
justify-content: center;
92+
background: var(--of--color-white--200);
93+
span {
94+
margin-left: var(--of--spacer--md);
95+
font-family: var(--of--font-family);
96+
}
97+
@include media-breakpoint-up(md) {
98+
padding-top: var(--of--spacer--md);
99+
padding-bottom: 4rem;
100+
background-color: $td-sidebar-bg-color;
101+
margin-bottom: 0;
102+
padding-right: 1rem;
103+
border-right: 1px solid $td-sidebar-border-color;
104+
}
105+
106+
&__toggle {
107+
line-height: 1;
108+
color: $gray-900;
109+
margin: 1rem;
110+
}
111+
112+
&__search {
113+
padding: 1rem 15px;
114+
margin-right: -15px;
115+
margin-left: -15px;
116+
}
117+
118+
&__inner {
119+
order: 0;
120+
121+
@include media-breakpoint-up(md) {
122+
@supports (position: sticky) {
123+
position: sticky;
124+
top:71px;
125+
z-index: 10;
126+
height: calc(100vh - 6rem);
127+
}
128+
}
129+
130+
131+
@include media-breakpoint-up(xl) {
132+
flex: 0 1 320px;
133+
}
134+
135+
136+
.td-search-box {
137+
width: 100%;
138+
}
139+
140+
&__heading {
141+
padding: var(--of--spacer--md);
142+
background: var(--of--color-brand--300);
143+
color: var(--of--color-white--100);
144+
margin-left: -15px;
145+
margin-right: -15px;
146+
}
147+
}
148+
}

‎website/assets/scss/_styles_project.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,8 @@
1414
@import "../../themes/docsy/assets/scss/blog";
1515
@import "../../themes/docsy/assets/scss/code";
1616
@import "../../themes/docsy/assets/scss/nav";
17-
@import "../../themes/docsy/assets/scss/sidebar-tree";
1817
@import "../../themes/docsy/assets/scss/sidebar-toc";
1918
@import "../../themes/docsy/assets/scss/buttons";
20-
@import "../../themes/docsy/assets/scss/breadcrumb";
2119
@import "../../themes/docsy/assets/scss/alerts";
2220
@import "../../themes/docsy/assets/scss/content";
2321
@import "../../themes/docsy/assets/scss/search";
@@ -61,6 +59,8 @@ footer {
6159
@import "variables";
6260
@import "reset";
6361
@import "type";
62+
@import "sidebar-tree";
63+
@import "breadcrumb";
6464

6565
//components
6666
@import "header";

‎website/assets/scss/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,5 +74,5 @@
7474
$ov--breakpoint--md: 768px;
7575
$ov--breakpoint--lg: 992px;
7676
$ov--breakpoint--xl: 1200px;
77-
$ov--breakpoint--2xl: 1450px;
77+
$ov--breakpoint--2xl: 1450px;
7878

‎website/content/en/build/_index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ <h2 class="of-heading of-heading--md">How can I write an Operator with Operator
2424
<div class="of-section--largetext__item">
2525
<h2 class="of-heading of-heading--xl">Installing the SDK CLI</h2>
2626
<div class="of-section--largetext__content">
27-
<p>Follow the steps in the <a href="/docs/installation/install-operator-sdk/">installation guide</a> to learn how to install the Operator SDK CLI tool. If you are using a release version of the SDK, make sure to follow the documentation for that version. You make use any of the following installation processes:</p>
27+
<p>Follow the steps in the <a href="/docs/installation/">installation guide</a> to learn how to install the Operator SDK CLI tool. If you are using a release version of the SDK, make sure to follow the documentation for that version. You make use any of the following installation processes:</p>
2828
<ol class="of-list-ordered">
29-
<li>Install the <a href="/docs/installation/install-operator-sdk/#install-from-homebrew-macos">Homebrew</a> (macOS)</li>
30-
<li>Install from <a href="/docs/installation/install-operator-sdk/#install-from-github-release">GitHub</a> release</li>
31-
<li>Compile and install from <a href="/docs/installation/install-operator-sdk/#compile-and-install-from-master">master</a></li>
29+
<li>Install the <a href="/docs/installation/#install-from-homebrew-macos">Homebrew</a> (macOS)</li>
30+
<li>Install from <a href="/docs/installation/#install-from-github-release">GitHub</a> release</li>
31+
<li>Compile and install from <a href="/docs/installation/#compile-and-install-from-master">master</a></li>
3232
</ol>
3333
</div>
34-
<a href="/docs/installation/install-operator-sdk" class="of-button of-button--tertiary">Learn More
34+
<a href="/docs/installation/" class="of-button of-button--tertiary">Learn More
3535
<svg class="of-button__icon" enable-background="new 0 0 22 22" version="1.1" viewBox="0 0 22 22" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
3636
<path d="M19.5,8l-7.3-7.6c-0.4-0.4-1.1-0.4-1.5,0L9.3,1.8c-0.4,0.4-0.4,1.1,0,1.6l5.2,5.5H1.1C0.5,8.9,0,9.3,0,10V12 c0,0.6,0.5,1.1,1.1,1.1h13.5l-5.2,5.5c-0.4,0.4-0.4,1.1,0,1.6l1.4,1.5c0.4,0.4,1.1,0.4,1.5,0l9.4-9.9c0.4-0.4,0.4-1.1,0-1.6L19.5,8z "/>
3737
</svg>

‎website/content/en/docs/building-operators/_index.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
---
32
title: "Building Operators"
43
linkTitle: "Building Operators"

‎website/content/en/docs/building-operators/ansible/installation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ local Kubernetes cluster and [quay.io][quay-link] for the public registry.
2020
[ansible-tool]:https://docs.ansible.com/ansible/latest/index.html
2121
[ansible-runner-tool]:https://ansible-runner.readthedocs.io/en/latest/install.html
2222
[ansible-runner-http-plugin]:https://github.com/ansible/ansible-runner-http
23-
[install-guide]: /docs/installation/install-operator-sdk
23+
[install-guide]: /docs/installation/
2424
[minikube-tool]:https://github.com/kubernetes/minikube#installation
2525
[quay-link]:https://quay.io
2626
[openshift-module]:https://pypi.org/project/openshift/

‎website/content/en/docs/building-operators/ansible/quickstart.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ make undeploy
8585

8686
Read the [tutorial][tutorial] for an in-depth walkthough of building a Ansible operator.
8787

88-
[operator_install]: /docs/installation/install-operator-sdk
88+
[operator_install]: /docs/installation/
8989
[ansible-operator-install]: /docs/building-operators/ansible/installation
9090
[layout-doc]:../reference/scaffolding
9191
[tutorial]: /docs/building-operators/ansible/tutorial/

0 commit comments

Comments
 (0)