diff --git a/website/Gemfile b/website/Gemfile index 08e6fe65e5..405a8c9926 100644 --- a/website/Gemfile +++ b/website/Gemfile @@ -1,3 +1,3 @@ source "https://rubygems.org" -gem "middleman-hashicorp", "0.3.13" +gem "middleman-hashicorp", "0.3.22" diff --git a/website/Gemfile.lock b/website/Gemfile.lock index 0811f6d62e..229218ac9f 100644 --- a/website/Gemfile.lock +++ b/website/Gemfile.lock @@ -6,7 +6,7 @@ GEM minitest (~> 5.1) thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) - autoprefixer-rails (6.7.6) + autoprefixer-rails (6.7.7.1) execjs bootstrap-sass (3.3.7) autoprefixer-rails (>= 5.2.1) @@ -77,7 +77,7 @@ GEM rack (>= 1.4.5, < 2.0) thor (>= 0.15.2, < 2.0) tilt (~> 1.4.1, < 2.0) - middleman-hashicorp (0.3.13) + middleman-hashicorp (0.3.22) bootstrap-sass (~> 3.3) builder (~> 3.2) middleman (~> 3.4) @@ -103,7 +103,7 @@ GEM mini_portile2 (2.1.0) minitest (5.10.1) multi_json (1.12.1) - nokogiri (1.7.0.1) + nokogiri (1.7.1) mini_portile2 (~> 2.1.0) padrino-helpers (0.12.8.1) i18n (~> 0.6, >= 0.6.7) @@ -138,7 +138,7 @@ GEM turbolinks (5.0.1) turbolinks-source (~> 5) turbolinks-source (5.0.0) - tzinfo (1.2.2) + tzinfo (1.2.3) thread_safe (~> 0.1) uber (0.0.15) uglifier (2.7.2) @@ -151,7 +151,7 @@ PLATFORMS ruby DEPENDENCIES - middleman-hashicorp (= 0.3.13) + middleman-hashicorp (= 0.3.22) BUNDLED WITH 1.14.6 diff --git a/website/Makefile b/website/Makefile index 41fcf114ed..0e83eb946c 100644 --- a/website/Makefile +++ b/website/Makefile @@ -1,4 +1,4 @@ -VERSION?="0.3.13" +VERSION?="0.3.22" website: @echo "==> Starting website in Docker..." diff --git a/website/config.rb b/website/config.rb index 266f4421b1..e50c6164d1 100644 --- a/website/config.rb +++ b/website/config.rb @@ -11,6 +11,33 @@ activate :hashicorp do |h| end helpers do + # Get the title for the page. + # + # @param [Middleman::Page] page + # + # @return [String] + def title_for(page) + if page && page.data.page_title + return "#{page.data.page_title} - Consul by HashiCorp" + end + + "Consul by HashiCorp" + end + + # Get the description for the page + # + # @param [Middleman::Page] page + # + # @return [String] + def description_for(page) + description = (page.data.description || "") + .gsub('"', '') + .gsub(/\n+/, ' ') + .squeeze(' ') + + return escape_html(description) + end + # This helps by setting the "active" class for sidebar nav elements # if the YAML frontmatter matches the expected value. def sidebar_current(expected) @@ -22,27 +49,47 @@ helpers do end end - # Get the title for the page. - # - # @param [Middleman::Page] page - # + # Returns the id for this page. # @return [String] - def title_for(page) - if page && page.data.page_title - return "#{page.data.page_title} - Consul by HashiCorp" + def body_id_for(page) + if !(name = page.data.sidebar_current).blank? + return "page-#{name.strip}" + end + if page.url == "/" || page.url == "/index.html" + return "page-home" + end + if !(title = page.data.page_title).blank? + return title + .downcase + .gsub('"', '') + .gsub(/[^\w]+/, '-') + .gsub(/_+/, '-') + .squeeze('-') + .squeeze(' ') + end + return "" + end + + # Returns the list of classes for this page. + # @return [String] + def body_classes_for(page) + classes = [] + + if !(layout = page.data.layout).blank? + classes << "layout-#{page.data.layout}" end - "Consul by HashiCorp" - end + if !(title = page.data.page_title).blank? + title = title + .downcase + .gsub('"', '') + .gsub(/[^\w]+/, '-') + .gsub(/_+/, '-') + .squeeze('-') + .squeeze(' ') + classes << "page-#{title}" + end - # Get the description for the page - # - # @param [Middleman::Page] page - # - # @return [String] - def description_for(page) - description = page.data.description || "" - description = description.gsub(/\n+/, " ") - return escape_html(description) + return classes.join(" ") end end diff --git a/website/packer.json b/website/packer.json index b51f638015..35de632323 100644 --- a/website/packer.json +++ b/website/packer.json @@ -8,7 +8,7 @@ "builders": [ { "type": "docker", - "image": "hashicorp/middleman-hashicorp:0.3.13", + "image": "hashicorp/middleman-hashicorp:0.3.22", "discard": "true", "run_command": ["-d", "-i", "-t", "{{ .Image }}", "/bin/sh"] } diff --git a/website/source/404.html.erb b/website/source/404.html.erb deleted file mode 100644 index e7dcdc5a2b..0000000000 --- a/website/source/404.html.erb +++ /dev/null @@ -1,5 +0,0 @@ ---- -noindex: true ---- - -

Page Not Found

diff --git a/website/source/404.html.md b/website/source/404.html.md new file mode 100644 index 0000000000..e99ce088b3 --- /dev/null +++ b/website/source/404.html.md @@ -0,0 +1,14 @@ +--- +layout: "inner" +page_title: "Not Found" +noindex: true +description: |- + Page not found! +--- + +# Page Not Found + +Sorry, the page you tried to visit does not exist. This could be our fault, +and if so we will fix that up right away. + +Please go back, or go back to get back on track. diff --git a/website/source/android-manifest.json.erb b/website/source/android-manifest.json.erb new file mode 100644 index 0000000000..f4af77dd43 --- /dev/null +++ b/website/source/android-manifest.json.erb @@ -0,0 +1,18 @@ +{ + "name": "HashiCorp Consul", + "icons": [ + { + "src": "<%= image_path('favicons/android-chrome-192x192.png') %>", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "<%= image_path('favicons/android-chrome-512x512.png') %>", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/website/source/assets/images/atlas_web_ui.png b/website/source/assets/images/atlas_web_ui.png deleted file mode 100644 index d47d67eaa4..0000000000 Binary files a/website/source/assets/images/atlas_web_ui.png and /dev/null differ diff --git a/website/source/assets/images/consul-footer-logo.png b/website/source/assets/images/consul-footer-logo.png deleted file mode 100644 index a4edf6ce60..0000000000 Binary files a/website/source/assets/images/consul-footer-logo.png and /dev/null differ diff --git a/website/source/assets/images/consul-footer-logo@2x.png b/website/source/assets/images/consul-footer-logo@2x.png deleted file mode 100644 index 8ba91ae494..0000000000 Binary files a/website/source/assets/images/consul-footer-logo@2x.png and /dev/null differ diff --git a/website/source/assets/images/consul-header-lockup.png b/website/source/assets/images/consul-header-lockup.png deleted file mode 100644 index 1576c0d436..0000000000 Binary files a/website/source/assets/images/consul-header-lockup.png and /dev/null differ diff --git a/website/source/assets/images/consul-header-lockup@2x.png b/website/source/assets/images/consul-header-lockup@2x.png deleted file mode 100644 index 88437be0d0..0000000000 Binary files a/website/source/assets/images/consul-header-lockup@2x.png and /dev/null differ diff --git a/website/source/assets/images/consul-hero-logo.png b/website/source/assets/images/consul-hero-logo.png deleted file mode 100644 index 703382e074..0000000000 Binary files a/website/source/assets/images/consul-hero-logo.png and /dev/null differ diff --git a/website/source/assets/images/consul-hero-logo@2x.png b/website/source/assets/images/consul-hero-logo@2x.png deleted file mode 100644 index d28c4dea8c..0000000000 Binary files a/website/source/assets/images/consul-hero-logo@2x.png and /dev/null differ diff --git a/website/source/assets/images/favicon.png b/website/source/assets/images/favicon.png deleted file mode 100644 index 3368fefcfc..0000000000 Binary files a/website/source/assets/images/favicon.png and /dev/null differ diff --git a/website/source/assets/images/favicons/android-chrome-192x192.png b/website/source/assets/images/favicons/android-chrome-192x192.png new file mode 100644 index 0000000000..17ac1c61cf Binary files /dev/null and b/website/source/assets/images/favicons/android-chrome-192x192.png differ diff --git a/website/source/assets/images/favicons/android-chrome-512x512.png b/website/source/assets/images/favicons/android-chrome-512x512.png new file mode 100644 index 0000000000..c48430c0dc Binary files /dev/null and b/website/source/assets/images/favicons/android-chrome-512x512.png differ diff --git a/website/source/assets/images/favicons/apple-touch-icon.png b/website/source/assets/images/favicons/apple-touch-icon.png new file mode 100644 index 0000000000..c17b6c50a3 Binary files /dev/null and b/website/source/assets/images/favicons/apple-touch-icon.png differ diff --git a/website/source/assets/images/favicons/favicon-16x16.png b/website/source/assets/images/favicons/favicon-16x16.png new file mode 100644 index 0000000000..4ab61bb4e2 Binary files /dev/null and b/website/source/assets/images/favicons/favicon-16x16.png differ diff --git a/website/source/assets/images/favicons/favicon-32x32.png b/website/source/assets/images/favicons/favicon-32x32.png new file mode 100644 index 0000000000..1672aaf6dd Binary files /dev/null and b/website/source/assets/images/favicons/favicon-32x32.png differ diff --git a/website/source/assets/images/favicons/favicon.ico b/website/source/assets/images/favicons/favicon.ico new file mode 100644 index 0000000000..f8fcb4732c Binary files /dev/null and b/website/source/assets/images/favicons/favicon.ico differ diff --git a/website/source/assets/images/favicons/mstile-150x150.png b/website/source/assets/images/favicons/mstile-150x150.png new file mode 100644 index 0000000000..e3c0befd5a Binary files /dev/null and b/website/source/assets/images/favicons/mstile-150x150.png differ diff --git a/website/source/assets/images/favicons/safari-pinned-tab.svg b/website/source/assets/images/favicons/safari-pinned-tab.svg new file mode 100644 index 0000000000..010e88a90d --- /dev/null +++ b/website/source/assets/images/favicons/safari-pinned-tab.svg @@ -0,0 +1,61 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + + + + + + + + + diff --git a/website/source/assets/images/feature-config.png b/website/source/assets/images/feature-config.png deleted file mode 100644 index f759903c85..0000000000 Binary files a/website/source/assets/images/feature-config.png and /dev/null differ diff --git a/website/source/assets/images/feature-config.svg b/website/source/assets/images/feature-config.svg new file mode 100644 index 0000000000..216afac0e0 --- /dev/null +++ b/website/source/assets/images/feature-config.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/website/source/assets/images/feature-config@2x.png b/website/source/assets/images/feature-config@2x.png deleted file mode 100644 index 7e55ad3c53..0000000000 Binary files a/website/source/assets/images/feature-config@2x.png and /dev/null differ diff --git a/website/source/assets/images/feature-discovery.png b/website/source/assets/images/feature-discovery.png deleted file mode 100644 index 1366eb7495..0000000000 Binary files a/website/source/assets/images/feature-discovery.png and /dev/null differ diff --git a/website/source/assets/images/feature-discovery.svg b/website/source/assets/images/feature-discovery.svg new file mode 100644 index 0000000000..a663eaebe6 --- /dev/null +++ b/website/source/assets/images/feature-discovery.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/website/source/assets/images/feature-discovery@2x.png b/website/source/assets/images/feature-discovery@2x.png deleted file mode 100644 index b02fa91858..0000000000 Binary files a/website/source/assets/images/feature-discovery@2x.png and /dev/null differ diff --git a/website/source/assets/images/feature-health.png b/website/source/assets/images/feature-health.png deleted file mode 100644 index 8b8e6b93de..0000000000 Binary files a/website/source/assets/images/feature-health.png and /dev/null differ diff --git a/website/source/assets/images/feature-health.svg b/website/source/assets/images/feature-health.svg new file mode 100644 index 0000000000..16a4864a15 --- /dev/null +++ b/website/source/assets/images/feature-health.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/source/assets/images/feature-health@2x.png b/website/source/assets/images/feature-health@2x.png deleted file mode 100644 index a9e291f8f7..0000000000 Binary files a/website/source/assets/images/feature-health@2x.png and /dev/null differ diff --git a/website/source/assets/images/feature-multi.png b/website/source/assets/images/feature-multi.png deleted file mode 100644 index 097d119f56..0000000000 Binary files a/website/source/assets/images/feature-multi.png and /dev/null differ diff --git a/website/source/assets/images/feature-multi.svg b/website/source/assets/images/feature-multi.svg new file mode 100644 index 0000000000..96376e2e93 --- /dev/null +++ b/website/source/assets/images/feature-multi.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/website/source/assets/images/feature-multi@2x.png b/website/source/assets/images/feature-multi@2x.png deleted file mode 100644 index 9df0875bcc..0000000000 Binary files a/website/source/assets/images/feature-multi@2x.png and /dev/null differ diff --git a/website/source/assets/images/footer-hashicorp-logo.png b/website/source/assets/images/footer-hashicorp-logo.png deleted file mode 100644 index 568af0de87..0000000000 Binary files a/website/source/assets/images/footer-hashicorp-logo.png and /dev/null differ diff --git a/website/source/assets/images/footer-hashicorp-logo@2x.png b/website/source/assets/images/footer-hashicorp-logo@2x.png deleted file mode 100644 index 139ef3d1dc..0000000000 Binary files a/website/source/assets/images/footer-hashicorp-logo@2x.png and /dev/null differ diff --git a/website/source/assets/images/hero-dots-below.png b/website/source/assets/images/hero-dots-below.png deleted file mode 100644 index 84f70a2a07..0000000000 Binary files a/website/source/assets/images/hero-dots-below.png and /dev/null differ diff --git a/website/source/assets/images/hero-dots-below@2x.png b/website/source/assets/images/hero-dots-below@2x.png deleted file mode 100644 index 65462320ae..0000000000 Binary files a/website/source/assets/images/hero-dots-below@2x.png and /dev/null differ diff --git a/website/source/assets/images/hero-dots.png b/website/source/assets/images/hero-dots.png deleted file mode 100644 index 6e7bdbbdcd..0000000000 Binary files a/website/source/assets/images/hero-dots.png and /dev/null differ diff --git a/website/source/assets/images/hero-dots@2x.png b/website/source/assets/images/hero-dots@2x.png deleted file mode 100644 index f14866bc89..0000000000 Binary files a/website/source/assets/images/hero-dots@2x.png and /dev/null differ diff --git a/website/source/assets/images/icon-download-purple.png b/website/source/assets/images/icon-download-purple.png deleted file mode 100644 index fd9cf94132..0000000000 Binary files a/website/source/assets/images/icon-download-purple.png and /dev/null differ diff --git a/website/source/assets/images/icon-download-purple@2x.png b/website/source/assets/images/icon-download-purple@2x.png deleted file mode 100644 index 7935e39412..0000000000 Binary files a/website/source/assets/images/icon-download-purple@2x.png and /dev/null differ diff --git a/website/source/assets/images/icon-download.png b/website/source/assets/images/icon-download.png deleted file mode 100644 index 200f73aa43..0000000000 Binary files a/website/source/assets/images/icon-download.png and /dev/null differ diff --git a/website/source/assets/images/icon-download@2x.png b/website/source/assets/images/icon-download@2x.png deleted file mode 100644 index 618ba1f4f9..0000000000 Binary files a/website/source/assets/images/icon-download@2x.png and /dev/null differ diff --git a/website/source/assets/images/icon-github-purple.png b/website/source/assets/images/icon-github-purple.png deleted file mode 100644 index 27467e1ea2..0000000000 Binary files a/website/source/assets/images/icon-github-purple.png and /dev/null differ diff --git a/website/source/assets/images/icon-github-purple@2x.png b/website/source/assets/images/icon-github-purple@2x.png deleted file mode 100644 index e72e1299d7..0000000000 Binary files a/website/source/assets/images/icon-github-purple@2x.png and /dev/null differ diff --git a/website/source/assets/images/icon-github.png b/website/source/assets/images/icon-github.png deleted file mode 100644 index 8d74442bda..0000000000 Binary files a/website/source/assets/images/icon-github.png and /dev/null differ diff --git a/website/source/assets/images/icon-github@2x.png b/website/source/assets/images/icon-github@2x.png deleted file mode 100644 index 6e60655cb1..0000000000 Binary files a/website/source/assets/images/icon-github@2x.png and /dev/null differ diff --git a/website/source/assets/images/logo-header-gradient@2x.png b/website/source/assets/images/logo-header-gradient@2x.png deleted file mode 100644 index 6be50827cc..0000000000 Binary files a/website/source/assets/images/logo-header-gradient@2x.png and /dev/null differ diff --git a/website/source/assets/images/logo-header.svg b/website/source/assets/images/logo-header.svg deleted file mode 100644 index 7ee9d85ca4..0000000000 --- a/website/source/assets/images/logo-header.svg +++ /dev/null @@ -1,39 +0,0 @@ - - - HashiCorp Consul - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/website/source/assets/images/logo-text.svg b/website/source/assets/images/logo-text.svg new file mode 100644 index 0000000000..11f60999c2 --- /dev/null +++ b/website/source/assets/images/logo-text.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/website/source/assets/images/logo_large.png b/website/source/assets/images/logo_large.png deleted file mode 100644 index bc1d528a9a..0000000000 Binary files a/website/source/assets/images/logo_large.png and /dev/null differ diff --git a/website/source/assets/images/nav-dotpipes.png b/website/source/assets/images/nav-dotpipes.png deleted file mode 100644 index 852dd11a78..0000000000 Binary files a/website/source/assets/images/nav-dotpipes.png and /dev/null differ diff --git a/website/source/assets/images/nav-dotpipes@2x.png b/website/source/assets/images/nav-dotpipes@2x.png deleted file mode 100644 index 9248f47fa8..0000000000 Binary files a/website/source/assets/images/nav-dotpipes@2x.png and /dev/null differ diff --git a/website/source/assets/images/sidebar-dots.jpg b/website/source/assets/images/sidebar-dots.jpg deleted file mode 100644 index 90973e9072..0000000000 Binary files a/website/source/assets/images/sidebar-dots.jpg and /dev/null differ diff --git a/website/source/assets/javascripts/_app/Sidebar.js b/website/source/assets/javascripts/_app/Sidebar.js deleted file mode 100644 index b36e508c4a..0000000000 --- a/website/source/assets/javascripts/_app/Sidebar.js +++ /dev/null @@ -1,50 +0,0 @@ -(function(){ - - Sidebar = Base.extend({ - - $body: null, - $overlay: null, - $sidebar: null, - $sidebarHeader: null, - $sidebarImg: null, - $toggleButton: null, - - constructor: function(){ - this.$body = $('body'); - this.$overlay = $('.sidebar-overlay'); - this.$sidebar = $('#sidebar'); - this.$sidebarHeader = $('#sidebar .sidebar-header'); - this.$toggleButton = $('.navbar-toggle'); - this.sidebarImg = this.$sidebarHeader.css('background-image'); - - this.addEventListeners(); - }, - - addEventListeners: function(){ - var _this = this; - - _this.$toggleButton.on('click', function() { - _this.$sidebar.toggleClass('open'); - if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) { - _this.$overlay.addClass('active'); - _this.$body.css('overflow', 'hidden'); - } else { - _this.$overlay.removeClass('active'); - _this.$body.css('overflow', 'auto'); - } - - return false; - }); - - _this.$overlay.on('click', function() { - $(this).removeClass('active'); - _this.$body.css('overflow', 'auto'); - _this.$sidebar.removeClass('open'); - }); - } - - }); - - window.Sidebar = Sidebar; - -})(); diff --git a/website/source/assets/javascripts/_app/app.js b/website/source/assets/javascripts/_app/app.js deleted file mode 100644 index 4cff2744f4..0000000000 --- a/website/source/assets/javascripts/_app/app.js +++ /dev/null @@ -1,27 +0,0 @@ -// -// app.js -// - -var APP = (function() { - - function initializeSidebar() { - new Sidebar(); - } - - function initialize() { - APP.Utils.runIfClassNamePresent('page-home', initHome); - - //always init sidebar - initializeSidebar(); - } - - function initHome() { - APP.Homepage.init(); - } - - //api - return { - initialize: initialize - } - -})(); diff --git a/website/source/assets/javascripts/_app/docs.js b/website/source/assets/javascripts/_app/docs.js deleted file mode 100644 index 9a44b86b0f..0000000000 --- a/website/source/assets/javascripts/_app/docs.js +++ /dev/null @@ -1,48 +0,0 @@ -(function(){ - - var mainContentMin = 600; - - var Init = { - - start: function(){ - var classname = this.hasClass(document.body, 'page-sub'); - - if (classname) { - this.addEventListeners(); - } - }, - - hasClass: function (elem, className) { - return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); - }, - - addEventListeners: function(){ - var _this = this; - //console.log(document.querySelectorAll('.navbar-static-top')[0]); - window.addEventListener('resize', _this.resizeImage, false); - - this.resizeImage(); - }, - - resizeImage: function(){ - - var header = document.getElementById('header'), - footer = document.getElementById('footer'), - main = document.getElementById('main-content'), - vp = window.innerHeight, - bodyHeight = document.body.clientHeight, - hHeight = header.clientHeight, - fHeight = footer.clientHeight, - withMinHeight = hHeight + fHeight + mainContentMin; - - if(withMinHeight < vp && bodyHeight < vp){ - var newHeight = mainContentMin + (vp-withMinHeight) + 'px'; - main.style.height = newHeight; - } - } - - }; - - Init.start(); - -})(); diff --git a/website/source/assets/javascripts/_app/homepage.js b/website/source/assets/javascripts/_app/homepage.js deleted file mode 100644 index 79ff40e3e8..0000000000 --- a/website/source/assets/javascripts/_app/homepage.js +++ /dev/null @@ -1,48 +0,0 @@ -//homepage.js - -var APP = APP || {}; - -(function () { - APP.Homepage = (function () { - return { - - ui : null, - - init: function () { - var _this = this; - - //cache elements - this.ui = { - $doc: $(window), - $hero: $('#jumbotron'), - $collapse: $('.navbar-collapse') - } - - this.addEventListeners(); - - }, - - addEventListeners: function(){ - var _this = this; - - if(APP.Utils.isMobile) - return; - - _this.ui.$doc.scroll(function() { - - //if collapseable menu is open dont do parrallax. It looks wonky. Bootstrap conflict - if( _this.ui.$collapse.hasClass('in')) - return; - - var top = _this.ui.$doc.scrollTop(), - speedAdj = (top*0.8), - speedAdjOffset = speedAdj - top; - - _this.ui.$hero.css('webkitTransform', 'translate(0, '+ speedAdj +'px)'); - _this.ui.$hero.find('.container').css('webkitTransform', 'translate(0, '+ speedAdjOffset +'px)'); - }) - } - } - }()); - -}(jQuery, this)); diff --git a/website/source/assets/javascripts/_app/util.js b/website/source/assets/javascripts/_app/util.js deleted file mode 100644 index 0025c2678f..0000000000 --- a/website/source/assets/javascripts/_app/util.js +++ /dev/null @@ -1,33 +0,0 @@ -// -// util.js -// -var APP = APP || {}; - -APP.Utils = (function () { - return { - //check for mobile user agents - isMobile : (function(){ - if( navigator.userAgent.match(/Android/i) - || navigator.userAgent.match(/webOS/i) - || navigator.userAgent.match(/iPhone/i) - //|| navigator.userAgent.match(/iPad/i) - || navigator.userAgent.match(/iPod/i) - || navigator.userAgent.match(/BlackBerry/i) - || navigator.userAgent.match(/Windows Phone/i) - ){ - return true; - } - else { - return false; - } - })(), - - runIfClassNamePresent: function(selector, initFunction) { - var elms = document.getElementsByClassName(selector); - if (elms.length > 0) { - initFunction(); - } - } -} - -}()); diff --git a/website/source/assets/javascripts/application.coffee b/website/source/assets/javascripts/application.coffee deleted file mode 100644 index 9f94cfd047..0000000000 --- a/website/source/assets/javascripts/application.coffee +++ /dev/null @@ -1,13 +0,0 @@ -# From middleman-hashicorp -#= require jquery -#= require bootstrap - -#= require lib/Base - -#= require _app/docs -#= require _app/Sidebar -#= require _app/app -#= require _app/homepage -#= require _app/util - -#= require hashicorp/mega-nav diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js new file mode 100644 index 0000000000..ad181b4cce --- /dev/null +++ b/website/source/assets/javascripts/application.js @@ -0,0 +1,5 @@ +//= require turbolinks +//= require jquery + +//= require hashicorp/mega-nav +//= require hashicorp/sidebar diff --git a/website/source/assets/javascripts/lib/Base.js b/website/source/assets/javascripts/lib/Base.js deleted file mode 100644 index 504e2beea1..0000000000 --- a/website/source/assets/javascripts/lib/Base.js +++ /dev/null @@ -1,145 +0,0 @@ -/* - Based on Base.js 1.1a (c) 2006-2010, Dean Edwards - Updated to pass JSHint and converted into a module by Kenneth Powers - License: http://www.opensource.org/licenses/mit-license.php -*/ -/*global define:true module:true*/ -/*jshint eqeqeq:true*/ -(function (name, global, definition) { - if (typeof module !== 'undefined') { - module.exports = definition(); - } else if (typeof define !== 'undefined' && typeof define.amd === 'object') { - define(definition); - } else { - global[name] = definition(); - } -})('Base', this, function () { - // Base Object - var Base = function () {}; - - // Implementation - Base.extend = function (_instance, _static) { // subclass - var extend = Base.prototype.extend; - // build the prototype - Base._prototyping = true; - var proto = new this(); - extend.call(proto, _instance); - proto.base = function () { - // call this method from any other method to invoke that method's ancestor - }; - delete Base._prototyping; - // create the wrapper for the constructor function - //var constructor = proto.constructor.valueOf(); //-dean - var constructor = proto.constructor; - var klass = proto.constructor = function () { - if (!Base._prototyping) { - if (this._constructing || this.constructor === klass) { // instantiation - this._constructing = true; - constructor.apply(this, arguments); - delete this._constructing; - } else if (arguments[0] !== null) { // casting - return (arguments[0].extend || extend).call(arguments[0], proto); - } - } - }; - // build the class interface - klass.ancestor = this; - klass.extend = this.extend; - klass.forEach = this.forEach; - klass.implement = this.implement; - klass.prototype = proto; - klass.toString = this.toString; - klass.valueOf = function (type) { - return (type === 'object') ? klass : constructor.valueOf(); - }; - extend.call(klass, _static); - // class initialization - if (typeof klass.init === 'function') klass.init(); - return klass; - }; - - Base.prototype = { - extend: function (source, value) { - if (arguments.length > 1) { // extending with a name/value pair - var ancestor = this[source]; - if (ancestor && (typeof value === 'function') && // overriding a method? - // the valueOf() comparison is to avoid circular references - (!ancestor.valueOf || ancestor.valueOf() !== value.valueOf()) && /\bbase\b/.test(value)) { - // get the underlying method - var method = value.valueOf(); - // override - value = function () { - var previous = this.base || Base.prototype.base; - this.base = ancestor; - var returnValue = method.apply(this, arguments); - this.base = previous; - return returnValue; - }; - // point to the underlying method - value.valueOf = function (type) { - return (type === 'object') ? value : method; - }; - value.toString = Base.toString; - } - this[source] = value; - } else if (source) { // extending with an object literal - var extend = Base.prototype.extend; - // if this object has a customized extend method then use it - if (!Base._prototyping && typeof this !== 'function') { - extend = this.extend || extend; - } - var proto = { - toSource: null - }; - // do the "toString" and other methods manually - var hidden = ['constructor', 'toString', 'valueOf']; - // if we are prototyping then include the constructor - for (var i = Base._prototyping ? 0 : 1; i < hidden.length; i++) { - var h = hidden[i]; - if (source[h] !== proto[h]) - extend.call(this, h, source[h]); - } - // copy each of the source object's properties to this object - for (var key in source) { - if (!proto[key]) extend.call(this, key, source[key]); - } - } - return this; - } - }; - - // initialize - Base = Base.extend({ - constructor: function () { - this.extend(arguments[0]); - } - }, { - ancestor: Object, - version: '1.1', - forEach: function (object, block, context) { - for (var key in object) { - if (this.prototype[key] === undefined) { - block.call(context, object[key], key, object); - } - } - }, - implement: function () { - for (var i = 0; i < arguments.length; i++) { - if (typeof arguments[i] === 'function') { - // if it's a function, call it - arguments[i](this.prototype); - } else { - // add the interface using the extend method - this.prototype.extend(arguments[i]); - } - } - return this; - }, - toString: function () { - return String(this.valueOf()); - } - }); - - // Return Base implementation - return Base; -}); diff --git a/website/source/assets/stylesheets/_announcement-bnr.scss b/website/source/assets/stylesheets/_announcement-bnr.scss deleted file mode 100755 index 205a522172..0000000000 --- a/website/source/assets/stylesheets/_announcement-bnr.scss +++ /dev/null @@ -1,142 +0,0 @@ -// -// announcement bnr -// -------------------------------------------------- - -$enterprise-bnr-font-weight: 300; -$enterprise-bnr-consul-color: #B52A55; -$enterprise-color-dark-white: #A9B1B5; - -body{ - // when _announcment-bnr.erb (ie. Consul Enterprise Announcment) is being used in layout we need to push down content to accommodate - // add this class to body - &.-displaying-bnr{ - #header{ - > .container{ - padding-top: 8px; - -webkit-transform: translateY(32px); - -ms-transform: translateY(32px); - transform: translateY(32px); - } - } - - #jumbotron { - .container{ - .jumbo-logo-wrap{ - margin-top: 160px; - } - } - } - - &.page-sub{ - #header{ - > .container{ - padding-bottom: 32px; - } - } - } - } -} - - -#announcement-bnr { - height: 40px; - flex-shrink: 0; - background-color: #000; - - &.-absolute{ - position: absolute; - top: 0; - left: 0; - width: 100%; - z-index: 9999; - } - - a,p{ - font-size: 14px; - color: $enterprise-color-dark-white; - font-family: $header-font-family; - font-weight: $enterprise-bnr-font-weight; - font-size: 13px; - line-height: 40px; - margin-bottom: 0; - } - - .link-highlight{ - display: inline-block; - margin-left: 3px; - color: lighten($enterprise-bnr-consul-color, 10%); - font-weight: 400; - -webkit-transform: translateY(1px); - -ms-transform: translateY(1px); - transform: translateY(1px); - } - - .enterprise-logo{ - position: relative; - top: 4px; - - &:hover{ - text-decoration: none; - - svg{ - rect{ - fill: $enterprise-color-dark-white; - } - } - } - - svg{ - width: 140px; - height: 19px; - fill: $white; - margin-right: 4px; - margin-left: 3px; - - rect{ - @include transition(all .1s ease-in); - } - } - } -} - -.hcaret{ - display: inline-block; - -moz-transform: translate(0, -1px) rotate(135deg); - -webkit-transform: translate(0, -1px) rotate(135deg); - transform: translate(0, -1px) rotate(135deg); - width: 7px; - height: 7px; - border-top: 1px solid lighten($enterprise-bnr-consul-color, 10%); - border-left: 1px solid lighten($enterprise-bnr-consul-color, 10%); - @include transition(all .1s ease-in); -} - -@media (max-width: 768px) { - #announcement-bnr { - .tagline{ - display: none; - } - } -} - -@media (max-width: 320px) { - #announcement-bnr { - a,p{ - font-size: 12px; - } - - .link-highlight{ - display: inline-block; - margin-left: 1px; - } - - .enterprise-logo svg{ - width: 128px; - margin-left: 2px; - } - - .hcaret{ - display: none; - } - } -} diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index 9076eaf2e2..e1037e818b 100755 --- a/website/source/assets/stylesheets/_buttons.scss +++ b/website/source/assets/stylesheets/_buttons.scss @@ -1,56 +1,37 @@ -// -// Button Styles -// -------------------------------------------------- +.button { + background: $button-background; + border: 1px solid $button-font-color; + box-shadow: 3px 4px 0 rgba(0,0,0,0.1); + color: $button-font-color; + display: inline-block; + font-family: $button-font-family; + font-size: $button-font-size; + font-weight: $button-font-weight; + letter-spacing: 1px; + margin-bottom: 4px; + padding: 10px 30px; + text-transform: uppercase; + text-decoration: none; -.outline-btn{ - background-color: transparent; - color: $white; - border: 2px solid $white; - border-radius: $btn-border-radius; - text-decoration: none !important; - @include transition(background-color .3s ease-in-out); - - &.purple{ - color: $purple; - border: 2px solid $purple; + &:hover, + &:active, + &:focus { + text-decoration: none; } - &:hover{ - color: $white; - background-color: rgba(255, 255, 255, .2); - @include transition(background-color .3s ease-in-out); + &:hover { + background: $button-font-color; + border: 1px solid $button-font-color; + color: $button-background; + } - &.purple{ - background-color: rgba(255, 255, 255, .5); + &.primary { + background: $button-primary-background; + border: 1px solid darken($button-primary-background, 5%); + color: $button-primary-font-color; + + &:hover { + background: lighten($button-primary-background, 5%); } } } - -//dot animation on header main nav link hover -.li-under a::after { - position: absolute; - top: 68%; - left: 50%; - margin-left: -4px; - width: 8px; - height: 8px; - background-color: $white; - border-radius: 4px; - content: ''; - opacity: 0; - text-decoration: none; - -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; - -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; - transition: height 0.3s, opacity 0.3s, transform 0.3s; - -webkit-transform: translateY(-10px); - -moz-transform: translateY(-10px); - transform: translateY(-10px); -} - -.li-under a:hover::after, -.li-under a:focus::after { - opacity: .5; - -webkit-transform: translateY(0px); - -moz-transform: translateY(0px); - transform: translateY(0px); -} diff --git a/website/source/assets/stylesheets/_community.scss b/website/source/assets/stylesheets/_community.scss index e94cfa76d9..1ff047de69 100644 --- a/website/source/assets/stylesheets/_community.scss +++ b/website/source/assets/stylesheets/_community.scss @@ -1,15 +1,22 @@ -.people { - margin-top: 30px; +#inner { + .people { + margin-top: 30px; - .person { - margin-bottom: 40px; + .person { + &:after { + display: block; + clear: both; + content: ' '; + } - h3 { - text-transform: none; - } + img { + width: 125px; + margin: auto auto; + } - .bio { - padding-left: 150px; + .bio { + padding-left: 150px; + } } } } diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss index 10f8f13171..ccbbf21351 100755 --- a/website/source/assets/stylesheets/_docs.scss +++ b/website/source/assets/stylesheets/_docs.scss @@ -1,277 +1,75 @@ -// -// Docs -// -------------------------------------------------- - -body.layout-docs, -body.layout-intro{ - background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat; - - #main-content{ - min-height: 600px; - - h1, h2, h3, h4, h5 { - font-family: $font-family-open-sans; - text-transform: none; - } - } - - >.container{ - .col-md-8[role=main]{ - min-height: 800px; - background-color: white; - - &::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: -9999px; - right: 0; - border-left: none; - box-shadow: 9999px 0 0 white; - } - - >div{ - position: relative; - z-index: 10; - } - } - } -} - -.docs-sidebar{ - position: relative; - z-index: 20; +#docs-sidebar { margin-bottom: 30px; margin-top: 50px; - margin-right: 4%; - background-color: $light-purple; - border-radius: $el-border-radius; - a{ - color: $purple; - } - - .docs-sidenav{ - padding-top: 15px; + ul.nav.docs-sidenav { + display: block; padding-bottom: 15px; - :last-child{ - border-bottom: none; - } + li { + a { + color: $sidebar-link-color; + font-size: $sidebar-font-size; + padding: 10px 0 10px 15px; - //all li > a - li{ - position: relative; - - > a{ - color: $purple; - @include transition( color 0.5s ease ); - } - - > a:hover, - > a:focus { - background-color: transparent !important; - color: $black; - @include transition( color 0.5s ease ); - } - } - - - > li { - padding: 10px 0; - margin: 0 30px; - border-bottom: 2px solid #fff; - - >.nav{ - li{ - a{ - color: $black; - } - } - } - - &.active { - &:before{ - content: ''; + &:before { + color: $sidebar-link-color-active; + content: '\203A'; + font-size: $font-size; + left: 0; + line-height: 100%; + opacity: 0.4; position: absolute; - width: 8px; - height: 8px; - background-color: $purple; - border-radius: 4px; - top: 26px; - left: -10px; - } - > a{ - -webkit-font-smoothing: antialiased; + + height: 100%; + width: 8px } - /*> a:hover, - > a:focus { - font-weight: font-weight-xb; - }*/ + &:focus, + &:hover { + background-color: transparent; + color: $sidebar-link-color-hover; - .nav { + &:before { + opacity: 1; + } + } + } + + // For forcing sub-navs to appear - in the long term, this should not + // be a thing anymore... + > ul.nav-visible { display: block; - - li.active a { - font-weight: font-weight-xb; - } - - li.active .subnav { - display: block; - - li a { - font-weight: $font-weight-sb; - } - - li.active a { - font-weight: font-weight-xb; - } - } } } - > a { - font-family: $font-family-open-sans; - font-weight: 600; - -webkit-font-smoothing: antialiased; - } - } + li.active { + > a { + color: $sidebar-link-color-active; - .nav { - display: none; - margin-bottom: 15px; - - > li{ - margin-left: 20px; - - > a{ - padding: 6px 15px; - font-weight: 500; - -webkit-font-smoothing: antialiased; + &:before { + opacity: 1; + } } - .subnav { - display: none; - margin-bottom: 15px; - list-style: none; - > li{ - padding: 6px 0; - > a{ - -webkit-font-smoothing: antialiased; - } + // Open nested navigations + > ul.nav { + display: block; + } + } + + // subnav + ul.nav { + display: none; + margin: 10px; + + li { + margin-left: 10px; + + a { + padding: 6px 15px; } } } } } -} - - -.bs-docs-section{ - padding-top: 10px; - padding-left: 3%; - padding-bottom: 80px; - - .alert { - a { - color: inherit; - font-size: inherit; - font-weight: inherit; - } - } - - .lead{ - margin-bottom: 48px - } - - .doc-sectional{ - margin-bottom: 48px; - } - - p, li, .alert { - font-size: 18px; - font-weight: 400; - line-height: 1.5em; - margin: 0 0 18px; - -webkit-font-smoothing: antialiased; - } - - li p a, li a { - text-decoration: none; - } - - pre { - margin: 0 0 18px; - - // This will force the code to scroll horizontally on small screens - // instead of wrapping. - code { - overflow-wrap: normal; - white-space: pre; - } - } - - a{ - color: $purple; - &:hover{ - text-decoration: underline; - } - } - - img{ - max-width: 650px; - margin-top: 25px; - margin-bottom: 25px; - } - - h1{ - color: $purple; - text-transform: uppercase; - padding-bottom: 24px; - margin-top: 40px; - margin-bottom: 24px; - border-bottom: 1px solid #eeeeee; - } - - h2, h3, h4{ - margin-top: 42px; - margin-bottom: 16px; - } - - #graph { - margin-top: 30px; - } - - .alert p { - margin-bottom: 0; - } -} - - -@media (max-width: 992px) { - body.layout-docs, - body.layout-intro{ - >.container{ - .col-md-8[role=main]{ - min-height: 0; - &::before { - border-left: 9999px solid white; - } - } - } - } -} - -@media (max-width: 480px) { - .bs-docs-section{ - img{ - max-width: 450px; - } - - h1{ - font-size: 32px; - } - } -} diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss index ff758bf952..97a4dfc66b 100644 --- a/website/source/assets/stylesheets/_downloads.scss +++ b/website/source/assets/stylesheets/_downloads.scss @@ -1,59 +1,60 @@ -.downloads { - margin-top: 20px; +body.layout-downloads { + #inner { + .downloads { + margin-top: 20px; - .description { - margin-bottom: 20px; - } - - .download { - border-bottom: 1px solid #b2b2b2; - padding-bottom: 15px; - margin-top: 10px; - margin-bottom: 10px; - - .details { - padding-left: 95px; - - h2 { - margin-top: 0px; + .description { + margin-bottom: 20px; } - ul { - padding-left: 0px; - } + .download { + align-items: center; + border-bottom: 1px solid #b2b2b2; + display: flex; + padding: 15px; - li { - display: inline-block; + .details { + padding-left: 20px; - &:after { - content: " | "; + h2 { + margin-top: 4px; + border: none; + } + + ul { + padding-left: 0px; + margin: -8px 0 0 0; + } + + li { + display: inline-block; + + &:after { + content: " | "; + } + + &:last-child:after { + content: ""; + } + } } - &:last-child:after { - content: ""; + .icon { + svg { + width: 75px; + } + } + + .os-name { + font-size: 40px; + margin-bottom: -3px; } } - } - .icon { - img { - width: 75px; + .poweredby { + margin-top: 20px; + text-align: center; } } - - .os-name { - font-size: 40px; - margin-bottom: -3px; - } - } - - .poweredby { - margin-top: 20px; - - img { - display: block; - margin: 0 auto; - width: 122px; - } } } diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss index 13ffebd474..ae34a057a4 100644 --- a/website/source/assets/stylesheets/_footer.scss +++ b/website/source/assets/stylesheets/_footer.scss @@ -1,68 +1,22 @@ -#footer{ - padding: 64px 0; - background-color: $black; +#footer { + padding-top: 50px; - .hashicorp-project{ - margin-top: 24px; - } + ul.footer-links { + li { + a { + color: $footer-link-color; + font-size: $footer-font-size; + font-family: $font-family-open-sans; + text-decoration: none; - .pull-right{ - padding-right: 15px; - } -} + &:hover, &:focus, &:active { + background-color: transparent; + color: $footer-link-color-hover; + outline: 0; + } -.edit-page-link{ - position: absolute; - top: -110px; - right: 30px; - z-index: 9999; - - a{ - text-transform: uppercase; - color: $black; - } -} - -@media (max-width: 768px) { - #footer{ - text-align: center; - - .footer-hashi { - float: none !important; - display: block; - - .pull-right{ - float: none !important; - padding-right: 0; - } - } - - ul{ - float: none; - display: inline-block; - margin-bottom: 36px; - } - } -} - -@media (max-width: 414px) { - #footer{ - ul{ - display: block; - li{ - display: block; - float: none; - } - - &.external-links{ - li{ - svg{ - position: relative; - left: 0; - top: 2px; - margin-top: 0; - margin-right: 4px; - } + @media (max-width: 992px) { + text-align: center; } } } diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss index c719032b6a..3b69c05ddc 100755 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -1,102 +1,35 @@ -// -// Global Site -// -------------------------------------------------- - -/*html{ -text-rendering: optimizeLegibility; --webkit-font-smoothing: antialiased; -}*/ +html { + height: 100%; + min-height: 100%; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; +} body { - font-size: 15px; - color: $black; + -webkit-font-smoothing: antialiased; + color: $body-font-color; + background-color: $white; + font-size: $font-size; font-family: $font-family-open-sans; - font-weight: 300; + font-weight: $font-weight-reg; + height: 100%; + min-height: 100%; } h1, h2, h3, h4, h5 { font-family: $font-family-klavika; - text-transform: uppercase; + -webkit-font-smoothing: antialiased; } -h1{ - font-size: 42px; - line-height: 42px; - font-weight: $font-weight-sb; +h1 { margin-bottom: 24px; } -h3{ - font-size: 28px; - line-height: 28px; - font-weight: $font-weight-sb; +// Avoid FOUT +.wf-loading { + visibility: hidden; } -p, a, input, .alert { - -} - -//an alternative color for buttons in the doc body -.btn-serf{ - color: $white !important; - background-color: $btn-color; - border-radius: $btn-border-radius; - //@include box-shadow( $shadow ); -} - -.highlight{ - margin-bottom: 18px; -} - -pre { - background-color: $black; - color: $white; - font-size: 14px; - font-weight: normal; - font-family: "Courier New", Monaco, Menlo, Consolas, monospace; - border: none; - padding: 20px; - margin-bottom: 0; -} - -tt { - font-size: 18px; - font-family: "Menlo", "Monaco", "Courier New", monospace; -} - -//fixed grid below 992 to prevent smaller responsive sizes -@media (max-width: 992px) { - .container{ - max-width: 970px; - } -} - -//all below styles are overriding corrections for below (min-width: 992px) -//below (min-width: 992px) these styles change -.navbar-nav { - margin: 0; -} - -.navbar-right { - float: right !important; -} - -.navbar-nav > li { - float: left; -} - -.navbar-nav > li > a { - padding-top: 15px; - padding-bottom: 15px; -} - -.center { - text-align: center; -} - -.edit-this-page{ - padding-top: 48px; - a{ - text-transform: uppercase; - } +.wf-active, .wf-inactive { + visibility: visible; } diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index 917acbd312..dde70d7d66 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -1,65 +1,78 @@ -// -// Header -// - Project Specific -// - edits should be made here -// -------------------------------------------------- +#header { + background: $header-background-color; -body.page-sub{ - #header{ - @include consul-gradient-bg(); + .navbar-toggle { + height: $header-height; + margin: 0; + padding-right: 15px; + border-radius: 0; - .navbar-brand { - .logo{ - &:hover{ - color: $black; + .icon-bar { + border: 1px solid $white; + border-radius: 0; + } + } + + .navbar-brand { + display: block; + margin: 0; + padding: 0; + + a { + display: flex; + align-items: center; + height: $header-height; + line-height: $header-height; + + svg.logo { + transition: opacity 0.15s ease-in-out; + @extend svg.logo.white; + + &:hover, &:focus, &:active { + opacity: 0.6; + outline: 0; + text-decoration: none; } } } } -} -#header { - .navbar-brand { - .logo{ - width: $project-logo-width; - padding: 0; - line-height: $header-height; - background-position: 0 center; - font-size: 0; - text-transform: uppercase; - background: url("../images/logo-header.svg") center no-repeat; - background-size: 100%; + ul.nav { + li { + a { + color: $header-link-color; + font-size: $header-font-size; + font-family: $font-family-open-sans; + font-weight: $font-weight-bold; + height: $header-height; + line-height: $header-height; + padding: 0 10px; + margin: 0; + text-decoration: none; - &:hover{ - opacity: .4; - } - } + &:hover, &:focus, &:active { + background-color: transparent; + color: $header-link-color-hover; + outline: 0; - .by-hashicorp{ - &:hover{ - svg{ - .svg-bg-line{ - opacity: .4; + svg { + fill: $header-link-color-hover; } } + + svg { + fill: $header-link-color; + position: relative; + top: 2px; + width: 14px; + height: 14px; + margin-right: 3px; + } } } } - .buttons{ - margin-top: 2px; //baseline everything - } -} - -@media (max-width: 414px) { - #header { - .navbar-brand { - .logo{ - width: $project-logo-width * .75; - } - .by-hashicorp{ - margin-top: 2px; - } - } + .buttons { + margin-top: 2px; } } diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index a8e72d972f..3ce6ddbc6a 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -1,328 +1,216 @@ -// -// Home -// -------------------------------------------------- -body.page-home{ - background-color: #f8f8f8; -} +#page-home { + // Override the main header + #header { + background: $home-header-background-color; -#features{ - @include anti-alias(); - padding: 130px 0 0 0; - background: #f8f8f8 image-url('hero-dots-below@2x.png') center top no-repeat; - background-size: 1280px 49px; - position: relative; - top: $negative-hero-margin; - - .double-row{ - padding: 0 0 50px 0; - } - - h2{ - font-size: 24px; - letter-spacing: 1px; - color: $purple; - font-family: $font-family-klavika; - font-weight: font-weight-xb; - } - p{ - font-size: 16px; - line-height: 1.5em; - color: $consul-gray; - font-family: $font-family-open-sans; - font-weight: $font-weight-sb; - } - - .icn{ - display: block; - width: 186px; - height: 272px; - margin: 0 auto; - background-position: center 0; - background-repeat: no-repeat; - } - - .discovery{ - background-image: image-url('feature-discovery@2x.png'); - background-size: 181px 181px; - } - .health{ - background-image: image-url('feature-health@2x.png'); - background-size: 125px 179px; - } - .multi{ - background-image: image-url('feature-multi@2x.png'); - background-size: 182px 184px; - } - .config{ - background-image: image-url('feature-config@2x.png'); - background-size: 157px 179px; - } -} - -@media (max-width: 992px) { - #features{ - top: $large-negative-hero-margin; - .double-row{ - padding: 0 0 0 0; - .row{ - padding-bottom: 90px; + .navbar-toggle { + .icon-bar { + border: 1px solid $home-header-link-color; } } - .icn{ - height: 200px; - } - } -} - -@media (max-width: 768px){ - #cta{ - text-align: center; - .intro{ - .left{ - text-align: center !important; - } - } - } -} - -@media (max-width: 480px) { - #features{ - text-align: center; - } -} - -#cta { - padding: 130px 0 130px; - - .intro { - .left { - text-align: right; - } - - .right { - margin-top: 12px; - } - - } - - p{ - font-size: 18px; - line-height: 1.5em; - color: $consul-gray; - font-weight: $font-weight-sb; - } - - .outline-btn { - padding: 8px; - display: inline-block; - - &:focus { - outline: 0; - } - } - - a { - font-weight: 500; - font-size: 16px; - text-transform: uppercase; - letter-spacing: 1px; - color: $purple; - &:hover { - text-decoration: none; - } - } -} - -#demos{ - padding: 30px 0 60px; - background-color: $light-purple; - background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat; - - .explantion { - margin: 40px 0 40px 0; - - h2 { - font-size: 22px; - text-transform: uppercase; - font-family: $font-family-klavika; - font-weight: font-weight-xb; - } - - p{ - font-size: 16px; - line-height: 1.5em; - color: $consul-gray; - font-family: $font-family-open-sans; - font-weight: $font-weight-sb; - } - } - - .terminals{ - margin-bottom: 80px; - - .terminal-item{ - border-bottom: 1px solid #eaeae; - - &.last{ - border-bottom: none; - } - >header{ - .left{ - span.icn{ - display: inline-block; - width: 83px; - height: 74px; - } + .navbar-brand { + a { + svg.logo { + @extend svg.logo.color; } + } + } - .right{ - padding-left: 25px; + ul.nav { + li { + a { + color: $home-header-link-color; - h2{ - margin-top: 0; - font-size: 28px; - text-transform: uppercase; + &:hover, &:focus, &:active { + background-color: transparent; + color: $home-header-link-color-hover; + + svg { + fill: $home-header-link-color-hover; + } } - p{ - font-size: 16px; + svg { + fill: $home-header-link-color; } } } + } + } - .terminal{ - background-color: darken($gray-darker, 15%); - border-radius: 4px; + header { + .hero { + margin: 140px auto 160px auto; + text-align: center; - header{ - position: relative; - background-color: $consul-gray; + .button { + margin: 5px; + + @media (max-width: 768px) { + display: block; + margin-top: 10px; text-align: center; - padding: 3px; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - - h4{ - font-size: 14px; - letter-spacing: 1px; - color: $gray-darker; - font-family: $font-family-klavika; - font-weight: font-weight-xb; - } - - ul.shell-dots{ - position: absolute; - top: 10px; - left: 8px; - padding-left: 0; - - li{ - display: inline-block; - width: 12px; - height: 12px; - border-radius: 6px; - background-color: $gray-darker; - margin-left: 6px; - } - } - } - - .terminal-window{ - min-height: 140px; - padding: 20px; - font-size: 15px; - font-weight: normal; - color: $white; - - .txt-r { - color: lighten($red, 8%);; - } - .txt-p { - font-weight: bold; - color: lighten($purple, 15%); - } - p{ - margin-bottom: 2px; - font-family: $font-family-mono; - white-space: pre-wrap; - } - .cursor { - background-color: $light-purple; - } } } - .feature-bullets{ - list-style-type: none; - padding-left: 35px; + svg { + max-width: 90%; + } + } + } - li{ - padding: 5px 0 5px 45px; + section { + background: $white; + padding: 100px 0; + } + + section.marketing { + h2 { + font-family: $font-family-klavika; + font-size: 36px; + font-weight: $font-weight-bold; + line-height: 1.25; + letter-spacing: -0.02em; + margin: 0; + padding: 0; + } + + p { + font-family: $font-family-open-sans; + font-size: 16px; + letter-spacing: 0.01em; + line-height: 1.8; + margin: 0 0 10px; + } + + span.callout { + background: $black; + color: $white; + display: inline-block; + font-family: $font-family-klavika; + font-size: 18px; + font-weight: $font-weight-bold; + line-height: 1; + margin: 0; + padding: 5px; + letter-spacing: 0.05em; + text-transform: uppercase; + } + + &.pink { + background: $consul-pink; + + h2 { + color: $white; + } + + p { + color: $white; + font-weight: $font-weight-bold; + } + + span.callout { + background: $white; + color: $black; + } + } + + &.pink-dark { + background: $consul-pink-dark; + + h2 { + color: $white; + } + + p { + color: $white; + font-weight: $font-weight-bold; + } + + span.callout { + background: $white; + color: $black; + } + } + + &.black { + background: $black; + + h2 { + color: $white; + } + + p { + color: $white; + font-weight: $font-weight-bold; + } + + span.callout { + background: $white; + color: $black; + } + } + + &#features { + .feature-icon { + text-align: center; + } + + h2, svg { + padding-top: 50px; + } + + svg { + margin-top: 20px; + } + } + + &#cta { + margin-top: -150px; + padding: 0 0 50px 0; + text-align: center; + } + } + + .terminal { + border: 1px solid $white; + background-color: $black; + box-sizing: border-box; + color: $white; + font-family: $font-family-monospace; + font-size: 14px; + line-height: 1.8; + margin: 20px auto 120px auto; + padding: 10px 20px 20px 20px; + + .terminal-content { + margin-top: 15px; + overflow-x: scroll; + width: 100%; + white-space: nowrap; + + span { + display: block; + + span { + display: inline; } + + &.text-pink { + color: lighten($consul-pink, 20%); + } + } + } + + span.circle { + &:before { + content: '\25CF'; + color: $white; + font-size: 20px; + line-height: 1; + height: 100%; } } } } - - -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - #demos{ - .terminals{ - .terminal-item{ - .feature-bullets{ - li{ - background-size: 12px 12px; - } - } - } - } - } -} - - - -@media (max-width: 992px) { - #demos{ - .terminals{ - .terminal-item{ - >header{ - .left{ - span.icn{ - } - } - - .right{ - padding-left: 54px; - } - } - } - } - } -} - -@media (max-width: 768px) { - #demos{ - .terminals{ - .terminal-item{ - >header{ - .left{ - span.icn{ - padding-bottom: 15px; - } - } - - .right{ - padding-left: 15px; - } - } - } - } - } -} - -@media (max-width: 480px) { - #features { - top: $negative-hero-margin; - } -} diff --git a/website/source/assets/stylesheets/_inner.scss b/website/source/assets/stylesheets/_inner.scss new file mode 100644 index 0000000000..d20d71398d --- /dev/null +++ b/website/source/assets/stylesheets/_inner.scss @@ -0,0 +1,89 @@ +#inner { + p, li, .alert { + font-size: $font-size; + font-family: $font-family-open-sans; + font-weight: $font-weight-reg; + line-height: 1.84em; + margin: 0 0 $font-size; + -webkit-font-smoothing: antialiased; + } + + .alert p:last-child { + margin-bottom: 0; + } + + pre { + font-family: $font-family-monospace; + font-size: ($font-size - 3); + font-weight: normal; + padding: 20px; + margin: 0 0 $font-size; + + // This will force the code to scroll horizontally on small screens + // instead of wrapping. + code { + overflow-wrap: normal; + white-space: pre; + } + } + + a { + color: $body-link-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + code { + background: inherit; + color: $body-link-color; + } + } + + img { + display: block; + margin: 25px auto; + max-width: 650px; + height: auto; + width: 90%; + } + + h1, + h2, + h3, + h4 { + color: $body-font-color; + margin-top: 54px; + margin-bottom: $font-size; + line-height: 1.3; + } + + h2 { + padding-bottom: 3px; + border-bottom: 1px solid $gray-light; + } + + h1 > code, + h2 > code, + h3 > code, + h4 > code, + h5 > code + h6 > code, + li code, + table code, + p code, + tt, + .alert code { + font-family: $font-family-monospace; + font-size: 90%; + background-color: transparent; + color: inherit; + padding: 0; + } + + table { + @extend .table; + @extend .table-striped; + } +} diff --git a/website/source/assets/stylesheets/_jumbotron.scss b/website/source/assets/stylesheets/_jumbotron.scss deleted file mode 100755 index c2d3004d60..0000000000 --- a/website/source/assets/stylesheets/_jumbotron.scss +++ /dev/null @@ -1,95 +0,0 @@ -// -// Jumbotron -// -------------------------------------------------- - -#jumbotron-mask, -#jumbotron-mask-dummy{ - overflow: hidden; - width: 100%; - height: $jumbotron-total-height; -} -#jumbotron-mask { - position: absolute; - top: 0; -} -#jumbotron-mask-dummy{ - visibility: hidden; - position:relative; - top: $negative-hero-margin; -} - -#jumbotron { - position: relative; - height: $jumbotron-total-height; - padding-top: 0; - padding-bottom: 0; - margin-top: $negative-hero-margin; - color: $jumbotron-color; - -webkit-backface-visibility:hidden; - @include consul-gradient-bg(); - - .jumbotron-dots{ - position: absolute; - top: 0; - left: 0; - height: 632px; - width: 100%; - margin-top: $negative-hero-margin; - background: transparent image-url('hero-dots.png') center $header-height no-repeat; - } - - - .container{ - position: relative; - height: 100%; - margin-top: $header-height; - padding-left: 0; - -webkit-backface-visibility:hidden; - - .jumbo-logo-wrap{ - margin-top: 155px; - - .jumbo-logo{ - width: 318px; - height: 316px; - background: transparent image-url('consul-hero-logo@2x.png') 0 0 no-repeat; - background-size: 318px 316px; - z-index: 20; - } - } - - h2{ - margin-top: 220px; - font-size: 40px; - line-height: 48px; - letter-spacing: 1px; - } - - .lead { - font-weight: $font-weight-sb; - letter-spacing: .5px; - opacity: .89; - } - } -} - -@media (max-width: 992px) { - #jumbotron .container { - h2, p.lead{ - text-align: center; - margin-left: 0; - } - } - #jumbotron-mask-dummy{ - top: $large-negative-hero-margin; - } -} - -@media (max-width: 480px) { - #jumbotron .container { - h2{ - margin-top: 200px; - font-size: 32px; - } - } -} diff --git a/website/source/assets/stylesheets/_logos.scss b/website/source/assets/stylesheets/_logos.scss new file mode 100644 index 0000000000..87b50d375b --- /dev/null +++ b/website/source/assets/stylesheets/_logos.scss @@ -0,0 +1,51 @@ +svg.logo { + &.color { + opacity: 1.0; + + path.text { + fill: $black; + opacity: 1.0; + } + + path.center-c { + fill: $consul-pink-dark; + opacity: 1.0; + } + + path.circles { + fill: $consul-pink; + opacity: 1.0; + } + + path.c { + fill: $consul-pink; + opacity: 1.0; + } + } + + // The default logo class is the colored version + @extend .color; + + &.white { + opacity: 1.0; + + path.text { + fill: $white; + } + + path.center-c { + fill: $white; + opacity: 0.7; + } + + path.circles { + fill: $white; + opacity: 1.0; + } + + path.c { + fill: $white; + opacity: 1.0; + } + } +} diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss deleted file mode 100644 index debcb14f01..0000000000 --- a/website/source/assets/stylesheets/_sidebar.scss +++ /dev/null @@ -1,23 +0,0 @@ -// -// Sidebar -// - Project Specific -// - Make sidebar edits here -// -------------------------------------------------- - -.sidebar { - .sidebar-nav { - // Links - //---------------- - li { - a { - color: $purple; - - svg{ - path{ - fill: $purple; - } - } - } - } - } -} diff --git a/website/source/assets/stylesheets/_syntax.scss.erb b/website/source/assets/stylesheets/_syntax.scss.erb new file mode 100644 index 0000000000..b7ddc9e5b8 --- /dev/null +++ b/website/source/assets/stylesheets/_syntax.scss.erb @@ -0,0 +1,14 @@ +pre.highlight code { + color: #333333; +} + +<%= Rouge::Themes::Github.render(scope: ".highlight") %> + +pre.highlight { + border: 1px solid #CCCCCC; +} + +pre.highlight code span.c1 { + font-style: normal; + opacity: 0.8; +} diff --git a/website/source/assets/stylesheets/_utilities.scss b/website/source/assets/stylesheets/_utilities.scss deleted file mode 100755 index 7df4c7c4a6..0000000000 --- a/website/source/assets/stylesheets/_utilities.scss +++ /dev/null @@ -1,23 +0,0 @@ -// -// Utility classes -// -------------------------------------------------- - - -// -// ------------------------- - -@mixin anti-alias() { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; -} - -@mixin consul-gradient-bg() { - background: #694a9c; /* Old browsers */ - background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */ - background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */ -} diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index 2fa9161a5e..afbec98539 100755 --- a/website/source/assets/stylesheets/_variables.scss +++ b/website/source/assets/stylesheets/_variables.scss @@ -1,60 +1,61 @@ -// -// Variables -// -------------------------------------------------- +// Colors +$white: #FFFFFF; +$black: #000000; +$gray-darker: #555555; - -// Global values -// -------------------------------------------------- - -$jumbotron-height: 540px; -$header-height: 92px; -$jumbotron-total-height: 542px; //jumbo+header -$jumbotron-color: #fff; -$btn-border-radius: 4px; -$el-border-radius: 6px; -$negative-hero-margin: -93px; -$large-negative-hero-margin: -154px; -// colors -// ------------------------- - -$white: #fff; -$black: #242424; -$gray-darker: #555; -$gray: #777; -$gray-light: #939393; -$gray-lighter: #979797; -$red: #dd4e58; -$red-dark: #c5454e; -$red-darker: #b03c44; -$tan: #f0f0e5; -$consul-gray: #909090; -$consul-footer-gray: #d7d4d7; -$purple: #69499a; -$light-purple: #f7f3f9; -$btn-color: #4592C5; - - -// Scaffolding -// ------------------------- -$body-bg: #fff; -$text-color: $gray; - -// Links -// ------------------------- -$link-color: $red-dark; -$link-hover-color: darken($link-color, 15%); +$consul-pink: #D62783; +$consul-pink-dark: #961D59; +$packer-blue: #1DAEFF; +$packer-blue-dark: #1D94DD; +$vagrant-blue: #1563FF; +$vagrant-blue-dark: #104EB2; +$vault-black: #000000; +$vault-blue: #00ABE0; +$vault-gray: #919FA8; // Typography -// ------------------------- -$font-family-open-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-klavika: "klavika-web", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-mono: "Courier New", Monaco, Menlo, Consolas, monospace; -$font-weight-xl: 100; -$font-weight-reg: 300; -$font-weight-sb: 500; -$font-weight-xb: 700; -$font-weight-open: $font-weight-reg; +$font-family-klavika: 'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-open-sans: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-monospace: 'Menlo', 'Monaco', 'Consolas', "Courier New", monospace; +$font-size: 15px; +$font-weight-reg: 400; +$font-weight-bold: 600; +// Body +$body-font-color: $gray-darker; +$body-link-color: $consul-pink; -$text-shadow: 1px 1px 1px #000; -$shadow: $text-shadow; +// Home +$home-header-background-color: transparent; +$home-header-link-color: $gray-darker; +$home-header-link-color-hover: $black; + +// Sidebar +$sidebar-background-color: $white; +$sidebar-font-size: $font-size - 2; +$sidebar-link-color: $body-font-color; +$sidebar-link-color-hover: $black; +$sidebar-link-color-active: $body-link-color; +$sidebar-font-family: $font-family-open-sans; +$sidebar-font-weight: $font-weight-reg; + +// Header +$header-background-color: $consul-pink; +$header-font-size: $font-size - 2; +$header-height: 92px; +$header-link-color: rgba($white, 0.85); +$header-link-color-hover: $white; + +// Footer +$footer-font-size: $font-size - 2; +$footer-link-color: $body-font-color; +$footer-link-color-hover: $black; + +// Button +$button-background: $white; +$button-font-color: #7b8A8E; +$button-font-family: $font-family-klavika; +$button-font-size: $font-size; +$button-font-weight: $font-weight-bold; +$button-primary-background: $consul-pink; +$button-primary-font-color: $white; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index ad1c17c4a9..f5bcd7a16b 100644 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -1,37 +1,33 @@ -// Import bootstrap -@import "bootstrap-sprockets"; -@import "bootstrap"; +@import 'bootstrap-sprockets'; +@import 'bootstrap'; -// Remote fonts -@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600"); +@import url("//fonts.googleapis.com/css?family=Open+Sans:400,600"); // Mega Nav @import 'hashicorp/mega-nav'; -// Core variables and mixins -@import "_variables"; +// Anchor links +@import 'hashicorp/anchor-links'; -// Utility classes -@import "_utilities"; +// Core variables and mixins +@import '_variables'; + +// Sidebar +@import 'hashicorp/sidebar'; //Global Site -@import "_global"; - -// Hashicorp Shared Project Styles -@import 'hashicorp-shared/_hashicorp-utility'; -@import 'hashicorp-shared/_project-utility'; -@import 'hashicorp-shared/_hashicorp-header'; -@import 'hashicorp-shared/_hashicorp-sidebar'; +@import '_global'; // Components -@import "_header"; +@import '_header'; @import '_footer'; -@import "_jumbotron"; -@import "_buttons"; -@import '_sidebar'; +@import '_inner'; +@import '_buttons'; +@import '_syntax'; +@import '_logos'; // Pages -@import "_home"; @import "_community"; @import "_docs"; @import "_downloads"; +@import "_home"; diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss deleted file mode 100755 index cbc9e341cb..0000000000 --- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss +++ /dev/null @@ -1,323 +0,0 @@ -// -// Hashicorp header -// - Shared throughout projects -// - Edits should not be made here -// -------------------------------------------------- - -#header{ - position: relative; - margin-bottom: 0; -} - -.navigation { - color: black; - text-rendering: optimizeLegibility; - transition: all 1s ease; - - &.white{ - .navbar-brand { - .logo { - color: white; - } - } - - .main-links, - .external-links { - li > a { - &:hover{ - opacity: 1; - } - } - } - } - - .navbar-toggle{ - height: $header-height; - margin: 0; - border-radius: 0; - .icon-bar{ - border: 1px solid $black; - border-radius: 0; - } - } - - .external-links { - &.white{ - svg path{ - fill: $white; - } - } - - li { - position: relative; - - svg path{ - @include transition( all 300ms ease-in ); - } - - &:hover{ - svg path{ - @include transition( all 300ms ease-in ); - } - } - - &.download{ - margin-right: 10px; - } - - > a { - padding-left: 12px !important; - svg{ - position: absolute; - left: -12px; - top: 50%; - margin-top: -7px; - width: 14px; - height: 14px; - } - } - } - } - - .main-links{ - margin-right: $nav-margin-right * 2; - } - - .main-links, - .external-links { - &.white{ - li > a { - color: white; - } - } - li > a { - @include hashi-a-style(); - margin: 0 8px; - padding-top: 1px; - line-height: $header-height; - @include project-a-style(); - } - } - - .nav > li > a:hover, .nav > li > a:focus { - background-color: transparent; - @include transition( all 300ms ease-in ); - } -} - -.navbar-brand { - display: block; - height: $header-height; - padding: 0; - margin: 0 10px 0 0; - - .logo{ - display: inline-block; - height: $header-height; - vertical-align:top; - padding: 0; - line-height: $header-height; - padding-left: $project-logo-width + $project-logo-pad-left; - background-position: 0 center; - @include transition(all 300ms ease-in); - - &:hover{ - @include transition(all 300ms ease-in); - text-decoration: none; - } - } -} - -.navbar-toggle{ - &.white{ - .icon-bar{ - border: 1px solid white; - } - } -} - -.by-hashicorp{ - display: inline-block; - vertical-align:top; - height: $header-height; - margin-left: 3px; - padding-top: 2px; - color: black; - line-height: $header-height; - font-family: $header-font-family; - font-weight: 600; - font-size: 0; - text-decoration: none; - - &.white{ - color: white; - font-weight: 300; - svg{ - path, - polygon, - rect{ - fill: white; - } - } - } - - &:focus, - &:hover{ - text-decoration: none; - } - - .svg-wrap{ - font-size: 13px; - } - - svg{ - &.svg-by{ - width: $by-hashicorp-width; - height: $by-hashicorp-height; - margin-bottom: -4px; - margin-left: 4px; - } - - &.svg-logo{ - width: 16px; - height: 16px; - margin-bottom: -3px; - margin-left: 4px; - } - - path, - polygon{ - fill: black; - @include transition(all 300ms ease-in); - - &:hover{ - @include transition(all 300ms ease-in); - } - } - .svg-bg-line{ - @include transition(all 300ms ease-in); - - &:hover{ - @include transition(all 300ms ease-in); - } - } - } -} - -.hashicorp-project{ - display: inline-block; - height: 30px; - line-height: 30px; - text-decoration: none; - font-size: 14px; - color: $black; - font-weight: 600; - - &.white{ - color: white; - svg{ - path, - polygon, - rect{ - fill: white; - } - } - } - - &:focus{ - text-decoration: none; - } - - &:hover{ - text-decoration: none; - svg{ - &.svg-by{ - line{ - stroke: $purple; - } - } - } - } - - span{ - margin-right: 4px; - font-family: $header-font-family; - font-weight: 500; - } - - span, - svg{ - display: inline-block; - } - - svg{ - &.svg-by{ - width: $by-hashicorp-width; - height: $by-hashicorp-height; - margin-bottom: -4px; - margin-left: -3px; - } - - &.svg-logo{ - width: 30px; - height: 30px; - margin-bottom: -10px; - margin-left: -1px; - } - - path, - line{ - fill: $black; - @include transition(all 300ms ease-in); - - &:hover{ - @include transition(all 300ms ease-in); - } - } - } -} - -@media (max-width: 992px) { - .navigation { - > .container{ - width: 100%; - } - } -} - -@media (max-width: 768px) { - .navigation { - .main-links{ - margin-right: 0; - } - } -} - -@media (max-width: 414px) { - #header { - .navbar-toggle{ - padding-top: 10px; - height: $header-mobile-height; - } - - .navbar-brand { - height: $header-mobile-height; - - .logo{ - height: $header-mobile-height; - line-height: $header-mobile-height; - } - .by-hashicorp{ - height: $header-mobile-height; - line-height: $header-mobile-height; - padding-top: 0; - } - } - .main-links, - .external-links { - li > a { - line-height: $header-mobile-height; - } - } - } -} diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss deleted file mode 100644 index 99f77f6c52..0000000000 --- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss +++ /dev/null @@ -1,293 +0,0 @@ -// -// Hashicorp Sidebar -// - Shared throughout projects -// - Edits should not be made here -// -------------------------------------------------- - -// Base variables -// -------------------------------------------------- -$screen-tablet: 768px; - -$gray-darker: #212121; // #212121 - text -$gray-secondary: #757575; // #757575 - secondary text, icons -$gray: #bdbdbd; // #bdbdbd - hint text -$gray-light: #e0e0e0; // #e0e0e0 - divider -$gray-lighter: #f5f5f5; // #f5f5f5 - background -$link-color: $gray-darker; -$link-bg: transparent; -$link-hover-color: $gray-lighter; -$link-hover-bg: $gray-lighter; -$link-active-color: $gray-darker; -$link-active-bg: $gray-light; -$link-disabled-color: $gray-light; -$link-disabled-bg: transparent; - -/* -- Sidebar style ------------------------------- */ - -// Sidebar variables -// -------------------------------------------------- -$zindex-sidebar-fixed: 1035; - -$sidebar-desktop-width: 280px; -$sidebar-width: 240px; - -$sidebar-padding: 16px; -$sidebar-divider: $sidebar-padding/2; - -$sidebar-icon-width: 40px; -$sidebar-icon-height: 20px; - -@mixin sidebar-nav-base { - text-align: center; - - &:last-child{ - border-bottom: none; - } - - li > a { - background-color: $link-bg; - } - li:hover > a { - background-color: $link-hover-bg; - } - li:focus > a, li > a:focus { - background-color: $link-bg; - } - - > .open > a { - &, - &:hover, - &:focus { - background-color: $link-hover-bg; - } - } - - > .active > a { - &, - &:hover, - &:focus { - background-color: $link-active-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - background-color: $link-disabled-bg; - } - } - - // Dropdown menu items - > .dropdown { - // Remove background color from open dropdown - > .dropdown-menu { - background-color: $link-hover-bg; - - > li > a { - &:focus { - background-color: $link-hover-bg; - } - &:hover { - background-color: $link-hover-bg; - } - } - - > .active > a { - &, - &:hover, - &:focus { - color: $link-active-color; - background-color: $link-active-bg; - } - } - } - } -} - -// -// Sidebar -// -------------------------------------------------- - -// Sidebar Elements -// -// Basic style of sidebar elements -.sidebar { - position: relative; - display: block; - min-height: 100%; - overflow-y: auto; - overflow-x: hidden; - border: none; - @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1)); - @include clearfix(); - background-color: $white; - - ul{ - padding-left: 0; - list-style-type: none; - } - - .sidebar-divider, .divider { - width: 80%; - height: 1px; - margin: 8px auto; - background-color: lighten($gray, 20%); - } - - // Sidebar heading - //---------------- - .sidebar-header { - position: relative; - margin-bottom: $sidebar-padding; - @include transition(all .2s ease-in-out); - } - - .sidebar-image { - padding-top: 24px; - img { - display: block; - margin: 0 auto; - } - } - - - // Sidebar icons - //---------------- - .sidebar-icon { - display: inline-block; - height: $sidebar-icon-height; - margin-right: $sidebar-divider; - text-align: left; - font-size: $sidebar-icon-height; - vertical-align: middle; - - &:before, &:after { - vertical-align: middle; - } - } - - .sidebar-nav { - margin: 0; - padding: 0; - - @include sidebar-nav-base(); - - // Links - //---------------- - li { - position: relative; - list-style-type: none; - text-align: center; - - a { - position: relative; - cursor: pointer; - user-select: none; - @include hashi-a-style-core(); - - svg{ - top: 2px; - width: 14px; - height: 14px; - margin-bottom: -2px; - margin-right: 4px; - } - } - } - } -} - -// Sidebar toggling -// -// Hide sidebar -.sidebar { - width: 0; - @include translate3d(-$sidebar-desktop-width, 0, 0); - - &.open { - min-width: $sidebar-desktop-width; - width: $sidebar-desktop-width; - @include translate3d(0, 0, 0); - } -} - -// Sidebar positions: fix the left/right sidebars -.sidebar-fixed-left, -.sidebar-fixed-right, -.sidebar-stacked { - position: fixed; - top: 0; - bottom: 0; - z-index: $zindex-sidebar-fixed; -} -.sidebar-stacked { - left: 0; -} -.sidebar-fixed-left { - left: 0; - box-shadow: 2px 0px 25px rgba(0,0,0,0.15); - -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15); -} -.sidebar-fixed-right { - right: 0; - box-shadow: 0px 2px 25px rgba(0,0,0,0.15); - -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15); - - @include translate3d($sidebar-desktop-width, 0, 0); - &.open { - @include translate3d(0, 0, 0); - } - .icon-material-sidebar-arrow:before { - content: "\e614"; // icon-material-arrow-forward - } -} - -// Sidebar size -// -// Change size of sidebar and sidebar elements on small screens -@media (max-width: $screen-tablet) { - .sidebar.open { - min-width: $sidebar-width; - width: $sidebar-width; - } - - .sidebar .sidebar-header { - //height: $sidebar-width * 9/16; // 16:9 header dimension - } - - .sidebar .sidebar-image { - /* img { - width: $sidebar-width/4 - $sidebar-padding; - height: $sidebar-width/4 - $sidebar-padding; - } */ - } -} - -.sidebar-overlay { - visibility: hidden; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0; - background: $white; - z-index: $zindex-sidebar-fixed - 1; - - -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); - -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); - transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); - -webkit-transform: translateZ(0); - -moz-transform: translateZ(0); - -ms-transform: translateZ(0); - -o-transform: translateZ(0); - transform: translateZ(0); -} - -.sidebar-overlay.active { - opacity: 0.3; - visibility: visible; - -webkit-transition-delay: 0; - -moz-transition-delay: 0; - transition-delay: 0; -} diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss deleted file mode 100755 index fc4f1634a2..0000000000 --- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss +++ /dev/null @@ -1,87 +0,0 @@ -// -// Hashicorp Nav (header/footer) Utiliy Vars and Mixins -// -// Notes: -// - Include this in Application.scss before header and feature-footer -// - Open Sans Google (Semibold - 600) font needs to be included if not already -// -------------------------------------------------- - -// Variables -$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$header-font-family: $font-family-open-sans; -$header-font-weight: 600; // semi-bold - -$header-height: 74px; -$header-mobile-height: 60px; -$by-hashicorp-width: 74px; -$by-hashicorp-height: 16px; -$nav-margin-right: 12px; - -// Mixins -@mixin hashi-a-style-core{ - font-family: $header-font-family; - font-weight: $header-font-weight; - font-size: 14px; - //letter-spacing: 0.0625em; -} - -@mixin hashi-a-style{ - margin: 0 15px; - padding: 0; - line-height: 22px; - @include hashi-a-style-core(); - @include transition( all 0.3s ease ); - - &:hover{ - @include transition( all 0.3s ease ); - background-color: transparent; - } -} - -//general shared project mixins -@mixin img-retina($image1x, $image, $width, $height) { - background-image: url($image1x); - background-size: $width $height; - background-repeat: no-repeat; - - @media (min--moz-device-pixel-ratio: 1.3), - (-o-min-device-pixel-ratio: 2.6/2), - (-webkit-min-device-pixel-ratio: 1.3), - (min-device-pixel-ratio: 1.3), - (min-resolution: 1.3dppx) { - /* on retina, use image that's scaled by 2 */ - background-image: url($image); - background-size: $width $height; - } -} - -// -// ------------------------- -@mixin anti-alias() { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; -} - -@mixin open-light() { - font-family: $font-family-open-sans; - font-weight: 300; -} - -@mixin open() { - font-family: $font-family-open-sans; - font-weight: 400; -} - -@mixin open-sb() { - font-family: $font-family-open-sans; - font-weight: 600; -} - -@mixin open-bold() { - font-family: $font-family-open-sans; - font-weight: 700; -} - -@mixin bez-1-transition{ - @include transition( all 300ms ease-in-out ); -} diff --git a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss deleted file mode 100755 index a0608f2ada..0000000000 --- a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss +++ /dev/null @@ -1,30 +0,0 @@ -// -// Mixins Specific to project -// - make edits to mixins here -// -------------------------------------------------- - -// Variables -$project-logo-width: 154px; -$project-logo-height: 48px; -$project-logo-pad-left: 0px; -$header-height: 80px; - -// Mixins -@mixin project-a-style{ - font-weight: 400; - opacity: .75; - @include anti-alias(); - - &:hover{ - color: $white; - opacity: 1; - } -} - -@mixin project-footer-a-style{ - line-height: 30px; - - &:hover{ - opacity: .5; - } -} diff --git a/website/source/community.html.erb b/website/source/community.html.erb index d49df502d3..ffadd63874 100644 --- a/website/source/community.html.erb +++ b/website/source/community.html.erb @@ -1,185 +1,164 @@ --- +layout: "inner" page_title: "Community" description: |- Consul is a new project with a growing community. Despite this, there are active, dedicated users willing to help you through various mediums. --- -
-
-
-

Community

+

Community

-

- Consul is a new project with a growing community. Despite this, - there are active, dedicated users willing to help you through various - mediums. -

-

- Chat: Consul on Gitter -

-

- Mailing list: - Consul Google Group -

-

- Bug Tracker: - Issue tracker - on GitHub. Please only use this for reporting bugs. Do not ask - for general help here. Use IRC or the mailing list for that. -

+

+Consul is a new project with a growing community. Despite this, +there are active, dedicated users willing to help you through various +mediums. +

+

+ Chat: Consul on Gitter +

+

+Mailing list: +Consul Google Group +

+

+Bug Tracker: +Issue tracker + on GitHub. Please only use this for reporting bugs. Do not ask +for general help here. Use IRC or the mailing list for that. +

+

+ Community Tools: + Download Community Tools. Please + check out some of the awesome Consul tooling our amazing community has + helped build. +

+

+ Training: + Paid HashiCorp training courses + are also available in a city near you. Private training courses are also available. +

+ +

People

+

+The following people are some of the faces behind Consul. They each +contribute to Consul in some core way. Over time, faces may appear and +disappear from this list as contributors come and go. +

+
+
+ +
+

Armon Dadgar (@armon)

- Community Tools: - Download Community Tools. Please - check out some of the awesome Consul tooling our amazing community has - helped build. -

+ Armon Dadgar is the creator of Consul. He researched and developed + most of the internals of how Consul works, including the + gossip layer, leader election, etc. Armon is also the creator of + Serf, + Statsite, and + Bloomd. +
+
+ +
+ +
+

Mitchell Hashimoto (@mitchellh)

- Training: - Paid HashiCorp training courses - are also available in a city near you. Private training courses are also available. + Mitchell Hashimoto is a co-creator of Consul. He primarily took + a management role in the creation of Consul, guiding product + and user experience decisions on top of Armon's technical decisions. + Mitchell Hashimoto is also the creator of + Vagrant, + Packer, and + Serf.

+
+
-

People

-

- The following people are some of the faces behind Consul. They each - contribute to Consul in some core way. Over time, faces may appear and - disappear from this list as contributors come and go. -

-
-
- -
-

Armon Dadgar (@armon)

-

- Armon Dadgar is the creator of Consul. He researched and developed - most of the internals of how Consul works, including the - gossip layer, leader election, etc. Armon is also the creator of - Serf, - Statsite, and - Bloomd. -

-
+
+ +
+

Jack Pearkes (@pearkes)

+

+ Jack Pearkes created and maintains the Consul web UI. + He is also a core committer to + Packer and maintains + many successful + open source projects + while also being an employee of + HashiCorp. +

+
+
-
+
+ +
+

Ryan Uber (@ryanuber)

+

+ Ryan Uber is a core contributor to Consul where he works on all + facets of Consul. He is also a core committer to + Serf, + Nomad, and + the Consul tools ecosystem, all while being an employee at + HashiCorp. +

+
+
-
- -
-

Mitchell Hashimoto (@mitchellh)

-

- Mitchell Hashimoto is a co-creator of Consul. He primarily took - a management role in the creation of Consul, guiding product - and user experience decisions on top of Armon's technical decisions. - Mitchell Hashimoto is also the creator of - Vagrant, - Packer, and - Serf. -

-
-
+
+ +
+

James Phillips (@slackpad)

+

+ James Phillips is a core contributor to Consul where he works on all + facets of Consul, including network tomography and prepared + queries. He is also a core committer to + Serf and + the Consul tools ecosystem, all while being an employee at + HashiCorp. +

+
+
-
+
+ +
+

Seth Vargo (@sethvargo)

+

+ Seth Vargo is a contributor to Consul, but his main focus is the + Consul tools ecosystem. + He is also a core committer to + Vagrant, + Packer, and + Vault, and many more + open source projects, all while being an employee at + HashiCorp. +

+
+
-
- -
-

Jack Pearkes (@pearkes)

-

- Jack Pearkes created and maintains the Consul web UI. - He is also a core committer to - Packer and maintains - many successful - open source projects - while also being an employee of - HashiCorp. -

-
-
+
+ +
+

William Tisäter (@tiwilliam)

+

William Tisäter is a Consul core committer. He is also the maintainer of + pygeoip and builds things daily at + Tictail.

+
+
-
- -
- -
-

Ryan Uber (@ryanuber)

-

- Ryan Uber is a core contributor to Consul where he works on all - facets of Consul. He is also a core committer to - Serf, - Nomad, and - the Consul tools ecosystem, all while being an employee at - HashiCorp. -

-
-
- -
- -
- -
-

James Phillips (@slackpad)

-

- James Phillips is a core contributor to Consul where he works on all - facets of Consul, including network tomography and prepared - queries. He is also a core committer to - Serf and - the Consul tools ecosystem, all while being an employee at - HashiCorp. -

-
-
- -
- -
- -
-

Seth Vargo (@sethvargo)

-

- Seth Vargo is a contributor to Consul, but his main focus is the - Consul tools ecosystem. - He is also a core committer to - Vagrant, - Packer, and - Vault, and many more - open source projects, all while being an employee at - HashiCorp. -

-
-
- -
- -
- -
-

William Tisäter (@tiwilliam)

-

William Tisäter is a Consul core committer. He is also the maintainer of - pygeoip and builds things daily at - Tictail.

-
-
- -
- -
- -
-

Ryan Breen (@ryanbreen)

-

- Ryan Breen is a Consul committer. He is also the maintainer of - git2consul, - fsconsul, and - gosecret. - Ryan works at Cimpress - building infrastructure for mass customization of consumer goods. -

-
-
- -
-
-
-
+
+ +
+

Ryan Breen (@ryanbreen)

+

+ Ryan Breen is a Consul committer. He is also the maintainer of + git2consul, + fsconsul, and + gosecret. + Ryan works at Cimpress + building infrastructure for mass customization of consumer goods. +

+
+
diff --git a/website/source/downloads.html.erb b/website/source/downloads.html.erb index 1df51a43df..6c79b43e22 100644 --- a/website/source/downloads.html.erb +++ b/website/source/downloads.html.erb @@ -3,7 +3,7 @@ layout: "downloads" page_title: "Download Consul" sidebar_current: "downloads-consul" description: |- - Below are all available downloads for the latest version of Consul. Please download the proper package for your operating system and architecture. + Download Consul ---

Download Consul

@@ -25,23 +25,15 @@ description: |- verify the checksums signature file - which has been signed using HashiCorp's GPG key. + which has been signed using HashiCorp's GPG key. You can also download older versions of Consul from the releases service.

- Checkout the v<%= latest_version %> CHANGELOG for information on the latest release. + Check out the v<%= latest_version %> CHANGELOG for information on the latest release.

-
-
- - Download Consul Web UI - -
-
- <% product_versions.each do |os, arches| %> <% next if os == "web" %>
@@ -63,7 +55,7 @@ description: |-
- <%= image_tag "fastly_logo.png" %> + <%= inline_svg "fastly.svg", height: 50 %>
diff --git a/website/source/downloads_tools.html.erb b/website/source/downloads_tools.html.erb index 60ea54414f..4b31c71cab 100644 --- a/website/source/downloads_tools.html.erb +++ b/website/source/downloads_tools.html.erb @@ -3,181 +3,173 @@ layout: "downloads" page_title: "Download Consul Tools" sidebar_current: "downloads-tools" description: |- - From this page you can download various tools for Consul. These tools are maintained by HashiCorp and the Consul Community. + From this page you can download various tools for Consul. These tools are + maintained by HashiCorp and the Consul Community. ---

Download Consul Tools

-
-
-

- From this page you can download various tools for Consul. These tools are maintained by HashiCorp and the Consul Community. -

+

+ From this page you can download various tools for Consul. These tools are maintained by HashiCorp and the Consul Community. +

-

HashiCorp Tools

-

- These Consul tools are created and managed by the dedicated engineers at HashiCorp: -

+

HashiCorp Tools

+

+ These Consul tools are created and managed by the dedicated engineers at HashiCorp: +

+
    +
  • + Envconsul - Read and set environmental variables for processes from Consul. +
    • +
  • + Consul Replicate - Consul cross-DC KV replication daemon. +
    • +
  • + Consul Template - Generic template rendering and notifications with Consul +
    • +
  • + Consul Migrate - Data migration tool to handle Consul upgrades to 0.5.1+ +
    • +
-
    -
  • - Envconsul - Read and set environmental variables for processes from Consul. -
    • -
  • - Consul Replicate - Consul cross-DC KV replication daemon. -
    • -
  • - Consul Template - Generic template rendering and notifications with Consul -
    • -
  • - Consul Migrate - Data migration tool to handle Consul upgrades to 0.5.1+ -
    • -
-
+

Consul SDK

+

+ These Consul SDK are created and managed by the amazing members of the Consul community: +

+ -
-

Consul SDK

-

- These Consul SDK are created and managed by the amazing members of the Consul community: -

-
    -
  • - api - Official Go client for the Consul HTTP API -
    • -
  • - consulate - Python client for the Consul HTTP API -
    • -
  • - python-consul - Python client for the Consul HTTP API -
    • -
  • - consul-kv - Python 3 client for the Consul KV-store -
    • -
  • - consul-php-sdk - PHP client for the Consul HTTP API -
    • -
  • - php-consul-api - GO-like PHP Client for the Consul HTTP API -
    • -
  • - envoy - Consul Clojure client with watchers and other goodies -
    • -
  • - clj-consul-catalog - Clojure discovery client for the Consul HTTP API -
    • -
  • - scala-consul - Scala client for the Consul HTTP API -
    • -
  • - consul-client - Java client for the Consul HTTP API -
    • -
  • - consul-api - Java client for the Consul HTTP API -
    • -
  • - discovery - Erlang/OTP client for the Consul HTTP API -
    • -
  • - consul-client - Ruby client for the Consul HTTP API -
    • -
  • - diplomat - Ruby library to query Consul's KV-store and services directory -
    • -
  • - node-consul - Node.js client for the Consul HTTP API -
    • -
  • - Consul.NET - C# client for the Consul HTTP API -
    • -
  • - Consul - Perl client for the Consul HTTP API -
    • -
  • - CondenserDotNet - C# an opinionated API for .NET that provides higher level functionality for services using the HTTP API -
    • -
-
+

Community Tools

+

+ These Consul tools are created and managed by the amazing members of the Consul community: +

+ -
-

Community Tools

-

- These Consul tools are created and managed by the amazing members of the Consul community: -

- -
    -
  • - hashi-ui - A modern user interface for the Consul and Nomad -
    • -
  • - cfg4j - Configuration library for Java distributed apps. Reads and auto-updates configuration from Consul KVs (and others) -
    • -
  • - cfg4j-pusher - Command line app that pushes values from configuration files (YAML, properties, etc.) to Consul KVs -
    • -
  • - confd - Manage local application configuration files using templates and data from etcd or Consul -
    • -
  • - consul-announcer - Command line wrapper for registering services in Consul -
    • -
  • - consul-backinator - Command line Consul KV backup and restoration utility -
    • -
  • - consul-cli - Command line interface to Consul HTTP API -
    • -
  • - consul-do - Do something, such as run HA cronjobs, based on Consul leadership status -
    • -
  • - Consultant - Library for Java services to self register and deregister, fetching configuration, and subscribing to configuration changes. -
    • -
  • - crypt - Store and retrieve encrypted configuration parameters from etcd or Consul -
    • -
  • - Dropwizard Consul Bundle - Service discovery and configuration integration with the Dropwizard framework -
    • -
  • - docker-consul - Dockerized Consul Agent -
    • -
  • - fabio - Fast, zero-conf, consul-aware load-balancing HTTP/HTTPS router -
    • -
  • - git2consul - Mirror the contents of a Git repository into Consul KVs -
    • -
  • - gradle-consul-plugin - A Consul Gradle plugin -
    • -
  • - helios-consul - Service registrar plugin for Helios -
    • -
  • - registrator - Service registry bridge for Docker -
    • -
  • - Spring Cloud Consul - Service discovery, configuration and events for Spring Cloud -
    • -
  • - marathon-consul - Service registry bridge for Marathon -
    • -
  • - marathon-consul - Bridge from Marathon apps to the Consul K/V store -
    • -
  • - mesos-consul - Service registry bridge for Mesos -
    • -
  • - NodeFabric - Turnkey CentOS 7 Atomic Host image with integrated Consul, Registrator and HAProxy - enabling rapid MariaDB-Galera and Ceph deployments -
    • -
  • - Embedded Consul - Library for JVM based applications, provides easy way to run Consul in integration tests -
    • -
- -

- Are you the author of a tool and you would like to be featured on this page? The Consul website is open source and is embedded inside the Consul repository on GitHub. You can submit a Pull Request to add your tool to the list and we will gladly review it. -

-
+

+ Are you the author of a tool and you would like to be featured on this page? The Consul website is open source and is embedded inside the Consul repository on GitHub. You can submit a Pull Request to add your tool to the list and we will gladly review it. +

diff --git a/website/source/favicon.ico b/website/source/favicon.ico new file mode 100644 index 0000000000..f8fcb4732c Binary files /dev/null and b/website/source/favicon.ico differ diff --git a/website/source/index.html.erb b/website/source/index.html.erb index a12a18a484..9424b531d2 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -5,206 +5,160 @@ description: |- systems and configuration easy. --- - -
-
-
-
-

- Service discovery and configuration made easy. -

-

- Distributed, highly available, and - datacenter-aware. -

+
+
+
+
+ <%= inline_svg "logo-text.svg", height: 120, class: "logo" %> + +

Service Discovery and Configuration Made Easy

+ + Get Started + Download <%= latest_version %>
- -
-
-
- - -
+ + +
-
-
-
-
- -
-
-

Service Discovery

-

- Consul makes it simple for services to register themselves - and to discover other services via a DNS or HTTP interface. - Register external services such as SaaS providers as well. -

-
+
+
+
+ <%= inline_svg "feature-discovery.svg", width: 100 %> +
+
+

Service Discovery

+

+ Consul makes it simple for services to register themselves and to + discover other services via a DNS or HTTP interface. Register external + services such as SaaS providers as well. +

-
-
-
- -
-
-

Failure Detection

-

Pairing service discovery with health checking prevents routing requests to unhealthy hosts and enables services to easily provide circuit breakers.

-
+
+
+ <%= inline_svg "feature-health.svg", width: 100 %> +
+
+

Failure Detection

+

+ Pairing service discovery with health checking prevents routing + requests to unhealthy hosts and enables services to easily provide + circuit breakers. +

-
-
-
-
- -
-
-

Multi Datacenter

-

Consul scales to multiple datacenters out of the box with no complicated configuration. Look up services in other datacenters, or keep the request local.

-
+ +
+
+
+ <%= inline_svg "feature-multi.svg", width: 100 %> +
+
+

Multi Datacenter

+

+ Consul scales to multiple datacenters out of the box with no + complicated configuration. Look up services in other datacenters, or + keep the request local. +

-
-
-
- -
-
-

Key/Value Storage

-

Flexible key/value store for dynamic configuration, feature flagging, coordination, leader election and more. Long poll for near-instant notification of configuration changes.

-
+
+
+ <%= inline_svg "feature-config.svg", width: 85 %> +
+
+

Key/Value Storage

+

+ Flexible key/value store for dynamic configuration, feature flagging, + coordination, leader election and more. Long poll for near-instant + notification of configuration changes. +

- -
- -
+
+ +
-
-
+
+

DNS Query Interface

Look up services using Consul's built-in DNS server. Support existing infrastructure without any code change.

-
+
+
+
-
-

Terminal

-
    -
  • -
  • -
  • -
-
-
-
-
-

admin@hashicorp: dig web-frontend.service.consul. ANY

-

; <<>> DiG 9.8.3-P1 <<>> web-frontend.service.consul. ANY

-

;; global options: +cmd

-

-

;; Got answer:

-

;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 29981

-

;; flags: qr aa rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0

-

-

;; QUESTION SECTION:

-

;web-frontend.service.consul. IN ANY

-

-

;; ANSWER SECTION:

-

web-frontend.service.consul. 0 IN A 10.0.3.83

-

web-frontend.service.consul. 0 IN A 10.0.1.109

-

admin@hashicorp:  

-
-
+ + + +
+ admin@hashicorp.com: dig web-frontend.service.consul. ANY + ; <<>> DiG 9.8.3-P1 <<>> web-frontend.service.consul. ANY + ;; global options: +cmd +   + ;; Got answer: + ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 29981 + ;; flags: qr aa rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0 + + ;; QUESTION SECTION: + ;web-frontend.service.consul. IN ANY +   + ;; ANSWER SECTION: + web-frontend.service.consul. 0 IN A 10.0.3.83 + web-frontend.service.consul. 0 IN A 10.0.1.109
- -
+
+
+

Key Value Storage

Consul provides a hierarchical key/value store with a simple HTTP API. Managing configuration has never been simpler.

-
+
+
+
-
-

Terminal

-
    -
  • -
  • -
  • -
-
-
-
-
-

admin@hashicorp: consul kv put foo bar

-

Success! Data written to: foo

-

admin@hashicorp: consul kv get foo

-

bar

-

admin@hashicorp: consul kv get -detailed foo

-

CreateIndex 5

-

Flags 0

-

Key foo

-

LockIndex 0

-

ModifyIndex 5

-

Session -

-

Value bar

-

admin@hashicorp: consul kv delete foo

-

Success! Deleted key: foo

-

admin@hashicorp:  

-
-
+ + + +
+ admin@hashicorp: consul kv put foo bar + Success! Data written to: foo + admin@hashicorp: consul kv get foo + bar + admin@hashicorp: consul kv get -detailed foo + CreateIndex 5 + Flags 0 + Key foo + LockIndex 0 + ModifyIndex 5 + Session - + Value bar + admin@hashicorp: consul kv delete foo + Success! Deleted key: foo
-
-
- -
+
+ +
-
-
-

The intro and getting started guide contain - a simple and approachable walkthrough for running Consul locally. -

-
-
- Read the intro » -
-
+ Read the Introduction
-
+ diff --git a/website/source/layouts/_announcement-bnr.erb b/website/source/layouts/_announcement-bnr.erb deleted file mode 100644 index caa9cf541e..0000000000 --- a/website/source/layouts/_announcement-bnr.erb +++ /dev/null @@ -1,18 +0,0 @@ -
-
-
-
-

- Announcing - - Build Scalable and Resilient Microservice Infrastructure. - - Find out more - -

-
-
-
-
diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb deleted file mode 100644 index 0d9a3de8d4..0000000000 --- a/website/source/layouts/_footer.erb +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - -<%= javascript_include_tag 'application' %> - - - - - - - - - - diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb deleted file mode 100644 index 0e1f00dbdb..0000000000 --- a/website/source/layouts/_header.erb +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - <%= title_for(current_page) %> - - - <%= stylesheet_link_tag "application" %> - - - - - - - - - - - - - - - - - - - - - - <%= yield_content :head %> - - - -displaying-bnr"> - - - - -
"> - <%= mega_nav :consul %> -
-
-
-
-
- -
- -
- -
-
-
-
diff --git a/website/source/layouts/_sidebar.erb b/website/source/layouts/_sidebar.erb index 0576dd877f..dab993139e 100644 --- a/website/source/layouts/_sidebar.erb +++ b/website/source/layouts/_sidebar.erb @@ -1,27 +1,29 @@ -
- -