Skip to content

Commit 69edbc4

Browse files
Prosper Otemuyiwaabernix
authored andcommitted
Redesign Theme for Apollo Docs (#71)
1 parent 2b6e168 commit 69edbc4

11 files changed

Lines changed: 82 additions & 33 deletions

File tree

layout/page.ejs

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -103,18 +103,22 @@
103103
}
104104
%>
105105
<% var prev = findAdjacent(-1); if (prev) { %>
106-
<a class="link primary prev" href="<%- relative_url(page.path, prev.path) %>">
107-
<span class="icon-arrow-left-alt"></span>
108-
<span class="subtitle-pagination">Previous</span>
109-
<%- prev.title %>
110-
</a>
106+
107+
<a class="link primary prev" href="<%- relative_url(page.path, prev.path) %>">
108+
<span class="icon-arrow-left-alt"></span>
109+
<span class="subtitle-pagination">Previous</span>
110+
<%- prev.title %>
111+
</a>
112+
111113
<% } %>
112114
<% var next = findAdjacent(1); if (next) { %>
113-
<a class="link primary next" href="<%- relative_url(page.path, next.path) %>">
114-
<span class="subtitle-pagination">Next</span>
115-
<%- next.title %>
116-
<span class="icon-arrow-right-alt"></span>
117-
</a>
115+
116+
<a class="link primary next" href="<%- relative_url(page.path, next.path) %>">
117+
<span class="subtitle-pagination">Next</span>
118+
<%- next.title %>
119+
<span class="icon-arrow-right-alt"></span>
120+
</a>
121+
118122
<% } %>
119123
</div>
120124
</div>

layout/partials/sidebar.ejs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,10 +92,12 @@
9292

9393
<ul class="toc">
9494
<% _.each(config.sidebar_categories, function(pages, category) { %>
95+
9596
<li>
9697
<% if (category !== 'null') { %>
9798
<div class="heading-toc"><%- category %></div>
9899
<% } %>
100+
99101
<ul class="list-toc">
100102
<% pages.forEach(function(path) { %>
101103
<% const details = pathDetails(path) %>
@@ -112,6 +114,8 @@
112114
<% }); %>
113115
</ul>
114116
</li>
117+
118+
<hr />
115119
<% }); %>
116120
</ul>
117121
</div>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "meteor-theme-hexo",
3-
"version": "1.0.10",
3+
"version": "1.0.11-beta.2",
44
"description": "[Read the docs docs.](https://docs-docs.netlify.com/docs/docs/)",
55
"main": "index.js",
66
"scripts": {

source/style/_global/docsearch.less

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@color-highlight-header-background: @color-mediumlight;
2-
@color-highlight-text: @color-primary;
2+
@color-highlight-text: @color-text-highlight;
33

44
// The dropdown adapts to screen size, to provide three different displays.
55
// - A simple list of matching results
@@ -175,11 +175,11 @@
175175
}
176176

177177
.algolia-docsearch-suggestion--content {
178-
color: @color-lightest !important;
178+
color: @color-mediumdark !important;
179179
}
180180

181181
.algolia-docsearch-suggestion--category-header {
182-
color: @color-lightest !important;
182+
color: @color-dark !important;
183183
}
184184
}
185185
}

source/style/_theme/colors.less

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@sidebar-color: lighten(@color-primary, 10%); //#DD488F; //
1+
//@sidebar-color: lighten(@color-primary, 10%); //#DD488F; //
2+
@sidebar-color: #d347a7;
23
// @sidebar-color: #C16858;
34

45
.header-content {
@@ -87,29 +88,23 @@
8788
}
8889

8990
.charcoal {
90-
background-image: linear-gradient(
91-
179deg,
92-
#2c2f39 2%,
93-
#363944 14%,
94-
#32353d 100%
95-
);
91+
// background-image: linear-gradient(179deg, #2c2f39 2%, #363944 14%, #32353d 100%);
92+
background: #f7f8fa !important;
9693
// background: #14134E !important;
9794
// background-image: linear-gradient(174deg,#1c2945 0,#2d4d5a 54%,#436a75 81%,#448b8e 100%);
9895
color: @color-lightest;
9996

10097
&.sidebar {
10198
.heading-toc {
102-
color: @color-mediumlight;
99+
color: @color-mediumdark;
103100
}
104101

105102
select {
106103
color: @color-lightest;
107104
}
108105

109106
.topcap {
110-
background-color: darken(#2c2f39, 5%);
111-
// background: darken(#14134E, 8%) !important;
112-
// background: darken(#2d4f5f, 5%);
107+
background: #353c58;
113108
margin-bottom: 1rem;
114109

115110
.title-sidebar {
@@ -119,7 +114,7 @@
119114

120115
ul.list-toc {
121116
a {
122-
.link(@color-lightest);
117+
.link(@color-dark);
123118

124119
&:hover::before {
125120
color: @sidebar-color;
@@ -168,7 +163,7 @@
168163
padding: 0;
169164
margin-top: 0;
170165
.menu-content {
171-
background-color: transparent;
166+
background-color: #353c58;
172167
margin-top: 0;
173168
.nav-item {
174169
margin: 0;
@@ -188,6 +183,7 @@
188183
#512d5a 68%,
189184
#843b61 100%
190185
);
186+
background: #1d127d;
191187
color: @color-lightest;
192188
a {
193189
.link(@color-lightest);
@@ -197,7 +193,8 @@
197193
}
198194

199195
.popup {
200-
background-image: linear-gradient(0deg, #c16858 4%, #843b61 97%);
196+
//background-image: linear-gradient(0deg, #c16858 4%, #843b61 97%);
197+
background: @color-ancillary;
201198
padding: 0;
202199
margin-top: 0;
203200
.menu-content {

source/style/_theme/content.less

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,14 +155,36 @@
155155
}
156156

157157
.prev {
158+
border: 1px solid #E6ECF1;
159+
padding: 20px 50px;
160+
border-radius: 3px;
161+
box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
162+
color: @color-darker;
163+
164+
&:hover {
165+
color: #d347a7;
166+
border-color: #d347a7;
167+
}
168+
158169
[class^="icon-"] {
159170
left: -2em;
160171
}
161172
}
162173

163174
.next {
175+
color: @color-darker;
164176
float: right;
165177
text-align: right;
178+
border: 1px solid #E6ECF1;
179+
padding: 20px 50px;
180+
border-radius: 3px;
181+
box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
182+
183+
184+
&:hover {
185+
color: #d347a7;
186+
border-color: #d347a7;
187+
}
166188

167189
.subtitle-pagination {
168190
margin-right: -0.35em;

source/style/_theme/layout.less

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,6 @@ body {
128128
height: 100%;
129129
max-height: 100vh;
130130
.scrollbars(6px, rgba(0,0,0,0.07), rgba(0,0,0,0.05));
131-
overflow-y: auto;
132131
opacity: 1;
133132
}
134133

source/style/_theme/sidebar.less

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
.heading-toc {
3636
.subheading-caps;
3737
color: @color-darker;
38-
padding: 1.5em 0 .25em;
38+
padding: 1.5em 1.6em .25em;
3939
}
4040

4141
.toc > li:first-child > .heading-toc {
@@ -48,7 +48,6 @@
4848
padding-left: 0;
4949
margin: 0;
5050

51-
.std-xpadding;
5251
padding-bottom: 1.5rem;
5352

5453
ul {
@@ -69,6 +68,8 @@
6968
display: block;
7069
line-height: 1rem;
7170
position: relative;
71+
font-weight: 600;
72+
padding-left: 1.5rem;
7273

7374
&.current {
7475
&:extend(.link.primary all);
@@ -96,7 +97,7 @@
9697
-moz-osx-font-smoothing: grayscale;
9798

9899
// Show right arrow icon
99-
&:extend(.icon-arrow-right-alt:before);
100+
//&:extend(.icon-arrow-right-alt:before);
100101
}
101102

102103
&.active,
@@ -121,6 +122,21 @@
121122
.sub-menu {
122123
margin-top: .375rem;
123124

125+
a {
126+
127+
font-weight: 400;
128+
129+
&.active {
130+
.link(@color-lightest);
131+
background: @color-sidebar-wide;
132+
color: @color-primary;
133+
width: 100%;
134+
padding: 10px 40px;
135+
}
136+
137+
}
138+
139+
124140
&:empty {
125141
margin: 0;
126142
max-height: 0;
@@ -129,7 +145,7 @@
129145

130146
li {
131147
@indent: 15px;
132-
padding-left: @indent;
148+
//padding-left: @indent;
133149
}
134150
}
135151

source/style/_util/color.import.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
@color-complementary: #22A699; // sea green
66
@color-ancillary: #0F2A4A;// midnight blue
77

8+
@color-text-highlight: #d347a7; // pink
9+
@color-sidebar-wide: #d347a7;
10+
811
// Monochrome
912
@color-lightest: #fff;
1013
@color-lighter: #f8f8f8;

source/style/bundle-apollo.less

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@
22

33
// Indviduial color overrides for this variation go here.
44
@color-primary: #22A699;
5+
@color-text-highlight: #d347a7;
6+
57

68
@import './_common-post.less';

0 commit comments

Comments
 (0)