mirror of https://github.com/grpc/grpc.io.git
Homepage: docsy & styles cleanup, slight redesign to reduce oversized element sizes (#695)
This commit is contained in:
Patrice Chalin
GitHub
parent
ee12882f9d
commit
de0614ac96
|
|
@ -21,7 +21,7 @@ a > .fa-external-link-alt::before {
|
|||
|
||||
/*
|
||||
Docsy's 'cover/block' option for setting background images does
|
||||
not currrently support svg's. This sets the background on hero
|
||||
not currently support svg's. This sets the background on hero
|
||||
sections site wide to the original site's background svg.
|
||||
*/
|
||||
.td-cover-block {
|
||||
|
|
@ -134,7 +134,7 @@ body:not(.td-blog) .td-content:not(.list-page) {
|
|||
|
||||
/*
|
||||
The following contains some styles in use on the top-level pages
|
||||
(About, Community...). Bootstrap provides many responsive utilites
|
||||
(About, Community...). Bootstrap provides many responsive utilities
|
||||
which are in use as well - these classes are meant to extract some
|
||||
common concerns from sections of content, and provide styling where
|
||||
Bootstrap falls short.
|
||||
|
|
@ -151,13 +151,6 @@ c - Component (Aware of its content/context...)
|
|||
}
|
||||
|
||||
// Layout
|
||||
.l-constrained-width-content {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 1rem;
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.l-container--padded {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
|
@ -235,28 +228,59 @@ c - Component (Aware of its content/context...)
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.o-logo {
|
||||
width: 80%;
|
||||
.grpc-logo {
|
||||
max-height: 8rem;
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
.o-user-logo {
|
||||
max-height: 7rem;
|
||||
.used-by-logo {
|
||||
max-height: 4rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.o-user-logo-sm {
|
||||
max-height: 5rem;
|
||||
}
|
||||
.td-home {
|
||||
h1 {
|
||||
@extend .display-1;
|
||||
margin-bottom: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.o-heading {
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 300;
|
||||
text-align: center
|
||||
}
|
||||
h2 {
|
||||
@extend .display-2;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.o-logo--constrained {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 500px;
|
||||
h3 {
|
||||
@extend .display-3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend .display-4;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.home--top-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cncf-logo {
|
||||
width: 20rem;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.why-grpc {
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-right: 5rem;
|
||||
padding-left: 5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $lead-font-size;
|
||||
font-weight: $lead-font-weight;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o-features__feature {
|
||||
|
|
@ -277,6 +301,7 @@ c - Component (Aware of its content/context...)
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1rem;
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.o-lang-home__list {
|
||||
|
|
@ -295,36 +320,18 @@ c - Component (Aware of its content/context...)
|
|||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.o-user-logo {
|
||||
max-height: 5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.o-features__feature {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.o-logo {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.o-feature__icon {
|
||||
margin-right: 1rem;
|
||||
max-width: 172px;
|
||||
}
|
||||
}
|
||||
|
||||
// Component
|
||||
.c-used-by {
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.c-features {
|
||||
display: flex;
|
||||
|
|
@ -354,6 +361,7 @@ c - Component (Aware of its content/context...)
|
|||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-bottom: -3rem;
|
||||
}
|
||||
|
||||
.c-used-by__user {
|
||||
|
|
@ -391,12 +399,6 @@ c - Component (Aware of its content/context...)
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.c-used-by {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.c-global-meta-links {
|
||||
& .td-page-meta a i {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,11 @@ $secondary: #5ac5c5;
|
|||
$info: #379c9c;
|
||||
$gray-100: #fafafa;
|
||||
|
||||
$display1-weight: 300;
|
||||
$display2-weight: 300;
|
||||
// Display styles: prefer Bootstrap defaults to docsy's overrides
|
||||
$display1-weight: $font-weight-light;
|
||||
$display2-weight: $font-weight-light;
|
||||
$display3-weight: $font-weight-light;
|
||||
$display4-weight: $font-weight-light;
|
||||
|
||||
$link-color: #379c9c;
|
||||
|
||||
|
|
|
|||
|
|
@ -15,18 +15,17 @@ features:
|
|||
---
|
||||
|
||||
{{< blocks/cover image_anchor="top" height="max" color="primary" >}}
|
||||
<img src="/img/logos/grpc-logo.png" class="o-logo" />
|
||||
|
||||
<h2 class="display-2 o-heading">
|
||||
A high performance, open source universal RPC framework
|
||||
</h2>
|
||||
<img src="/img/logos/grpc-logo.png" class="grpc-logo" />
|
||||
<h2>A high performance, open source universal RPC framework</h2>
|
||||
<a
|
||||
class="btn btn-lg btn-primary font-weight-bold my-4"
|
||||
href="/docs/what-is-grpc/introduction"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
<h3 class="mt-2">Get started!</h3>
|
||||
|
||||
<div class="h3 mt-2">Get started!</div>
|
||||
|
||||
<div class="l-get-started-buttons">
|
||||
|
||||
- [Go]({{< relref "/docs/languages/go/quickstart" >}})
|
||||
|
|
@ -38,24 +37,21 @@ Learn more
|
|||
</div>
|
||||
{{< /blocks/cover >}}
|
||||
|
||||
<div class="l-constrained-width-content">
|
||||
<div class="container">
|
||||
|
||||
<section class="home--top-section why-grpc">
|
||||
<h2>Why gRPC?</h2>
|
||||
|
||||
{{% blocks/lead color="white" %}}
|
||||
<h1 class="display-1">Why gRPC?</h1>
|
||||
<p class="display-4 font-weight-light">
|
||||
gRPC is a modern open source high performance RPC framework that can
|
||||
run in any environment. It can efficiently connect services in and
|
||||
across data centers with pluggable support for load balancing,
|
||||
tracing, health checking and authentication. It is also applicable
|
||||
in last mile of distributed computing to connect devices, mobile
|
||||
applications and browsers to backend services.
|
||||
</p>
|
||||
{{% /blocks/lead %}}
|
||||
</section>
|
||||
|
||||
{{< home/features >}}
|
||||
|
||||
{{< home/used-by >}}
|
||||
|
||||
{{< home/cncf >}}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{{ $quote := .quote | markdownify -}}
|
||||
<div class="col-12 col-sm-6 col-lg-4 c-testimonials__testimonial">
|
||||
<a href="{{ .link }}" target="_blank" rel="noopener">
|
||||
<img class="o-user-logo-sm" src="{{ $img }}" alt="{{ .name }} testimonial logo">
|
||||
<img class="used-by-logo" src="{{ $img }}" alt="{{ .name }} testimonial logo">
|
||||
</a>
|
||||
<p class="font-italic">
|
||||
{{- $quote -}}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<section class="c-cncf">
|
||||
<h1 class="o-heading">
|
||||
gRPC is a <a href="https://cncf.io">Cloud Native Computing Foundation</a> incubation project
|
||||
</h1>
|
||||
<figure class="o-logo mx-auto">
|
||||
<img class="w-100" src="/img/logos/cncf-horizontal-color.png" alt="Cloud Native Computing Foundation logo" />
|
||||
</figure>
|
||||
<section class="home--top-section">
|
||||
<h4>gRPC is a <a href="https://cncf.io">CNCF</a> incubation project</h4>
|
||||
|
||||
<img class="cncf-logo"
|
||||
src="/img/logos/cncf-horizontal-color.png" alt="Cloud Native Computing Foundation logo" />
|
||||
</section>
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
{{ $features := $.Page.Params.features }}
|
||||
{{ $features := $.Page.Params.features -}}
|
||||
<section class="bg-gray-100">
|
||||
<div class="c-features">
|
||||
{{ range $features }}
|
||||
{{ $icon := printf "img/icons/%s" .icon | relURL }}
|
||||
{{ $desc := .description | markdownify }}
|
||||
<div class="c-features">
|
||||
{{ range $features -}}
|
||||
{{ $icon := printf "img/icons/%s" .icon | relURL -}}
|
||||
{{ $desc := .description | markdownify -}}
|
||||
|
||||
<div class="col-md-6 o-features__feature">
|
||||
<img class="o-feature__icon" src="{{ $icon }}" alt="{{ .title }} feature icon">
|
||||
<div>
|
||||
<h3 class="display-3 font-weight-light">{{ .title }}</h3>
|
||||
<p class="lead">{{ $desc }}</p>
|
||||
</div>
|
||||
<div class="col-md-6 o-features__feature">
|
||||
<img class="o-feature__icon" src="{{ $icon }}" alt="{{ .title }} feature icon">
|
||||
<div>
|
||||
<h3>{{ .title }}</h3>
|
||||
<p class="lead">{{ $desc }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
{{ $usedBy := site.Data.testimonials -}}
|
||||
|
||||
<section class="c-used-by">
|
||||
<h1 class="o-heading">
|
||||
Used by
|
||||
</h1>
|
||||
<div class="c-used-by__users">
|
||||
{{ range $usedBy -}}
|
||||
{{ $img := printf "img/users/%s" .image | relURL -}}
|
||||
<div class="c-used-by__user">
|
||||
<a href="{{ .link }}" target="_blank" rel="noopener">
|
||||
<img class="o-user-logo" src="{{ $img }}" alt="{{ .name }} user logo">
|
||||
</a>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
<section class="home--top-section">
|
||||
<h2>Used by</h2>
|
||||
<div class="c-used-by__users">
|
||||
{{ range $usedBy -}}
|
||||
{{ $img := printf "img/users/%s" .image | relURL -}}
|
||||
<div class="c-used-by__user">
|
||||
<a href="{{ .link }}" target="_blank" rel="noopener">
|
||||
<img class="used-by-logo" src="{{ $img }}" alt="{{ .name }} logo">
|
||||
</a>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit 6e2acd2b4d0fa29b1ce3ef8b36b922fe25b08303
|
||||
Subproject commit c83d811eae575f94ee62b8546bc8c3c53cc89cff
|
||||
Loading…
Reference in New Issue