mirror of https://github.com/crossplane/docs.git
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
parent
b5ffffccec
commit
b5201eddae
|
|
@ -27,13 +27,15 @@
|
|||
<body>
|
||||
{% include header.html %}
|
||||
<div id="docs-header">
|
||||
<h1>Documentation</h1>
|
||||
<div class="versions{% if currentVersion == latestVersion %} latest{% endif %}">
|
||||
<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>
|
||||
<div>
|
||||
<h1>Documentation</h1>
|
||||
<div class="versions{% if currentVersion == latestVersion %} latest{% endif %}">
|
||||
<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></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,26 +157,36 @@ pre > code {
|
|||
float: right;
|
||||
position: relative;
|
||||
|
||||
&.latest::after {
|
||||
content: "Latest";
|
||||
font-family: Avenir-Roman;
|
||||
font-size: 14px;
|
||||
line-height: 1.79;
|
||||
color: #505a72;
|
||||
border-radius: 12px;
|
||||
background-color: #3bbdc4;
|
||||
color: white;
|
||||
@media (max-width: $sm-width) {
|
||||
float: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.latest > div {
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
height: 24px;
|
||||
right: 37px;
|
||||
top: 8px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
|
||||
& > div::after {
|
||||
content: "Latest";
|
||||
font-family: Avenir-Roman;
|
||||
font-size: 14px;
|
||||
line-height: 1.79;
|
||||
color: #505a72;
|
||||
border-radius: 12px;
|
||||
background-color: #3bbdc4;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
height: 24px;
|
||||
right: 37px;
|
||||
top: 8px;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: false
|
||||
layout: none
|
||||
---
|
||||
{% include values.inc %}
|
||||
<!DOCTYPE html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue