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> <body>
{% include header.html %} {% include header.html %}
<div id="docs-header"> <div id="docs-header">
<div>
<h1>Documentation</h1> <h1>Documentation</h1>
<div class="versions{% if currentVersion == latestVersion %} latest{% endif %}"> <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 %} {% for ver in site.data.versions %}
<option {% if ver.version == currentVersion %}selected{% endif %} value="{{ver.path | append: '/'}}">Crossplane {{ ver.version }}</option> <option {% if ver.version == currentVersion %}selected{% endif %} value="{{ver.path | append: '/'}}">Crossplane {{ ver.version }}</option>
{% endfor %} {% endfor %}
</select> </select></div></div>
</div>
</div> </div>
</div> </div>
<div class="page"> <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"); $xs-width: map-get($gl-mq-list, "xs");
$page-width: 1280px; $page-width: 1280px;
$page-padding: 60px;
$page-padding-small: 30px;
$dark-background-color: #183d54; $dark-background-color: #183d54;
$light-background-color: #f3f5fa; $light-background-color: #f3f5fa;
$red: #f3807b; $red: #f3807b;

48
css/docs.scss
View File

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

4
css/main.scss
View File

@ -95,11 +95,11 @@ body {
& > div { & > div {
max-width: $page-width; max-width: $page-width;
margin: 0 auto; margin: 0 auto;
padding: 0 60px; padding: 0 $page-padding;
box-sizing: border-box; box-sizing: border-box;
@media (max-width: $sm-width) { @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 %} {% include values.inc %}
<!DOCTYPE html> <!DOCTYPE html>