diff --git a/.gitignore b/.gitignore index 8ba11e894..ac9ec2a06 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ /bin /local /pkg +/website/.sass-cache /website/build diff --git a/website/Gemfile b/website/Gemfile index 728c73335..29ff7e53c 100644 --- a/website/Gemfile +++ b/website/Gemfile @@ -1,6 +1,5 @@ source 'https://rubygems.org' -gem "less", "~> 2.2.2" gem "middleman", "~> 3.0.6" gem "middleman-minify-html", "~> 3.0.0" gem "rack-contrib", "~> 1.1.0" diff --git a/website/Gemfile.lock b/website/Gemfile.lock index 801806565..d79220dde 100644 --- a/website/Gemfile.lock +++ b/website/Gemfile.lock @@ -13,7 +13,6 @@ GEM coffee-script-source execjs coffee-script-source (1.3.3) - commonjs (0.2.6) compass (0.12.2) chunky_png (~> 1.2) fssm (>= 0.2.7) @@ -33,8 +32,6 @@ GEM rack (>= 1.0.0) url_mount (~> 0.2.1) i18n (0.6.1) - less (2.2.2) - commonjs (~> 0.2.6) libv8 (3.3.10.4) listen (0.5.3) maruku (0.6.1) @@ -129,7 +126,6 @@ PLATFORMS DEPENDENCIES highline (~> 1.6.15) - less (~> 2.2.2) middleman (~> 3.0.6) middleman-minify-html (~> 3.0.0) rack-contrib (~> 1.1.0) diff --git a/website/source/fonts/2772B2_0_0.eot b/website/source/fonts/2772B2_0_0.eot new file mode 100644 index 000000000..e0569eea9 Binary files /dev/null and b/website/source/fonts/2772B2_0_0.eot differ diff --git a/website/source/fonts/2772B2_0_0.ttf b/website/source/fonts/2772B2_0_0.ttf new file mode 100644 index 000000000..e734a066d Binary files /dev/null and b/website/source/fonts/2772B2_0_0.ttf differ diff --git a/website/source/fonts/2772B2_0_0.woff b/website/source/fonts/2772B2_0_0.woff new file mode 100644 index 000000000..c815c79dc Binary files /dev/null and b/website/source/fonts/2772B2_0_0.woff differ diff --git a/website/source/images/arrow-left.png b/website/source/images/arrow-left.png new file mode 100644 index 000000000..ad35bbf10 Binary files /dev/null and b/website/source/images/arrow-left.png differ diff --git a/website/source/images/arrow-right.png b/website/source/images/arrow-right.png new file mode 100644 index 000000000..df2a87470 Binary files /dev/null and b/website/source/images/arrow-right.png differ diff --git a/website/source/images/divider.png b/website/source/images/divider.png new file mode 100644 index 000000000..ed3f713bd Binary files /dev/null and b/website/source/images/divider.png differ diff --git a/website/source/images/down_arrow.png b/website/source/images/down_arrow.png new file mode 100644 index 000000000..8f986c926 Binary files /dev/null and b/website/source/images/down_arrow.png differ diff --git a/website/source/images/hero_image.jpg b/website/source/images/hero_image.jpg new file mode 100644 index 000000000..c0990a936 Binary files /dev/null and b/website/source/images/hero_image.jpg differ diff --git a/website/source/images/logo_footer.png b/website/source/images/logo_footer.png new file mode 100644 index 000000000..ca0112ebc Binary files /dev/null and b/website/source/images/logo_footer.png differ diff --git a/website/source/images/logo_nav.png b/website/source/images/logo_nav.png new file mode 100644 index 000000000..1d7863c9b Binary files /dev/null and b/website/source/images/logo_nav.png differ diff --git a/website/source/images/user_bbc.png b/website/source/images/user_bbc.png new file mode 100644 index 000000000..fbc8c4e40 Binary files /dev/null and b/website/source/images/user_bbc.png differ diff --git a/website/source/images/user_disqus.png b/website/source/images/user_disqus.png new file mode 100644 index 000000000..8710fd14c Binary files /dev/null and b/website/source/images/user_disqus.png differ diff --git a/website/source/images/user_edgecast.png b/website/source/images/user_edgecast.png new file mode 100644 index 000000000..e73e4b841 Binary files /dev/null and b/website/source/images/user_edgecast.png differ diff --git a/website/source/images/user_expedia.png b/website/source/images/user_expedia.png new file mode 100644 index 000000000..6fabee773 Binary files /dev/null and b/website/source/images/user_expedia.png differ diff --git a/website/source/images/works_with_aws.png b/website/source/images/works_with_aws.png new file mode 100644 index 000000000..0a353cf88 Binary files /dev/null and b/website/source/images/works_with_aws.png differ diff --git a/website/source/images/works_with_virtual.png b/website/source/images/works_with_virtual.png new file mode 100644 index 000000000..dbfa8c737 Binary files /dev/null and b/website/source/images/works_with_virtual.png differ diff --git a/website/source/images/works_with_vmware.png b/website/source/images/works_with_vmware.png new file mode 100644 index 000000000..63f190d3b Binary files /dev/null and b/website/source/images/works_with_vmware.png differ diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 7ef42f93e..ecf3e1d9f 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -1,3 +1,71 @@ -

Packer

+
-Coming soon. Docs +
+
+
+
+

+ Packer is a tool for creating identical machine images for multiple platforms from a single source configuration +

+
+
+
+
+ +
+
+
+
+ down_arrow +

Download v1.0

+ + + Release Notes + + 06/17/13 + + +
+
+
+
+ +
+
+
+
+

Fast

+ +

Parallel

+ +

Customizable

+
+
+
+

Designed to create identical images for development, test, and production. Packer is lightweight and easy to use. It is lightning fast, parallelizes concurrent jobs, and is infinitely customizable.

+
+
+
+ +
+
+
+
+

Works great with

+ +
+
+
+

Packer is a free and open source tool for creating golden images for multiple platforms from a single source.

+
+
+
    +
  • Amazon Web Services
    • +
  • Virtualbox
    • +
  • VM Ware
    • +
+
+
+
+ +
diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb index 5fe815b78..c87d2788e 100644 --- a/website/source/layouts/layout.erb +++ b/website/source/layouts/layout.erb @@ -1,37 +1,66 @@ - + - Packer + - - - - - <%= stylesheet_link_tag "bootstrap.min" %> - - + + + + + + + <%= stylesheet_link_tag "bootstrap.min", "main" %> + + + + + + + -
-
+
+
+ -
+ <%= yield %> - - + - diff --git a/website/source/stylesheets/components.scss b/website/source/stylesheets/components.scss new file mode 100644 index 000000000..ddfc4dcc5 --- /dev/null +++ b/website/source/stylesheets/components.scss @@ -0,0 +1,265 @@ +.hero { +height: $hero-height; +background: url(/images/hero_image.jpg) no-repeat center center; +background-size: cover; +@include respond-to(mobile) { +margin-right: -20px; +margin-left: -20px; +background-size: cover; +} + + h2 { + margin-top: $baseline * 5.5; + @include respond-to(mobile) { + background-position: center bottom; + margin-top: $baseline * 4; + margin-left: 20px; + width: 80%; + font-size: 30px; + line-height: (35/30); + } + } +} + +.belt { +@include respond-to(mobile) { +margin-right: -20px; +margin-left: -20px; +} + + &.download { + background-color: $white; + @extend .padded-sm; + } + + .download-arrow { + margin: 5px 30px 0 0; + @include respond-to(mobile) { + margin-left: $baseline; + margin-top: -10px; + margin-right: $baseline; + } + } + + h2 { + margin: 15px auto 0; + line-height: 1.0; + @include respond-to(mobile) { + font-size: 25px; + line-height: (30/25); + } + } + + span { + color: $gray-dark; + } +} + + +// break this out into sections + +.about { + + hgroup { + display: table; + margin-bottom: $baseline * 2; + @include respond-to(mobile) { + display: block; + } + } + + h2.has-dividers { + @include respond-to(mobile) { + display: block; + } + } + + .dividers { + + } + +} + +.vendors { + + .company-logos { + text-indent: -999999px; + margin-left: 50px; + @include respond-to(mobile) { + margin-left: 0; + } + + li { + height: 100px; + @include respond-to(mobile) { + margin-bottom: $baseline * 2; + } + } + + .aws { + background: url(/images/works_with_aws.png) no-repeat center center; + } + .virtualbox { + background: url(/images/works_with_virtual.png) no-repeat center center; + } + .vmware { + background: url(/images/works_with_vmware.png) no-repeat center center; + } + } + + + +} + +.users { + + + .company-logos { + text-indent: -999999px; + margin-left: 40px; + @include respond-to(mobile) { + margin-left: 0; + } + + li { + height: 100px; + } + + .expedia { + background: url(../../img/user_expedia.png) no-repeat center center; + } + .bbc { + background: url(../../img/user_bbc.png) no-repeat center center; + } + .disqus { + background: url(../../img/user_disqus.png) no-repeat center center; + } + .edgecast { + background: url(../../img/user_edgecast.png) no-repeat center center; + } + } +} + + +.docs-wrapper { +clear: right; +@include respond-to(mobile) { +margin-right: -20px; +margin-left: -20px; +} + + .docs-body { + float: left; + width: 70%; + max-width: 760px; + display: block; + @extend .white-background; + @include respond-to(mobile) { + width: 100%; + } + + .docs-content { + max-width: 600px; + padding: $docs-top-margin 80px; + display: block; + @include respond-to(mobile) { + padding: 0; + width: 91%; + margin-left: 5%; + } + } + + section { + margin-top: $docs-top-margin; + } + + h1, + h2, + h3, + p { + @include respond-to(mobile) { + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + } + + h1 { + font-size: 40px; + line-height: (25/20); + text-transform: uppercase; + } + + h2 { + margin-top: $baseline * 2; + text-transform: capitalize; + } + + h3 { + margin-top: $baseline; + text-transform: capitalize; + } + } + + pre { + @include respond-to(mobile) { + margin: $baseline 0 $baseline 0; + padding: $baseline 0 0 $baseline; + width: 80%; + background-color: transparent; + border: none; + color: $black; + } + } + +} + +.pagination { +$border: 1px solid $gray-mid; +height: $nav-height; +border-top: $border; +font-size: 20px; +margin: 0px; + + h4 { + display: inline-block; + margin-top: ($baseline * 1.7); + margin-left: $baseline; + + @include respond-to(mobile) { + margin-top: 10px; + } + } + + span { + + @include respond-to(mobile) { + display: block; + } + } + + .previous-section, + .next-section { + height: $nav-height; + display: block; + + &:hover { + background-color: transparentize($gray-light, .7); + } + } + + .previous-section { + width: $nav-height; + border-right: $border; + float: left; + background: $white url(/images/arrow-left.png) no-repeat center center; + @include respond-to(mobile) { + width: 50%; + background-position: left center; + } + } + + .next-section { + background: $white url(/images/arrow-right.png) no-repeat center right; + } +} diff --git a/website/source/stylesheets/footer.scss b/website/source/stylesheets/footer.scss new file mode 100644 index 000000000..686a242e6 --- /dev/null +++ b/website/source/stylesheets/footer.scss @@ -0,0 +1,72 @@ +footer { +height: $nav-height; +max-height: $nav-height; +background-color: $black !important; +padding: 0; +margin: 0; +text-transform: uppercase; +color: $white; +font-family: $sans; +@include respond-to(mobile) { +margin-right: -20px; +margin-left: -20px; +} + + ul { + margin-top: 40px; + @include respond-to(mobile) { + margin-left: $baseline; + margin-top: $baseline; + } + + li { + display: inline; + margin-right: 50px; + @include respond-to(mobile) { + margin-right: 20px; + display: list-item; + } + } + + .hashi-logo { + background: url(/images/logo_footer.png) no-repeat center top; + height: 40px; + width: 40px; + background-size: 37px 40px; + text-indent: -999999px; + display: inline-block; + margin-top: -10px; + margin-right: 0; + @include respond-to(mobile) { + margin-top: -50px; + margin-right: $baseline; + } + } + } + + .active { + color: $green; + } + + button { + margin-top: 20px; + } + + +} + +.page-wrap { +min-height: 100%; +/* equal to footer height */ +margin-bottom: -($nav-height); +} + +.page-wrap:after { +content: ""; +display: block; +} + +.page-wrap:after { +/* .push must be the same height as footer */ +height: $nav-height; +} diff --git a/website/source/stylesheets/helpers.scss b/website/source/stylesheets/helpers.scss new file mode 100644 index 000000000..71f2b11cc --- /dev/null +++ b/website/source/stylesheets/helpers.scss @@ -0,0 +1,187 @@ +/* variables */ + +//color +$black: #000; +$white: #fff; +$red: #ff0000; + +$green: #7bc6b1; +$orange: #f2826a; +$background: #f2eee5; +$dark-background: #333; + +$gray-dark: #5c5c5c; +$gray-mid: #b2b2b2; +$gray-light: #e0e0e0; + +$border-dark: #333; + +// base measures +$baseline: 20px; +$base-font-size: 16px; +$base-line-height: 20px; +$button-height: 60px; + +.padded-lg {padding: ($baseline * 4) 0;} +.padded {padding: ($baseline * 2) 0;} +.padded-sm {padding: ($baseline) 0;} + + +// components +$nav-height: 100px; +$hero-height: 500px; +$docs-top-margin: 60px; +$sidebar-background-color: $dark-background; +$sidebar-width: 225px; + + +//typography +$serif: 'tk-ff-tisa-web-pro', 'ff-tisa-web-pro-1', 'ff-tisa-web-pro-2', 'tisa ot', helvetica, Georgia, serif; +$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$mono: 'Inconsolata', 'courier new', courier, mono-space; + +.serif {font-family: $serif;} +.sans {font-family: $sans;} +.mono {font-family: $mono;} + +.text-center {text-align: center !important;} +.text-left {text-align: left !important;} +.text-right {text-align: right !important;} + +.text-green {color: $green;} + +.uppercase {text-transform: uppercase !important;} + +@font-face { + font-family: 'HeimatStencil-SemiBold'; + src: url('../../fonts/2772B2_0_0.eot'); + src: url('../../fonts/2772B2_0_0.woff') format('woff'), + url('../../fonts/2772B2_0_0.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + + +//color +.dark-background { +background-color: inherit; +color: $white; + + a { + color: inherit; + &:hover { + color: $green; + } + &:active { + color: darken($green, 30%); + } + } +} + +.white-background { +background-color: $white; +} + + +//elements +.divider { +background: url(/images/divider.png) no-repeat center bottom; +height: 70px; +width: 70px; +background-size: 70px 70px; +display: table-cell; +text-align: center; +vertical-align: middle; +} + +.packer { +color: $orange; +font-size: 20px; + + a:hover, + a:active, + a:visited { + color: inherit; + } +} + +// media queries +$break-sm: 480px; +$break-med: 768px; +$break-max: 1200px; +$break-lg: 980px; + +@mixin respond-to($media) { + @if $media == mobile { + @media only screen and (max-width: $break-sm) { @content; } + } + @else if $media == tablet { + @media only screen and (max-width: $break-med - 1) { @content; } + } + @else if $media == desktop { + @media only screen and (min-width: $break-med) and (max-width: $break-lg - 1) { @content; } + } + @else if $media == desktop-lg { + @media only screen and (min-width: $break-max) { @content; } + } +} + +/* +* example * +.profile-pic { + @include respond-to(mobile) { width: 100% ;} + @include respond-to(tablet) { width: 125px; } +} +*/ +////// + +/* utlities */ +.d { +border-bottom: 1px solid $red; +border-top: 1px solid $red; +background-color: transparentize($red, .9); +} + +.hyphenate { +-webkit-hyphens: auto; +-moz-hyphens: auto; +hyphens: auto; +} + +.full-width { +margin-right: -20px; +margin-left: -20px; +} + +.add-transition { +transition: all .1s ease-in-out; +-moz-transition: all .1s ease-in-out; +-webkit-transition: all .1s ease-in-out; +-o-transition: all .1s ease-in-out; +} + +@mixin opacity($opacity) { +-khtml-opacity: $opacity; +-moz-opacity: $opacity; +opacity: $opacity; +} + +@mixin transform-scale($value) { + -moz-transform: scale($value); +-webkit-transform: scale($value); + transform: scale($value); +} + +@mixin transition($type, $speed, $easing) { + -webkit-transition: $type $speed $easing; + -moz-transition: $type $speed $easing; + -o-transition: $type $speed $easing; + transition: $type $speed $easing; +} + +@mixin rounded($radius) { +-moz-border-radius: $radius; +-webkit-border-radius: $radius; +-khtml-border-radius: $radius; +border-radius: $radius; +} diff --git a/website/source/stylesheets/main.css.scss b/website/source/stylesheets/main.css.scss new file mode 100644 index 000000000..29826a751 --- /dev/null +++ b/website/source/stylesheets/main.css.scss @@ -0,0 +1,7 @@ +@import "helpers"; +@import "reset"; +@import "styles"; +@import "nav"; +@import "footer"; +@import "components"; +@import "sidebar"; diff --git a/website/source/stylesheets/nav.scss b/website/source/stylesheets/nav.scss new file mode 100644 index 000000000..9e12ebdb8 --- /dev/null +++ b/website/source/stylesheets/nav.scss @@ -0,0 +1,57 @@ +nav { +height: $nav-height; +padding: $baseline 0; +background-color: $black !important; +padding: 0; +margin: 0; +text-transform: uppercase; +color: $white; +font-family: $sans; +font-size: 16px; +border-bottom: 1px solid $border-dark; +@include respond-to(mobile) { +margin-right: -20px; +margin-left: -20px; +} + + ul { + margin-top: ($baseline * 2); + margin-left: $nav-height; + @include respond-to(mobile) { + margin-left: 50px; + margin-top: 12px; + } + + li { + display: inline-block; + margin-right: 50px; + @include respond-to(mobile) { + margin-bottom: 7px; + display: block; + } + } + + } + + .packer-logo { + background: url(/images/logo_nav.png) no-repeat center top; + height: 80px; + width: 80px; + background-size: 34px 50px; + text-indent: -999999px; + display: inline-block; + margin-top: 25px; + @include respond-to(mobile) { + margin-top: 15px; + } + } + + .active { + color: $green; + } + + button { + margin-top: $baseline; + } + +} //nav diff --git a/website/source/stylesheets/packer.less b/website/source/stylesheets/packer.less deleted file mode 100644 index e69de29bb..000000000 diff --git a/website/source/stylesheets/reset.scss b/website/source/stylesheets/reset.scss new file mode 100644 index 000000000..d4f7f0383 --- /dev/null +++ b/website/source/stylesheets/reset.scss @@ -0,0 +1,27 @@ +form, +input, +textarea, +button { +padding: 0; +margin: 0; +vertical-align: middle; +border: 0; +box-shadow: none; +-moz-border-radius: 0; +-webkit-border-radius: 0; +-khtml-border-radius: 0; +border-radius: 0; +background-color: transparent; +font-family: $mono; +font-size: $base-font-size; +line-height: 1.0; +color: inherit; + + &:focus { + line-height: 1.0; + box-shadow: none !important; + outline: none; + vertical-align: middle; + + } +} \ No newline at end of file diff --git a/website/source/stylesheets/sidebar.scss b/website/source/stylesheets/sidebar.scss new file mode 100644 index 000000000..f8b991543 --- /dev/null +++ b/website/source/stylesheets/sidebar.scss @@ -0,0 +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%; + } + + + 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; + } + +} \ No newline at end of file diff --git a/website/source/stylesheets/styles.scss b/website/source/stylesheets/styles.scss new file mode 100644 index 000000000..08a138be9 --- /dev/null +++ b/website/source/stylesheets/styles.scss @@ -0,0 +1,249 @@ +* { +margin: 0; +} + +html, +body { +margin: 0; +height: 100%; +} + +html { + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; +} + +body { +background-color: $background; +font-family: $sans; +letter-spacing: 1px; +font-size: $base-font-size; +line-height: $base-line-height; +} + +h1, +h2, +h3, +h4, +h5, +h6 { +letter-spacing: 2px; +font-weight: normal; +} + +h1 { +font-family: $sans; +font-size: 70px; +line-height: (80/70); + @include respond-to(mobile) { + font-size: 50px; + line-height: (50/45); + } +} + +h2 { +font-family: $sans; +font-size: 40px; +line-height: (50/40); + + &.has-dividers { + //overflow: auto !important; + display: table-cell; + text-align: center; + vertical-align: middle; + @include respond-to(mobile) { + display: block; + } + } +} + +h3 { +font-family: $sans; +font-size: 20px; +line-height: (30/20); +} + +h4 { +font-family: $mono; +font-size: 20px; +line-height: (30/20); +} + +h5 { +font-family: $sans; +font-size: 16px; +line-height: (22/16); +} + +h6 { +font-family: $mono; +font-size: 16px; +line-height: (22/16); +} + +p { +font-family: $serif; +font-size: 17px; +line-height: (30/17); +letter-spacing: 1px; + + &.large-text { + font-size: 20px; + line-height: (35/20); + } + + a { + color: $green; + &:hover { + color: darken($green, 30%); + } + &:active { + color: darken($green, 50%); + } + } +} + +a { +color: inherit; +text-decoration: none; + + &:hover { + color: inherit; + text-decoration: none; + } + + &:visited { + + } + + &:active { + + } + +} + +ul, +ol { +margin: 0; +padding: 0; +} + +ul { +list-style-type: none; +} + +ol { +list-style-type: circle; +list-style-position: inside; +margin-top: $baseline * 2; + + li { + font-family: $serif; + font-size: 17px; + line-height: (30/17) !important; + margin-bottom: $baseline; + } +} + +li { + +} + +blockquote { + +} + +em { +font-style: italic; +} + +strong { +font-weight: bold; +} + +small, +.small { +font-size: 13px; +} + +hr { +margin: ($baseline * 2) 0; +border-color: $gray-mid; +border-bottom: 0; +} + +pre { +background-color: $black; +color: $white; +margin: ($baseline * 2) 0; +padding-top: $baseline; +padding-bottom: 0; +} + +table { +font-family: $mono; +margin: ($baseline * 2) 0; +color: $gray-dark; + + th { + color: $black; + font-weight: normal !important; + } +} + +::selection { + background: #ffff00; /* Safari */ + } +::-moz-selection { + background: #ffff00; /* Firefox */ +} + +input { + +} + +button { +height: $button-height; +background-color: transparent; +border-width: 2px; +border-style: solid; +padding: 0 30px; +text-transform: uppercase; +letter-spacing: 3px; +@include rounded(5px); + + &.primary { + color: $green; + border-color: $green; + + &:hover { + background-color: transparentize($green, .7); + } + + &:active { + background-color: transparentize($green, .5); + } + } + + &.secondary { + color: $black; + border-color: $black; + + &:hover { + background-color: transparentize($black, .9); + } + + &:active { + background-color: transparentize($black, .7); + } + } + + &.inline { + margin: auto $baseline; + @include respond-to(mobile) { + display: block; + width: 100%; + margin: $baseline 0; + } + } +} \ No newline at end of file