mirror of https://github.com/istio/istio.io.git
Fix formatting of the FAQ page.
This commit is contained in:
Martin Taillefer
parent
f9f1012b03
commit
8f628b0edd
|
|
@ -8,7 +8,7 @@
|
|||
<div class="col-md-3 col-sm-3 col-xs-12 footer-documentation">
|
||||
<ul class="toggle">
|
||||
<p class="right-link-headers">Docs</p>
|
||||
<li><a href="{{home}}/docs/"><p>Welcome1</p></a></li>
|
||||
<li><a href="{{home}}/docs/"><p>Welcome</p></a></li>
|
||||
<li><a href="{{home}}/docs/concepts"><p>Concepts</p></a></li>
|
||||
<li><a href="{{home}}/docs/tasks"><p>Tasks</p></a></li>
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ layout: compress
|
|||
<meta name="title" content="{{page.title}}">
|
||||
<meta name="og:title" content="{{page.title}}">
|
||||
|
||||
{% if page.overview == %}
|
||||
{% if page.overview == nil %}
|
||||
<meta name="description" content="An open platform to connect, manage, and secure microservices.">
|
||||
<meta name="og:description" content="An open platform to connect, manage, and secure microservices.">
|
||||
{% else %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: faq
|
||||
layout: default
|
||||
bodyclass: faq
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-11 nofloat center-block ">
|
||||
<div class="col-sm-7 {{page.type }}">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,18 +1,4 @@
|
|||
.about {
|
||||
|
||||
.about-sections {
|
||||
padding: $spacing--xxxl 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-max {
|
||||
margin-bottom: $spacing--s;
|
||||
|
||||
@media(min-width: $tablet) {
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
|
@ -22,252 +8,6 @@
|
|||
margin-bottom: $spacing--xxl;
|
||||
}
|
||||
|
||||
.about-lists {
|
||||
list-style: disc inside;
|
||||
padding-left: 1em;
|
||||
text-indent: -1em;
|
||||
}
|
||||
|
||||
.intro {
|
||||
margin-bottom: $spacing--m;
|
||||
}
|
||||
|
||||
.main-usage-title {
|
||||
margin: $spacing--xs 0;
|
||||
}
|
||||
|
||||
.core-features-title {
|
||||
margin: $spacing--s 0 $spacing--xs;
|
||||
}
|
||||
|
||||
.case-studies-title {
|
||||
margin: $spacing--m 0;
|
||||
}
|
||||
|
||||
.case-studies-quote {
|
||||
color: #727272;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
letter-spacing: .5px;
|
||||
line-height: 1.5;
|
||||
|
||||
.apos {
|
||||
color: $gray;
|
||||
display:inline-block;
|
||||
font-weight: 300;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
transform: scale(4,4);
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
|
||||
@media(min-width: 992px) {
|
||||
bottom: initial;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn-text {
|
||||
font-size: .9rem;
|
||||
|
||||
&:after {
|
||||
background: url('../img/more-arrow.svg') no-repeat center/cover;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
margin: 0 0 0 10px;
|
||||
vertical-align: middle;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
background: url('../img/more-arrow-dark.svg') no-repeat center/cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.case-studies-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 35px;
|
||||
margin-top: 35px;
|
||||
|
||||
a::after {
|
||||
content: '';
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.case-studies-link {
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.case-studies-img {
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.case-studies-img {
|
||||
display: block;
|
||||
margin: $spacing--s auto;
|
||||
}
|
||||
|
||||
.pt-container {
|
||||
margin-top: 65px;
|
||||
margin-bottom: $spacing--xxl;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pt:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pt-content {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@media (min-width: $tablet) {
|
||||
margin: 5px 0 $spacing--s;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-video {
|
||||
background: url('../img/pt-video-placeholder.png') no-repeat center/cover;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
|
||||
@media (min-width: $tablet) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-desc {
|
||||
font-size: .85em;
|
||||
font-weight: 300;
|
||||
margin-top: $spacing--xs;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 800px) {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.story {
|
||||
padding: $spacing--xxxl 0 100px;
|
||||
}
|
||||
|
||||
.more-story {
|
||||
font-weight: 500;
|
||||
margin: $spacing--m 0 0;
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.img-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.after-overlay{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pt-content:hover {
|
||||
.after-overlay {
|
||||
display: block;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
}
|
||||
|
||||
.pt-thumbnail {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.pt-lightbox {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
pointer-events: all;
|
||||
z-index: 10000;
|
||||
opacity: 1;
|
||||
background: rgba(0,0,0,.7);
|
||||
transition: 250ms linear;
|
||||
-webkit-transition: 250ms linear;
|
||||
-moz-transition: 250ms linear;
|
||||
-ms-transition: 250ms linear;
|
||||
-o-transition: 250ms linear;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-player {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 320px;
|
||||
height: calc(320px*.5625);
|
||||
margin: auto;
|
||||
|
||||
@media (min-width: $tablet) {
|
||||
top: 0;
|
||||
width: 75%;
|
||||
height: calc(75%*.5625);
|
||||
}
|
||||
}
|
||||
|
||||
.pt-video-wrapper {
|
||||
height: 0;
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
}
|
||||
|
||||
.pt-video-wrapper iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Slick overrides
|
||||
.slick-next,
|
||||
.slick-prev {
|
||||
|
|
@ -334,41 +74,4 @@
|
|||
margin: 0;
|
||||
}
|
||||
}
|
||||
.platforms-table-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.platforms-table-header {
|
||||
background: $light-gray;
|
||||
color: $black;
|
||||
}
|
||||
.platforms-table-cell {
|
||||
padding: 0 2px;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
line-height: 40px;
|
||||
border: 1px solid $light-gray;
|
||||
color: $dark-gray;
|
||||
@media (min-width: $phone-large) {
|
||||
padding: 0px 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
line-height: inherit;
|
||||
}
|
||||
&.platforms-table-heading{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 10px 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
@media (min-width: $phone-large) {
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,21 @@
|
|||
.faq {
|
||||
h1 {
|
||||
color: $mainBrandColor;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 110%;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul p {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: FAQ
|
||||
group: 'navigation'
|
||||
|
||||
layout: faq
|
||||
bodyclass: faq
|
||||
type: markdown
|
||||
---
|
||||
|
|
|
|||
Loading…
Reference in New Issue