status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-11 14:24:39 +00:00
Code Issues Projects Releases Wiki Activity

website - responsive styling for timeline component

Browse Source
This commit is contained in:
RJ Spiker 2018-06-18 10:53:06 -06:00 committed by Jack Pearkes
parent 849a233908
commit 04804a12d3
6 changed files with 130 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,15 +2,10 @@
// TODO - root is set to 10px
ul,
p {
font-size: 1.125em;
line-height: 1.75;
margin: 16px 0;
}
p {
font-size: 1.6rem;
margin: 1em 0;
line-height: 1.75;
margin: 1rem 0;
@media (min-width: 992px) {
font-size: 1.8rem;
@ -38,7 +33,7 @@
@media (min-width: 768px) {
font-size: 4rem;
}
@media (min-width: 992px) {
font-size: 5.6rem;
}
@ -59,12 +54,18 @@
.h3 {
font-family: $font-family-open-sans;
font-weight: 600;
font-size: 1.5em;
font-size: 1.8rem;
line-height: 1.5em;
margin: 1em 0;
@media (max-width: 700px) {
font-size: 1.2em;
@media (min-width: 768px) {
font-size: 2rem;
}
@media (min-width: 992px) {
font-size: 2.4rem;
}
&.lighter {
font-weight: 100;
}

118
website/source/assets/stylesheets/consul-connect/components/_timeline.scss
View File

@ -3,41 +3,99 @@
.g-timeline {
align-content: space-between;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 (-$site-gutter-padding);
text-align: center;
@media (min-width: 768px) {
flex-direction: row;
text-align: center;
}
&.no-intro {
margin-top: -90px;
margin-top: -30px;
@media (min-width: 768px) {
margin-top: -90px;
}
}
& > div {
padding: 40px $site-gutter-padding 0;
margin-left: 18px;
padding: 40px $site-gutter-padding 0 42px;
position: relative;
width: 50%;
&:last-child .dot {
border-color: #ca2171;
@media (min-width: 768px) {
margin-left: 0;
padding-left: $site-gutter-padding;
width: 50%;
}
&:last-child {
.dot {
border-color: #ca2171;
}
}
.line {
background-image: linear-gradient(
90deg,
rgba(229, 230, 235, 0) 5%,
#dadce3 26%,
#d2d4dc 43%,
#c82070 100%
);
height: 2px;
background-image: linear-gradient(180deg, #d2d4dc 50%, #c82070 100%);
height: calc(100% - 12px);
left: 8px;
position: absolute;
right: calc(50% + 34px);
top: 8px;
width: 1038px;
top: 45px;
width: 2px;
@media (min-width: 768px) {
background-image: linear-gradient(
90deg,
rgba(229, 230, 235, 0),
#d2d4dc 0%,
#c82070 100%
);
height: 2px;
left: 50%;
top: 8px;
width: calc(100% - 34px);
}
&:first-child {
background-image: linear-gradient(
180deg,
rgba(229, 230, 235, 0) 5%,
#dadce3 70%,
#d2d4dc 100%
);
bottom: calc(100% - 45px);
height: 60px;
top: auto;
@media (min-width: 768px) {
background-image: linear-gradient(
90deg,
rgba(229, 230, 235, 0) 5%,
#dadce3 26%,
#d2d4dc 100%
);
height: 2px;
left: auto;
right: 50%;
top: 8px;
width: calc(50% + 120px);
}
}
svg {
position: absolute;
right: -10px;
top: -6px;
top: calc(100% - 8px);
transform: rotate(90deg);
left: -4px;
@media (min-width: 768px) {
left: auto;
right: -10px;
top: -6px;
transform: none;
}
}
}
@ -47,8 +105,13 @@
.sub-heading {
display: block;
font-size: 1.8rem;
margin-bottom: 40px;
font-size: 1.6rem;
margin-bottom: 24px;
@media (min-width: 992px) {
font-size: 1.8rem;
margin-bottom: 40px;
}
}
.dot {
@ -57,15 +120,22 @@
border-radius: 50%;
display: inline-block;
height: 18px;
left: 50%;
margin: 0 0 0 -9px;
left: 0;
position: absolute;
top: 0;
top: 45px;
width: 18px;
z-index: 1;
@media (min-width: 768px) {
margin: 0 0 0 -9px;
left: 50%;
top: 0;
}
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
}

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

@ -25,6 +25,12 @@ description: |-
<div class='g-container'>
<div class='g-timeline no-intro'>
<div>
<span class='line'></span>
<span class='line'>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
<path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
</svg>
</span>
<span class='dot'></span>
<h3>The Challenge</h3>
<span class='sub-heading'>Runtime configuration management loses performace at scale.</span>
@ -32,11 +38,6 @@ description: |-
<p>Services have many runtime configurations, such as feature flags or maintenance modes, that need to be propagated in real time. Distributing these updates using configuration management or by re-deploying services can take minutes to hours. During these rollout periods, infrastructure can be out of sync and service configurations could be incorrect.</p>
</div>
<div>
<span class='line'>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
<path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
</svg>
</span>
<span class='dot'></span>
<h3>The Solution</h3>
<span class='sub-heading'>Real-time runtime configuration for distributed applications.</span>

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

@ -25,6 +25,12 @@ description: |-
<div class='g-container'>
<div class='g-timeline no-intro'>
<div>
<span class='line'></span>
<span class='line'>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
<path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
</svg>
</span>
<span class='dot'></span>
<h3>The Challenge</h3>
<span class='sub-heading'>Service load balancers aren't efficient in a dynamic world.</span>
@ -32,11 +38,6 @@ description: |-
<p>Load balancers are often used to front a service tier and provide a static IP. These load balancers add cost, increase latency, introduce single points of failure, and must be updated as services scale up/down.</p>
</div>
<div>
<span class='line'>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
<path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
</svg>
</span>
<span class='dot'></span>
<h3>The Solution</h3>
<span class='sub-heading'>Service discovery for dynamic infrastructure.</span>

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

@ -41,17 +41,18 @@ description: |-
</div>
<div class='g-timeline'>
<div>
<span class='line'></span>
<span class='line'>
<svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'>
<path fill='#CA2171' d='M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z'/>
</svg>
</span>
<span class='dot'></span>
<h3>Static</h3>
<span class='sub-heading'>Host-based networking.</span>
<img src='//placehold.it/516x314'>
</div>
<div>
<span class='line'>
<svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'>
<path fill='#CA2171' d='M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z'/>
</svg>
</span>
<span class='dot'></span>
<h3>Dynamic</h3>
<span class='sub-heading'>Service-based networking.</span>

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

@ -26,6 +26,12 @@ description: |-
<div class='g-container'>
<div class='g-timeline no-intro'>
<div>
<span class='line'></span>
<span class='line'>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
<path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
</svg>
</span>
<span class='dot'></span>
<h3>The Challenge</h3>
<span class='sub-heading'>Securing service-to-service communication with firewalls doesn’t scale in dynamic settings.</span>
@ -33,11 +39,6 @@ description: |-
<p>East-west firewalls are the main tool for networking security in a static world. They depend on constraining traffic flow and use IP based rules to control ingress and egress traffic. But in a dynamic world where services move across machines and machines are frequently created and destroyed, this perimeter-based approach is difficult to scale as it requires complex network topologies and a large number of short lived firewall rules.</p>
</div>
<div>
<span class='line'>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
<path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
</svg>
</span>
<span class='dot'></span>
<h3>The Solution</h3>
<span class='sub-heading'>Service segmentation for dynamic service authorization.</span>