diff --git a/assets/config/tailwind.config.js b/assets/config/tailwind.config.js index 98832a78efbf..f1c8bf9587c1 100644 --- a/assets/config/tailwind.config.js +++ b/assets/config/tailwind.config.js @@ -13,26 +13,39 @@ const brand = { purple: "#512668", orange: "#ee975c", green: "#2fc89f", - blue: "#3ec2f8", - gray: "#f1f1f1", + blue: "#52a6da", } const purple = { 100: "#ddcae8", + 200: "#9c76b3", 300: "#83549c", + 400: "#6c348a", 500: brand.purple, + 600: "#421d57", 700: "#371a47", + 800: "#2a1337", 900: "#180b1f", } +// TBD: Orange and green scales. (Using defaults for now.) + const blue = { - 100: "#C4EEFF", - 300: "#94E1FF", + 100: "#c4eeff", + 200: "#abe7ff", + 300: "#94e1ff", + 400: "#63d0ff", 500: brand.blue, - 700: "#238FBA", - 900: "#0F2E3B", + 600: "#3182ce", + 700: "#1873bd", + 800: "#0a4970", + 900: "#0f2e3b", } +const orange = defaultTheme.colors.orange; +const green = defaultTheme.colors.green; +const gray = defaultTheme.colors.gray; + module.exports = { theme: { @@ -50,34 +63,11 @@ module.exports = { }, colors: { - purple: { - 100: purple["100"], - 300: purple["300"], - 500: purple["500"], - default: purple["500"], - 700: purple["700"], - 900: purple["900"], - }, - blue: { - 100: blue["100"], - 300: blue["300"], - 500: blue["500"], - default: blue["500"], - 700: blue["700"], - 900: blue["900"], - }, - green: { - default: brand.green, - ...defaultTheme.colors.green, - }, - orange: { - default: brand.orange, - ...defaultTheme.colors.orange, - }, - gray: { - default: brand.gray, - ...defaultTheme.colors.gray, - }, + purple, + blue, + orange, + green, + gray, }, }, }, diff --git a/assets/js/main.js b/assets/js/main.js index 15b7673aabf5..3675db81cdc1 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -35,10 +35,6 @@ function generateMiniToc() { } (function ($) { - //---------------------------------------- - // Essentials - //---------------------------------------- - var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // Set up toggle functionality. bindToggles(".toggle"); @@ -47,54 +43,9 @@ function generateMiniToc() { // Create a mini TOC if desired. generateMiniToc(); - // breakpoints - var $screen_xxs = 320; - var $screen_xs = 480; - var $screen_sm = 576; - var $screen_md = 768; - var $screen_lg = 991; - var $screen_xlg = 1200; - - // find out if is touch device - function is_touch_device() { - return (('ontouchstart' in window) - || (navigator.MaxTouchPoints > 0) - || (navigator.msMaxTouchPoints > 0)); - //navigator.msMaxTouchPoints for microsoft IE backwards compatibility - } - - // Add slideDown animation to Bootstrap dropdown when expanding. - $('.dropdown:not(.main-nav-wrapper-wrapper)').on('show.bs.dropdown', function () { - $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); - }); - - // Add slideUp animation to Bootstrap dropdown when collapsing. - $('.dropdown:not(.main-nav-wrapper-wrapper)').on('hide.bs.dropdown', function () { - $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); - }); - - // mobile dropdown - $('.main-header .dropdown').on('show.bs.dropdown', function () { - var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; - if (windowWidth < $screen_md) { - $('body').addClass('no-scroll'); - } - }).on('hide.bs.dropdown', function () { - $('body').removeClass('no-scroll'); - }); - - var originalWindowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; - $(window).resize(function () { - var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; - - //prevent functions from recalculating on scroll on mobile. when scrolling on iphone, the bottom appears/disappears and the browser thinks this is resizing - //execute these functions on width resize only - if (windowWidth != originalWindowWidth) { //if width resized - } - }); - - // Toggle the mobile menu. + // Mobile menu toggle. $(".nav-header-toggle").click(function() { $(".nav-header-items").toggleClass("hidden"); }); + }(jQuery)); diff --git a/assets/sass/_buttons.scss b/assets/sass/_buttons.scss index 92623c0db086..93af606bba00 100644 --- a/assets/sass/_buttons.scss +++ b/assets/sass/_buttons.scss @@ -1,15 +1,69 @@ +@import "colors"; +@import "mixins"; + .btn { - @apply py-2 px-4 rounded text-white uppercase bg-blue; + @include transition; + + @apply cursor-pointer text-sm whitespace-no-wrap uppercase py-2 px-4 rounded; + @apply bg-blue-600 border-2 border-blue-600 font-bold text-white; &:hover { - @apply bg-blue-300; + @apply bg-blue-500 text-white; } &:active { - @apply bg-blue-100; + @apply bg-blue-500; } } -.btn-cta { - @apply bg-orange; +.btn-sm { + @apply text-xs; +} + +.btn-lg { + @apply btn py-3 px-5; +} + +.btn-orange { + @apply bg-orange-500 border-orange-600; + + &:hover { + @apply bg-orange-600 border-orange-700; + } +} + +.btn-purple { + @apply bg-purple-500 border-purple-500; + + &:hover { + @apply bg-purple-200 border-purple-700; + } +} + +.btn-white { + @apply bg-white text-gray-900 border-white; + + &:hover { + @apply bg-gray-300 text-gray-900; + } +} + +.btn-translucent { + background-color: rgba($brand-blue, 0.3); + border-color: rgba($brand-blue, 0.5); + + &:hover { + background-color: rgba($brand-blue, 0.7); + border-color: $brand-blue; + } +} + +.btn-orange-translucent { + background-color: rgba($brand-orange, 0.3); + border-color: rgba($brand-orange, 0.5); + + &:hover { + background-color: rgba($brand-orange, 0.7); + border-color: $brand-orange; + } } diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss index edb959cd1a0f..8116e76f6c42 100644 --- a/assets/sass/_colors.scss +++ b/assets/sass/_colors.scss @@ -2,10 +2,10 @@ $black: #000; $white: #fff; $brand: ( - "purple": "#512668", - "orange": "#ee975c", - "green": "#2fc89f", - "blue": "#3ec2f8", + "purple": #512668, + "orange": #ee975c, + "green": #2fc89f, + "blue": #5fb2df, ); $brand-purple: map-get($brand, "purple"); @@ -13,16 +13,4 @@ $brand-orange: map-get($brand, "orange"); $brand-green: map-get($brand, "green"); $brand-blue: map-get($brand, "blue"); -$gray: ( - 100: '#f7fafc', - 200: '#edf2f7', - 300: '#e2e8f0', - 400: '#cbd5e0', - 500: '#a0aec0', - 600: '#718096', - 700: '#4a5568', - 800: '#2d3748', - 900: '#1a202c', -); - -$border-gray: map-get($gray, 100); +$border-gray: #f1f1f1; diff --git a/assets/sass/_fonts.scss b/assets/sass/_fonts.scss index d5fcaabeed82..dae48568b179 100644 --- a/assets/sass/_fonts.scss +++ b/assets/sass/_fonts.scss @@ -1,2 +1,2 @@ -@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,400|Ubuntu:400,700'); +@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,400,700|Ubuntu:400,700'); @import url('https://fonts.googleapis.com/css?family=PT+Mono'); diff --git a/assets/sass/_hubspot.scss b/assets/sass/_hubspot.scss new file mode 100644 index 000000000000..e0b0237b9030 --- /dev/null +++ b/assets/sass/_hubspot.scss @@ -0,0 +1,93 @@ +.hs-form { + @apply text-sm; + + fieldset { + @apply block; + margin: 1rem 0 !important; + + &:not(.form-columns-1) > .field:first-child { + @apply pr-2; + } + + label { + @apply block mb-2 font-normal; + } + + .hs-input { + @apply block; + width: 100% !important; + } + + .hs-form-required { + @apply ml-1 text-red-500; + } + + .hs-richtext p { + @apply opacity-50 text-xs font-normal my-0; + + a { + @apply underline; + } + } + + input, textarea { + @apply border border-gray-300 rounded p-2 bg-white; + } + } + + input[type="submit"] { + @apply btn btn-orange-translucent; + } + + .hs-error-msgs { + @apply list-none mt-2 p-0 text-red-500 text-xs; + + label { + @apply mb-0; + } + } + + .hs_error_rollup { + @apply hidden; + } + + &-fg-light { + @apply text-gray-100; + + a { + @apply text-gray-100; + } + } + + &-fg-dark { + @apply text-gray-700; + + input { + &.hs-button { + @apply btn; + } + } + } + + &.newsletter { + @apply flex items-start; + + label:not(.hs-error-msg) { + @apply hidden; + } + + input { + @apply block py-3 px-4 rounded-l rounded-r-none text-gray-600 w-56; + + &.hs-button { + @apply block btn btn-lg btn border-none py-3 px-4 rounded-r rounded-l-none w-auto; + } + } + } + + &.pricing { + label { + @apply font-normal; + } + } +} diff --git a/assets/sass/_pulumi-blog.scss b/assets/sass/_pulumi-blog.scss deleted file mode 100644 index 517ca7af1c3d..000000000000 --- a/assets/sass/_pulumi-blog.scss +++ /dev/null @@ -1,180 +0,0 @@ -@import "pulumi-constants"; - -// Styles for the Pulumi blog. -#pul-blog { - // Clear a broad style from the rest of our CSS. - // BUG: Bulleted lists in blog content isn't being displayed. - li:before { display: none; } - ul li { padding-left: 0; } - - // .post-list is used whenever the summaries of several blog posts are displayed. - // Such as on the listing page for an author or tag. - .posts-list { - // Separate each post summary. - li { - padding-bottom: 16px; - } - - .post-header { - padding-bottom: 4px; - - small { - font-style: italic; - color: $light-gray; - } - - // The blog header's title combines both the - // author images and the title all inside the h3. - h3 { - display: flex; - margin-top: 4px; - margin-bottom: 4px; - - align-items: flex-start; - - img { - border-radius: 36px; - width: 36px; - height: 36px; - - margin-right: 6px; - } - - // The first N links are to the post's authors, with each - // image overlapping slightly via negative margins. - a.author { - flex-shrink: 0; - position: relative; - overflow: hidden; - margin-left: -18px; - } - a.author:first-of-type { - margin-left: 0; - } - // The last link, which is to the blog post. - a.author:last-of-type { - margin-left: 4px; - } - } - } - - // As part of the post summary, we display the "post's image" inline. - .post-image { - max-width: 150px; - float: right; - margin: 16px; - margin-top: 0; - } - } - - // Section at the end of an individual blog post. - .pul-post-ending { - small { - font-style: italic; - color: $light-gray; - } - } - - .taxonomy-page-header { - margin-top: 0; - } - - // Authors list for a single post. Shows an avatar, title, etc. - .authors { - .author { - display: inline-flex; - margin-right: 16px; - - // Don't show the link to the author's posts as a regular link. - a.author-link { - color: $primary; - font-weight: bold; - font-size: 150%; - text-decoration: none; - } - - a.author-link:hover { - color: inherit; - text-decoration: none; - } - - // When showing the social links under the author, customize - // the "logo-roll" defined elsewhere. - ul.logo-roll.inline-block { - margin-left: 6px; - } - - img { - height: 90px; - width: 90px; - border-radius: 90px; - - margin-right: 16px; - } - } - } - - // Author details, the large widget we use on the author-specific listing page. - .author-details { - display: flex; - margin-bottom: 24px; - - img { - flex-basis: 180; - - height: 180px; - width: 180px; - border-radius: 180px; - } - - .profile { - margin-left: 16px; - - h2 { - margin-top: 0; - } - p { - margin-bottom: 0; - } - - // When showing the social links under the author, customize - // the "logo-roll" defined elsewhere. - ul.logo-roll.inline-block { - margin-left: 6px; - } - } - } - - // Tag lists. Displayed on sidebar and bottom of posts. - .pul-tags-list { - li { - display: inline-block; - margin: 0; - } - - a { - padding: 1px 4px; - border-radius: 4px; - - color: white; - background-color: $primary4; - - text-decoration: none; - } - - a:hover { text-decoration: none; } - } - - // The paginator widget. - .paginator { - display: flex; - } - - .pul-sidebar { - padding-right: 24px; - - h3 { - margin-top: 0; - } - } -} diff --git a/assets/sass/_pulumi-constants.scss b/assets/sass/_pulumi-constants.scss deleted file mode 100644 index c1656b297800..000000000000 --- a/assets/sass/_pulumi-constants.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Colors - */ -// Define custom CSS styles for Pulumi webpages. This allow us to make dramatic -// changes to the color scheme without much churn. -$primary: #512668; // primary purple -$primary2: #00acf2; // primary blue -$primary3: #2fc89f; // primary green -$primary4: #ee975c; // primary orange -$accent1: #f6e5ff; // light purple -$accent2: #e1f6ff; // light blue -$accent3: #3EC2F8; // bright blue -$accent4: #fbe5d7; // light orange - -$light-gray: #d3d3d3; // light gray \ No newline at end of file diff --git a/assets/sass/_pulumi-toc.scss b/assets/sass/_pulumi-toc.scss deleted file mode 100644 index 3dbb3e2fb978..000000000000 --- a/assets/sass/_pulumi-toc.scss +++ /dev/null @@ -1,39 +0,0 @@ -// SaSS styles for the v2 attempt at the site's TOC. (Not used by _includes/toc.html.) - -@import "pulumi-constants"; - -.pul-toc { - h2 { - margin: 0; - - color: $primary; - font-size: 16px; - font-weight: 700; - } - - ul { - margin-left: 24px; - - list-style-type: none; - - li { - margin: 0; - padding: 0; - } - - // HACK: This shouldn't be necessary, with `list-style-type: none` set on the parent - // + +
+

Join the Team

+

+ Browse our open positions. +

-
-
-
-
-
-
-

Pulumi Investors

-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
+
+
+

Board of Directors

+
    + {{ range $.Site.Data.team.board }} +
  • + {{ .name }} +

    {{ .name }}

    +
    {{ .title }}
    +
    + {{ partial "widgets/social-icons.html" (dict "social" .social)}}
    -
-
-
+ + {{ end }} +
- {{ partial "newsroom.html" . }} - -
-
-
-
-
- -

Why Pulumi?

-

Find out how Pulumi provides a programming model for the cloud, designed to unlock the full power of serverless, container, and data service architectures with Cloud Native Infrastructure as Code.

-

Learn more

-
-
-
-
+
+ +

Why Pulumi?

+

+ Find out how Pulumi provides a programming model for the cloud, designed to + unlock the full power of serverless, container, and data service architectures + with Cloud Native Infrastructure as Code. +

+ Learn More
- {{ partial "contact-us.html" . }} - -
- -
-
-
-
-
-

Find Pulumi at

-
-
-
-
-
- -
-
-
-
-
- {{ partial "social.html" (dict "classes" "expanded" ) }} -
-
-
-
-
-
+ {{ partial "contact-us.html" . }} - {{ partial "learnmore-contactus.html" . }} + {{ partial "social.html" . }} + {{ partial "learnmore-contactus.html" . }} {{ end }} diff --git a/layouts/page/contact.html b/layouts/page/contact.html index 4699e3386de1..94fecf3f5011 100644 --- a/layouts/page/contact.html +++ b/layouts/page/contact.html @@ -1,32 +1,4 @@ {{ define "main" }} {{ partial "contact-us.html" . }} - -
- -
-
-
-
-
-

Find Pulumi at

-
-
-
-
-
- -
-
-
-
-
- {{ partial "social.html" (dict "classes" "expanded" ) }} -
-
-
-
-
- -
- -{{ end }} \ No newline at end of file + {{ partial "social.html" . }} +{{ end }} diff --git a/layouts/page/pricing.html b/layouts/page/pricing.html index 3c27908ae184..269c5fbcce10 100644 --- a/layouts/page/pricing.html +++ b/layouts/page/pricing.html @@ -1,723 +1,657 @@ -{{ define "main" }} - -
-
-
-
-
-

Plans for teams of all sizes.

-

- Enable your developers and operators to create, deploy, and manage - applications and infrastructure on AWS, Azure, Google Cloud, and Kubernetes. Whether - you are a growing startup, or established Enterprise, Pulumi has a solution for you. -

-

- Pulumi Community Edition - is free forever for unlimited individual use. -

-
-
-
+{{ define "hero" }} +
+
+

Plans for teams of all sizes.

+

+ Enable your developers and operators to create, deploy, and manage + applications and infrastructure on AWS, Azure, Google Cloud, and + Kubernetes. Whether you are a growing startup, or established Enterprise, + Pulumi has a solution for you. +

+

+ Pulumi Community Edition + is free forever for unlimited individual use. +

-
+ +{{ end }} -