From e61484c07929a342cb2efaf0fce13494e96c1da7 Mon Sep 17 00:00:00 2001 From: RJ Spiker Date: Fri, 15 Jun 2018 11:51:45 -0600 Subject: [PATCH] website - responsive styling for section and text/asset components --- .../consul-connect/_typography.scss | 7 +- .../consul-connect/components/_section.scss | 6 +- .../components/_text-asset.scss | 102 ++++++++++++++---- website/source/configuration.html.erb | 14 +-- website/source/discovery.html.erb | 6 +- website/source/index.html.erb | 2 +- website/source/segmentation.html.erb | 4 +- 7 files changed, 103 insertions(+), 38 deletions(-) diff --git a/website/source/assets/stylesheets/consul-connect/_typography.scss b/website/source/assets/stylesheets/consul-connect/_typography.scss index 3a31b4fe9c..a894e6cf09 100644 --- a/website/source/assets/stylesheets/consul-connect/_typography.scss +++ b/website/source/assets/stylesheets/consul-connect/_typography.scss @@ -1,5 +1,5 @@ .consul-connect { - font-size: 16px; // root is set to 10px + // TODO - root is set to 10px ul, p { @@ -9,7 +9,12 @@ } p { + font-size: 1.6rem; margin: 1em 0; + + @media (min-width: 992px) { + font-size: 1.8rem; + } } a:hover { diff --git a/website/source/assets/stylesheets/consul-connect/components/_section.scss b/website/source/assets/stylesheets/consul-connect/components/_section.scss index d66eba4e97..d3a04c69cf 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_section.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_section.scss @@ -1,6 +1,10 @@ .g-section { overflow: hidden; - padding: 96px 0; + padding: 56px 0; + + @media (min-width: 768px) { + padding: 96px 0; + } &.bg-light { background: #f7f8fa !important; //TODO - !important is to override the `#page-home section` #fff background; diff --git a/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss b/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss index 90b724b3a4..58e1902d93 100644 --- a/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss +++ b/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss @@ -1,49 +1,92 @@ .g-text-asset { - align-content: space-between; - display: flex; - justify-content: center; - margin: 0 (-$site-gutter-padding); + text-align: center; + + @media (min-width: 768px) { + align-content: space-between; + display: flex; + justify-content: center; + margin: 0 (-$site-gutter-padding); + text-align: left; + } &.reverse { flex-direction: row-reverse; & > div:first-child > div { margin-left: auto; - padding: 0 32px 0 0; + + @media (min-width: 768px) { + padding: 0 24px 0 0; + } + + @media (min-width: 992px) { + padding-right: 32px; + } } } &.large { - margin-bottom: -96px; + margin-bottom: -56px; + + @media (min-width: 768px) { + margin-bottom: -96px; + } img { + max-width: 140%; width: auto; } } & > div { - align-items: center; - display: flex; - padding: 0 $site-gutter-padding; - width: 50%; + @media (min-width: 768px) { + align-items: center; + margin: 0 auto; + display: flex; + padding: 0 $site-gutter-padding; + width: 50%; + } - &:first-child > div { - margin-left: 0; - padding: 0 0 0 32px; - max-width: 454px; + &:first-child { + margin-bottom: 32px; - & a { - color: #1563ff; + @media (min-width: 768px) { + margin-bottom: 0; } - & svg { - margin-left: 10px; + & > div { + @media (min-width: 768px) { + margin-left: 0; + max-width: 454px; + padding: 0 0 0 24px; + } + + @media (min-width: 992px) { + padding-left: 32px; + } + + & a { + color: #1563ff; + + &:focus, + &:hover { + color: #2c72fe; + + & path { + fill: #2c72fe; + } + } + + & svg { + margin-left: 10px; + } + } } } & > img { width: 100%; - + &.shadow { box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4); } @@ -53,14 +96,18 @@ box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4); color: $white; margin: 0; + text-align: left; width: 100%; span { background: #252937; border-bottom: 1px solid rgba(255, 255, 255, 0.15); display: block; - font-size: 1.6rem; - padding: 13px 0 11px 24px; + height: 32px; + + @media (min-width: 768px) { + height: 40px; + } } .code { @@ -73,8 +120,13 @@ background: #1e212a; border-radius: 0; color: $white; + font-size: 1.2rem; white-space: pre; + @media (min-width: 992px) { + font-size: 1.4rem; + } + &.keyword { color: #be5580; } @@ -84,7 +136,7 @@ &.logos { justify-content: center; - + & > div { align-items: center; display: flex; @@ -98,6 +150,10 @@ } h3 { - margin: 16px 0; + margin: 0 0 16px 0; + + @media (min-width: 768px) { + margin-top: 16px; + } } } diff --git a/website/source/configuration.html.erb b/website/source/configuration.html.erb index 42e46f129f..35473e84dc 100644 --- a/website/source/configuration.html.erb +++ b/website/source/configuration.html.erb @@ -58,7 +58,7 @@ description: |-

Key/Value Store

Feature rich key/value store for dynamic service configuration data. Use it for feature flagging, maintenance modes, and more.

- Learn More + Learn more

@@ -77,13 +77,13 @@ description: |-

Transaction Support

The key/value store supports both read and write transactions. This allows multiple keys to be updated or read as an atomic transaction. Changes to service configuration can be done atomically to minimize churn and avoid inconsistencies.

- Learn More + Learn more

- Code Sample +
$ curl \ --request POST \ @@ -110,13 +110,13 @@ description: |-

Blocking Queries / Edge-Triggered Requests

The Consul API supports blocking queries, allowing edge triggered updates. Clients use this to get notified immediately of any changes. Tools like consul-template allow configuration files to be rendered in real-time to third-party sources when any configuration changes are made.

- Learn More + Learn more

- Code Sample +
$ curl \ --request POST \ @@ -143,13 +143,13 @@ description: |-

Watches

Watches use blocking queries monitor for any configuration or health status updates and invoke user specified scripts to handle changes. This makes it easy to build reactive infrastructure.

- Learn More + Learn more

- Code Sample +
$ curl \ --request POST \ diff --git a/website/source/discovery.html.erb b/website/source/discovery.html.erb index c8c834673c..fe4c178688 100644 --- a/website/source/discovery.html.erb +++ b/website/source/discovery.html.erb @@ -83,7 +83,7 @@ description: |-
- Code Sample +
$ curl \ --request POST \ @@ -116,7 +116,7 @@ description: |-
- Code Sample +
$ curl \ --request POST \ @@ -149,7 +149,7 @@ description: |-
- Code Sample +
$ curl \ --request POST \ diff --git a/website/source/index.html.erb b/website/source/index.html.erb index d14caea0c1..70afe3ed58 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -115,7 +115,7 @@ description: |-
- Code Sample +
$ curl \ --request POST \ diff --git a/website/source/segmentation.html.erb b/website/source/segmentation.html.erb index f0b7eaba28..44b987c8e6 100644 --- a/website/source/segmentation.html.erb +++ b/website/source/segmentation.html.erb @@ -84,7 +84,7 @@ description: |-
- Code Sample +
$ curl \ --request POST \ @@ -139,7 +139,7 @@ description: |-
- Code Sample +
$ curl \ --request POST \