style changes

awslabs · Aug 22, 2024 · 310a090 · 310a090
1 parent dd1630e
commit 310a090
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/website/src/components/HomepageFeatures.tsx b/website/src/components/HomepageFeatures.tsx
@@ -10,41 +10,41 @@ type FeatureGroup = {
 }
 
 const opaMainVideoContent = (
-  <div className=''>
+  <div className='opa-video-item'>
   <h4>The Platformers - OPA on AWS</h4>
   <iframe width="400" height="225" src="https://www.youtube.com/embed/h9HwnkkmQPA/1.jpg?" title="What is OPA on AWS + Demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div> 
 )
 
 const opaSecondVideoContent = (
-  <div className=''>
+  <div className='opa-video-item'>
   <h4>OPA on AWS at PlatformCon 2024</h4>
   <iframe width="400" height="225" src="https://www.youtube.com/embed/cjovvIWdgRU/1.jpg" title="Unlocking Platform Engineer Efficiency: Automation Strategies with Backstage" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
 )
 
 const opaThirdVideoContent = (
-  <div className=''>
+  <div className='opa-video-item'>
     <h4>Containers from the couch</h4>
     <iframe width="400" height="225" src="https://www.youtube.com/embed/EN6mlTX71Ts/1.jpg?" title="OPA on AWS" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
   </div>
 )
 const opaForthVideoContent = (
-  <div className=''>
+  <div className='opa-video-item'>
   <h4>OPA on AWS at BackstageCon 2024</h4>
   <iframe width="400" height="225" src="https://www.youtube.com/embed/40B6YmmhOvI/2.jpg?start=670" title="Let’s Go Backstage: End to End IDP Tips &amp; Tricks for Platform Engineers - Oshrat Nir &amp; Guy Menahem" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
 )
 
 const opaFifthVideoContent = (
-  <div className=''>
+  <div className='opa-video-item'>
   <h4>OPA on AWS Tech Playlist</h4>
   {/* <iframe width="400" height="250" src="https://www.youtube.com/embed/videoseries?si=1ajMAQG975guA5ha&amp;list=PLhr1KZpdzukcf5e7vYOVkpw4h-rzy7Pn3"  title="OPA on AWS Playlist" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> */}
   <iframe width="400" height="225" src="https://www.youtube.com/embed/videoseries?si=1ajMAQG975guA5ha&amp;list=PLhr1KZpdzukcf5e7vYOVkpw4h-rzy7Pn3"  title="OPA on AWS Playlist" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
 )
 const opaSixthVideoContent = (
-  <div className=''>
+  <div className='opa-video-item'>
   {/* <h4>Hamburg Containers days 2024</h4> */}
 
   <div  style={{ width: '400px', height:'225px', }}></div>
@@ -143,11 +143,11 @@ const opaDescription : FeatureItem[] = [
     Svg: require('@site/static/img/regulations.svg').default,
     noSVG:true,
     minHeight:'300px',
-    customTextStyle:{fontSize:'24px', textAlign:'left', maxWidth:'65%', margin:'auto', minHeight:'275px'},
+    customTextStyle:{fontSize:'24px', textAlign:'left', maxWidth:'100%', margin:'auto', minHeight:'275px'},
     description: (
-      <>
+      <div className="opaDescription">
        <b>Orchestrate Platforms and Applications (OPA) on AWS </b>is an open source reference implementation that ties together AWS services into an enterprise-ready offering. By abstracting AWS services, OPA on AWS allows application developers to focus on what they do best – write application logic! <br/> <br/> Platform engineering teams can promote best practices at-scale, while providing a productive and pleasurable experience for non-cloud developers
-      </>
+      </div>
     ),
   },
 ]
@@ -233,7 +233,7 @@ const opaCarousel : FeatureItem[] = [
     Svg: require('@site/static/img/regulations.svg').default,
     noSVG:true,
     minHeight:'300px',
-    customTextStyle:{fontSize:'24px', maxWidth:'70%', margin:'auto',minHeight:'170px'},
+    customTextStyle:{fontSize:'24px', maxWidth:'100%', margin:'auto',minHeight:'170px'},
     description: (
       <>
        {carouselContent}

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -108,6 +108,11 @@ font-size:12px;
   color: #0d317f;
   font-weight: bold;
 }
+.opaDescription
+{
+  max-width: 65%;
+  margin: auto;
+}
 
 @media screen and (max-width: 620px) {
   .logoText1 {
@@ -157,6 +162,15 @@ font-size:12px;
 
   }
 
+  .opa-video-item iframe{
+    width: 300px;
+  }
+
+.opaDescription
+  {
+    max-width: 100%;
+  }
+
 }
 
 .tagline {