improved blog and case study section (#5988)

* improved blog and case study section * changed the alignment of line for mobile view * text, color and font family changes
knative · Aug 7, 2024 · bf0e06d · bf0e06d
1 parent ea250d2
commit bf0e06d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 14 deletions.
diff --git a/docs/about/case-studies/README.md b/docs/about/case-studies/README.md
@@ -4,6 +4,29 @@ hide:
 ---
 
 # Knative Case Studies
+
+<style>
+
+  @media (max-width: 768px) {
+    table {
+
+    }
+
+    tr {
+     display: flex;
+      flex-direction:column;
+    }
+
+    td {
+      display: table-cell;
+      padding: 5px;
+    }
+
+    img {
+      max-width: 100px;
+    }
+  }
+</style>
 <table>
     <tr onclick="window.location='./deepc/';" style="cursor: pointer;">
         <td style="text-align: center; vertical-align: middle;"><img src="../../images/case-studies/deepc.png" alt="" draggable="false" style="max-width:300px;" /></td>

diff --git a/docs/about/testimonials.md b/docs/about/testimonials.md
@@ -1,6 +1,6 @@
 <div class="testimonials">
-  <h1 align="center">Enterprise-grade Serverless on your own terms.</h1>
-  <h3 align="center"><b>Understanding Knative</b></h3>
+  <h1>Testimonials</h1>
+  <h3><b>Enterprise-grade Serverless on your own terms</b></h3>
 
   <div class="testimonial">
     <div class="img">

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -417,7 +417,7 @@ border-radius: 0.7rem 0 0 0 ;
 }
 
 .testimonials h1 {
-  color: var(--md-primary-fg-color--dark);
+  color:black;
   margin-bottom: -26px;
 }
 
@@ -437,22 +437,19 @@ border-radius: 0.7rem 0 0 0 ;
 
 .testimonials .testimonial .img {
   margin: auto 30px auto 60px;
+  max-width: 130px;
 }
 
 .testimonials .quote {
   margin: auto 0;
   text-align: start;
   padding: 0 2em;
-  color: var(--md-primary-fg-color--light);
+  color: var(--md-primary-fg-color--dark);
   font-weight: 500;
   line-height: 1.1;
-  font-family: inherit;
+  font-family: serif;
   font-size: .85rem;
-  border-left: var(--md-default-fg-color--light) 4.5px solid;
-}
-
-.testimonials .testimonial img {
-  max-width: 130px;
+  border-left: var(--md-primary-fg-color--dark) 4.5px solid;
 }
 
 .testimonials .testimonial.blue img {
@@ -461,20 +458,21 @@ border-radius: 0.7rem 0 0 0 ;
 }
 
 .testimonials .testimonial.blue {
-  border-top: var(--md-primary-fg-color--light) 2.5px solid;
+  border-top: var(--md-primary-fg-color--dark) 2.5px solid;
   padding-top: 60px;
 }
 
 .testimonials .testimonial.blue .quote {
   font-size: 1.3rem;
   font-weight: 500;
-  color: var(--md-primary-fg-color--light);
+  font-family: serif;
+  color: var(--md-primary-fg-color--dark);
   border: none;
 }
 
 .testimonials .quote .phrase {
   font-size: 1.15rem;
-  font-style: italic;
+  font-style: serif;
   font-weight: bold;
   font-family: serif;
 }
@@ -492,7 +490,23 @@ border-radius: 0.7rem 0 0 0 ;
 .testimonials .find-links {
   padding-top: 16px;
 }
-
+@media screen and (max-width: 530px){
+.testimonial{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.testimonials .quote {
+  padding: 1rem;
+  margin-top: 1rem;
+  border-left: none;
+  border-top: var(--md-primary-fg-color--dark) 4.5px solid;
+}
+.testimonials .testimonial .img {
+  margin: auto 30px auto 30px;
+}
+}
 @media screen and (max-width: 76.1875em) {
   .md-nav--primary .md-nav__item--active>.md-nav__link {
     color: var(--nav-item-color);