fix(docs): Homepage hero/principles styling (#64)

* fix(docs): updated homepage hero and principles * fix(docs): homepage hero styling
patternfly · Nov 1, 2019 · d1628e2 · d1628e2
1 parent 2789f83
commit d1628e2
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 6 deletions.
diff --git a/patternfly-org-demo/src/images/homeHeroLines.svg b/patternfly-org-demo/src/images/homeHeroLines.svg
diff --git a/patternfly-org-demo/src/pages/homepage.css b/patternfly-org-demo/src/pages/homepage.css
@@ -4,16 +4,31 @@
 
 .pf4-c-background-image {
   background-size: contain;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NzMuNCAxMTA1LjIiPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI4MTYuMDI4IiB5MT0iMTU5MC4xMTciIHgyPSI3NTQuODc3IiB5Mj0iMjA0NS4yNjQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMS4xMTM4IC45NDg4IC42OTI4IC0uODEzMiAtMTY1OS4zNzMgODk0LjQxMykiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzU0ZWVmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIuMTI2IiBzdG9wLWNvbG9yPSIjNDVjZmVlIiBzdG9wLW9wYWNpdHk9Ii4xMjYiLz48c3RvcCBvZmZzZXQ9Ii4yODMiIHN0b3AtY29sb3I9IiMzN2FlZGMiIHN0b3Atb3BhY2l0eT0iLjI4MyIvPjxzdG9wIG9mZnNldD0iLjQ0NyIgc3RvcC1jb2xvcj0iIzJiOTVjZSIgc3RvcC1vcGFjaXR5PSIuNDQ3Ii8+PHN0b3Agb2Zmc2V0PSIuNjE2IiBzdG9wLWNvbG9yPSIjMjM4M2M0IiBzdG9wLW9wYWNpdHk9Ii42MTYiLz48c3RvcCBvZmZzZXQ9Ii43OTUiIHN0b3AtY29sb3I9IiMxZTc4YmUiIHN0b3Atb3BhY2l0eT0iLjc5NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFjNzViYyIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggb3BhY2l0eT0iLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNhKSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik02NzMuNCAwTDI3Ni4xIDMyMyIvPjxsaW5lYXJHcmFkaWVudCBpZD0iYiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI4MjEuMTgzIiB5MT0iMTUzNy44MTYiIHgyPSI3NjEuMDUzIiB5Mj0iMTk4NS4zNjciIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMS4xMTM4IC45NDg4IC42OTI4IC0uODEzMiAtMTY1OS4zNzMgODk0LjQxMykiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzU0ZWVmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIuMTI2IiBzdG9wLWNvbG9yPSIjNDVjZmVlIiBzdG9wLW9wYWNpdHk9Ii4xMjYiLz48c3RvcCBvZmZzZXQ9Ii4yODMiIHN0b3AtY29sb3I9IiMzN2FlZGMiIHN0b3Atb3BhY2l0eT0iLjI4MyIvPjxzdG9wIG9mZnNldD0iLjQ0NyIgc3RvcC1jb2xvcj0iIzJiOTVjZSIgc3RvcC1vcGFjaXR5PSIuNDQ3Ii8+PHN0b3Agb2Zmc2V0PSIuNjE2IiBzdG9wLWNvbG9yPSIjMjM4M2M0IiBzdG9wLW9wYWNpdHk9Ii42MTYiLz48c3RvcCBvZmZzZXQ9Ii43OTUiIHN0b3AtY29sb3I9IiMxZTc4YmUiIHN0b3Atb3BhY2l0eT0iLjc5NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFjNzViYyIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggb3BhY2l0eT0iLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNiKSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNjczLjQgNzguNkwyMTEgMzQ2LjUiLz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iODk3LjA2NyIgeTE9IjEyOTEuNTQ2IiB4Mj0iODEwLjgxOCIgeTI9IjE5MzMuNDg4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEuMTEzOCAuOTQ4OCAuNjkyOCAtLjgxMzIgLTE2NTkuMzczIDg5NC40MTMpIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM1NGVlZmYiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iLjEyNiIgc3RvcC1jb2xvcj0iIzQ1Y2ZlZSIgc3RvcC1vcGFjaXR5PSIuMTI2Ii8+PHN0b3Agb2Zmc2V0PSIuMjgzIiBzdG9wLWNvbG9yPSIjMzdhZWRjIiBzdG9wLW9wYWNpdHk9Ii4yODMiLz48c3RvcCBvZmZzZXQ9Ii40NDciIHN0b3AtY29sb3I9IiMyYjk1Y2UiIHN0b3Atb3BhY2l0eT0iLjQ0NyIvPjxzdG9wIG9mZnNldD0iLjYxNiIgc3RvcC1jb2xvcj0iIzIzODNjNCIgc3RvcC1vcGFjaXR5PSIuNjE2Ii8+PHN0b3Agb2Zmc2V0PSIuNzk1IiBzdG9wLWNvbG9yPSIjMWU3OGJlIiBzdG9wLW9wYWNpdHk9Ii43OTUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYzc1YmMiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIG9wYWNpdHk9Ii41IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjYykiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNjczLjQgMTU0LjRsLTUyOSA0NzcuOCIvPjxsaW5lYXJHcmFkaWVudCBpZD0iZCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI4OTcuNDkzIiB5MT0iMTUyNy43NTQiIHgyPSI4OTYuMjM2IiB5Mj0iMTUzNy4xMDkiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMS4xMTM4IC45NDg4IC42OTI4IC0uODEzMiAtMTY1OS4zNzMgODk0LjQxMykiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzU0ZWVmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIuMTI2IiBzdG9wLWNvbG9yPSIjNDVjZmVlIiBzdG9wLW9wYWNpdHk9Ii4xMjYiLz48c3RvcCBvZmZzZXQ9Ii4yODMiIHN0b3AtY29sb3I9IiMzN2FlZGMiIHN0b3Atb3BhY2l0eT0iLjI4MyIvPjxzdG9wIG9mZnNldD0iLjQ0NyIgc3RvcC1jb2xvcj0iIzJiOTVjZSIgc3RvcC1vcGFjaXR5PSIuNDQ3Ii8+PHN0b3Agb2Zmc2V0PSIuNjE2IiBzdG9wLWNvbG9yPSIjMjM4M2M0IiBzdG9wLW9wYWNpdHk9Ii42MTYiLz48c3RvcCBvZmZzZXQ9Ii43OTUiIHN0b3AtY29sb3I9IiMxZTc4YmUiIHN0b3Atb3BhY2l0eT0iLjc5NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFjNzViYyIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggb3BhY2l0eT0iLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNkKSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNjczLjQgNjgzTDEyOSAzMTUuMyIvPjxsaW5lYXJHcmFkaWVudCBpZD0iZSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDc2LjExIiB5MT0iMTE2OC44NDYiIHgyPSIxMDUxLjQ3NyIgeTI9IjEzNTIuMTg1IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEuMTEzOCAuOTQ4OCAuNjkyOCAtLjgxMzIgLTE2NTkuMzczIDg5NC40MTMpIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM1NGVlZmYiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iLjEyNiIgc3RvcC1jb2xvcj0iIzQ1Y2ZlZSIgc3RvcC1vcGFjaXR5PSIuMTI2Ii8+PHN0b3Agb2Zmc2V0PSIuMjgzIiBzdG9wLWNvbG9yPSIjMzdhZWRjIiBzdG9wLW9wYWNpdHk9Ii4yODMiLz48c3RvcCBvZmZzZXQ9Ii40NDciIHN0b3AtY29sb3I9IiMyYjk1Y2UiIHN0b3Atb3BhY2l0eT0iLjQ0NyIvPjxzdG9wIG9mZnNldD0iLjYxNiIgc3RvcC1jb2xvcj0iIzIzODNjNCIgc3RvcC1vcGFjaXR5PSIuNjE2Ii8+PHN0b3Agb2Zmc2V0PSIuNzk1IiBzdG9wLWNvbG9yPSIjMWU3OGJlIiBzdG9wLW9wYWNpdHk9Ii43OTUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYzc1YmMiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIG9wYWNpdHk9Ii41IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZSkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNjczLjQgOTUwLjFMMTI0LjEgODA3LjMiLz48bGluZWFyR3JhZGllbnQgaWQ9ImYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTE0Ni4wNiIgeTE9IjkxOS4zOTYiIHgyPSIxMDkzLjY3IiB5Mj0iMTMwOS4zMzUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMS4xMTM4IC45NDg4IC42OTI4IC0uODEzMiAtMTY1OS4zNzMgODk0LjQxMykiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzU0ZWVmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIuMTI2IiBzdG9wLWNvbG9yPSIjNDVjZmVlIiBzdG9wLW9wYWNpdHk9Ii4xMjYiLz48c3RvcCBvZmZzZXQ9Ii4yODMiIHN0b3AtY29sb3I9IiMzN2FlZGMiIHN0b3Atb3BhY2l0eT0iLjI4MyIvPjxzdG9wIG9mZnNldD0iLjQ0NyIgc3RvcC1jb2xvcj0iIzJiOTVjZSIgc3RvcC1vcGFjaXR5PSIuNDQ3Ii8+PHN0b3Agb2Zmc2V0PSIuNjE2IiBzdG9wLWNvbG9yPSIjMjM4M2M0IiBzdG9wLW9wYWNpdHk9Ii42MTYiLz48c3RvcCBvZmZzZXQ9Ii43OTUiIHN0b3AtY29sb3I9IiMxZTc4YmUiIHN0b3Atb3BhY2l0eT0iLjc5NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFjNzViYyIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggb3BhY2l0eT0iLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNmKSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik02NzMuNCAxMDEyLjZsLTYyNi45IDc2LjMiLz48L3N2Zz4=),linear-gradient(180deg,#004080,#06c);
   width: 100%;
   max-width: 100%;
   height: 100%;
   background-repeat: no-repeat;
-  background-position: top, 100%;
-  /* background-position: 100% 0,100%; */
+  /* background-image: url("../images/homeHeroLines.svg"), linear-gradient(to bottom, #004080, #0066cc); */
+  background-image: none,linear-gradient(180deg,#004080,#06c);
   background-size: cover;
 }
 
+@media (min-width: 576px) {
+  .pf4-c-background-image {
+    background-position: 50%, 100%;
+    background-image: url("../images/aboutPF4Lines.svg"), linear-gradient(to bottom, #004080, #0066cc);
+    background-size: contain;
+  }
+}
+
+@media (min-width: 992px) {
+  .pf4-c-background-image {
+    background-image: url("../images/homeHeroLines.svg"), linear-gradient(to bottom, #004080, #0066cc);
+    background-position: top, right;
+    background-size: cover;
+  }
+}
+
 .pf-m-white,
 .pf-m-white.ws-mdx-a {
   color: white;
@@ -104,6 +119,12 @@
   padding: var(--pf-global--spacer--xl) var(--pf-global--spacer--2xl) var(--pf-global--spacer--2xl);
 }
 
+.ws-homepage-main-section.pf4-c-background-image .pf4-site-c-hero {
+  margin-bottom: 0;
+  max-width: 600px;
+  margin: 24px auto 0;
+}
+
 .ws-mdx-a {
   font-size: 18px;
 }
diff --git a/patternfly-org-demo/src/pages/index.js b/patternfly-org-demo/src/pages/index.js
@@ -24,7 +24,7 @@ const IndexPage = ({ location }) => (
   <SideNavLayout location={location} hideSideNav>
     <PageSection
       variant={PageSectionVariants.light}
-      className="pf4-c-background-image pf-u-display-flex pf-u-justify-content-center pf-u-align-items-center"
+      className="pf4-c-background-image pf-u-display-flex pf-u-justify-content-center pf-u-align-items-center ws-homepage-main-section"
     >
       <Grid>
         <GridItem sm={12} md={8} mdOffset={2} lg={6} lgOffset={3} className="pf-u-py-2xl pf-u-text-align-center">
@@ -161,9 +161,9 @@ const IndexPage = ({ location }) => (
           <Grid className="pf-m-white">
             <GridItem sm={12} md={5} mdOffset={1}>
               <TextContent>
-                <AutoLinkHeader size="h1" className="pf-u-mb-md pf-m-white">
+                <Text component={TextVariants.h1} className="pf-u-mb-4xl pf-m-white" id="patternfly-principles">
                   {patternFlyPrinciples}
-                </AutoLinkHeader>
+                </Text>
                 <Text component={TextVariants.h2}>Modular &amp; flexible</Text>
                 <Text component={TextVariants.p} className="pf-u-mb-3xl ws-mdx-p">
                   Arrange self-contained components in any number of ways to build a variety of applications and