Merge pull request #5034 from HerrBertling/add-pagination-to-getting-started-guide
Add pagination to getting started guide
This commit is contained in:
Seth Vargo
commit
919aa70c5d
|
|
@ -1,11 +1,11 @@
|
|||
html {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-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
|
||||
position: relative;
|
||||
}
|
||||
z-index: 999;
|
||||
//keep content on top
|
||||
position: relative;
|
||||
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -36,272 +37,298 @@ h6 {
|
|||
color: inherit;
|
||||
text-rendering: optimizelegibility;
|
||||
.museo-sans-bold;
|
||||
|
||||
}
|
||||
h1 {
|
||||
@font-size: 70px;
|
||||
font-size: @font-size;
|
||||
line-height: 80px;
|
||||
letter-spacing: 3px;
|
||||
|
||||
h1 {
|
||||
@font-size: 70px;
|
||||
font-size: @font-size;
|
||||
line-height: 80px;
|
||||
letter-spacing: 3px;
|
||||
span {
|
||||
font-size: @headline-span-size;
|
||||
display: block;
|
||||
|
||||
span {
|
||||
font-size: @headline-span-size;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.all-caps {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
&.all-caps {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@font-size: 30px;
|
||||
font-size: @font-size;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@font-size: 30px;
|
||||
font-size: @font-size;
|
||||
line-height: @font-size;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@font-size: 24px;
|
||||
font-size: @font-size;
|
||||
line-height: @font-size;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@font-size: 20px;
|
||||
font-size: @font-size;
|
||||
line-height: @font-size;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@font-size: 12px;
|
||||
font-size: @font-size;
|
||||
line-height: @font-size;
|
||||
}
|
||||
|
||||
p, td {
|
||||
letter-spacing: normal;
|
||||
line-height: 32px;
|
||||
|
||||
a {
|
||||
color: @docs-blue;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid @docs-blue;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken(@blue, 10%);
|
||||
border-bottom: 1px solid darken(@blue, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
@font-size: 30px;
|
||||
font-size: @font-size;
|
||||
line-height: 35px;
|
||||
|
||||
}
|
||||
h3 {
|
||||
@font-size: 30px;
|
||||
font-size: @font-size;
|
||||
line-height: @font-size;
|
||||
|
||||
}
|
||||
h4 {
|
||||
@font-size: 24px;
|
||||
font-size: @font-size;
|
||||
line-height: @font-size;
|
||||
|
||||
}
|
||||
h5 {
|
||||
@font-size: 20px;
|
||||
font-size: @font-size;
|
||||
line-height: @font-size;
|
||||
|
||||
}
|
||||
h6 {
|
||||
@font-size: 12px;
|
||||
font-size: @font-size;
|
||||
line-height: @font-size;
|
||||
|
||||
}
|
||||
p,
|
||||
td {
|
||||
letter-spacing: normal;
|
||||
line-height: 32px;
|
||||
|
||||
a {
|
||||
color: @docs-blue;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid @docs-blue;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken(@blue, 10%);
|
||||
border-bottom: 1px solid darken(@blue, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: @purple;
|
||||
.animate-text-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: @purple;
|
||||
.animate-text-color;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
color: @blue;
|
||||
|
||||
&:active {
|
||||
color: @blue;
|
||||
}
|
||||
}
|
||||
&:visited {
|
||||
|
||||
&:visited {
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
li {
|
||||
line-height: @base-line-height;
|
||||
}
|
||||
line-height: @base-line-height;
|
||||
|
||||
}
|
||||
blockquote {
|
||||
border: none;
|
||||
border: none;
|
||||
margin: 60px;
|
||||
|
||||
p { // blockquote p
|
||||
font-size: @base-font-size * 2;
|
||||
line-height: @base-line-height * 2;
|
||||
font-style: italic;
|
||||
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;
|
||||
line-height: (@baseline * 2);
|
||||
}
|
||||
display: block;
|
||||
line-height: (@baseline * 2);
|
||||
|
||||
}
|
||||
pre,
|
||||
code {
|
||||
font-family: @mono-stack;
|
||||
}
|
||||
font-family: @mono-stack;
|
||||
|
||||
}
|
||||
code {
|
||||
font-size: inherit;
|
||||
}
|
||||
font-size: inherit;
|
||||
|
||||
}
|
||||
pre {
|
||||
border: none;
|
||||
font-size: @base-font-size;
|
||||
background: @black;
|
||||
color: @white;
|
||||
padding: 20px;
|
||||
line-height: @base-line-height;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: none;
|
||||
font-size: @base-font-size;
|
||||
background: @black;
|
||||
color: @white;
|
||||
padding: 20px;
|
||||
line-height: @base-line-height;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
span {
|
||||
color: @code-highlight-text;
|
||||
}
|
||||
|
||||
span {
|
||||
color: @code-highlight-text;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.vr {
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
}
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
form {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
input {
|
||||
letter-spacing: 3px;
|
||||
letter-spacing: 3px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
overflow: visible;
|
||||
padding-top: 3px;
|
||||
color: @light-gray-text;
|
||||
}
|
||||
|
||||
input:-moz-placeholder {
|
||||
overflow: visible;
|
||||
padding-top: 3px;
|
||||
color: @light-gray-text;
|
||||
}
|
||||
overflow: visible;
|
||||
padding-top: 3px;
|
||||
color: @light-gray-text;
|
||||
|
||||
}
|
||||
input:-moz-placeholder {
|
||||
overflow: visible;
|
||||
padding-top: 3px;
|
||||
color: @light-gray-text;
|
||||
|
||||
}
|
||||
/* type and styles */
|
||||
.meta,
|
||||
.legal,
|
||||
.date {
|
||||
color: @medium-gray-text;
|
||||
line-height: @base-line-height;
|
||||
.museo-sans-regular;
|
||||
color: @medium-gray-text;
|
||||
line-height: @base-line-height;
|
||||
.museo-sans-regular;
|
||||
|
||||
}
|
||||
.date {
|
||||
text-transform: uppercase;
|
||||
|
||||
.date {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
}
|
||||
.button {
|
||||
color: @white;
|
||||
text-align: center;
|
||||
background-color: @primary-button-color;
|
||||
display: block;
|
||||
padding: 15px 0;
|
||||
margin-top: 20px !important;
|
||||
text-transform: uppercase;
|
||||
font-size: 25px;
|
||||
letter-spacing: 5px;
|
||||
.museo-sans-light;
|
||||
.rounded;
|
||||
.hover;
|
||||
color: @white;
|
||||
text-align: center;
|
||||
background-color: @primary-button-color;
|
||||
display: block;
|
||||
padding: 15px 0;
|
||||
margin-top: 20px !important;
|
||||
text-transform: uppercase;
|
||||
font-size: 25px;
|
||||
letter-spacing: 5px;
|
||||
.museo-sans-light;
|
||||
.rounded;
|
||||
.hover;
|
||||
|
||||
&.inline-button {
|
||||
background-color: @vagrant-blue;
|
||||
padding: 5px 20px;
|
||||
color: @white !important;
|
||||
font-size: 15px;
|
||||
letter-spacing: 1px;
|
||||
.rounded;
|
||||
&.inline-button {
|
||||
background-color: @vagrant-blue;
|
||||
padding: 5px 20px;
|
||||
color: @white !important;
|
||||
font-size: 15px;
|
||||
letter-spacing: 1px;
|
||||
.rounded;
|
||||
|
||||
a,
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
&.prev-button {
|
||||
float: left;
|
||||
&:before {
|
||||
content: "\00AB\0020Previous: ";
|
||||
display: inline-block;
|
||||
padding-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
&.white-button {
|
||||
background: fade(@white, 20%);
|
||||
|
||||
&.white-button {
|
||||
background: fade(@white, 20%);
|
||||
&:hover {
|
||||
background: fade(@white, 30%);
|
||||
}
|
||||
|
||||
}
|
||||
&.secondary-button {
|
||||
background: @light-gray;
|
||||
|
||||
&:hover {
|
||||
background: @purple;
|
||||
}
|
||||
|
||||
}
|
||||
&.with-carat span {
|
||||
margin-right: -10px;
|
||||
//recenter text if there's a carat after text
|
||||
|
||||
}
|
||||
span {
|
||||
// button text styles can go here
|
||||
|
||||
}
|
||||
&:hover {
|
||||
background: fade(@white, 30%);
|
||||
background-color: @purple;
|
||||
.animate-background-color;
|
||||
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
|
||||
&.secondary-button {
|
||||
background: @light-gray;
|
||||
|
||||
&:hover {
|
||||
background: @purple;
|
||||
}
|
||||
}
|
||||
|
||||
&.with-carat span {
|
||||
margin-right: -10px; //recenter text if there's a carat after text
|
||||
&.disabled {
|
||||
background-color: @light-gray-background;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
// button text styles can go here
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @purple;
|
||||
.animate-background-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -23,19 +23,22 @@ work. The downside is that the virtual machine still eats up your disk space,
|
|||
and requires even more disk space to store all the state of the virtual
|
||||
machine RAM on disk.
|
||||
|
||||
**Halting** the virtual machine by calling `vagrant halt` will gracefully
|
||||
shut down the guest operating system and power down the guest machine.
|
||||
You can use `vagrant up` when you're ready to boot it again. The benefit of
|
||||
this method is that it will cleanly shut down your machine, preserving the
|
||||
**Halting** the virtual machine by calling `vagrant halt` will gracefully
|
||||
shut down the guest operating system and power down the guest machine.
|
||||
You can use `vagrant up` when you're ready to boot it again. The benefit of
|
||||
this method is that it will cleanly shut down your machine, preserving the
|
||||
contents of disk, and allowing it to be cleanly started again. The downside is
|
||||
that it'll take some extra time to start from a cold boot, and the guest machine
|
||||
still consumes disk space.
|
||||
|
||||
**Destroying** the virtual machine by calling `vagrant destroy` will remove
|
||||
all traces of the guest machine from your system. It'll stop the guest machine,
|
||||
power it down, and remove all of the guest hard disks. Again, when you're ready to
|
||||
**Destroying** the virtual machine by calling `vagrant destroy` will remove
|
||||
all traces of the guest machine from your system. It'll stop the guest machine,
|
||||
power it down, and remove all of the guest hard disks. Again, when you're ready to
|
||||
work again, just issue a `vagrant up`. The benefit of this is that _no cruft_
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue