From f6e78d501d6192a254f536d9adc392b4765dfbdb Mon Sep 17 00:00:00 2001 From: Jack Pearkes Date: Mon, 14 Apr 2014 12:45:40 -0400 Subject: [PATCH] website: add terminal demos --- website/source/index.html.erb | 87 +++++++++++- website/source/stylesheets/_home.less | 192 +++++++++++++++++++++++++- website/source/stylesheets/main.less | 3 +- 3 files changed, 276 insertions(+), 6 deletions(-) diff --git a/website/source/index.html.erb b/website/source/index.html.erb index e25c735538..4f637cd148 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -7,7 +7,7 @@ +
@@ -16,7 +16,6 @@
-
@@ -69,3 +68,87 @@
+ +
+
+
+ +
+

DNS Query Interface

+

Make use of Consul's built-in DNS server to resolve requests directly, avoiding expensive HTTP requests.

+
+ +
+
+
+

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:  

+
+
+
+
+
+ +
+

Key Value Storage

+

Consul provides a flexible key/value store accessible via a simple HTTP API to store just about anything for your application.

+
+ +
+
+
+

Terminal

+
    +
  • +
  • +
  • +
+
+
+
+
+

admin@hashicorp: curl -X PUT -d 'bar' http://localhost:8500/v1/kv/foo

+

true

+

admin@hashicorp: curl http://localhost:8500/v1/kv/foo

+

[

+

{

+

"CreateIndex":100,

+

"ModifyIndex":200,

+

"Key":"zip",

+

"Flags":0,

+

"Value":"aGVsbG8gd29ybGQK=="

+

}

+

]

+

admin@hashicorp:  

+
+
+
+
+
+
+
+
+ diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less index b10276a397..d4dac06a90 100755 --- a/website/source/stylesheets/_home.less +++ b/website/source/stylesheets/_home.less @@ -55,7 +55,7 @@ body.page-home{ .config{ background-image: url( ../images/feature-config@2x.png); background-size: 157px 179px; - } + } } #trusted{ @@ -131,7 +131,7 @@ body.page-home{ padding: 50px 0; background-color: @consul-footer-gray; background: @consul-footer-gray url(../images/consul-footer-logo.png) center center no-repeat; - .img-retina("../images/consul-footer-logo.png", "../images/consul-footer-logo@2x.png", 446px, 443px); + .img-retina("../images/consul-footer-logo.png", "../images/consul-footer-logo@2x.png", 446px, 443px); .footer-links{ margin-bottom: 20px; @@ -177,3 +177,191 @@ body.page-home{ text-align: center; } } + +#demos{ + padding: 30px 0 20px; + background-color: @light-purple; + + .explantion { + margin: 40px 0 40px 0; + + h2 { + font-size: 22px; + color: lighten(@gray-light, 15%); + text-transform: uppercase; + font-family: @font-family-museo; + font-weight: @font-weight-museo-xb; + } + + p{ + font-size: 16px; + letter-spacing: 1px; + line-height: 1.5em; + color: @consul-gray; + font-family: @font-family-museo; + font-weight: @font-weight-museo-sb; + } + } + + .terminals{ + .terminal-item{ + border-bottom: 1px solid #eaeae; + + &.last{ + border-bottom: none; + } + >header{ + .left{ + span.icn{ + display: inline-block; + width: 83px; + height: 74px; + } + } + + .right{ + padding-left: 25px; + + h2{ + margin-top: 0; + font-size: 28px; + text-transform: uppercase; + } + + p{ + font-size: 16px; + } + } + } + + .terminal{ + background-color: darken(@gray-darker, 15%); + border-radius: 4px; + + header{ + position: relative; + background-color: @consul-gray; + 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-museo; + font-weight: @font-weight-museo-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; + font-family: "Courier New", Monaco, Menlo, Consolas, monospace; + color: @white; + + .txt-r { + color: lighten(@red, 8%);; + } + .txt-p { + font-weight: bold; + color: lighten(@purple, 15%); + } + p{ + margin-bottom: 2px; + white-space: pre-wrap; + } + .cursor { + background-color: @light-purple; + } + } + } + + .feature-bullets{ + list-style-type: none; + padding-left: 35px; + + li{ + padding: 5px 0 5px 45px; + } + } + } + } +} + + +@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; + } + } + } + } + } +} + + diff --git a/website/source/stylesheets/main.less b/website/source/stylesheets/main.less index 1500cfabec..b46bb453ed 100755 --- a/website/source/stylesheets/main.less +++ b/website/source/stylesheets/main.less @@ -25,5 +25,4 @@ // Components w/ JavaScript /*@import "modals.less";*/ - -// 2 +// 4