luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

website - responsive styling for section and text/asset components

This commit is contained in:
RJ Spiker 2018-06-15 11:51:45 -06:00 committed by Jack Pearkes
parent 8ef67246fd
commit b64fdf3e07
7 changed files with 103 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
website/source/assets/stylesheets/consul-connect/_typography.scss
View File

@ -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 {

6
website/source/assets/stylesheets/consul-connect/components/_section.scss
View File

@ -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;

102
website/source/assets/stylesheets/consul-connect/components/_text-asset.scss
View File

@ -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;
}
}
}

14
website/source/configuration.html.erb
View File

@ -58,7 +58,7 @@ description: |-
<h3>Key/Value Store</h3>
<p>Feature rich key/value store for dynamic service configuration data. Use it for feature flagging, maintenance modes, and more.</p>
<p>
<a class="learn-more" href='#'>Learn More <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
<a class="learn-more" href='#'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
</p>
</div>
</div>
@ -77,13 +77,13 @@ description: |-
<h3>Transaction Support</h3>
<p>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.</p>
<p>
<a class="learn-more" href='#'>Learn More <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
<a class="learn-more" href='#'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
</p>
</div>
</div>
<div class='code-sample'>
<div>
<span>Code Sample</span>
<span></span>
<div class="code">
<code>$ curl \
--request POST \
@ -110,13 +110,13 @@ description: |-
<h3>Blocking Queries / Edge-Triggered Requests</h3>
<p>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.</p>
<p>
<a class="learn-more" href='#'>Learn More <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
<a class="learn-more" href='#'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
</p>
</div>
</div>
<div class='code-sample'>
<div>
<span>Code Sample</span>
<span></span>
<div class='code'>
<code class='keyword'>$ curl \</code><code>
--request POST \
@ -143,13 +143,13 @@ description: |-
<h3>Watches</h3>
<p>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.</p>
<p>
<a class="learn-more" href='#'>Learn More <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
<a class="learn-more" href='#'>Learn more<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><g fill="none" fill-rule="evenodd" transform="translate(-6 -3)"><mask id="a" fill="#fff"><path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></mask><g fill="#1563FF" mask="url(#a)"><path d="M0 0h16v16H0z"/></g></g></svg></a>
</p>
</div>
</div>
<div class='code-sample'>
<div>
<span>Code Sample</span>
<span></span>
<div class='code'>
<code class='keyword'>$ curl \</code><code>
--request POST \

6
website/source/discovery.html.erb
View File

@ -83,7 +83,7 @@ description: |-
</div>
<div class='code-sample'>
<div>
<span>Code Sample</span>
<span></span>
<div class='code'>
<code class='keyword'>$ curl \</code><code>
--request POST \
@ -116,7 +116,7 @@ description: |-
</div>
<div class='code-sample'>
<div>
<span>Code Sample</span>
<span></span>
<div class='code'>
<code class='keyword'>$ curl \</code><code>
--request POST \
@ -149,7 +149,7 @@ description: |-
</div>
<div class='code-sample'>
<div>
<span>Code Sample</span>
<span></span>
<div class='code'>
<code class='keyword'>$ curl \</code><code>
--request POST \

2
website/source/index.html.erb
View File

@ -115,7 +115,7 @@ description: |-
</div>
<div class='code-sample'>
<div>
<span>Code Sample</span>
<span></span>
<div class='code'>
<code>$ curl \
--request POST \

4
website/source/segmentation.html.erb
View File

@ -84,7 +84,7 @@ description: |-
</div>
<div class='code-sample'>
<div>
<span>Code Sample</span>
<span></span>
<div class='code'>
<code class='keyword'>$ curl \</code><code>
--request POST \
@ -139,7 +139,7 @@ description: |-
</div>
<div class='code-sample'>
<div>
<span>Code Sample</span>
<span></span>
<div class='code'>
<code class='keyword'>$ curl \</code><code>
--request POST \