mirror of https://github.com/crossplane/docs.git
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
parent
ceca579d81
commit
d302427fe5
|
|
@ -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 %});
|
||||
{% endfor %}
|
||||
|
||||
console.log('menu', menu);
|
||||
|
||||
function getEntry(item) {
|
||||
var itemDom = document.createElement('li');
|
||||
|
||||
|
|
@ -116,6 +114,36 @@
|
|||
|
||||
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');
|
||||
for (var i = 0; i < menu.length; i++) {
|
||||
|
|
@ -127,6 +155,7 @@
|
|||
}
|
||||
|
||||
if (item.children) {
|
||||
addArrow(itemDom);
|
||||
itemDom.classList.add('children');
|
||||
var children = document.createElement('ul');
|
||||
for (var j = 0; j < item.children.length; j++) {
|
||||
|
|
|
|||
|
|
@ -12,20 +12,29 @@ a:hover {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: square;
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: Avenir;
|
||||
font-weight: 900;
|
||||
font-family: $header-font;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
line-height: 0.81;
|
||||
line-height: 1.2;
|
||||
margin-top: 50px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -50,7 +59,7 @@ select {
|
|||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
color: #505a72;
|
||||
font-family: Avenir-Roman;
|
||||
font-family: $body-font;
|
||||
font-size: 14px;
|
||||
background-image: url(/images/arrow-down.svg);
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -77,7 +86,7 @@ a {
|
|||
}
|
||||
|
||||
p {
|
||||
font-family: Avenir-Roman;
|
||||
font-family: $body-font;
|
||||
font-size: 14px;
|
||||
line-height: 1.79;
|
||||
}
|
||||
|
|
@ -152,6 +161,7 @@ pre > code {
|
|||
line-height: 40px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.versions {
|
||||
|
|
@ -169,7 +179,7 @@ pre > code {
|
|||
|
||||
& > div::after {
|
||||
content: "Latest";
|
||||
font-family: Avenir-Roman;
|
||||
font-family: $body-font;
|
||||
font-size: 14px;
|
||||
line-height: 1.79;
|
||||
color: #505a72;
|
||||
|
|
@ -206,6 +216,11 @@ pre > code {
|
|||
position: sticky;
|
||||
padding-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
& > li {
|
||||
transition: height 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -215,7 +230,7 @@ pre > code {
|
|||
|
||||
li {
|
||||
padding-left: 0px;
|
||||
font-family: Avenir-Roman;
|
||||
font-family: $body-font;
|
||||
font-size: 18px;
|
||||
line-height: 3.22;
|
||||
color: #505a72;
|
||||
|
|
@ -231,13 +246,30 @@ pre > code {
|
|||
|
||||
a {
|
||||
color: #505a72;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.children > a {
|
||||
background-image: url(/images/arrow-up.svg);
|
||||
& > a.arrow {
|
||||
background-image: url(/images/arrow-down.svg);
|
||||
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 {
|
||||
|
|
@ -255,7 +287,7 @@ pre > code {
|
|||
|
||||
#edit {
|
||||
float: right;
|
||||
font-family: Avenir-Roman;
|
||||
font-family: $body-font;
|
||||
font-size: 14px;
|
||||
line-height: 1.79;
|
||||
color: #3bbdc4;
|
||||
|
|
@ -282,15 +314,18 @@ pre > code {
|
|||
|
||||
.alert {
|
||||
padding: 20px;
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 100px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #000;
|
||||
|
||||
&.master {
|
||||
background-color: #f44336;
|
||||
border-color: #f44336;
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
&.old {
|
||||
background-color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
color: #2196f3;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@
|
|||
align-items: center;
|
||||
|
||||
h1 {
|
||||
line-height: 1.15;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -54,6 +55,7 @@
|
|||
|
||||
h2 {
|
||||
margin-top: 100px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -103,6 +105,7 @@
|
|||
h2 {
|
||||
margin-top: 55px;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -138,6 +141,7 @@
|
|||
h2 {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -163,14 +167,6 @@
|
|||
line-height: 1.56;
|
||||
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 {
|
||||
margin-bottom: 35px;
|
||||
line-height: 1.25;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -226,6 +223,7 @@
|
|||
line-height: 1.67;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 35px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -261,6 +259,7 @@
|
|||
line-height: 1;
|
||||
margin-top: 100px;
|
||||
margin-bottom: 40px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -29,12 +29,19 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $header-font;
|
||||
src: url("../fonts/Avenir-Heavy.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: $header-font;
|
||||
font-weight: 900;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -108,7 +115,7 @@ body {
|
|||
background-color: $dark-background-color;
|
||||
clear: both;
|
||||
padding: 30px 0;
|
||||
$header-height: 40px;
|
||||
$header-height: 34px;
|
||||
height: $header-height;
|
||||
|
||||
& > div {
|
||||
|
|
@ -121,6 +128,10 @@ body {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: $header-height;
|
||||
}
|
||||
|
||||
.hamburger-controls {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -104,7 +104,7 @@ stylesheet: index
|
|||
</p>
|
||||
</div>
|
||||
<div class="col-4_md-6_sm-12 feature">
|
||||
<h3>Advanced Workload scheduling.</h3>
|
||||
<h3>Advanced workload scheduling.</h3>
|
||||
<p>
|
||||
Crossplane includes an extensible workload scheduler that can factor
|
||||
availability, reliability, cost, and performance while deploying workloads and
|
||||
|
|
@ -190,7 +190,7 @@ stylesheet: index
|
|||
<div class="signature">
|
||||
<div class="name">Sid Sijbrandij</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 class="testimonial col-4_md-6_sm-12">
|
||||
|
|
@ -199,7 +199,7 @@ stylesheet: index
|
|||
<div class="signature">
|
||||
<div class="name">Spencer Kimball</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 class="testimonial col-4_md-6_sm-12">
|
||||
|
|
@ -208,7 +208,7 @@ stylesheet: index
|
|||
<div class="signature">
|
||||
<div class="name">Bassam Tabbara</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue