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

Fix the layout of the docs header and page to match site wide max 

width as well as docs header in mobile view. Various other fixes.
This commit is contained in:
Michael Goff 2018-12-04 09:23:06 -08:00
parent b5ffffccec
commit b5201eddae
No known key found for this signature in database
GPG Key ID: 21733F080FFBE61B
5 changed files with 70 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_layouts/docs.html
View File

@ -27,13 +27,15 @@
<body>
{% include header.html %}
<div id="docs-header">
<div>
<h1>Documentation</h1>
<div class="versions{% if currentVersion == latestVersion %} latest{% endif %}">
<select onchange="window.location.href = this.value">
<div><div><select onchange="window.location.href = this.value">
{% for ver in site.data.versions %}
<option {% if ver.version == currentVersion %}selected{% endif %} value="{{ver.path | append: '/'}}">Crossplane {{ ver.version }}</option>
{% endfor %}
</select>
</select></div></div>
</div>
</div>
</div>
<div class="page">

2
_scss/vars.scss
View File

@ -6,6 +6,8 @@ $sm-width: map-get($gl-mq-list, "sm");
$xs-width: map-get($gl-mq-list, "xs");
$page-width: 1280px;
$page-padding: 60px;
$page-padding-small: 30px;
$dark-background-color: #183d54;
$light-background-color: #f3f5fa;
$red: #f3807b;

48
css/docs.scss
View File

@ -101,12 +101,14 @@ pre > code {
}
.page {
max-width: 1199px;
max-width: $page-width;
margin-left: auto;
margin-right: auto;
padding: 0 50px 30px;
padding: 0 $page-padding 30px;
min-height: calc(100% - 374px);
color: #505a72;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@media (min-width: $md-width) {
display: -webkit-box;
@ -114,20 +116,40 @@ pre > code {
display: flex;
}
@media (max-width: $sm-width) {
padding-left: $page-padding-small;
padding-right: $page-padding-small;
}
.menu-open & {
display: none;
}
}
#docs-header {
padding: 37px 50px 38px;
background-color: #f3f5fa;
color: #505a72;
.menu-open & {
display: none;
}
& > div {
max-width: $page-width;
margin: 0 auto;
padding: 37px $page-padding 38px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@media (max-width: $sm-width) {
padding-left: $page-padding-small;
padding-right: $page-padding-small;
}
}
h1 {
line-height: 40px;
margin: 0;
margin-left: 10px;
display: inline-block;
}
@ -135,7 +157,16 @@ pre > code {
float: right;
position: relative;
&.latest::after {
@media (max-width: $sm-width) {
float: none;
margin-top: 20px;
}
&.latest > div {
display: inline-block;
position: relative;
& > div::after {
content: "Latest";
font-family: Avenir-Roman;
font-size: 14px;
@ -152,9 +183,10 @@ pre > code {
position: absolute;
pointer-events: none;
}
}
&.latest select {
padding-right: 107px;
padding-right: 95px;
}
}
}
@ -228,6 +260,10 @@ pre > code {
color: #3bbdc4;
margin-top: 55px;
@media (max-width: $md-width) {
float: none;
}
img {
vertical-align: middle;
margin-right: 5px;

4
css/main.scss
View File

@ -95,11 +95,11 @@ body {
& > div {
max-width: $page-width;
margin: 0 auto;
padding: 0 60px;
padding: 0 $page-padding;
box-sizing: border-box;
@media (max-width: $sm-width) {
padding: 0 30px;
padding: 0 $page-padding-small;
}
}
}

2
docs/latest.html
View File

@ -1,5 +1,5 @@
---
layout: false
layout: none
---
{% include values.inc %}
<!DOCTYPE html>