chore: constrain site-section-header in non-mobile width (#3347)

* constrain site-section-header in non-mobile width * fix class designation on fast-frame header Co-authored-by: Michael Benson <[email protected]>
microsoft · Jun 22, 2020 · 7366eef · 7366eef
1 parent b921fde
commit 7366eef
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/sites/fast-website/src/app/css/style.css b/sites/fast-website/src/app/css/style.css
@@ -386,6 +386,10 @@ fast-badge::part(control) {
   }
 }
 
+.section-header {
+	max-width: 900px;
+}
+
 @media screen and (max-width: 750px) {
   .community-section {
     padding-bottom: var(--navbar-height);

diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
@@ -41,7 +41,7 @@
 
         <section class="section hero-section" id="hero">
           <div class="section-content">
-            <site-section-header>
+            <site-section-header class="section-header">
               <fast-badge fill="primary" color="primary" slot="badge" class="section-badge">ADAPTIVE UI SYSTEM, UTILITIES, & TOOLS</fast-badge>
               <h1 class="section-heading-hero">The adaptive interface system for modern web experiences</h1>
               <p slot="body" class="section-paragraph-hero">Interfaces bult with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard Web Components.</p>
@@ -52,7 +52,7 @@ <h1 class="section-heading-hero">The adaptive interface system for modern web ex
 
         <section class="fast-frame-section" id="adaptive-ui">
           <div class="section-content">
-            <site-section-header class="fast-frame-header">
+            <site-section-header class="section-header fast-frame-header">
               <fast-badge fill="primary" color="primary" slot="badge" class="section-badge">FLEXIBLE AND ADAPTABLE</fast-badge>
               <h2 class="section-heading">Dynamic themes with Adaptive UI</h2>
               <p slot="body" class="section-paragraph">FAST provides an innovative theming system called Adaptive UI, which builds design system properties that designers use every day directly into every component.</p>
@@ -65,7 +65,7 @@ <h2 class="section-heading">Dynamic themes with Adaptive UI</h2>
 
         <section class="section" id="integration">
           <div class="section-content">
-            <site-section-header>
+            <site-section-header class="section-header">
               <fast-badge fill="primary" color="primary" slot="badge" class="section-badge">FULLY INTEGRATED</fast-badge>
               <h2 class="section-heading">Works with existing frameworks</h2>
               <p slot="body" class="section-paragraph">Standards-based Web Components are the foundation of each FAST component, making them compatible with almost any modern web framework.</p>
@@ -78,7 +78,7 @@ <h2 class="section-heading">Works with existing frameworks</h2>
 
         <section class="section" id="features">
           <div class="section-content">
-            <site-section-header>
+            <site-section-header class="section-header">
               <fast-badge fill="primary" color="primary" slot="badge" class="section-badge">A COMPREHENSIVE TOOLKIT</fast-badge>
               <h2 class="section-heading">Features and utilities</h2>
               <p slot="body" class="section-paragraph">There are a million and one great ways to build your next website or application. To support the technologies you choose, creating unopinionated code is at the center of every decision we make in FAST.</p>
@@ -91,7 +91,7 @@ <h2 class="section-heading">Features and utilities</h2>
 
         <section class="section community-section" id="community">
           <div class="section-content">
-            <site-section-header>
+            <site-section-header class="section-header">
               <fast-badge fill="primary" color="primary" slot="badge" class="section-badge">LEARN, MODIFY AND FOLLOW</fast-badge>
               <h2 class="section-heading">Join the community</h2>
               <p slot="body" class="section-paragraph">Our community drives the rhythm and direction of FAST. By taking part, your voice will help shape our future.</p>