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

Merge pull request #4 from thephred/fix-docs-layout 

Fix the layout of the docs header and page to match site wide max
This commit is contained in:
Michael Goff 2018-12-04 09:37:32 -08:00 committed by GitHub
parent b5ffffccec b5201eddae
commit ab87d0ad63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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>