istio
/
istio.io
mirror of https://github.com/istio/istio.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Polidea update - layout fixes (#9521) 

* Layout fixes

* Style width of solutions carousel

* Swap doc title and reading time blocks around.
Move doc breadcrumbs into the article block.

* Resize content width to 1040px

* Fix lint errors

* Increase solution and case-study sidebar width
This commit is contained in:
Bartosz Wojcicki 2021-04-14 19:27:47 +02:00 committed by GitHub
parent bb6a28f46a
commit 3e81e9d866
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 105 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
content/en/_index.html
View File

@ -36,10 +36,12 @@ description: A service mesh for observability, security in depth, and management
</h1>
</section>
<section id="landing-panels" class="panels container">
{{< content_panel type="dark" title="what_is_istio" text="Discover how a service mesh helps with many common challenges of a distributed architecture." button="learn_more" url="/about/service-mesh" >}}
{{< content_panel type="dark" title="solutions" text="Learn how to build secure, reliable and scalable applications with Istio." button="learn_more" url="/about/solutions" >}}
{{< content_panel type="dark" title="deployment" text="Get what you need to deploy and utilize Istio for your unique needs." button="learn_more" url="/about/deployment" >}}
<section id="landing-panels" class="container">
<div class="panels">
{{< content_panel type="dark" title="what_is_istio" text="Discover how a service mesh helps with many common challenges of a distributed architecture." button="learn_more" url="/about/service-mesh" >}}
{{< content_panel type="dark" title="solutions" text="Learn how to build secure, reliable and scalable applications with Istio." button="learn_more" url="/about/solutions" >}}
{{< content_panel type="dark" title="deployment" text="Get what you need to deploy and utilize Istio for your unique needs." button="learn_more" url="/about/deployment" >}}
</div>
</section>
<section id="service-mesh" class="container">

5
content/en/docs/_index.md
View File

@ -1,12 +1,13 @@
---
title: Docs
linktitle: Docs
title: Documentation
linktitle: Documentation
description: Learn how to deploy, use, and operate Istio.
weight: 1
skip_toc: true
skip_sidebar: true
icon: docs
test: n/a
doc_type: docs
---
In addition to the above documentation links, please consider the following resources:

74
layouts/partials/primary_top.html
View File

@ -3,10 +3,15 @@
{{ $section := .Site.GetPage "section" .Section }}
{{ $showSidebar := or (not (and $section.Params.sidebar_none .CurrentSection.Params.sidebar_none)) (.Page.Params.sidebar_force)}}
{{ $showTOC := and (or $needTOC .Params.force_inline_toc) (ne .Params.skip_toc true) }}
{{ $docType := .Params.doc_type }}
{{ $docType := or .Params.doc_type $section.Params.doc_type }}
{{ $isDocs := eq $docType "docs" }}
{{ $skipByLine := .Scratch.Get "skipByLine" }}
{{ if not $isDocs }}
<nav aria-label="Breadcrumb" class="container-l">
{{- partial "breadcrumbs.html" . -}}
</nav>
{{ end }}
<main class="primary container {{ if $showSidebar }} has-sidebar{{end}}{{ if $showTOC }} has-toc{{end}}{{ if $docType }} {{$docType}}{{end}}">
@ -34,9 +39,7 @@
{{ i18n "sidebar-toggle" }}
</button>
{{ end }}
<nav aria-label="Breadcrumb" class="container-no-padding">
{{- partial "breadcrumbs.html" . -}}
</nav>
{{ if or $section.Params.sidebar_singlecard $section.Params.sidebar_multicard }}
<button tabindex="-1" id="sidebar-toggler" title='{{ i18n "button_sidenav" }}'>
{{ partial "icon.html" "pull" }}
@ -44,37 +47,14 @@
{{ end }}
<article aria-labelledby="title">
{{ if $isDocs }}
<nav aria-label="Breadcrumb">
{{- partial "breadcrumbs.html" . -}}
</nav>
{{ end }}
<div class="title-area">
<div style="width: 100%">
{{ if not (or .Params.skip_byline $skipByLine) }}
{{ if or .Params.attribution (gt .Page.ReadingTime 1) (ne .PublishDate.Year 0001) }}
{{- if gt .Page.ReadingTime 1 -}}
<span class="reading-time" title="{{ printf (i18n "page_word_count") .Page.WordCount }}">
{{- partial "icon.html" "clock" -}}
<span>&nbsp;</span>
{{- printf (i18n "page_reading_time") .Page.ReadingTime -}}
</span>
<span>&nbsp;</span>
<span>
{{if and (isset .Params "test") (not ( eq .Params.test "n/a"))}}
{{ if (.Params.test) }}
<a href="https://github.com/istio/istio.io/tree/master/README.md#testing-document-content" title='{{ i18n "has_test" }}'>
{{- partial "icon.html" "checkmark" -}}
<span>&nbsp;</span>
{{ i18n "tested"}}
</a>
{{ else }}
<a href="https://github.com/istio/istio.io/tree/master/README.md#testing-document-content" title='{{ i18n "needs_test" }}'>
{{- partial "icon.html" "cancel-grey" -}}
<span>&nbsp;</span>
{{ i18n "tested"}}
</a>
{{end}}
{{end}}
</span>
{{- end -}}
{{ end }}
{{ end }}
{{ if .Params.decoration }}
<div class="mark-all-read-container">
<h2 id="title">
@ -133,7 +113,31 @@
{{- $needBar = true }}
{{- end -}}
{{- if gt .Page.ReadingTime 1 -}}
<span class="reading-time" title="{{ printf (i18n "page_word_count") .Page.WordCount }}">
{{- partial "icon.html" "clock" -}}
<span>&nbsp;</span>
{{- printf (i18n "page_reading_time") .Page.ReadingTime -}}
</span>
<span>&nbsp;</span>
<span>
{{if and (isset .Params "test") (not ( eq .Params.test "n/a"))}}
{{ if (.Params.test) }}
<a href="https://github.com/istio/istio.io/tree/master/README.md#testing-document-content" title='{{ i18n "has_test" }}'>
{{- partial "icon.html" "checkmark" -}}
<span>&nbsp;</span>
{{ i18n "tested"}}
</a>
{{ else }}
<a href="https://github.com/istio/istio.io/tree/master/README.md#testing-document-content" title='{{ i18n "needs_test" }}'>
{{- partial "icon.html" "cancel-grey" -}}
<span>&nbsp;</span>
{{ i18n "tested"}}
</a>
{{end}}
{{end}}
</span>
{{- end -}}
</p>
{{ end }}
{{ end }}

7
layouts/shortcodes/solutions_carousel.html
View File

@ -8,12 +8,9 @@
start: 1,
arrows: false,
gap: '2.5rem',
padding: {
left: '1.25rem',
right: '1.25rem'
},
fixedWidth: '320px',
breakpoints: {
1160: {
1120: {
perPage: 1,
fixedWidth: 0,
padding: 0

22
src/sass/base/_base.scss
View File

@ -465,26 +465,30 @@ sup {
font-weight: $blogAttributeWeight;
}
.container {
@mixin container($value) {
box-sizing: content-box;
padding-left: 1.75rem;
padding-right: 1.75rem;
max-width: 1440px;
width: 100%;
max-width: $value;
margin-left: auto;
margin-right: auto;
}
.container {
@include container($container);
@media (min-width: $bp-md) {
padding-left: 2rem;
padding-right: 2rem;
}
&-s {
@include container($container-s);
}
&-l {
padding-left: 1.75rem;
padding-right: 1.75rem;
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 1470px;
@include container($container-l);
}
&-no-padding {

5
src/sass/base/_constants.scss
View File

@ -42,3 +42,8 @@ $header-link-spacing-xxl: 1.875rem;
$section-margin: 3.625rem;
$section-margin-md: 7rem;
$panel-margin-top: 2.5rem;
// Container widths
$container-s: 750px;
$container: 1040px;
$container-l: 1440px;

4
src/sass/misc/_about.scss
View File

@ -12,6 +12,10 @@
.title-area {
margin-bottom: 2.625rem;
max-width: $container-s;
margin-left: auto;
margin-right: auto;
text-align: center;
@media (min-width: $bp-lg) {
margin-bottom: 6.25rem;
}

6
src/sass/misc/_article.scss
View File

@ -1,4 +1,10 @@
.article {
@media (min-width: $bp-xl) {
&.primary.has-sidebar {
grid-template-columns: [sidebar] 320px [article] auto;
}
}
.title-area {
margin-bottom: 3rem;

3
src/sass/misc/_case-study-suggestions.scss
View File

@ -2,6 +2,9 @@
text-align: left;
h1 {
max-width: $container-s;
margin-left: auto;
margin-right: auto;
@media (min-width: $bp-md) {
text-align: center;
}

4
src/sass/misc/_docs.scss
View File

@ -1,3 +1,7 @@
.docs.container {
max-width: $container-l;
}
#quick-start {
margin-top: 0;
}

1
src/sass/misc/_feature-block.scss
View File

@ -31,6 +31,7 @@
svg {
height: 110px;
width: 100%;
fill: $accentColor;
}
}

6
src/sass/misc/_landing.scss
View File

@ -72,4 +72,10 @@
}
h1 { text-align: center; }
h1, .subtitle {
max-width: $container-s;
margin-left: auto;
margin-right: auto;
}
}

2
src/sass/misc/_logo-gallery.scss
View File

@ -20,7 +20,7 @@
}
& > img {
max-width: 175px;
max-width: 70%;
}
&::before,

2
src/sass/misc/_panel.scss
View File

@ -3,7 +3,7 @@
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: -2.5rem;
margin: -2.5rem -2rem 0;
&--grid {
display: grid;

4
src/sass/misc/_primary.scss
View File

@ -45,11 +45,11 @@
}
&.has-sidebar {
grid-template-columns: [sidebar] 22% [article] calc(78% - 1.5rem);
grid-template-columns: [sidebar] 20% [article] calc(80% - 1.5rem);
}
&.has-toc.has-sidebar {
grid-template-columns: [sidebar] 22% [article] calc(62% - (2 * 1.5rem)) [toc] 16%;
grid-template-columns: [sidebar] 20% [article] calc(66% - (2 * 1.5rem)) [toc] 14%;
}
.toc-container {

12
src/sass/misc/_sidebar.scss
View File

@ -180,22 +180,26 @@
background-color: $paleGray;
padding: 1.25em;
padding-top: 3.75em;
@media screen AND (min-width: $bp-md) {
width: 275px;
}
.search {
width: 230px;
width: 100%;
height: 46px;
display: flex;
border: 2px solid $inputBorderColor;
padding: 0 19px;
margin-bottom: 1.75em;
#search-docs-form {
display: flex;
justify-content: space-between;
width: 100%;
}
#search-docs-textbox {
height: 42px;
border: 0;
background-color: $paleGray;
min-width: 0;
&:focus {
outline: none;

4
src/sass/misc/_solutions.scss
View File

@ -2,9 +2,7 @@
text-align: center;
.splide__track {// sass-lint:disable-line class-name-format
@media (min-width: 1160px) {
max-width: calc((3 * 330px) + (2 * 2.5rem));
@media (min-width: 1120px) {
margin: 0 auto;
}
}