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

made mobile view of knative components container (#6101)

This commit is contained in:
SHRAVANI KAWARE 2024-09-17 23:21:39 +05:30 committed by GitHub
parent 2850710a24
commit a7f4bf5b8a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 164 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
docs/images/home-images/knative_flowchart_graphic_mobile.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

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

@ -329,6 +329,82 @@ h2.secondary-headline, h3.trusted-by {
justify-content: center; justify-content: center;
} }
.knative-components-container-mobile , .text-upper-right , .text-lower-left , .svg-diagram{
display: none;
}
@media only screen and (max-width: 425px){
.knative-components-container-mobile , .text-upper-right , .text-lower-left , .svg-diagram{
display: block;
}
.text-table {
display: none;
}
.components-img {
display: none;
}
.knative-components-container-mobile {
position: relative;
width: 80%;
max-width: 1200px;
padding: 20px;
}
.text-upper-right {
position: absolute;
top: 20px;
right: -75px;
width: 180px;
font-size: 12px;
}
.text-lower-left {
position: absolute;
bottom: 50px;
width: 165px;
left: -10px;
font-size: 12px;
}
.svg-diagram img {
width: 120%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
}
@media only screen and (max-width: 375px){
.text-upper-right {
position: absolute;
top: 20px;
right: -75px;
width: 165px;
font-size: 10px;
}
.text-lower-left {
position: absolute;
bottom: 50px;
width: 150px;
left: -10px;
font-size: 10px;
}
.svg-diagram img {
width: 120%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
}
/* trying it all container css */ /* trying it all container css */
.trying-it-all-container .reason-img img{ .trying-it-all-container .reason-img img{
position: relative; position: relative;

11
overrides/home.html
View File

@ -174,6 +174,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="knative-components-container-mobile">
<div class="text-upper-right">
<p>Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking, autoscaling (even to zero), and revision tracking.</p>
</div>
<div class="svg-diagram">
<img class="components-img" src="images/home-images/knative_flowchart_graphic_mobile.svg" alt="" draggable="false" />
</div>
<div class="text-lower-left">
<p>Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data stream with declarative event connectivity and developer-friendly object models.</p>
</div>
</div>
</section> </section>
<section class="trying-it-all-container"> <section class="trying-it-all-container">