Merge pull request #5034 from HerrBertling/add-pagination-to-getting-started-guide

Add pagination to getting started guide

website/docs/source/stylesheets/_base.less

@@ -4,8 +4,8 @@ html {
   -ms-text-size-adjust: 100%;
   text-rendering: optimizeLegibility;
   -webkit-tap-highlight-color: transparent;
-}
 
+}
 body {
   font-family: @sans-serif-stack;
   font-size: @base-font-size;
@@ -14,17 +14,18 @@ body {
   background-color: @white;
   letter-spacing: 2px;
   .museo-sans-regular;
-}
 
+}
 .wrapper {
-margin-top: 80px;
+  margin-top: 80px;
-}
 
+}
 .container {
-z-index: 999; //keep content on top
+  z-index: 999;
-position: relative;
+  //keep content on top
-}
+  position: relative;
 
+}
 h1,
 h2,
 h3,
@@ -36,9 +37,9 @@ h6 {
   color: inherit;
   text-rendering: optimizelegibility;
   .museo-sans-bold;
-}
 
-	h1 {
+}
+h1 {
   @font-size: 70px;
   font-size: @font-size;
   line-height: 80px;
@@ -47,46 +48,47 @@ h6 {
   span {
     font-size: @headline-span-size;
     display: block;
-	  	}
 
+  }
   &.all-caps {
     text-transform: uppercase;
     text-align: center;
     font-size: 40px;
   }
-	}
 
-	h2 {
+}
+h2 {
   @font-size: 30px;
   font-size: @font-size;
   line-height: 35px;
-	}
 
-	h3 {
+}
+h3 {
   @font-size: 30px;
   font-size: @font-size;
   line-height: @font-size;
-	}
 
-	h4 {
+}
+h4 {
   @font-size: 24px;
   font-size: @font-size;
   line-height: @font-size;
-	}
 
-	h5 {
+}
+h5 {
   @font-size: 20px;
   font-size: @font-size;
   line-height: @font-size;
-	}
 
-	h6 {
+}
+h6 {
   @font-size: 12px;
   font-size: @font-size;
   line-height: @font-size;
-	}
 
-p, td {
+}
+p,
+td {
   letter-spacing: normal;
   line-height: 32px;
 
@@ -101,144 +103,143 @@ p, td {
       border-bottom: 1px solid darken(@blue, 10%);
     }
   }
-}
 
+}
 a {
   color: inherit;
   text-decoration: none;
 
-
   &:hover {
     text-decoration: none;
     color: @purple;
     .animate-text-color;
-	}
 
+  }
   &:active {
     color: @blue;
-	}
 
+  }
   &:visited {
 
   }
-}
 
+}
 ul {
 
-}
 
+}
 li {
-line-height: @base-line-height;
+  line-height: @base-line-height;
-}
 
+}
 blockquote {
   border: none;
   margin: 60px;
 
-  p { // blockquote p
+  p {
+    // blockquote p
     font-size: @base-font-size * 2;
     line-height: @base-line-height * 2;
     font-style: italic;
   }
-}
 
+}
 strong {
-.museo-sans-bold;
+  .museo-sans-bold;
-}
 
+}
 em {
-.museo-sans-regular-italic;
+  .museo-sans-regular-italic;
-}
 
+}
 br {
-display:block;
+  display: block;
-line-height: (@baseline * 2);
+  line-height: (@baseline * 2);
-}
 
+}
 pre,
 code {
-font-family: @mono-stack;
+  font-family: @mono-stack;
-}
 
+}
 code {
-font-size: inherit;
+  font-size: inherit;
-}
 
+}
 pre {
-border: none;
+  border: none;
-font-size: @base-font-size;
+  font-size: @base-font-size;
-background: @black;
+  background: @black;
-color: @white;
+  color: @white;
-padding: 20px;
+  padding: 20px;
-line-height: @base-line-height;
+  line-height: @base-line-height;
-margin-top: 20px;
+  margin-top: 20px;
-margin-bottom: 20px;
+  margin-bottom: 20px;
 
   span {
     color: @code-highlight-text;
   }
-}
 
+}
 hr {
 
-}
 
+}
 .vr {
-width: 2px;
+  width: 2px;
-height: 100%;
+  height: 100%;
-}
 
+}
 form {
 
-}
 
+}
 input {
-letter-spacing: 3px;
+  letter-spacing: 3px;
 
   &:focus {
     outline: none;
   }
 }
+::-webkit-input-placeholder {
 
-	::-webkit-input-placeholder  {
   overflow: visible;
   padding-top: 3px;
   color: @light-gray-text;
-	}
 
-	input:-moz-placeholder {
+}
+input:-moz-placeholder {
   overflow: visible;
   padding-top: 3px;
   color: @light-gray-text;
-	}
-
 
+}
 /* type and styles */
 .meta,
 .legal,
 .date {
-color: @medium-gray-text;
+  color: @medium-gray-text;
-line-height: @base-line-height;
+  line-height: @base-line-height;
-.museo-sans-regular;
+  .museo-sans-regular;
+
 }
-
+.date {
-	.date {
   text-transform: uppercase;
-	}
 
+}
 .button {
-color: @white;
+  color: @white;
-text-align: center;
+  text-align: center;
-background-color: @primary-button-color;
+  background-color: @primary-button-color;
-display: block;
+  display: block;
-padding: 15px 0;
+  padding: 15px 0;
-margin-top: 20px !important;
+  margin-top: 20px !important;
-text-transform: uppercase;
+  text-transform: uppercase;
-font-size: 25px;
+  font-size: 25px;
-letter-spacing: 5px;
+  letter-spacing: 5px;
-.museo-sans-light;
+  .museo-sans-light;
-.rounded;
+  .rounded;
-.hover;
+  .hover;
 
   &.inline-button {
     background-color: @vagrant-blue;
@@ -252,56 +253,82 @@ letter-spacing: 5px;
     a:hover {
       color: @white;
     }
-}
+    &.next-button,
+    &.prev-button {
+      max-width: 33%;
+      white-space: nowrap;
+    }
+    &.next-button {
+      float: right;
+      &:before {
+        content: "Next:";
+        display: inline-block;
+        padding-right: 3px;
+      }
+      &:after {
+        content: "\00BB";
+        display: inline-block;
+        padding-left: 3px;
+      }
 
-&.white-button {
+    }
+    &.prev-button {
+      float: left;
+      &:before {
+        content: "\00AB\0020Previous: ";
+        display: inline-block;
+        padding-right: 3px;
+      }
+    }
+
+  }
+  &.white-button {
     background: fade(@white, 20%);
 
     &:hover {
       background: fade(@white, 30%);
     }
-}
 
-&.secondary-button {
+  }
+  &.secondary-button {
     background: @light-gray;
 
     &:hover {
       background: @purple;
     }
-}
 
-&.with-carat span {
+  }
-  margin-right: -10px; //recenter text if there's a carat after text
+  &.with-carat span {
+    margin-right: -10px;
+    //recenter text if there's a carat after text
 
-}
+  }
-
+  span {
-span {
     // button text styles can go here
-}
 
-&:hover {
+  }
+  &:hover {
     background-color: @purple;
     .animate-background-color;
-}
 
-&:active {
+  }
+  &:active {
 
-}
 
-&.disabled {
+  }
+  &.disabled {
     background-color: @light-gray-background;
-}
+  }
 
 }
-
 a.read-more {
   color: @blue;
 
   &:hover {
     color: darken(@blue, 10%);
   }
-}
 
+}
 // misc. styles
 .loading {
   text-align: center;
@@ -310,8 +337,8 @@ a.read-more {
   letter-spacing: 5px;
   color: @medium-gray-text;
   padding: 30px 0 20px;
-}
 
-.pinned {
+}
-  position:fixed;
+.pinned {
+  position: fixed;
 }

website/docs/source/v2/getting-started/boxes.html.md

@@ -72,3 +72,6 @@ feature to allow you to find the box you care about.
 In addition to finding free boxes, HashiCorp's Atlas lets you host your own
 boxes, as well as private boxes if you intend on creating boxes for your
 own organization.
+
+<a href="/v2/getting-started/project_setup.html" class="button inline-button prev-button">Project Setup</a>
+<a href="/v2/getting-started/up.html" class="button inline-button next-button">Up And SSH</a>

website/docs/source/v2/getting-started/index.html.md

@@ -54,3 +54,5 @@ comfort of your own machine.
 
 The rest of this guide will walk you through setting up a more
 complete project, covering more features of Vagrant.
+
+<a href="/v2/getting-started/project_setup.html" class="button inline-button next-button">Project Setup</a>

website/docs/source/v2/getting-started/networking.html.md

@@ -43,3 +43,6 @@ Vagrant also has other forms of networking, allowing you to assign
 a static IP address to the guest machine, or to bridge the guest
 machine onto an existing network. If you're interested in other options,
 read the [networking](/v2/networking/index.html) page.
+
+<a href="/v2/getting-started/provisioning.html" class="button inline-button prev-button">Provisioning</a>
+<a href="/v2/getting-started/share.html" class="button inline-button next-button">Share</a>

website/docs/source/v2/getting-started/project_setup.html.md

@@ -36,3 +36,6 @@ set up Vagrant for an existing project.
 The Vagrantfile is meant to be committed to version control with
 your project, if you use version control. This way, every person working
 with that project can benefit from Vagrant without any upfront work.
+
+<a href="/v2/getting-started/index.html" class="button inline-button prev-button">Getting Started</a>
+<a href="/v2/getting-started/boxes.html" class="button inline-button next-button">Boxes</a>

website/docs/source/v2/getting-started/providers.html.md

@@ -35,3 +35,5 @@ flags necessary.
 
 For more information on providers, read the full documentation on
 [providers](/v2/providers/index.html).
+
+<a href="/v2/getting-started/rebuild.html" class="button inline-button prev-button">Rebuild</a>

website/docs/source/v2/getting-started/provisioning.html.md

@@ -75,3 +75,6 @@ directory, which is the default synced folder setup by Vagrant.
 You can play around some more by creating some more files and viewing
 them from the terminal, but in the next step we'll cover networking
 options so that you can use your own browser to access the guest machine.
+
+<a href="/v2/getting-started/synced_folders.html" class="button inline-button prev-button">Synced Folders</a>
+<a href="/v2/getting-started/networking.html" class="button inline-button next-button">Networking</a>

website/docs/source/v2/getting-started/rebuild.html.md

@@ -15,3 +15,6 @@ $ vagrant up
 That's it! Since the Vagrant environment is already all configured via
 the Vagrantfile, you or any of your coworkers simply have to run a
 `vagrant up` at any time and Vagrant will recreate your work environment.
+
+<a href="/v2/getting-started/teardown.html" class="button inline-button prev-button">Teardown</a>
+<a href="/v2/getting-started/providers.html" class="button inline-button next-button">Providers</a>

website/docs/source/v2/getting-started/share.html.md

@@ -54,3 +54,6 @@ the URL again to verify that your environment is no longer being shared.
 
 Vagrant Share is much more powerful than simply HTTP sharing. For more
 details, see the [complete Vagrant Share documentation](/v2/share/index.html).
+
+<a href="/v2/getting-started/networking.html" class="button inline-button prev-button">Networking</a>
+<a href="/v2/getting-started/teardown.html" class="button inline-button next-button">Teardown</a>

website/docs/source/v2/getting-started/synced_folders.html.md

@@ -40,3 +40,6 @@ the folders in sync.
 With [synced folders](/v2/synced-folders/index.html), you can continue
 to use your own editor on your host machine and have the files sync
 into the guest machine.
+
+<a href="/v2/getting-started/up.html" class="button inline-button prev-button">Up And SSH</a>
+<a href="/v2/getting-started/provisioning.html" class="button inline-button next-button">Provisioning</a>

website/docs/source/v2/getting-started/teardown.html.md

@@ -39,3 +39,6 @@ is left on your machine. The disk space and RAM consumed by the guest machine
 is reclaimed and your host machine is left clean. The downside is that
 `vagrant up` to get working again will take some extra time since it
 has to reimport the machine and reprovision it.
+
+<a href="/v2/getting-started/share.html" class="button inline-button prev-button">Share</a>
+<a href="/v2/getting-started/rebuild.html" class="button inline-button next-button">Rebuild</a>

website/docs/source/v2/getting-started/up.html.md

@@ -33,3 +33,6 @@ virtual machine. Cool.
 When you're done fiddling around with the machine, run `vagrant destroy`
 back on your host machine, and Vagrant will remove all traces of the
 virtual machine.
+
+<a href="/v2/getting-started/boxes.html" class="button inline-button prev-button">Boxes</a>
+<a href="/v2/getting-started/synced_folders.html" class="button inline-button next-button">Synced Folders</a>