Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Redesign Theme for Apollo Docs #71

Merged
merged 30 commits into from
May 31, 2018
Merged

Redesign Theme for Apollo Docs #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
1c8ceb7
Edit header to test deployment
unicodeveloper May 17, 2018
f764c1a
Change charcoal background color
unicodeveloper May 17, 2018
684bae3
Change header background
unicodeveloper May 17, 2018
802200b
Change links in sidebar to a darker color
unicodeveloper May 17, 2018
95b947a
Change current active link on the sidebar to pink
unicodeveloper May 17, 2018
98183a3
Change sidebar headers to color medium dark
unicodeveloper May 17, 2018
f869f2c
Change topcap background color
unicodeveloper May 17, 2018
9cddb99
Make sub-menu active link white and background pink
unicodeveloper May 17, 2018
edca28f
Add space and padding around active submenu link
unicodeveloper May 17, 2018
6fc9de0
Beautify pagination
unicodeveloper May 17, 2018
ab184ef
Change navigation pop background color
unicodeveloper May 17, 2018
1d1d886
Undo background color for meteor
unicodeveloper May 17, 2018
7fd43a3
Reduce font-weight for sidebar link children
unicodeveloper May 17, 2018
0523fe4
Add horizontal line in sidebar
unicodeveloper May 17, 2018
c519645
Merge branch 'master' into redesign
May 18, 2018
ddb8aae
Merge branch 'master' into redesign
abernix May 29, 2018
13e97f4
Apply "beta" tag prior to releasing as beta.
abernix May 29, 2018
ac7455b
Change algolia docs suggestion content to color medium dark
unicodeveloper May 30, 2018
fc28d79
Change algolia docs suggestion content to color medium dark
unicodeveloper May 30, 2018
c3964d4
Change algolia docs suggestion category header to color medark
unicodeveloper May 30, 2018
5482092
Add a different highlight color for apollo's algolia search
unicodeveloper May 30, 2018
c62566a
Add color-text-highlight
unicodeveloper May 30, 2018
b6bcf87
bump to 1.0.11-beta.1
unicodeveloper May 30, 2018
d7244ae
Fixed the stubborn pink padding bug at last. Thanks to Jesse, you are…
unicodeveloper May 31, 2018
e4cc344
Adjust the last active link padding. This is wicked fun
unicodeveloper May 31, 2018
273928f
Adjust padding
unicodeveloper May 31, 2018
8e2df43
Bump beta version
unicodeveloper May 31, 2018
bf84475
Change meteor color
unicodeveloper May 31, 2018
a5c4395
remove sidebar for search results
unicodeveloper May 31, 2018
2191c9f
Remove commented code out
unicodeveloper May 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions layout/page.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,18 +103,22 @@
}
%>
<% var prev = findAdjacent(-1); if (prev) { %>
<a class="link primary prev" href="<%- relative_url(page.path, prev.path) %>">
<span class="icon-arrow-left-alt"></span>
<span class="subtitle-pagination">Previous</span>
<%- prev.title %>
</a>

<a class="link primary prev" href="<%- relative_url(page.path, prev.path) %>">
<span class="icon-arrow-left-alt"></span>
<span class="subtitle-pagination">Previous</span>
<%- prev.title %>
</a>

<% } %>
<% var next = findAdjacent(1); if (next) { %>
<a class="link primary next" href="<%- relative_url(page.path, next.path) %>">
<span class="subtitle-pagination">Next</span>
<%- next.title %>
<span class="icon-arrow-right-alt"></span>
</a>

<a class="link primary next" href="<%- relative_url(page.path, next.path) %>">
<span class="subtitle-pagination">Next</span>
<%- next.title %>
<span class="icon-arrow-right-alt"></span>
</a>

<% } %>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions layout/partials/sidebar.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,12 @@

<ul class="toc">
<% _.each(config.sidebar_categories, function(pages, category) { %>

<li>
<% if (category !== 'null') { %>
<div class="heading-toc"><%- category %></div>
<% } %>

<ul class="list-toc">
<% pages.forEach(function(path) { %>
<% const details = pathDetails(path) %>
Expand All @@ -112,6 +114,8 @@
<% }); %>
</ul>
</li>

<hr />
<% }); %>
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "meteor-theme-hexo",
"version": "1.0.10",
"version": "1.0.11-beta.2",
"description": "[Read the docs docs.](https://docs-docs.netlify.com/docs/docs/)",
"main": "index.js",
"scripts": {
Expand Down
6 changes: 3 additions & 3 deletions source/style/_global/docsearch.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@color-highlight-header-background: @color-mediumlight;
@color-highlight-text: @color-primary;
@color-highlight-text: @color-text-highlight;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible that these changes are going to break the Meteor search? (They're in _global.)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nevermind. Looks okay!

image


// The dropdown adapts to screen size, to provide three different displays.
// - A simple list of matching results
Expand Down Expand Up @@ -175,11 +175,11 @@
}

.algolia-docsearch-suggestion--content {
color: @color-lightest !important;
color: @color-mediumdark !important;
}

.algolia-docsearch-suggestion--category-header {
color: @color-lightest !important;
color: @color-dark !important;
}
}
}
25 changes: 11 additions & 14 deletions source/style/_theme/colors.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@sidebar-color: lighten(@color-primary, 10%); //#DD488F; //
//@sidebar-color: lighten(@color-primary, 10%); //#DD488F; //
@sidebar-color: #d347a7;
// @sidebar-color: #C16858;

.header-content {
Expand Down Expand Up @@ -87,29 +88,23 @@
}

.charcoal {
background-image: linear-gradient(
179deg,
#2c2f39 2%,
#363944 14%,
#32353d 100%
);
// background-image: linear-gradient(179deg, #2c2f39 2%, #363944 14%, #32353d 100%);
background: #f7f8fa !important;
// background: #14134E !important;
// background-image: linear-gradient(174deg,#1c2945 0,#2d4d5a 54%,#436a75 81%,#448b8e 100%);
color: @color-lightest;

&.sidebar {
.heading-toc {
color: @color-mediumlight;
color: @color-mediumdark;
}

select {
color: @color-lightest;
}

.topcap {
background-color: darken(#2c2f39, 5%);
// background: darken(#14134E, 8%) !important;
// background: darken(#2d4f5f, 5%);
background: #353c58;
margin-bottom: 1rem;

.title-sidebar {
Expand All @@ -119,7 +114,7 @@

ul.list-toc {
a {
.link(@color-lightest);
.link(@color-dark);

&:hover::before {
color: @sidebar-color;
Expand Down Expand Up @@ -168,7 +163,7 @@
padding: 0;
margin-top: 0;
.menu-content {
background-color: transparent;
background-color: #353c58;
margin-top: 0;
.nav-item {
margin: 0;
Expand All @@ -188,6 +183,7 @@
#512d5a 68%,
#843b61 100%
);
background: #1d127d;
color: @color-lightest;
a {
.link(@color-lightest);
Expand All @@ -197,7 +193,8 @@
}

.popup {
background-image: linear-gradient(0deg, #c16858 4%, #843b61 97%);
//background-image: linear-gradient(0deg, #c16858 4%, #843b61 97%);
background: @color-ancillary;
padding: 0;
margin-top: 0;
.menu-content {
Expand Down
22 changes: 22 additions & 0 deletions source/style/_theme/content.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,14 +155,36 @@
}

.prev {
border: 1px solid #E6ECF1;
padding: 20px 50px;
border-radius: 3px;
box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
color: @color-darker;

&:hover {
color: #d347a7;
border-color: #d347a7;
}

[class^="icon-"] {
left: -2em;
}
}

.next {
color: @color-darker;
float: right;
text-align: right;
border: 1px solid #E6ECF1;
padding: 20px 50px;
border-radius: 3px;
box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);


&:hover {
color: #d347a7;
border-color: #d347a7;
}

.subtitle-pagination {
margin-right: -0.35em;
Expand Down
1 change: 0 additions & 1 deletion source/style/_theme/layout.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,6 @@ body {
height: 100%;
max-height: 100vh;
.scrollbars(6px, rgba(0,0,0,0.07), rgba(0,0,0,0.05));
overflow-y: auto;
opacity: 1;
}

Expand Down
24 changes: 20 additions & 4 deletions source/style/_theme/sidebar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
.heading-toc {
.subheading-caps;
color: @color-darker;
padding: 1.5em 0 .25em;
padding: 1.5em 1.6em .25em;
}

.toc > li:first-child > .heading-toc {
Expand All @@ -48,7 +48,6 @@
padding-left: 0;
margin: 0;

.std-xpadding;
padding-bottom: 1.5rem;

ul {
Expand All @@ -69,6 +68,8 @@
display: block;
line-height: 1rem;
position: relative;
font-weight: 600;
padding-left: 1.5rem;

&.current {
&:extend(.link.primary all);
Expand Down Expand Up @@ -96,7 +97,7 @@
-moz-osx-font-smoothing: grayscale;

// Show right arrow icon
&:extend(.icon-arrow-right-alt:before);
//&:extend(.icon-arrow-right-alt:before);
}

&.active,
Expand All @@ -121,6 +122,21 @@
.sub-menu {
margin-top: .375rem;

a {

font-weight: 400;

&.active {
.link(@color-lightest);
background: @color-sidebar-wide;
color: @color-primary;
width: 100%;
padding: 10px 40px;
}

}


&:empty {
margin: 0;
max-height: 0;
Expand All @@ -129,7 +145,7 @@

li {
@indent: 15px;
padding-left: @indent;
//padding-left: @indent;
}
}

Expand Down
3 changes: 3 additions & 0 deletions source/style/_util/color.import.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
@color-complementary: #22A699; // sea green
@color-ancillary: #0F2A4A;// midnight blue

@color-text-highlight: #d347a7; // pink
@color-sidebar-wide: #d347a7;

// Monochrome
@color-lightest: #fff;
@color-lighter: #f8f8f8;
Expand Down
2 changes: 2 additions & 0 deletions source/style/bundle-apollo.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,7 @@

// Indviduial color overrides for this variation go here.
@color-primary: #22A699;
@color-text-highlight: #d347a7;


@import './_common-post.less';
2 changes: 2 additions & 0 deletions source/style/bundle-meteor.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import './_common-pre.less';

// Indviduial color overrides for this variation go here.
@color-text-highlight: #E04E4B;
@color-sidebar-wide: #E04E4B;

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