Commit 47cb01ce authored by Mitchell Hashimoto's avatar Mitchell Hashimoto

website: docs layout

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