diff --git a/website/source/assets/images/feature-create-bg.svg b/website/source/assets/images/feature-create-bg.svg index 1c54e2d11..80d89b0f8 100644 --- a/website/source/assets/images/feature-create-bg.svg +++ b/website/source/assets/images/feature-create-bg.svg @@ -1,18 +1,25 @@ + viewBox="0 0 810.6 633.6" style="enable-background:new 0 0 810.6 633.6;" xml:space="preserve"> - + @@ -28,8 +35,9 @@ - - + + @@ -45,8 +53,9 @@ - - + + @@ -62,8 +71,8 @@ - - + + @@ -79,8 +88,8 @@ - - + + @@ -96,8 +105,8 @@ - - + + @@ -113,133 +122,191 @@ - - - - - - - - - - - - - - - - - - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/source/assets/images/feature-plan-sm-bg.svg b/website/source/assets/images/feature-plan-sm-bg.svg new file mode 100644 index 000000000..cf38d86f0 --- /dev/null +++ b/website/source/assets/images/feature-plan-sm-bg.svg @@ -0,0 +1,398 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index 240cc28dc..542bc3bb6 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -239,12 +239,25 @@ body.page-home { >.container { z-index: 61; - background: image-url("feature-plan-bg.svg") 0% 45% no-repeat; + // background: image-url("feature-plan-bg.svg") 0% 45% no-repeat; background-size: 100%; } - p.lead { - margin-bottom: 400px; + // This svg appears twice in the markup and swapped for layout purposes. + // Image for small screens. Styles below are for larger screens. + #feature-image-plan-sm-screen { + display: block; + position: relative; + margin: 0 auto; + width: 100%; + max-width: 400px; + } + + // Image hidden, made visible for larger screens + #feature-image-plan-lg-screen { + display: none; + position: relative; + width: 100%; } #feature-plan-bg{ @@ -264,8 +277,16 @@ body.page-home { z-index: 51; } - p.lead { - margin-bottom: 220px; + #feature-image-create-sm-screen{ + display: block; + max-width: 500px; + padding-left: 10px; + margin: 0 auto; + margin-bottom: 40px; + } + + #feature-image-create-lg-screen{ + display: none; } #feature-create-bg{ @@ -273,14 +294,6 @@ body.page-home { z-index: 50; overflow: hidden; } - - #feature-create-img{ - position: absolute; - width: 420px; - top: 200px; - right: 100px; - @include skewY(-3deg); - } } #demos{ @@ -514,6 +527,34 @@ body.page-home { display: block; } } + + #feature-plan{ + // Hide image for small screens + #feature-image-plan-sm-screen { + display: none; + } + + // Image hidden, made visible for larger screens + #feature-image-plan-lg-screen { + display: block; + } + } + + #feature-create{ + // Hide image for small screens + #feature-image-create-sm-screen { + // display: none; + } + + // Image hidden, made visible for larger screens + #feature-image-create-lg-screen { + // display: block; + position: absolute; + width: 400px; + top: 90px; + right: 5%; + } + } } @media (min-width: 1024px) { diff --git a/website/source/index.html.erb b/website/source/index.html.erb index f81274112..319238b24 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -113,6 +113,10 @@

Terraform provides an elegant user experience for operators to safely and predictably make changes to infrastructure.

+
+ + +

Map resource dependencies

Understand how a minor change could have potential cascading effects @@ -139,12 +143,17 @@

-
+

Cloneable infrastructure

Infrastructures share commonality across environments and organizations. Terraform lets operators easily use the same configurations in multiple places to save time.

+
+ +
+
+

Identical environments

Use the same Terraform configuration to provision identical staging, @@ -165,7 +174,7 @@

- +