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

home page new design implementation (#6041) 

* home page new design implementation

* styling fixes
This commit is contained in:
SHRAVANI KAWARE 2024-07-09 18:02:37 +05:30 committed by GitHub
parent b1401e9189
commit e60ba5b0c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 104 additions and 45198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5017
docs/images/home-images/blue_autoscaling_icon.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 366 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

5097
docs/images/home-images/blue_event_intergrations_icon.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 374 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

5005
docs/images/home-images/blue_handle_events_icon.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 366 KiB

After

Width:  |  Height:  |  Size: 603 B

5006
docs/images/home-images/blue_plugable_icon.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 366 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

5035
docs/images/home-images/blue_progressive_rollouts_icon.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 368 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

5036
docs/images/home-images/blue_simple_abstractions_icon.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 368 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

5023
docs/images/home-images/cloud_agnostic_icon.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 368 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

4988
docs/images/home-images/dev_focus_code_icon.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 365 KiB

After

Width:  |  Height:  |  Size: 661 B

5002
docs/images/home-images/dkblue_scale_icon.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 366 KiB

After

Width:  |  Height:  |  Size: 778 B

41
overrides/assets/stylesheets/home.css
View File

@ -226,10 +226,17 @@ h2.secondary-headline, h3.trusted-by {
.trying-it-all-container .normal-text { .trying-it-all-container .normal-text {
font-weight: 600; font-weight: 600;
margin: 0 auto 2rem; margin: 0 auto 2rem;
max-width: 75%;
color:var(--nav-item-color); color:var(--nav-item-color);
} }
.why-serverless-container .normal-text-head{
color:var(--nav-item-color);
width:85%;
font-weight: 600;
text-align: center;
margin: auto;
}
.why-serverless-container .md-typeset h1, .why-serverless-container .md-typeset h1,
.trying-it-all-container .md-typeset h1 { .trying-it-all-container .md-typeset h1 {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -244,6 +251,7 @@ h2.secondary-headline, h3.trusted-by {
.why-serverless-container .normal-text { .why-serverless-container .normal-text {
font-size: .8rem; font-size: .8rem;
margin: 10px;
} }
.img-table { .img-table {
@ -260,18 +268,31 @@ h2.secondary-headline, h3.trusted-by {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
height: 200px;
max-width: 80%; max-width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
align-items: center;
margin-top: 1rem;
} }
.why-serverless-container .md-typeset img { .img-wrapper {
max-width: 120px; position: relative;
width: 120px;
height: 120px;
}
.reason-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1); transform: scale(1);
transition: transform 0.25s ease-in-out 0s; transition: transform 0.25s ease-in-out 0s;
} }
.why-serverless-container .md-typeset img:hover { .reason-img img:hover {
transform: scale(1.15); transform: scale(1.15);
} }
@ -286,6 +307,7 @@ h2.secondary-headline, h3.trusted-by {
margin-left: 1%; margin-left: 1%;
font-size: .8rem; font-size: .8rem;
margin-top: -1rem; margin-top: -1rem;
text-align: center;
} }
.knative-components-container .text-table .normal-text:last-child { .knative-components-container .text-table .normal-text:last-child {
@ -303,9 +325,15 @@ h2.secondary-headline, h3.trusted-by {
max-width: 80%; max-width: 80%;
margin: auto; margin: auto;
padding: 0 2.5em; padding: 0 2.5em;
align-items: center;
justify-content: center;
} }
/* trying it all container css */ /* trying it all container css */
.trying-it-all-container .reason-img img{
position: relative;
}
.trying-it-all-container .reason-img { .trying-it-all-container .reason-img {
margin: auto; margin: auto;
height: 130px; height: 130px;
@ -328,6 +356,7 @@ h2.secondary-headline, h3.trusted-by {
.trying-it-all-container .img-col img { .trying-it-all-container .img-col img {
height: 130px; height: 130px;
width: 100%;
} }
.trying-it-all-container .img-col:last-child img { .trying-it-all-container .img-col:last-child img {
@ -340,7 +369,7 @@ h2.secondary-headline, h3.trusted-by {
padding: 0.5rem 2em; padding: 0.5rem 2em;
background-color: var(--md-primary-fg-color--dark); background-color: var(--md-primary-fg-color--dark);
color: white; color: white;
margin-top: 1em; margin-top: 5rem;
border-radius: 0.7rem; border-radius: 0.7rem;
} }
@ -487,6 +516,8 @@ h2.secondary-headline, h3.trusted-by {
.knative-components-container .text-table .normal-text { .knative-components-container .text-table .normal-text {
width: 80%; width: 80%;
text-align: center;
} }
.knative-components-container .text-table .normal-text:first-child { .knative-components-container .text-table .normal-text:first-child {

52
overrides/home.html
View File

@ -48,7 +48,7 @@
<section class="why-serverless-container"> <section class="why-serverless-container">
<div class="md-grid md-typeset"> <div class="md-grid md-typeset">
<h1>Why serverless containers?</h1> <h1>Why serverless containers?</h1>
<p class="normal-text"> <p class="normal-text-head">
Serverless refers to running back-end programs and processes in the cloud. Serverless works on an as-used basis, Serverless refers to running back-end programs and processes in the cloud. Serverless works on an as-used basis,
meaning that companies only use what they pay for. Knative is a platform-agnostic meaning that companies only use what they pay for. Knative is a platform-agnostic
solution for running serverless deployments. solution for running serverless deployments.
@ -57,9 +57,11 @@
<div class="img-row"> <div class="img-row">
<div class="img-col"> <div class="img-col">
<div class="reason-img"> <div class="reason-img">
<img src="images/home-images/blue_simple_abstractions_icon.svg" <div class="img-wrapper">
onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.svg'" <img src="images/home-images/blue_simple_abstractions_icon.svg"
onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false"> onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.svg'"
onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false">
</div>
</div> </div>
<div class="reason-text"> <div class="reason-text">
<h2>Simpler Abstractions</h2> <h2>Simpler Abstractions</h2>
@ -70,9 +72,11 @@
</div> </div>
<div class="img-col"> <div class="img-col">
<div class="reason-img"> <div class="reason-img">
<img src="images/home-images/blue_autoscaling_icon.svg" <div class="img-wrapper">
onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.svg'" <img src="images/home-images/blue_autoscaling_icon.svg"
onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false"> onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.svg'"
onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false">
</div>
</div> </div>
<div class="reason-text"> <div class="reason-text">
<h2>Autoscaling</h2> <h2>Autoscaling</h2>
@ -83,9 +87,11 @@
</div> </div>
<div class="img-col"> <div class="img-col">
<div class="reason-img"> <div class="reason-img">
<img src="images/home-images/blue_progressive_rollouts_icon.svg" <div class="img-wrapper">
onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.svg'" <img src="images/home-images/blue_progressive_rollouts_icon.svg"
onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false"> onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.svg'"
onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false">
</div>
</div> </div>
<div class="reason-text"> <div class="reason-text">
<h2>Progressive Rollouts</h2> <h2>Progressive Rollouts</h2>
@ -98,9 +104,11 @@
<div class="img-row"> <div class="img-row">
<div class="img-col"> <div class="img-col">
<div class="reason-img"> <div class="reason-img">
<img src="images/home-images/blue_event_intergrations_icon.svg" <div class="img-wrapper">
onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.svg'" <img src="images/home-images/blue_event_intergrations_icon.svg"
onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false"> onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.svg'"
onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false">
</div>
</div> </div>
<div class="reason-text"> <div class="reason-text">
<h2>Event Integrations</h2> <h2>Event Integrations</h2>
@ -111,9 +119,11 @@
</div> </div>
<div class="img-col"> <div class="img-col">
<div class="reason-img"> <div class="reason-img">
<img src="images/home-images/blue_handle_events_icon.svg" <div class="img-wrapper">
onmouseover="this.src='images/home-images/dkblue_handle_events_icon.svg'" <img src="images/home-images/blue_handle_events_icon.svg"
onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false"> onmouseover="this.src='images/home-images/dkblue_handle_events_icon.svg'"
onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false">
</div>
</div> </div>
<div class="reason-text"> <div class="reason-text">
<h2>Handle Events</h2> <h2>Handle Events</h2>
@ -124,9 +134,11 @@
</div> </div>
<div class="img-col"> <div class="img-col">
<div class="reason-img"> <div class="reason-img">
<img src="images/home-images/blue_plugable_icon.svg" <div class="img-wrapper">
onmouseover="this.src='images/home-images/dkblue_plugable_icon.svg'" <img src="images/home-images/blue_plugable_icon.svg"
onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false"> onmouseover="this.src='images/home-images/dkblue_plugable_icon.svg'"
onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false">
</div>
</div> </div>
<div class="reason-text"> <div class="reason-text">
<h2>Plugable</h2> <h2>Plugable</h2>
@ -139,7 +151,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="knative-components-container"> <section class="knative-components-container">
<div class="md-grid md-typeset"> <div class="md-grid md-typeset">
<h1>Knative Components</h1> <h1>Knative Components</h1>