crossplane
/
docs
mirror of https://github.com/crossplane/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add Avenir-Heavy font. 

Small text changes.
Add collapsing menu support to the docs.
Improve docs banner warning about not being latest.
This commit is contained in:
Michael Goff 2018-12-05 10:00:52 -08:00
parent ceca579d81
commit d302427fe5
No known key found for this signature in database
GPG Key ID: 21733F080FFBE61B
6 changed files with 106 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
_layouts/docs.html
View File

@ -102,8 +102,6 @@
add({{ document.title | jsonify }}, {{document.url | jsonify }}, {% if document.indent == true %}true{% else %}false{% endif %}, {% if document.url == page.url %}true{% else %}false{% endif %}); add({{ document.title | jsonify }}, {{document.url | jsonify }}, {% if document.indent == true %}true{% else %}false{% endif %}, {% if document.url == page.url %}true{% else %}false{% endif %});
{% endfor %} {% endfor %}
console.log('menu', menu);
function getEntry(item) { function getEntry(item) {
var itemDom = document.createElement('li'); var itemDom = document.createElement('li');
@ -116,6 +114,36 @@
return itemDom; return itemDom;
} }
function addArrow(itemDom) {
var arrowDom = document.createElement('a');
arrowDom.classList.add('arrow');
arrowDom.onclick = function(itemDom) {
return function () {
var fullHeight = 59 + 16 + itemDom.lastChild.clientHeight + 'px';
itemDom.classList.toggle('open');
if (itemDom.classList.contains('open')) {
itemDom.style.height = fullHeight;
} else {
if (itemDom.style.height === 'auto') {
itemDom.style.height = fullHeight;
}
setTimeout(function () { itemDom.style.height = '59px'; }, 10);
}
window.itemDom = itemDom;
return false;
};
}(itemDom);
itemDom.appendChild(arrowDom);
if ((item.current && item.children) || item.childCurrent) {
itemDom.classList.add('open');
itemDom.style.height = 'auto';
} else {
itemDom.style.height = '59px';
}
}
var menuDom = document.getElementById('docs-ul'); var menuDom = document.getElementById('docs-ul');
for (var i = 0; i < menu.length; i++) { for (var i = 0; i < menu.length; i++) {
@ -127,6 +155,7 @@
} }
if (item.children) { if (item.children) {
addArrow(itemDom);
itemDom.classList.add('children'); itemDom.classList.add('children');
var children = document.createElement('ul'); var children = document.createElement('ul');
for (var j = 0; j < item.children.length; j++) { for (var j = 0; j < item.children.length; j++) {

65
css/docs.scss
View File

@ -12,20 +12,29 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
ul {
list-style-type: square;
ul {
list-style-type: disc;
}
}
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: Avenir; font-family: $header-font;
font-weight: 900; font-weight: normal;
} }
h1 { h1 {
font-size: 32px; font-size: 32px;
line-height: 0.81; line-height: 1.2;
margin-top: 50px; margin-top: 50px;
font-weight: 900;
} }
h2 { h2 {
@ -50,7 +59,7 @@ select {
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
color: #505a72; color: #505a72;
font-family: Avenir-Roman; font-family: $body-font;
font-size: 14px; font-size: 14px;
background-image: url(/images/arrow-down.svg); background-image: url(/images/arrow-down.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -77,7 +86,7 @@ a {
} }
p { p {
font-family: Avenir-Roman; font-family: $body-font;
font-size: 14px; font-size: 14px;
line-height: 1.79; line-height: 1.79;
} }
@ -152,6 +161,7 @@ pre > code {
line-height: 40px; line-height: 40px;
margin: 0; margin: 0;
display: inline-block; display: inline-block;
font-weight: normal;
} }
.versions { .versions {
@ -169,7 +179,7 @@ pre > code {
& > div::after { & > div::after {
content: "Latest"; content: "Latest";
font-family: Avenir-Roman; font-family: $body-font;
font-size: 14px; font-size: 14px;
line-height: 1.79; line-height: 1.79;
color: #505a72; color: #505a72;
@ -206,6 +216,11 @@ pre > code {
position: sticky; position: sticky;
padding-top: 30px; padding-top: 30px;
margin-bottom: 20px; margin-bottom: 20px;
& > li {
transition: height 0.3s ease-in-out;
overflow: hidden;
}
} }
ul { ul {
@ -215,7 +230,7 @@ pre > code {
li { li {
padding-left: 0px; padding-left: 0px;
font-family: Avenir-Roman; font-family: $body-font;
font-size: 18px; font-size: 18px;
line-height: 3.22; line-height: 3.22;
color: #505a72; color: #505a72;
@ -231,13 +246,30 @@ pre > code {
a { a {
color: #505a72; color: #505a72;
display: block; display: inline-block;
} }
&.children > a { & > a.arrow {
background-image: url(/images/arrow-up.svg); background-image: url(/images/arrow-down.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 15px center; background-position: center;
width: 20px;
height: 20px;
float: right;
margin-top: 18px;
margin-right: 8px;
display: none;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
&.open > a.arrow {
// background-image: url(/images/arrow-up.svg);
transform: rotateX(180deg);
}
&.children > a.arrow {
display: inline-block;
} }
ul { ul {
@ -255,7 +287,7 @@ pre > code {
#edit { #edit {
float: right; float: right;
font-family: Avenir-Roman; font-family: $body-font;
font-size: 14px; font-size: 14px;
line-height: 1.79; line-height: 1.79;
color: #3bbdc4; color: #3bbdc4;
@ -282,15 +314,18 @@ pre > code {
.alert { .alert {
padding: 20px; padding: 20px;
color: white;
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 100px; margin-top: 100px;
border-radius: 4px;
border: 1px solid #000;
&.master { &.master {
background-color: #f44336; border-color: #f44336;
color: #f44336;
} }
&.old { &.old {
background-color: #2196f3; border-color: #2196f3;
color: #2196f3;
} }
} }

17
css/index.scss
View File

@ -24,7 +24,8 @@
align-items: center; align-items: center;
h1 { h1 {
line-height: 1.15; line-height: 1.2;
font-weight: 900;
} }
p { p {
@ -54,6 +55,7 @@
h2 { h2 {
margin-top: 100px; margin-top: 100px;
font-weight: 900;
} }
a { a {
@ -103,6 +105,7 @@
h2 { h2 {
margin-top: 55px; margin-top: 55px;
margin-bottom: 30px; margin-bottom: 30px;
font-weight: 900;
} }
img { img {
@ -138,6 +141,7 @@
h2 { h2 {
margin-top: 100px; margin-top: 100px;
margin-bottom: 30px; margin-bottom: 30px;
font-weight: 900;
} }
p { p {
@ -163,14 +167,6 @@
line-height: 1.56; line-height: 1.56;
margin-bottom: 20px; margin-bottom: 20px;
} }
// @media (max-width: $md-width) {
// padding: 60px 40px 90px;
// }
// @media (max-width: $sm-width) {
// padding: 60px 20px 60px;
// }
} }
} }
@ -200,6 +196,7 @@
h2 { h2 {
margin-bottom: 35px; margin-bottom: 35px;
line-height: 1.25; line-height: 1.25;
font-weight: 900;
} }
p { p {
@ -226,6 +223,7 @@
line-height: 1.67; line-height: 1.67;
margin-top: 50px; margin-top: 50px;
margin-bottom: 35px; margin-bottom: 35px;
font-weight: 900;
} }
p { p {
@ -261,6 +259,7 @@
line-height: 1; line-height: 1;
margin-top: 100px; margin-top: 100px;
margin-bottom: 40px; margin-bottom: 40px;
font-weight: 900;
} }
p { p {

15
css/main.scss
View File

@ -29,12 +29,19 @@
font-style: normal; font-style: normal;
} }
@font-face {
font-family: $header-font;
src: url("../fonts/Avenir-Heavy.woff") format("woff");
font-weight: normal;
font-style: normal;
}
h1, h1,
h2, h2,
h3, h3,
h4 { h4 {
font-family: $header-font; font-family: $header-font;
font-weight: 900; font-weight: normal;
} }
h1 { h1 {
@ -108,7 +115,7 @@ body {
background-color: $dark-background-color; background-color: $dark-background-color;
clear: both; clear: both;
padding: 30px 0; padding: 30px 0;
$header-height: 40px; $header-height: 34px;
height: $header-height; height: $header-height;
& > div { & > div {
@ -121,6 +128,10 @@ body {
display: block; display: block;
} }
.logo img {
height: $header-height;
}
.hamburger-controls { .hamburger-controls {
position: absolute; position: absolute;
right: 30px; right: 30px;

BIN
fonts/Avenir-Heavy.woff Normal file
View File

Binary file not shown.

8
index.html
View File

@ -104,7 +104,7 @@ stylesheet: index
</p> </p>
</div> </div>
<div class="col-4_md-6_sm-12 feature"> <div class="col-4_md-6_sm-12 feature">
<h3>Advanced Workload scheduling.</h3> <h3>Advanced workload scheduling.</h3>
<p> <p>
Crossplane includes an extensible workload scheduler that can factor Crossplane includes an extensible workload scheduler that can factor
availability, reliability, cost, and performance while deploying workloads and availability, reliability, cost, and performance while deploying workloads and
@ -190,7 +190,7 @@ stylesheet: index
<div class="signature"> <div class="signature">
<div class="name">Sid Sijbrandij</div> <div class="name">Sid Sijbrandij</div>
<div class="title">CEO and Co-Founder of GitLab</div> <div class="title">CEO and Co-Founder of GitLab</div>
<img src="/images/gitlab.svg" /> <a href="https://gitlab.com"><img src="/images/gitlab.svg" /></a>
</div> </div>
</div> </div>
<div class="testimonial col-4_md-6_sm-12"> <div class="testimonial col-4_md-6_sm-12">
@ -199,7 +199,7 @@ stylesheet: index
<div class="signature"> <div class="signature">
<div class="name">Spencer Kimball</div> <div class="name">Spencer Kimball</div>
<div class="title">CEO and Founder of Cockroach Labs</div> <div class="title">CEO and Founder of Cockroach Labs</div>
<img src="/images/cockroachlabs.svg" /> <a href="https://www.cockroachlabs.com/"><img src="/images/cockroachlabs.svg" /></a>
</div> </div>
</div> </div>
<div class="testimonial col-4_md-6_sm-12"> <div class="testimonial col-4_md-6_sm-12">
@ -208,7 +208,7 @@ stylesheet: index
<div class="signature"> <div class="signature">
<div class="name">Bassam Tabbara</div> <div class="name">Bassam Tabbara</div>
<div class="title">CEO and Founder of Upbound</div> <div class="title">CEO and Founder of Upbound</div>
<img src="/images/upbound.svg" /> <a href="https://upbound.io"><img src="/images/upbound.svg" /></a>
</div> </div>
</div> </div>
</div> </div>