website: docs layout
This commit is contained in:
Mitchell Hashimoto
parent
bf664fce1b
commit
0b6d0efa7b
|
|
@ -1,83 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Packer</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<% wrap_layout :layout do %>
|
||||
<div class="docs-wrapper">
|
||||
<div class="sidebar dark-background hidden-phone">
|
||||
<h2>Docs</h2>
|
||||
|
||||
<!-- Le styles -->
|
||||
<%= stylesheet_link_tag "bootstrap.min", "packer" %>
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
<ul>
|
||||
<li><a href="/docs/what-is-packer.html">What is Packer?</a></li>
|
||||
<li><a href="/docs/installation.html">Installation</a></li>
|
||||
<li><a href="/docs/basics/terminology.html">Terminology</a></li>
|
||||
</ul>
|
||||
|
||||
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
|
||||
</head>
|
||||
<ul>
|
||||
<li><h4>Command-Line</h4></li>
|
||||
<li><a href="/docs/command-line/introduction.html">Introduction</a></li>
|
||||
<li><a href="/docs/command-line/build.html">Build</a></li>
|
||||
<li><a href="/docs/command-line/validate.html">Validate</a></li>
|
||||
</ul>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
<li><h4>Templates</h4></li>
|
||||
<li><a href="/docs/templates/introduction.html">Introduction</a></li>
|
||||
<li><a href="/docs/templates/builders.html">Builders</a></li>
|
||||
<li><a href="/docs/templates/provisioners.html">Provisioners</a></li>
|
||||
<li><a href="/docs/templates/post-processors.html">Post-Processors</a></li>
|
||||
<li><a href="/docs/templates/configuration-templates.html">Configuration Templates</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="well sidebar-nav" style="padding: 8px 0;">
|
||||
<ul class="nav nav-list">
|
||||
<li><a href="/docs/what-is-packer.html">What is Packer?</a></li>
|
||||
<li><a href="/docs/installation.html">Installation</a></li>
|
||||
<li><a href="/docs/basics/terminology.html">Terminology</a></li>
|
||||
<ul>
|
||||
<li><h4>Builders</h4></li>
|
||||
<li><a href="/docs/builders/digitalocean.html">DigitalOcean</a></li>
|
||||
<li><a href="/docs/builders/amazon-ebs.html">EC2 (AMI)</a></li>
|
||||
<li><a href="/docs/builders/virtualbox.html">VirtualBox</a></li>
|
||||
<li><a href="/docs/builders/vmware.html">VMware</a></li>
|
||||
<li><a href="/docs/builders/custom.html">Custom</a></li>
|
||||
</ul>
|
||||
|
||||
<li class="nav-header">Command-Line</li>
|
||||
<li><a href="/docs/command-line/introduction.html">Introduction</a></li>
|
||||
<li><a href="/docs/command-line/build.html">Build</a></li>
|
||||
<li><a href="/docs/command-line/validate.html">Validate</a></li>
|
||||
<ul>
|
||||
<li><h4>Provisioners</h4></li>
|
||||
<li><a href="/docs/provisioners/shell.html">Shell Scripts</a></li>
|
||||
<li><a href="/docs/provisioners/custom.html">Custom</a></li>
|
||||
</ul>
|
||||
|
||||
<li class="nav-header">Templates</li>
|
||||
<li><a href="/docs/templates/introduction.html">Introduction</a></li>
|
||||
<li><a href="/docs/templates/builders.html">Builders</a></li>
|
||||
<li><a href="/docs/templates/provisioners.html">Provisioners</a></li>
|
||||
<li><a href="/docs/templates/post-processors.html">Post-Processors</a></li>
|
||||
<li><a href="/docs/templates/configuration-templates.html">Configuration Templates</a></li>
|
||||
<ul>
|
||||
<li><h4>Other</h4></li>
|
||||
<li><a href="/docs/other/core-configuration.html">Core Configuration</a></li>
|
||||
<li><a href="/docs/other/debugging.html">Debugging</a></li>
|
||||
</ul>
|
||||
|
||||
<li class="nav-header">Builders</li>
|
||||
<li><a href="/docs/builders/digitalocean.html">DigitalOcean</a></li>
|
||||
<li><a href="/docs/builders/amazon-ebs.html">EC2 (AMI)</a></li>
|
||||
<li><a href="/docs/builders/virtualbox.html">VirtualBox</a></li>
|
||||
<li><a href="/docs/builders/vmware.html">VMware</a></li>
|
||||
<li><a href="/docs/builders/custom.html">Custom</a></li>
|
||||
<ul>
|
||||
<li><h4>Extend Packer</h4></li>
|
||||
<li><a href="/docs/extend/plugins.html">Packer Plugins</a></li>
|
||||
<li><a href="/docs/extend/developing-plugins.html">Developing Plugins</a></li>
|
||||
<li><a href="/docs/extend/builder.html">Custom Builder</a></li>
|
||||
<li><a href="/docs/extend/command.html">Custom Command</a></li>
|
||||
<li><a href="/docs/extend/post-processor.html">Custom Post-Processor</a></li>
|
||||
<li><a href="/docs/extend/provisioner.html">Custom Provisioner</a></li>
|
||||
</ul>
|
||||
|
||||
<li class="nav-header">Provisioners</li>
|
||||
<li><a href="/docs/provisioners/shell.html">Shell Scripts</a></li>
|
||||
<li><a href="/docs/provisioners/custom.html">Custom</a></li>
|
||||
<!-- trick it into having a full-height sidebar regardless of content height -->
|
||||
<div class="sidebar-background"></div>
|
||||
</div>
|
||||
|
||||
<li class="nav-header">Other</li>
|
||||
<li><a href="/docs/other/core-configuration.html">Core Configuration</a></li>
|
||||
<li><a href="/docs/other/debugging.html">Debugging</a></li>
|
||||
|
||||
<li class="nav-header">Extend Packer</li>
|
||||
<li><a href="/docs/extend/plugins.html">Packer Plugins</a></li>
|
||||
<li><a href="/docs/extend/developing-plugins.html">Developing Plugins</a></li>
|
||||
<li><a href="/docs/extend/builder.html">Custom Builder</a></li>
|
||||
<li><a href="/docs/extend/command.html">Custom Command</a></li>
|
||||
<li><a href="/docs/extend/post-processor.html">Custom Post-Processor</a></li>
|
||||
<li><a href="/docs/extend/provisioner.html">Custom Provisioner</a></li>
|
||||
</ul>
|
||||
</div><!--/.well -->
|
||||
</div><!--/span-->
|
||||
<div class="span9">
|
||||
<%= yield %>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Mitchell Hashimoto 2013</p>
|
||||
</footer>
|
||||
</div><!--/.fluid-container-->
|
||||
</body>
|
||||
</html>
|
||||
<div class="docs-body">
|
||||
<div class="docs-content">
|
||||
<%= yield %>
|
||||
</div>
|
||||
|
||||
<div class="docs-background"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="dark-background">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
|
|
@ -38,7 +37,6 @@
|
|||
<li><a href="#">About</a></li>
|
||||
<li><a href="/docs">Documentation</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,6 +44,8 @@
|
|||
|
||||
<%= yield %>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<footer class="dark-background">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
|
|
|
|||
|
|
@ -169,6 +169,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.docs-background {
|
||||
@extend .white-background;
|
||||
height: 100%;
|
||||
width: 760px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: $sidebar-width;
|
||||
z-index: -9999;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: $docs-top-margin;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ $nav-height: 100px;
|
|||
$hero-height: 500px;
|
||||
$docs-top-margin: 60px;
|
||||
$sidebar-background-color: $dark-background;
|
||||
$sidebar-width: 225px;
|
||||
$sidebar-width: 250px;
|
||||
|
||||
|
||||
//typography
|
||||
|
|
|
|||
|
|
@ -1,61 +1,61 @@
|
|||
.sidebar {
|
||||
$border: 1px solid $gray-dark;
|
||||
font-size: 16px;
|
||||
font-family: $mono;
|
||||
color: $gray-light;
|
||||
width: $sidebar-width;
|
||||
float: left;
|
||||
background-color: $sidebar-background-color;
|
||||
height: 100%;
|
||||
@include respond-to(mobile) {
|
||||
width: 100%;
|
||||
}
|
||||
$border: 1px solid $gray-dark;
|
||||
font-size: 16px;
|
||||
font-family: $mono;
|
||||
color: $gray-light;
|
||||
width: $sidebar-width;
|
||||
float: left;
|
||||
background-color: $sidebar-background-color;
|
||||
height: 100%;
|
||||
@include respond-to(mobile) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
padding: $docs-top-margin 20px 0;
|
||||
@include respond-to(mobile) {
|
||||
padding: $baseline;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
padding: $docs-top-margin 20px 0;
|
||||
@include respond-to(mobile) {
|
||||
padding: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
@extend .padded-sm;
|
||||
|
||||
li {
|
||||
border-bottom: $border;
|
||||
padding: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li > * {
|
||||
padding: auto 20px;
|
||||
margin-left: 20px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sidebar-background {
|
||||
background-color: $sidebar-background-color;
|
||||
height: 100%;
|
||||
width: $sidebar-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -9999;
|
||||
}
|
||||
h4 {
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
}
|
||||
ul {
|
||||
|
||||
@extend .padded-sm;
|
||||
|
||||
li {
|
||||
border-bottom: $border;
|
||||
padding: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li > * {
|
||||
padding: auto 20px;
|
||||
margin-left: 20px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sidebar-background {
|
||||
background-color: $sidebar-background-color;
|
||||
height: 100%;
|
||||
width: $sidebar-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -9999;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue